* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}


body {
    background: #fff;
    color: #1a1d2b;
    line-height: 1.6;
}

:root {
    --clr-primary: #1b63ff;
    --clr-primary-dark: #0046d7;
    --clr-accent: #dd4632;
    --clr-muted: #667085;
    --clr-light: #f5f7fb;
    --clr-border: #e4e8f3;
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-soft: 0 25px 60px rgba(15, 26, 67, 0.08);
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

a {
    color: inherit;
}

a:focus,
a:hover {
    color: var(--clr-primary-dark);
}

/* ------------------------------------------
   HEADER BASE
------------------------------------------ */
/* ====================================================
   HEADER WRAPPER (New Dark + Glass Feel)
==================================================== */
#masthead {
    width: 100%;
    background: linear-gradient(0deg,  #0f2027, #203a43, #2c5364);
    /* background: linear-gradient(135deg,); */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 0;
    position: sticky;
    top: 0px;
    z-index: 9000;
    transition: all 0.3s ease;
}

/* Container Inside */
.elementor-12 > header {
    max-width: 1250px;
    margin: auto;
    padding: 0 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* ====================================================
   LOGO (New Minimal Look)
==================================================== */
.elementor-widget-image img {
    width: 220px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: 0.3s ease;
}

.elementor-widget-image img:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* ====================================================
   MENU (New Neon Accent)
==================================================== */
.nav-wrapper {
    padding: 10px 0;
}

/* Navbar */
.custom-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Hide toggle button on desktop */
.mobile-menu-toggle {
    display: none;
}
.mobile-menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px;
    background: white;
    transition: 0.3s;
}

/* Navigation Menu */
.hfe-nav-menu {
    list-style: none;
    display: flex;
    gap: 25px; /* Space between menu items */
    margin: 0;
    padding: 0;
}

/* Menu Items */
.hfe-nav-menu li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Hover Color – Gradient Text */
.hfe-nav-menu li a:hover {
    background: linear-gradient(135deg, #4e95ff, #26c7a8);
    background-clip: text;          /* Standard property */
    -webkit-background-clip: text;  /* For Chrome, Safari */
    -webkit-text-fill-color: transparent; /* Required for WebKit */
    color: transparent;             /* Fallback for other browsers */
}


/* Active Menu Item – Gradient Text */
.current-menu-item a {
    background: linear-gradient(135deg, #4e95ff, #26c7a8); /* blue + green */
    background-clip: text; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* Mobile Responsive */

@media (max-width: 768px) {
    .custom-mobile-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .hfe-nav-menu {
        width: 100%;
        display: none; /* hidden by default */
        flex-direction: column;
        background: #000; 
        padding: 15px;
        margin-top: 10px;
    }

    .hfe-nav-menu.show {
        display: flex !important; /* show on toggle */
    }
}






/* ====================================================
   CALL BUTTON (New Round + Glow)
==================================================== */
#phone {
    /* existing styles */
    background: linear-gradient(135deg, #4e95ff, #26c7a8);
    color: #000;
    padding: 10px 15px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    box-shadow: 0 0 12px rgb(16, 252, 67);
    transition: 0.3s ease;

    animation: callBlink 2s infinite ease-in-out;  /* slower blink */
}

#phone:hover {
    background: linear-gradient(135deg, #2a86ff, #1467b5);
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(53, 71, 236, 0.55);
}

/* Icon */
#phone svg {
    width: 18px;
    height: 18px;
    fill: #000;
    transition: 0.3s ease;
}

#phone:hover svg {
    transform: rotate(12deg) scale(1.15);
}
@keyframes callBlink {
    0%   { transform: scale(1); opacity: 1; }
    10%  { transform: scale(1.15); opacity: 1; }   /* first pulse */
    20%  { transform: scale(1); opacity: 0.85; }   /* fade */
    30%  { transform: scale(1.12); opacity: 1; }   /* second pulse */
    40%  { transform: scale(1); opacity: 0.9; }    /* fade */
    100% { transform: scale(1); opacity: 1; }
}

/* ====================================================
   RESPONSIVE
==================================================== */
@media (max-width: 768px) {
    .elementor-12 > header {
        padding: 0 18px;
    }

    .elementor-widget-image img {
        width: 180px;
    }

    .hfe-nav-menu__layout-horizontal ul {
        gap: 22px;
    }

    #phone {
        padding: 10px 20px;
        position: relative;
        right: 20px;
    }
}


/* =====================================
   FULL SCREEN BANNER (SUPER CLEAR)
===================================== */

.elementor-element-2b51bea {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Background Image */
.elementor-element-999a746 {
    position: absolute;
    inset: 0;
    margin: 0;       /* remove any top/bottom margin */
    padding: 0;  
}



.elementor-element-999a746 img {
    width: 100%; 
    top: auto;                /* Full width of container */
    height: auto;                /* Let height scale proportionally */
    max-height: 100vh;           /* Never taller than viewport */
    object-fit: cover;           /* Cover container while maintaining aspect ratio */
    object-position: center;     /* Center the image */
    display: block;              /* Remove inline gaps below image */
    filter: brightness(95%) contrast(105%); /* Optional filter */
}



/* Dark Overlay */
.elementor-element-2b51bea::before {
    content: "";
    position: absolute;
    background: rgb(255, 254, 254);
    z-index: 1;
}

@media (max-width: 1024px) {
    .elementor-element-999a746 img {
        max-height: 70vh;        /* Reduce height for smaller screens */
        position: relative;
        bottom: 2px;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    .elementor-element-999a746 img {
        max-height: 50vh;        /* Smaller height on mobile */
        position: relative;
        bottom: 2px;

    }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
    .elementor-element-999a746 img {
        max-height: 40vh;        /* Even smaller for very small phones */
        position: relative;
        bottom: 1px;
    }
}
@media (max-width: 375px) {
    .elementor-element-999a746 img {
        max-height: 100vh;        /* Even smaller for very small phones */  
        position: relative;
        bottom: 1px;
    }
}

/* =====================================
   FORM – CLEAN, CENTERED ALWAYS
===================================== */

/* ---------- FORM WRAPPER (Floating on Banner) ---------- */
.form-wrapper {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;

  background: #47464660;
  padding: 25px;
  border-radius: 15px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.048);
  font-family: Arial, sans-serif;

  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);

  z-index: 999; /* Form stays above the banner */
}

/* ---------- TITLE ---------- */
.form-wrapper h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 22px;
}

/* ---------- LABELS ---------- */
label {
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
  color: #ffffff;
}

/* ---------- INPUTS ---------- */
input, textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 15px;
  outline: none;
}

input:focus, textarea:focus {
  border-color: #1b63ff;
  box-shadow: 0 0 5px rgba(27, 99, 255, 0.4);
}

/* ---------- BUTTON ---------- */
button {
  width: 100%;
  padding: 12px;
  background: #394a6dd2;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #1f64ee;
}
/* Success message styling */
.success-message {
    display: inline-block;           /* Works with padding/margin */
    width: 100%;                     /* Full width container */
    padding: 18px 20px;              /* Top/Bottom 18px, Left/Right 20px */
    background: linear-gradient(135deg, #4caf50, #66bb6a); /* Nice green gradient */
    color: #fff;                     /* Text color */
    font-size: 16px;                 /* Text size */
    font-weight: bold;               /* Bold text */
    border-radius: 8px;              /* Rounded corners */
    border: none;                    /* Remove border */
    cursor: default;                 /* Pointer cursor can be removed */
    text-align: center;              /* Center text */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Subtle shadow */
    transition: all 0.3s ease;       /* Smooth hover/animation effect */
    margin-top: 15px;                /* Space above the message */
}

/* Optional hover effect */
.success-message:hover {
    transform: translateY(-2px);     /* Slight lift effect */
    box-shadow: 0 6px 16px rgba(0,0,0,0.25); /* Stronger shadow */
}
.loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-left: 8px;
}
.error {
    color: red;
    font-size: 13px;
    margin-top: 3px;
    display: block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}




/* ---------- RESPONSIVE ---------- */

@media (max-width: 768px) {
  .form-wrapper {
    max-width: 90%;
    padding: 20px;
    top: 65%;
    left: 50%;
  }

  .form-wrapper h2 {
    font-size: 18px;
  }
}

@media (max-width: 375px) {
  .form-wrapper {
    max-width: 90%;
    padding: 20px;
    top: 63%;
    left: 50%;
  }

  input, textarea {
    font-size: 14px;
    padding: 10px;
  }

  button {
    font-size: 15px;
    padding: 10px;
  }
}

/* Root Variables for Dark/Light Theme */
:root {
    --bg-light: #f7f9fc;
    --bg-dark: rgba(20, 25, 35, 0.85);
    --card-bg-light: #ffffff;
    --card-bg-dark: rgba(40, 45, 55, 0.85);
    --text-light: #333;
    --text-dark: #e0e0e0;
    --price-bg-light: #e0f0ff;
    --price-bg-dark: rgba(50, 120, 200, 0.2);
    --amount-gradient: linear-gradient(135deg, #1e3c72, #2a5298);
    --amount-gradient-dark: linear-gradient(135deg, #5dadee, #2a3d72);
}

/* Body Theme Example */
body.light-theme {
    background-color: var(--bg-light);
    color: var(--text-light);
}

body.dark-theme {
    background-color: var(--bg-dark);
    color: var(--text-dark);
}

/* Card Container */
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Card Styles */
.premium-card {
    flex: 0 0 30%;
    box-sizing: border-box;
    margin-bottom: 20px;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
    border-radius: 15px;
    overflow: hidden;
    background-color: var(--card-bg-light);
}

body.dark-theme .premium-card {
    background-color: var(--card-bg-dark);
}

.premium-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Card Header */
.card-header {
    text-align: center;
    padding: 15px;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: white;
}

.title-plan {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
}

.speed {
    margin-top: 5px;
    font-weight: 500;
    color: #e0e0e0;
    display: flex;
    justify-content: center;   /* center horizontally */
    align-items: center;       /* keep icon & text aligned */
    gap: 6px;                  /* space between icon and text */
    text-align: center;
}


/* Card Body */
.card-body {
    padding: 15px;
    background-color: var(--card-bg-light);
}

body.dark-theme .card-body {
    background-color: transparent;
}

/* Price & Amount Container */
.price-amount-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* Price */
.price {
    font-weight: 700;
    font-size: 0.95rem;
    padding: 5px 12px;
    border-radius: 20px;
    background-color: var(--price-bg-light);
    color: #0d3b66;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

body.dark-theme .price {
    background-color: var(--price-bg-dark);
    color: #cce0ff;
}

.price:hover {
    transform: translateY(-2px);
    background-color: #c2e0ff;
    color: #0a2a4f;
}

/* Amount */
.amount {
    font-size: 2rem;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 25px;
    background: var(--amount-gradient);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

body.dark-theme .amount {
    background: var(--amount-gradient-dark);
}

.amount:hover {
    transform: translateY(-2px) scale(1.03);
}

/* Features */
.features {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.features li {
    display: flex;
    align-items: center;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 10px;
    font-weight: 500;
}

.features li:nth-child(1) { background-color: #e6e6ff; }
.features li:nth-child(2) { background-color: #d8f0ff; }
.features li:nth-child(3) { background-color: #ffe0f0; }
.features li:nth-child(4) { background-color: #e0fff0; }
.features li:nth-child(5) { background-color: #ffffcc; }

.features li .icon {
    margin-right: 8px;
}

/* Button */
.btn-get {
    padding: 10px 20px;
    border: none;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: white;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-get:hover {
    transform: scale(1.04);
    background: linear-gradient(0deg, #5dafd3, #0b1316, #59a2c2);
}

/* Responsive */
@media (max-width: 1024px) {
    .premium-card {
        flex: 0 0 45%;
    }
}

@media (max-width: 750px) {
    .premium-card {
        flex: 0 0 100%;
    }
}

/* bannerimage section */


/* Full Screen Banner Container */
.banner-container {
    position: relative;       /* overlay image ke liye relative */
    width: 100vw;             /* viewport width */
    height: 70vh;            /* viewport height */
    overflow: hidden;
}

/* Main Banner Image - full cover */
.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* image stretch but maintain aspect ratio */
    display: block;
}

/* Overlay Image */
.overlay-image {
    position: absolute;
    top: 10%;                 /* banner ke top se distance */
    left: 10%;                /* banner ke left se distance */
    width: 650px;             /* chhoti image size */
    height: 400px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}

.overlay-image:hover {
    transform: scale(1.1);    /* hover effect */
}
/* ===============================
   📱 Mobile: max 480px
================================ */
@media (max-width: 480px) {

    .banner-container {
        height: 40vh;                 /* smaller height */
    }

    .overlay-image {
        width: 70%;                   /* auto adjust */
        height: auto;
        top: 50%;                     /* center vertically */
        left: 50%;                    /* center horizontally */
        transform: translate(-50%, -50%);
        border-radius: 8px;
    }

    .overlay-image:hover {
        transform: translate(-50%, -50%) scale(1.05);
    }
}


/* ===============================
   📱 Tablets: max 768px
================================ */
@media (max-width: 768px) {

    .banner-container {
        height: 50vh;
    }

    .overlay-image {
        width: 55%;
        height: auto;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
    }

    .overlay-image:hover {
        transform: translateX(-50%) scale(1.08);
    }
}


/* ===============================
   💻 Laptops: max 1200px
================================ */
@media (max-width: 1200px) {

    .banner-container {
        height: 60vh;
    }

    .overlay-image {
        width: 450px;
        height: auto;
    }
}

/* samll card section */
/* Container for all cards */
/* Section Title */
.top-reasons-section {
    padding: 50px 20px;
    background-color: #f9f9f9;
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: #333;
}

.card-containers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    /* bottom: 0px; */
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: white;
    padding: 8px;
    width: 92%;
    max-width: 1750px;
    margin: 5px auto;
    border-radius: 8px;
}
/* Medium screens (tablets) */
@media (max-width: 1024px) {
    .card-containers {
        width: 85%;      /* slightly narrower */
        padding: 8px;
    }
}

/* Small screens (mobiles) */
@media (max-width: 768px) {
    .card-containers {
        width: 95%;      /* almost full width, but small margins */
        padding: 6px;
        bottom: 60px;    /* adjust bottom spacing for smaller screens */
    }
}

/* Extra small screens (phones) */
@media (max-width: 480px) {
    .card-containers {
        width: 98%;      /* nearly full width */
        padding: 5px;
        bottom: 40px;
    }
}



/* Individual Card */
.feature-card {
    background-color: #fff;
    width: 300px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Icon */
.feature-card .icon {
    font-size: 2rem;
    color: #ff6f61;
    margin-bottom: 15px;
}

/* Card Title */
.feature-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
}

/* Card Description */
.feature-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 1024px) {
    .feature-card {
        width: 45%;
    }
}

@media (max-width: 750px) {
    .feature-card {
        width: 90%;
    }
}



/* Small Banner */
.business-banner {
    background: linear-gradient(155deg, #0f2027, #203a43, #2c5364); /* Red to Blue gradient */
    color: white;
    text-align: center;
    padding: 30px 20px;
    border-radius: 15px;
    margin: 40px auto;
    max-width: 800px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Banner Heading */
.business-banner h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Call Button */
.call-btn {
    display: inline-block;
    background-color: #fff;
    color: #013e85;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.call-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    background-color: #f0f0f0;
}

/* FAQs Section */
.faq-section {
    max-width: 1000px; /* Increased width for spacious content */
    margin: 50px auto;
    padding: 0 20px;
}

.faq-title {
    text-align: center;
    font-size: 2.5rem; /* Larger title */
    font-weight: 700;
    margin-bottom: 50px;
    color: #ffffff;
}

/* Individual FAQ Card */
.faq-card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.452);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.faq-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Question container with icon */
.faq-question-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 35px; /* Increased padding */
    cursor: pointer;
}

.faq-question {
    font-size: 1.4rem; /* Larger font for question */
    font-weight: 600;
    color: #013e85;
    margin: 0;
}

/* Arrow Icon */
.faq-icon {
    font-size: 1.2rem;
    color: #013e85;
    transition: transform 0.3s;
}

/* Answer */
.faq-answer {
    padding: 0 35px 25px 35px; /* Larger padding for spacious content */
    font-size: 1.1rem; /* Larger font for answer */
    color: #555;
    line-height: 1.8; /* Increased line-height for readability */
    display: none; /* hidden by default */
}

/* Active state */
.faq-card.active .faq-answer {
    display: block;
}

.faq-card.active .faq-icon {
    transform: rotate(180deg);
}








/* =====================================================
   FOOTER MAIN WRAPPER
===================================================== */
/* Footer Section */
.footer-section {
    background: linear-gradient(180deg, #001d9c 0%, rgba(15, 26, 67, 0.08) 100%);
    color: white;
    padding: 30px 20px; /* Reduced padding for smaller footer */
    font-family: Arial, sans-serif;
}

/* Footer Top: Logo + Vision */
.footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.footer-logo img {
    max-width: 120px; /* Smaller logo */
    height: auto;
    border-radius: 6px;
}

.footer-vision {
    flex: 1;
}

.footer-vision p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: white;
    background-color: #3b5998;
    border-radius: 50%;
    font-size: 16px;
    transition: transform 0.3s, background-color 0.3s;
}

.social-links a:hover {
    background-color: #ffcc00;
    transform: scale(1.2);
}

/* Footer Styling - Optimized Layout */
.footer {
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    color: #fff;
    padding: 60px 20px 30px;
    position: relative;
    overflow: hidden;
}

/* Container for proper alignment */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Top Section - Logo, Quick Links, Broadband, Contact Us */
.footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

/* Logo and Brand */
.footer-brand {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.footer-logo img {
    max-width: 280px;
    height: auto;
    filter: brightness(0) invert(1);
    transition: transform 0.4s ease;
}

.footer-logo img:hover {
    transform: scale(1.05);
}

.footer-text {
    font-size: 22px;
    color: #ddd;
    line-height: 1.6;
    text-align: left;
    max-width: 500px;
    margin: 0;
}

/* Footer Links Section - Three columns layout */
.footer-links {
    display: flex;
    gap: 40px;
    flex: 2 1 500px;
    justify-content: flex-start;
}

.footer-column {
    flex: 1;
    text-align: left;
}

.footer-column h4 {
    font-size: 20px;
    margin-bottom: 25px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    position: relative;
    padding-bottom: 12px;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 3px;
    background: #3479fa;
    border-radius: 2px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 14px;
}

.footer-column ul li a {
    text-decoration: none;
    color: #ccc;
    font-size: 16px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-block;
    padding: 2px 0;
}

.footer-column ul li a:hover {
    color: #3479fa;
    transform: translateX(8px);
}

/* Contact Info Styling */
.contact-item {
    display: inline-block;
    align-items: flex-start;   /* icon top align */
    gap: 10px;
    margin-bottom: 15px;
    color: #ccc;
    font-size: 17px;
    line-height: 1.4;
}

.contact-text {
    display: flex;
    flex-direction: column;    /* text ek ke niche ek */
}



.contact-item strong {
    color: #fff;
    min-width: 60px;
}

.contact-item a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: #3479fa;
}

/* Social Media Links */
.footer-social {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    background: #3479fa;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 111, 97, 0.3);
}

/* Footer Bottom - Centered */
.footer-bottom {
    text-align: center;
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 15px;
    color: #aaa;
}

.footer-bottom p {
    margin: 8px 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .footer-top {
        flex-direction: column;
        gap: 30px;
    }

    .footer-links {
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 40px 15px 20px;
    }
    
    .footer-top {
        flex-direction: column;
        gap: 30px;
    }

    .footer-logo img {
        max-width: 220px;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 30px 12px 15px;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-social a {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .footer-text {
        font-size: 16px;
    }
}

  /* Container (bottom-right floating) */
    .whatsapp-fab {
      position: fixed;
      right: 100px;
      bottom: 50px;
      z-index: 9999;
      display: inline-block;
      text-decoration: none;
      outline: none;
    }

    /* Circle + shadow */
    .whatsapp-btn {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: linear-gradient(180deg, #25D366 0%, #128C7E 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(18, 140, 126, 0.25);
      transform: translateZ(0);
      /* make it feel stable, with a very subtle blink/pulse */
      animation: subtleBlink 3s ease-in-out infinite;
      will-change: opacity, transform;
      cursor: pointer;
    }

    /* Slight hover pop (no heavy movement) */
    .whatsapp-btn:hover {
      transform: scale(1.06);
      box-shadow: 0 12px 30px rgba(18, 140, 126, 0.30);
    }

    /* The SVG icon itself */
    .whatsapp-svg {
      width: 34px;
      height: 34px;
      display: block;
      pointer-events: none; /* svg doesn't steal click */
      filter: drop-shadow(0 1px 0 rgba(0,0,0,0.05));
    }

    /* Subtle blink: mostly stable, tiny dip in opacity + micro-scale */
   @keyframes subtleBlink {
    0%   { opacity: 1; transform: scale(1); }
    20%  { opacity: 1.6; transform: scale(0.95); }   /* darker + faster */
    40%  { opacity: 1; transform: scale(1.06); }     /* sharp zoom */
    60%  { opacity: 0.7; transform: scale(0.97); }   /* dark fade */
    100% { opacity: 1; transform: scale(1); }
}
/* Tablets / small laptops */
@media (max-width: 1024px) {
    .whatsapp-fab {
        right: 40px;
        bottom: 25px;
    }

    .whatsapp-btn {
        width: 56px;
        height: 56px;
    }

    .whatsapp-svg {
        width: 30px;
        height: 30px;
    }
}

/* Mobile phones */
@media (max-width: 768px) {
    .whatsapp-fab {
        right: 30px;
        bottom: 20px;
    }

    .whatsapp-btn {
        width: 50px;
        height: 50px;
    }

    .whatsapp-svg {
        width: 26px;
        height: 26px;
    }
}

/* Extra small phones (e.g., 320px) */
@media (max-width: 480px) {
    .whatsapp-fab {
        right: 20px;
        bottom: 20px;
    }

    .whatsapp-btn {
        width: 44px;
        height: 44px;
    }

    .whatsapp-svg {
        width: 22px;
        height: 22px;
    }
}
@media (max-width: 375px) {
    .whatsapp-fab {
        right: 20px;
        bottom: 20px;
    }

    .whatsapp-btn {
        width: 50px;
        height: 50px;
    }

    .whatsapp-svg {
        width: 30px;
        height: 30px;
    }
}

    /* optional accessible label hidden visually but available for screen readers */
    .sr-only {
      position: absolute !important;
      height: 1px; width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap; /* added line */
    }

/* ------------------------------------------
   MOBILE RESPONSIVE MENU
------------------------------------------ */
.hfe-nav-menu__toggle {
    display: none;
}

/* Mobile Design */
@media (max-width: 768px) {

    /* Layout stacks */
    .elementor-12>header {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    /* Logo full width */
    .elementor-widget-image {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    /* Show menu toggle */
    .hfe-nav-menu__toggle {
        display: block !important;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .hfe-nav-menu__toggle svg {
        width: 32px;
        height: 32px;
        fill: #000;
    }

    /* Hide desktop nav */
    .hfe-nav-menu__layout-horizontal {
        display: none !important;
    }

    /* When Elementor adds "active" class, show mobile menu */
    .hfe-nav-menu__layout-horizontal.active {
        display: block !important;
        width: 100%;
        background: #fff;
        padding: 20px 0;
        border-top: 1px solid #ddd;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .hfe-nav-menu__layout-horizontal ul {
        flex-direction: column;
        gap: 20px;
    }

    .hfe-nav-menu__layout-horizontal ul li a {
        font-size: 18px;
    }

    /* Call button full width */
    #phone {
        width: 100%;
        justify-content: center;
        padding: 12px;
        margin-top: 10px;
        font-size: 18px;
    }
}


/*Privacy-policy css*/
/* Global Theme */
.privacy-policy-wrapper {
    display: flex;
    gap: 24px;
    padding: 24px;
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    animation: fadeIn 1.2s ease;
}

/* Main Body */
.privacy-policy-container {
    flex: 1;
    padding: 20px;
    background: rgba(30, 30, 30, 0.55);
    border-radius: 12px;
    animation: slideUp 0.9s ease;
}

/* Sidebar */
.privacy-policy-side {
    width: 320px;
}

/* Card Style */
.privacy-policy-card {
    background: rgba(20, 20, 20, 0.6);
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    transition: transform .3s ease, box-shadow .3s ease;
    animation: fadeIn .9s ease;
}

.privacy-policy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* Buttons */
.privacy-policy-btn {
    display: inline-block;
    padding: 8px 14px;
    background: rgb(16 111 213 / 88%);
    color: #fff;
    border-radius: 8px;
    padding: 10px;
    text-decoration: none;
    transition: background .3s ease, transform .3s ease;
}

.privacy-policy-btn:hover {
    background: rgba(116, 161, 209, 0.7);
    color: #fff;
    transform: translateY(-4px);
}

/* Section Fade */
.privacy-policy-section {
    margin-top: 16px;
    animation: fadeIn .8s ease;
}

/* Divider */
.privacy-policy-divider {
    opacity: 0.15;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin: 20px 0;
}

/* Sidebar TOC */
.privacy-policy-toc a {
    color: #a8d8ff;
    text-decoration: none;
    transition: color .3s ease;
}

.privacy-policy-toc a:hover {
    color: #fff;
}

/* Muted Text */
.privacy-policy-muted {
    color: rgba(255, 255, 255, 0.55);
}

/* Last Updated Box */
.privacy-policy-updated {
    margin-top: 12px;
    color: rgba(255,255,255,0.65);
}

/* --- Animations --- */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glow {
    0% { box-shadow: 0 0 0 rgba(0, 150, 255, 0.4); }
    100% { box-shadow: 0 0 20px rgba(0, 150, 255, 0.7); }
}
/* Tablet: max-width 1024px */
@media (max-width: 1024px) {
    .privacy-policy-wrapper {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .privacy-policy-side {
        width: 100%;
        order: -1; /* Sidebar on top if needed */
    }

    .privacy-policy-container {
        width: 100%;
    }
}

/* Mobile: max-width 750px */
@media (max-width: 750px) {
    .privacy-policy-wrapper {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .privacy-policy-container {
        padding: 16px;
        font-size: 0.95rem;
    }

    .privacy-policy-side {
        width: 100%;
        margin-bottom: 16px;
    }

    .privacy-policy-card {
        padding: 14px;
        margin-bottom: 14px;
    }

    .privacy-policy-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .privacy-policy-section {
        margin-top: 12px;
    }

    .privacy-policy-divider {
        margin: 16px 0;
    }

    .privacy-policy-toc a {
        font-size: 0.95rem;
    }

    .privacy-policy-updated {
        font-size: 0.85rem;
    }
}

/* Extra small screens: max-width 480px */
@media (max-width: 480px) {
    .privacy-policy-wrapper {
        padding: 12px;
        gap: 12px;
    }

    .privacy-policy-container {
        padding: 12px;
    }

    .privacy-policy-card {
        padding: 12px;
    }

    .privacy-policy-btn {
        padding: 6px 10px;
        font-size: 0.85rem;
    }

    .privacy-policy-section h3 {
        font-size: 1rem;
    }

    .privacy-policy-toc a {
        font-size: 0.9rem;
    }
}