/* Copy Animation */

  .copyInput {
	display: inline-block;
	line-height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
  }
  
  .copied::after {
	position: absolute;
	top: 8px;
	right: 12%;
	width: 100px;
	display: block;
	content: "COPIED";
	font-size: 1em;
	padding: 5px 5px;
	color: #fff;
	background-color: #FF7000;
	border-radius: 3px;
	opacity: 0;
	will-change: opacity, transform;
	animation: showcopied 1.5s ease;
  }
  
  @keyframes showcopied {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	50% {
		opacity: 0.7;
		transform: translateX(40%);
	}
	70% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
	}
  }




  .cookies-card {
	width: 520px;
	padding: 30px;
	color: #1E2337;
	position:  fixed;
	bottom: 15px;  
	left: 15px;
	z-index: 999999;
	transition: all .5s;
	background: #d1d1d1;
    border-radius: 5px;
  }
  
  .cookies-card.hide{
	bottom: -500px !important;
  }
  .radius--10px {
	border-radius: 10px;
  }
  
  .cookies-card__icon {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background-color: #6e6f70;
    color: #fff;
	font-size: 32px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
  }
  
  .cookies-card__content {
	margin-bottom: 0;
  }
  
  .cookies-btn {
	color: #363636;
	text-decoration: none;
	padding: 10px 35px;
	margin: 3px 5px;
	display: inline-block;
	border-radius:  999px;
  }
  
  .cookies-btn:hover {
	color: #363636;
  }

  
  @media (max-width: 767px) {
	  .cookies-card {
		  width:  100%;
		  left: 0;
		  bottom:  0;
		  font-size:  14px;
		  padding:  15px;
	  }
  }




.hover-input-popup {
        position: relative;
    }
    .input-popup {
        display: none;
    }
    .hover-input-popup .input-popup {
        display: block;
        position: absolute;
        bottom: 130%;
        left: 50%;
        width: 280px;
        background-color: #1a1a1a;
        color: #fff;
        padding: 20px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    .input-popup::after {
        position: absolute;
        content: '';
        bottom: -19px;
        left: 50%;
        margin-left: -5px;
        border-width: 10px 10px 10px 10px;
        border-style: solid;
        border-color: transparent transparent #1a1a1a transparent;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .input-popup p {
        padding-left: 20px;
        position: relative;
    }
    .input-popup p::before {
        position: absolute;
        content: '';
        font-family: 'Line Awesome Free';
        font-weight: 900;
        left: 0;
        top: 4px;
        line-height: 1;
        font-size: 18px;
    }
    .input-popup p.error {
        text-decoration: line-through;
    }
    .input-popup p.error::before {
        content: "\f057";
        color: #ea5455;
    }
    .input-popup p.success::before {
        content: "\f058";
        color: #28c76f;
    }



 .show-filter{
  display: none;
}
@media(max-width:767px){
  .responsive-filter-card{
      display: none;
      transition: none;
  }
  .show-filter{
      display: block;
  }
}




/* 
Global Mobile Fix: Prevent horizontal overflow 
*/
html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    touch-action: manipulation; /* Improves touch responsiveness on iOS */
}

/* Force container constraints - REVERTED: causing desktop zoom/clipping issues */
/*.container, .container-fluid {
    max-width: 100% !important;
    overflow: hidden;
}*/

/* Clip rogue animations */
.af-slide-in-left, .af-slide-in-right, .af-slide-in-bottom {
    will-change: transform, opacity;
}

/* 
========================================================================
ALFARES CINEMATIC DESIGN SYSTEM - V2 (GLOBAL PROFESSIONAL)
========================================================================
*/

:root {
    --af-gold: #c5a059;
    --af-gold-light: #e5c185;
    --af-gold-dark: #8e6d31;
    --af-black: #050505;
    --af-dark: #0f0f0f;
    --af-glass: rgba(15, 15, 15, 0.7);
    --af-border: rgba(197, 160, 89, 0.3);
    --af-shadow-gold: 0 10px 30px rgba(197, 160, 89, 0.2);
}

.service-section-premium {
    background: var(--af-black);
    padding: 140px 0;
    position: relative;
    overflow: hidden; /* Fix: Prevent floating lights from causing overflow */
}

/* Floating Light Effect */
.af-floating-light {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.af-light-1 { top: -200px; left: -200px; animation: float-light 20s infinite alternate; }
.af-light-2 { bottom: -200px; right: -200px; animation: float-light 25s infinite alternate-reverse; }

@keyframes float-light {
    from { transform: translate(0, 0); }
    to { transform: translate(100px, 100px); }
}

/* Header */
.premium-header {
    text-align: center;
    margin-bottom: 80px;
}

.premium-header .sub-title {
    color: var(--af-gold);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 15px;
    display: inline-block;
}

.premium-header .main-title {
    color: white;
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(to bottom, #fff 40%, var(--af-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 25px;
}

/* Global Professional Service Cards */
.af-card-wrapper {
    perspective: 1000px;
}

.af-service-card-v2 {
    height: 500px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid var(--af-border);
}

.af-service-card-v2:hover {
    transform: translateY(-20px) scale(1.02);
    border-color: var(--af-gold);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), var(--af-shadow-gold);
}

.af-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 1s ease;
    z-index: 1;
}

.af-service-card-v2:hover .af-card-bg {
    transform: scale(1.1);
}

.af-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    z-index: 2;
}

.af-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    z-index: 3;
    transition: all 0.5s ease;
}

.af-card-icon-v2 {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    background: var(--af-gold);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 24px;
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.5);
    transition: all 0.5s ease;
}

.af-service-card-v2:hover .af-card-icon-v2 {
    transform: rotateY(180deg) scale(1.1);
    background: white;
    color: var(--af-gold);
}

.af-card-title-v2 {
    color: white;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.af-card-desc-v2 {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.af-service-card-v2:hover .af-card-desc-v2 {
    height: 80px;
    opacity: 1;
    margin-bottom: 20px;
}

.af-card-btn-v2 {
    background: transparent;
    border: 1px solid var(--af-gold);
    color: var(--af-gold);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    display: inline-block;
    transition: all 0.3s ease;
}

.af-card-btn-v2:hover {
    background: var(--af-gold);
    color: black;
    box-shadow: 0 0 20px var(--af-gold);
}

/* Steps Section - Timeline Flow */
.steps-section-v2 {
    background: var(--af-black);
    padding: 120px 0;
    position: relative;
}

.af-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden; /* Fix: Prevent timeline line from causing overflow */
}

.af-timeline-line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--af-gold), transparent);
    z-index: 0;
}

.af-step-v2 {
    position: relative;
    z-index: 1;
    text-align: center;
}

.af-step-circle {
    width: 100px;
    height: 100px;
    background: var(--af-dark);
    border: 2px solid var(--af-gold);
    border-radius: 50%;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--af-gold);
    font-size: 2rem;
    font-weight: 900;
    box-shadow: 0 0 30px rgba(197, 160, 89, 0.2);
    transition: all 0.5s ease;
    cursor: default;
}

.af-step-v2:hover .af-step-circle {
    background: var(--af-gold);
    color: black;
    box-shadow: 0 0 50px var(--af-gold);
    transform: scale(1.1);
}

.af-step-title-v2 {
    color: white;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.af-step-desc-v2 {
    color: #888;
    font-size: 1rem;
    max-width: 250px;
    margin: 0 auto;
}

/* Animations */
.wow-reveal {
    animation: reveal-up 1s ease forwards;
}

@keyframes reveal-up {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 
========================================================================
PREMIUM MOBILE APP NAVIGATION BAR
========================================================================
*/

.af-mobile-nav {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    width: 92%;
    max-width: 480px;
    background: rgba(10, 10, 10, 0.6) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 10000;
    padding: 12px 10px;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 15px 45px rgba(0,0,0,0.8), 0 0 20px rgba(197, 160, 89, 0.1);
    display: none; /* Hidden on Desktop */
}

.af-mobile-nav.active {
    transform: translateX(-50%) translateY(0);
}

.af-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}

.af-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 20%;
}

.af-nav-item i {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.af-nav-item span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.af-nav-item.active {
    color: #c5a059;
}

.af-nav-item:hover {
    color: #fff;
}

/* Central Button */
.af-nav-item-center-wrap {
    position: relative;
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.af-nav-item-center {
    position: absolute;
    top: -45px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #c5a059 0%, #8e6d31 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.8rem;
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.4);
    border: 4px solid #0f0f0f;
    transition: all 0.3s ease;
}

.af-nav-item-center:hover {
    transform: scale(1.1) rotate(10deg);
    color: #fff;
}

@media (max-width: 991px) {
    .af-mobile-nav {
        display: block;
    }
}

/* 
========================================================================
BANNER ROUTE ANIMATION
========================================================================
*/

.banner-section {
    position: relative;
    overflow: hidden;
}

.banner-route-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.3;
    pointer-events: none;
}

.route-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-path 8s linear infinite;
}

.path-2 {
    animation-delay: 2s;
    animation-duration: 12s;
}

@keyframes draw-path {
    0% { stroke-dashoffset: 1000; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1000; }
}

.moving-dot {
    filter: drop-shadow(0 0 5px #c5a059);
}

/* 
========================================================================
WALKING PAW PRINTS ANIMATION
========================================================================
*/

.banner-paws-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.paw-print {
    position: absolute;
    opacity: 0;
    font-size: 80px; /* Extra large on PC */
    transform: scale(0.5);
    animation: quick-flash 1.5s forwards;
    z-index: 1;
}

.paw-w { color: rgba(255,255,255,0.4); }
.paw-b { color: rgba(0,0,0,0.4); }

@keyframes quick-flash {
    0% { opacity: 0; transform: scale(0.5) rotate(15deg); }
    30% { opacity: 1; transform: scale(1.2) rotate(15deg); }
    70% { opacity: 1; transform: scale(1.2) rotate(15deg); }
    100% { opacity: 0; transform: scale(1.5) rotate(15deg); }
}

/* Distributed over 15 seconds */
.paw-1 { top: 10%; left: 5%; animation-delay: 0.2s; }
.paw-2 { top: 20%; left: 10%; animation-delay: 0.8s; transform: rotate(-15deg); }
.paw-3 { top: 30%; left: 15%; animation-delay: 1.4s; }
.paw-4 { top: 40%; left: 20%; animation-delay: 2.0s; transform: rotate(-15deg); }
.paw-5 { top: 15%; left: 30%; animation-delay: 2.6s; }
.paw-6 { top: 25%; left: 35%; animation-delay: 3.2s; transform: rotate(-15deg); }
.paw-7 { top: 35%; left: 40%; animation-delay: 3.8s; }
.paw-8 { top: 45%; left: 45%; animation-delay: 4.4s; transform: rotate(-15deg); }
.paw-9 { top: 10%; left: 60%; animation-delay: 5.0s; }
.paw-10 { top: 20%; left: 65%; animation-delay: 5.6s; transform: rotate(-15deg); }
.paw-11 { top: 30%; left: 70%; animation-delay: 6.2s; }
.paw-12 { top: 40%; left: 75%; animation-delay: 6.8s; transform: rotate(-15deg); }
.paw-13 { top: 15%; left: 85%; animation-delay: 7.4s; }
.paw-14 { top: 25%; left: 90%; animation-delay: 8.0s; transform: rotate(-15deg); }
.paw-15 { top: 35%; left: 95%; animation-delay: 8.6s; }
.paw-16 { top: 50%; left: 10%; animation-delay: 9.2s; transform: rotate(-15deg); }
.paw-17 { top: 60%; left: 20%; animation-delay: 9.8s; }
.paw-18 { top: 55%; left: 40%; animation-delay: 10.4s; transform: rotate(-15deg); }
.paw-19 { top: 65%; left: 55%; animation-delay: 11.0s; }
.paw-20 { top: 50%; left: 70%; animation-delay: 11.6s; transform: rotate(-15deg); }
.paw-21 { top: 60%; left: 85%; animation-delay: 12.2s; }
.paw-22 { top: 10%; left: 20%; animation-delay: 13.0s; transform: rotate(-15deg); }
.paw-23 { top: 45%; left: 80%; animation-delay: 14.0s; }
.paw-24 { top: 5%; left: 50%; animation-delay: 15.0s; transform: rotate(-15deg); }

@media (max-width: 991px) {
    .paw-print { font-size: 60px; } /* Big on tablets */
    .paw-13, .paw-14, .paw-15, .paw-16, .paw-17, .paw-18, .paw-19, .paw-20, .paw-21, .paw-22, .paw-23, .paw-24 { display: none; }
}

.banner-content .title {
    font-weight: 900 !important;
    color: #f2f2f2 !important;
    text-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 20px rgba(197, 160, 89, 0.1);
    font-size: 4.2rem;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.banner-content p {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.1rem;
    max-width: 600px;
    line-height: 1.8;
    margin-bottom: 45px;
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    padding: 20px 25px;
    border-radius: 15px;
    border-right: none;
}

/* Artistic Horizontal Path Below */
.banner-content p::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 10%;
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
    background-size: 200% 100%;
    animation: cargo-path-flow 4s infinite linear;
}

@keyframes cargo-path-flow {
    0% { background-position: 200% 0%; }
    100% { background-position: 0% 0%; }
}

.banner-content p::before {
    content: '\f110'; /* Default: Loading/Dots */
    font-family: 'Line Awesome Free';
    font-weight: 900;
    position: absolute;
    bottom: -18px;
    right: 5%;
    background: #c5a059;
    color: #000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    z-index: 2;
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.6);
    animation: cargo-full-cycle 14s infinite ease-in-out;
}

@keyframes cargo-full-cycle {
    0% { content: '\f1b0'; right: 5%; transform: scale(1); color: #000; } /* Pet Paw Start */
    8% { content: '\f1b0'; right: 5%; transform: scale(1.2); color: #000; }
    10% { content: '\f110'; right: 5%; transform: rotate(0deg); color: #000; } /* Switch to Loading */
    15% { content: '\f110'; right: 5%; transform: rotate(360deg); color: #000; }
    20% { content: '\f5af'; right: 5%; color: #000; transform: scaleX(1); } /* Start Go */
    45% { content: '\f5af'; right: 85%; color: #000; transform: scaleX(1); } /* Reach Left */
    50% { content: '\f00c'; right: 85%; transform: scale(1.3); color: #fff; } /* Checkmark at Left */
    70% { content: '\f00c'; right: 85%; transform: scale(1.3); color: #fff; }
    75% { content: '\f5af'; right: 85%; color: #000; transform: scaleX(-1); } /* Start Return */
    95% { content: '\f5af'; right: 5%; color: #000; transform: scaleX(-1); } /* Back at Right */
    100% { content: '\f1b0'; right: 5%; color: #000; }
}

@media (max-width: 767px) {
    .banner-content .title {
        font-size: 2.5rem;
    }
}

/* 
========================================================================
NEW LOGO & HEADER ADJUSTMENTS
========================================================================
*/

.site-logo img {
    max-height: 90px !important;
    width: auto !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
    display: block;
}

.site-logo:hover img {
    transform: scale(1.08) rotate(-2deg);
}

.header-bottom-area .header-menu-content {
    padding: 12px 30px !important;
}

.header-menu-content .navbar {
    align-items: center;
}

.main-menu li a {
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

@media (max-width: 991px) {
    .site-logo img {
        max-height: 65px !important;
    }
    .header-bottom-area .header-menu-content {
        padding: 10px 15px !important;
    }
}

/* Footer & Section Clips */
.footer-section, 
.header-section, 
.banner-section, 
.service-section, 
.faq-section, 
.counter-section, 
.testimonial-section,
.blog-section,
.shop-section {
    overflow: hidden !important;
}

/* Fix for background shapes and SVGs causing overflow */
.service-shape-bg, 
.banner-route-animation svg,
.af-counter-bg-shape {
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* Fix for footer logo if exists */
.footer-logo img {
    max-height: 120px !important;
    width: auto !important;
    margin-bottom: 20px;
}

/* 
========================================================================
CONTINUOUS FEATURE ICON ANIMATIONS
========================================================================
*/

/* 1. Plane - Flying/Hovering effect */
.feature-icon .fa-plane {
    animation: af-fly 2s linear infinite;
    display: inline-block;
}
@keyframes af-fly {
    0% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-15px) rotate(-15deg); }
    50% { transform: translateY(0) rotate(0); }
    75% { transform: translateY(15px) rotate(15deg); }
    100% { transform: translateY(0) rotate(0); }
}

/* 2. Map/Documents - Continuous Flipping */
.feature-icon .fa-map {
    animation: af-flip 4s linear infinite;
    display: inline-block;
}
@keyframes af-flip {
    0% { transform: rotateY(0); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

/* 3. Syringe - Pumping effect */
.feature-icon .fa-syringe {
    animation: af-pump 1.5s ease-in-out infinite;
    display: inline-block;
}
@keyframes af-pump {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(20px) scale(0.9); }
}

/* 4. Doctors - Continuous Pulse/Beat */
.feature-icon .fa-user-md {
    animation: af-pulse-fast 1s ease-in-out infinite;
    display: inline-block;
}
@keyframes af-pulse-fast {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Enhancing the icon container */
.feature-icon {
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
    filter: drop-shadow(0 0 10px rgba(197, 160, 89, 0.5));
}

/* 
========================================================================
INTERACTIVE BENEFITS ANIMATIONS (TYPING & CHECK)
========================================================================
*/

.af-check-icon {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.af-check-icon.active {
    opacity: 1 !important;
    transform: scale(1.2) !important;
    animation: af-check-pop 0.5s forwards, af-shine 1s ease-in-out 0.5s 1;
}

@keyframes af-check-pop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(1.2); opacity: 1; }
}

@keyframes af-shine {
    0% { filter: brightness(1) drop-shadow(0 0 0 rgba(197, 160, 89, 0)); }
    50% { filter: brightness(1.6) drop-shadow(0 0 12px rgba(197, 160, 89, 0.9)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 rgba(197, 160, 89, 0)); }
}

.typing-text {
    display: inline-block;
    vertical-align: middle;
}

.typing-cursor::after {
    content: "|";
    color: #c5a059;
    animation: af-blink 0.8s infinite;
    margin-left: 2px;
}

@keyframes af-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 
========================================================================
PREMIUM COUNTERS SECTION STYLING
========================================================================
*/

.af-counter-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(197, 160, 89, 0.1);
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    position: relative;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 15px rgba(197, 160, 89, 0.03);
    opacity: 0; /* Hidden by default for animation */
}

/* Entry Animations Classes */
.af-counter-card.active {
    opacity: 1;
    transform: translate(0) !important;
}

.af-slide-in-left { transform: translateX(-100px); }
.af-slide-in-right { transform: translateX(100px); }
.af-slide-in-bottom { transform: translateY(100px); }

.af-counter-card:hover {
    transform: translateY(-15px) scale(1.02) !important;
    border-color: rgba(197, 160, 89, 0.6);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 30px rgba(197, 160, 89, 0.2);
    z-index: 10;
}

.af-counter-card.featured {
    background: linear-gradient(145deg, rgba(197, 160, 89, 0.08) 0%, rgba(10, 10, 10, 0.95) 100%);
    border-color: rgba(197, 160, 89, 0.4);
    box-shadow: 0 15px 45px rgba(0,0,0,0.7), 0 0 20px rgba(197, 160, 89, 0.1);
}

/* Sweeping Shine Effect - Continuous */
.af-card-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
    animation: af-shine-sweep 3s ease-in-out infinite;
}

/* Staggered shine for more elegance */
.col-xl-4:nth-child(2) .af-card-shine { animation-delay: 1s; }
.col-xl-4:nth-child(3) .af-card-shine { animation-delay: 2s; }

@keyframes af-shine-sweep {
    0% { left: -150%; }
    100% { left: 250%; }
}



.af-icon-box {
    font-size: 50px;
    color: #c5a059;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.af-icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    animation: af-icon-pulse 3s infinite;
}

@keyframes af-icon-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.2; }
}

.af-number {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    font-family: 'Fredoka One', cursive;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.af-suffix {
    color: #c5a059;
    font-size: 32px;
}

.af-label {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.af-counter-bg-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 20% 30%, rgba(197, 160, 89, 0.05) 0%, transparent 40%),
                      radial-gradient(circle at 80% 70%, rgba(197, 160, 89, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

/* 
========================================================================
SPHERICAL LANGUAGE FLAGS
========================================================================
*/

.language-switcher {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-right: 15px;
    margin-left: 15px;
}

.lang-flag {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 0 10px rgba(0,0,0,0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    display: block;
    cursor: pointer;
}

.lang-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1); /* Slight zoom for better fill */
}

/* 3D Sphere Glass Effect */
.lang-flag::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}

.lang-flag:hover {
    transform: scale(1.3) rotate(5deg);
    border-color: #c5a059;
    box-shadow: 0 8px 15px rgba(0,0,0,0.5), 0 0 10px rgba(197, 160, 89, 0.3);
    z-index: 10;
}

.lang-flag.active {
    border-color: #c5a059;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.5);
    transform: scale(1.15);
}

/* 
========================================================================
PREMIUM FOOTER MAP FRAME
========================================================================
*/

.af-map-frame {
    position: relative;
    padding: 10px;
    background: rgba(10, 10, 10, 0.5);
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 15px rgba(197, 160, 89, 0.05);
    overflow: hidden;
    margin-top: 20px;
}

.af-map-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    cursor: pointer;
}

.af-footer-map {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    pointer-events: none; /* DISABLE INTERNAL MAP INTERACTION */
}

.af-map-frame:hover {
    border-color: #c5a059;
    box-shadow: 0 25px 50px rgba(0,0,0,0.8), 0 0 30px rgba(197, 160, 89, 0.2);
}

/* Decorative Corners */
.af-map-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #c5a059;
    z-index: 15;
    pointer-events: none;
    opacity: 0.6;
}

.af-map-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.af-map-corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.af-map-corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.af-map-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* 
========================================================================
PREMIUM CONTACT PAGE STYLING (CINEMATIC)
========================================================================
*/

.contact-section-premium {
    background: var(--af-black);
    position: relative;
    padding-bottom: 100px;
    overflow: hidden;
}

.af-contact-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--af-border);
    border-radius: 25px;
    padding: 30px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.af-contact-card:hover {
    transform: translateY(-10px);
    border-color: var(--af-gold);
    box-shadow: 0 25px 50px rgba(0,0,0,0.7), var(--af-shadow-gold);
}

.af-contact-icon {
    width: 60px;
    height: 60px;
    background: var(--af-gold);
    color: #000;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4);
    animation: af-icon-pulse 3s infinite;
}

.af-contact-info .title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.af-contact-info .sub-title {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Premium Form Styling */
.af-form-wrapper {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--af-border);
    border-radius: 30px;
    padding: 50px;
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}

.af-form-wrapper .form--control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 15px 20px !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}

.af-form-wrapper .form--control:focus {
    border-color: var(--af-gold) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.2) !important;
}

.af-form-wrapper label {
    color: var(--af-gold);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.af-btn-premium {
    width: 100%;
    padding: 15px 30px;
    background: var(--af-gold);
    color: #000;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.3);
}

.af-btn-premium:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2);
}

@media (max-width: 767px) {
    .af-form-wrapper {
        padding: 30px 20px;
    }
    .af-contact-card {
        padding: 20px;
    }
    .premium-header .main-title {
        font-size: 2.2rem !important;
    }
}

/* Light Theme Hero for Contact */
.contact-hero-white {
    background: #ffffff !important;
    border-bottom: 1px solid #eee;
}

.contact-hero-white .main-title {
    background: linear-gradient(to bottom, #000 40%, var(--af-gold-dark) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.contact-hero-white .sub-title {
    color: var(--af-gold-dark) !important;
}

.contact-hero-white p {
    color: #444 !important;
}

.contact-hero-white .af-floating-light {
    display: none;
}

/* Premium Social Follow */
.af-social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.af-social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 25px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--af-border);
    border-radius: 50px;
    color: #fff !important;
    font-weight: 700;
    transition: all 0.4s ease;
    text-decoration: none !important;
}

.af-social-link i {
    font-size: 1.5rem;
}

.af-social-link span {
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.af-social-link.fb:hover {
    background: #1877F2;
    border-color: #1877F2;
    box-shadow: 0 10px 20px rgba(24, 119, 242, 0.3);
    transform: translateY(-5px);
}

.af-social-link.ig:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(220, 39, 67, 0.3);
    transform: translateY(-5px);
}

/* 
========================================================================
MOBILE HEADER SOCIAL ICONS FIX - CENTERED ONLY
========================================================================
*/

@media (max-width: 991px) {
    .header-top-area {
        display: block !important;
        /* Revert to default background/style */
    }
    .header-social {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 5px 0 !important;
    }
    .header-top-menu .right {
        justify-content: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px;
    }
    /* Hide specific elements if they overlap but keep general style */
    .header-top-area .left {
        display: none !important;
    }
    .header-action {
        display: none !important;
    }
    .language-switcher {
        margin: 5px 0 !important;
    }
}

/* Hide Scroll to Top on mobile phones only */
@media (max-width: 767px) {
    .scrollToTop {
        display: none !important;
    }
}

/* 
========================================================================
INTERACTIVE MOBILE CONTACT OPTIONS
========================================================================
*/

.af-contact-options {
    position: absolute;
    bottom: 90px; /* Above the nav bar */
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(30px) scale(0.5);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 9999;
}

.af-contact-options.active {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.af-contact-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 26px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255,255,255,0.3);
    position: relative;
    overflow: hidden;
}

.af-contact-btn.whatsapp { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); }
.af-contact-btn.call { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); }
.af-contact-btn.email { background: linear-gradient(135deg, #ff7000 0%, #cc5a00 100%); }

.af-contact-btn:hover {
    transform: scale(1.15) rotate(5deg);
}

/* Water Droplet / Bubbling Animation */
@keyframes af-bubble {
    0% { transform: scale(1); box-shadow: 0 8px 25px rgba(0,0,0,0.4); }
    50% { transform: scale(1.08); box-shadow: 0 12px 35px rgba(197, 160, 89, 0.3); }
    100% { transform: scale(1); box-shadow: 0 8px 25px rgba(0,0,0,0.4); }
}

.af-contact-options.active .af-contact-btn {
    animation: af-bubble 2.5s infinite ease-in-out;
}

.af-contact-options.active .af-contact-btn:nth-child(2) { animation-delay: 0.4s; }
.af-contact-options.active .af-contact-btn:nth-child(3) { animation-delay: 0.8s; }

/* Continuous Pulse Effect for the Contact Nav Item */
.af-nav-item#contactNavBtn i {
    animation: af-pulse 2s infinite ease-in-out;
}

.af-nav-item#contactNavBtn.active i {
    /* Keep the white pulse even when active */
}

@keyframes af-pulse {
    0% { color: rgba(255,255,255,0.4); text-shadow: 0 0 0px rgba(255,255,255,0); }
    50% { color: #fff; text-shadow: 0 0 15px rgba(255,255,255,0.8); }
    100% { color: rgba(255,255,255,0.4); text-shadow: 0 0 0px rgba(255,255,255,0); }
}