@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 
 :root {
            --blue-400: #60a5fa;
            --sky-600: #0284c7;
            --white: #ffffff;
             --primary-blue: #025091;
            --light-blue: #e0f2fe;
            --accent-sky: #0ea5e9;
            --text-color: #1f2937;
            --bg-color: #f8fafc;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            overflow-x: hidden;
        }









        
        /* Custom Cursor */
        .cursor {
            position: fixed;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            pointer-events: none;
            z-index: 10000;
            transition: all 0.15s ease;
            mix-blend-mode: difference;
        }

        .cursor-follower {
            position: fixed;
            width: 40px;
            height: 40px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            transition: all 0.3s ease;
            mix-blend-mode: difference;
        }













        
#backToTopBtn {
    
    position: fixed; 
    bottom: 50px; 
    right: 30px; 
    transition: all .3s ease-in-out;
    
    font-size: 24px;
    font-weight: bold;
    background-color: #032b61; 
    color: white; 
    border: none;
    border-radius: 50%; 
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    
    opacity: 0; 
    visibility: hidden;
    
    transition: opacity 0.3s, visibility 0.3s;
    
    z-index: 1000; 
}

#backToTopBtn:hover {
    background-color: #026bcd;
}

#backToTopBtn.show {
    opacity: 1;
    visibility: visible;
}







        .hero-section {
            width: 100%;
            min-height: 100vh;
            position: relative;
        }
        
        .hero-container {
            width: 100%;
            height: 100vh;
            display: flex; 
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        /* background: linear-gradient(135deg, #3976c6 0%, #032b61 100%); */
            background-image: url("/assets/bg3.png");
            background-position: center;
            background-size: cover;
        }

        /* Left Box - Polygon Shape */
        .left-box {
            width: 100%;
            height: 100%;
            
            /* clip-path: polygon(0 0, 100% 0, 74% 100%, 0% 100%); */
            display: flex;
            align-items: center;
            padding-left: 5%;
        }

        .content-wrapper {
            max-width: 600px;
            width: 100%;
            height: 80%;

            padding-right: 3rem;
            animation: fadeInLeft 0.8s ease-out;
        }

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .logo-icon {
            margin-bottom: 2rem;
            display: inline-block;
        }
     .main-svg h1{
            position: relative;
        }

        .logo-icon svg {
            position: absolute;
            top: 10;
            left: 15px;
            width: 70px;
            height: 100px;
            fill: #032b61 ;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
            transition: transform 0.3s ease;
        }

        .logo-icon svg:hover {
            transform: scale(1.05);
        }
       

        .content-wrapper h1 {
            font-size: clamp(2.5rem, 4vw, 4rem);
            line-height: 1.2;
            font-weight: 700;
            color: #032b61;
        }

        .content-wrapper h2{
            font-size: 2.7rem;
            font-weight: 900;
            letter-spacing: 3px;
            color: #032b61;
        }
       

        .typing-container h2 {
            font-size: clamp(2.1rem, 4vw, 3rem);
            font-weight: 900;
            letter-spacing: 3px;
            color: #032b61;
        }

        .typing-text {
            display: inline-block;
            border-right: 3px solid #032b61 ;
            padding-right: 5px;
            animation: blink 0.7s step-end infinite;
            min-width: 20px;
        }

        @keyframes blink {
            from, to {
                border-color: transparent;
            }
            50% {
                border-color: #0284c7;
            }
        }

        .content-wrapper p {
            font-size: clamp(1rem, 1.8vw, 1.25rem);
            line-height: 1.8;
            color: #032b61;
            margin-bottom: 1rem;
            max-width: 500px;
        }

        .btnMain {
            width: fit-content;
            font-size: 18px;
            font-weight: 600;
            text-decoration: none;
            outline: none;
            cursor: pointer;
            border: none;
            padding: .8rem 2.8rem;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #032b61  0%, #0284c7 100%);
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

        .btnMain::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .btnMain:hover::before {
            left: 100%;
        }

        .btnMain:hover {
            transform: translateY(-2px);
        }

        /* Right Box - Video/Image */
        .right-box {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
       
      

        /* Tablet - Below 768px */
        @media (max-width: 768px) {
            .hero-container {
                flex-direction: column;
                height: auto;
                min-height: 100vh;
                
            }

            .left-box {
                position: relative;
                width: 100%;
                height: auto;
                min-height: 60vh;
                clip-path: none;
                padding: 3rem 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .content-wrapper {
                max-width: 100%;
                height: 100%;
                padding-right: 0;
                text-align: center;
            }

            .logo-icon svg {
                width: 70px;
                height: 95px;
            }

            .content-wrapper h1 {
                font-size: clamp(2rem, 6vw, 3rem);
            }

            .typing-container {
                min-height: 70px;
            }

            .typing-container h2 {
                font-size: clamp(1.8rem, 5.5vw, 2.5rem);
            }

            .content-wrapper p {
                margin: 0 auto 2rem;
                font-size: 1.05rem;
            }

            .btnMain {
                padding: 1rem 2.2rem;
                font-size: 17px;
            }

            .right-box {
                position: relative;
                width: 100%;
                height: 60vh;
                clip-path: none;
            }
        }

        /* Mobile - 480px and below */
        @media (max-width: 480px) {
            .left-box {
                padding: 2rem 1.5rem;
                min-height: 60vh;
            }

            .logo-icon {
                margin-bottom: 1.5rem;
            }

            .logo-icon svg {
                width: 40px;
                height: 60px;
            }

            .content-wrapper h1 {
                font-size: 1.8rem;
            }
            .content-wrapper h2{
                font-size: 1.5rem;
            }
            .typing-container {
                min-height: 20px;
            }

            .typing-container h2 {
                font-size: 1.5rem;
            }

            .typing-text {
                border-right-width: 2px;
            }

            .content-wrapper p {
                font-size: 0.95rem;
                line-height: 1.7;
                margin-bottom: 1.75rem;
            
            }

            .btnMain {
                padding: 0.9rem 2rem;
                font-size: 16px;
            }

            .right-box {
                height: 55vh;
            }
        }

        /* Extra small mobile */
        @media (max-width: 360px) {
            .content-wrapper h1 {
                font-size: 1.6rem;
            
            }

            .typing-container h2 {
                font-size: 1.3rem;
            
            }

            .right-box {
                height: 60vh;
                min-height: 220px;
            
            }
        }

        /* Large screens */
        @media (min-width: 1920px) {
            .left-box {
                padding-left: 8%;
            }

            .content-wrapper {
                max-width: 750px;
            }

            .logo-icon svg {
                width: 100px;
                height: 140px;
            }

            .content-wrapper p {
                font-size: 1.4rem;
                max-width: 650px;
            }

            .btnMain {
                padding: 1.4rem 3rem;
                font-size: 20px;
            }
        }











        
    .links {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 1rem;
    }

    .links a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      background: rgba(133, 209, 230, 0.905);
      border-radius: 50%;
      color: rgb(45, 45, 45);
      font-size: 24px;
      text-decoration: none;
      border: 2px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .links a::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%);
      transition: width 0.4s ease, height 0.4s ease;
    }

    .links a:hover::before {
      width: 100%;
      height: 100%;
    }

    .links a:hover {
      transform: translateY(-5px);
      color: #f8f9fa;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
    }

    .links a i {
      position: relative;
      z-index: 1;
      transition: transform 0.3s ease;
    }

    .links a:hover i {
      transform: scale(1.2) rotate(5deg);
    }

    /* Individual social media colors on hover */
    .links a:nth-child(1):hover {
      background: #1877f2;
      border-color: #1877f2;
    }

    .links a:nth-child(2):hover {
      background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
      border-color: #e1306c;
    }

    .links a:nth-child(3):hover {
      background: #0077b5;
      border-color: #0077b5;
    }

    .links a:nth-child(4):hover {
      background: #000000;
      border-color: #000000;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .links{
            justify-content: center;
        }
      .links a {
        width: 45px;
        height: 45px;
        font-size: 22px;
      }
      
      .links {
        gap: 15px;
      }
    }

    @media (max-width: 480px) {
         .links{
            justify-content: center;
        }
      .links a {
        width: 40px;
        height: 40px;
        font-size: 20px;
      }
      
      .links {
        gap: 12px;
      }
    }

    /* Animation on load */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .links a {
      animation: fadeInUp 0.6s ease backwards;
    }

    .links a:nth-child(1) { animation-delay: 0.1s; }
    .links a:nth-child(2) { animation-delay: 0.2s; }
    .links a:nth-child(3) { animation-delay: 0.3s; }
    .links a:nth-child(4) { animation-delay: 0.4s; }






























        
     .edutechy-feature-section {
    max-width: 1300px;
    margin: 2rem auto;
}

.edutechy-header {
    text-align: center;
    margin-bottom: 60px;
    margin-top: 40px;
}

.edutechy-header h2 {
    font-size: 2.5rem;
    color: #032b61;
    margin-bottom: 15px;
    font-weight: 700;
}

.edutechy-header p {
    font-size: 1.1rem;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
}

.edutechy-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.edutechy-feature-card {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
    cursor: pointer;
    overflow: hidden;
}

.edutechy-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(to right, #026bcd, #032b61);
    transition: width 0.5s ease;
}

.edutechy-feature-card:hover::before {
    width: 100%;
}

.edutechy-feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #026bcd 0%, #032b61 100%);
    opacity: 0;
    border-radius: 12px;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.edutechy-feature-card:hover::after {
    opacity: 0.05;
}

.edutechy-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(3, 43, 97, 0.2);
}

.edutechy-icon-container {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    z-index: 1;
}

.edutechy-icon-circle {
    width: 64px;
    height: 64px;
    background: #026bcd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(2, 107, 205, 0.3);
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.edutechy-feature-card:hover .edutechy-icon-circle {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(2, 107, 205, 0.4);
}

.edutechy-icon-circle svg {
    width: 32px;
    height: 32px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.edutechy-icon-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    background: #026bcd;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.7s ease;
    z-index: 1;
}

.edutechy-feature-card:hover .edutechy-icon-ring {
    opacity: 0.2;
    transform: scale(1.25);
}

.edutechy-feature-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #032b61;
    text-align: center;
    margin-bottom: 12px;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}

.edutechy-feature-card:hover .edutechy-feature-title {
    color: #026bcd;
}

.edutechy-feature-description {
    font-size: 0.9rem;
    color: #6b7280;
    text-align: center;
    line-height: 1.6;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}

.edutechy-feature-card:hover .edutechy-feature-description {
    color: #4b5563;
}

.cta-section {
    text-align: center;
    margin-top: 60px;
}

.cta-button {
    background: linear-gradient(to right, #026bcd, #032b61);
    color: white;
    padding: 16px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 107, 205, 0.3);
    transition: all 0.3s ease;
}

.cta-button:hover {
    background: linear-gradient(to right, #032b61, #026bcd);
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(2, 107, 205, 0.4);
}

/* --- Responsive Adjustments --- */

@media (max-width: 768px) {
    .edutechy-header h2 {
        font-size: 2rem;
        
    }

    .edutechy-features-grid {
        /* Mobile: 1 column */
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .edutechy-header h2 {
        font-size: 1.6rem;
        
        margin-bottom: .5rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .edutechy-features-grid {
        /* Tablet: 2 columns */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .edutechy-features-grid {
        /* Desktop: 3 columns for 6 cards */
        grid-template-columns: repeat(2, 1fr);
    }
}




























.animation-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main Center Image */
.main-image {
    width: 100%;
    z-index: 5;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1.5rem;
}

/* Floating Icons - Base Style */
.floating-icon {
    position: absolute;
    width: 70px;
    height: 70px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    
    animation-name: bounce;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: transform 0.3s ease;
}

.floating-icon:hover {
    transform: scale(1.1) !important;
}

.floating-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px) scale(1.1);
    }
}

/* Icon Positions - Desktop */
.icon-1 {
    top: 50px;
    left: 80px;
    animation-delay: 0.5s;
}

.icon-2 {
    top: 20px;
    right: 150px;
    animation-delay: 0s;
}

.icon-3 {
    top: 180px;
    right: 40px;
    animation-delay: 1.5s;
}

.icon-4 {
    bottom: 60px;
    left: 120px;
    animation-delay: 1s;
}

.icon-5 {
    bottom: 100px;
    right: 120px;
    animation-delay: 2s;
}
.icon-6 {
    top: 280px;
    left: 80px;
    animation-delay: 2s;
}


/* ========================================
   LARGE DESKTOP (1440px and above)
   ======================================== */
@media (min-width: 1440px) {
    .main-image {
        width: 100%;
        max-width: 600px;
    }
    
    .floating-icon {
        width: 85px;
        height: 85px;
        padding: 15px;
    }
    
    .icon-1 {
        top: 40px;
        left: 160px;
    }
    
    .icon-2 {
        top: 40px;
        right: 200px;
    }
    
    .icon-3 {
        z-index: 5;
        top: 220px;
        right: 60px;
    }
    
    .icon-4 {
        bottom: 120px;
        z-index: 5;
        left: 160px;
    }
    
    .icon-5 {
        bottom: 120px;
        right: 180px;
        z-index: 5;
    }
}



/* ========================================
   LAPTOP / SMALL DESKTOP (1024px - 1439px)
   ======================================== */
@media (max-width: 1439px) and (min-width: 1024px) {
    .main-image {
        width: 85%;
        max-width: 550px;
    }
    
    .floating-icon {
        width: 65px;
        height: 65px;
        padding: 10px;
    }
    
       .icon-1 {
        top: 40px;
        left: 100px;
    }
    
    .icon-2 {
        top: 40px;
        right: 80px;
    }
    
    .icon-3 {
        z-index: 5;
        top: 230px;
        right: 30px;
    }
    
    .icon-4 {
        bottom: 140px;
        z-index: 5;
        left: 100px;
    }
    
    .icon-5 {
        bottom: 140px;
        right: 100px;
        z-index: 5;
    }
}


/* ========================================
   TABLET (768px - 1023px)
   ======================================== */
@media (max-width: 1023px) and (min-width: 769px) {
    .animation-container {
        padding: 20px;
    }
    
    .main-image {

        width:80%;
        max-width: 450px;
        
    }
    
    .floating-icon {
        width: 70px;
        height: 70px;
        padding: 10px;
        border-radius: 12px;
    }
    
    /* Adjusted positions for tablet */
    .icon-1 {
        top: 140px;
        left: 100px;
    }
    
    .icon-2 {
        top: 150px;
        right: 50px;
    }
    
    .icon-3 {
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        z-index: 5;
    }
    
    .icon-4 {
        bottom: 150px;
        left: 90px;
    }
    
    .icon-5 {
        bottom: 140px;
        right: 70px;
    }
    .icon-6{
        top: 350px;
        left: 10px;
    }
    
    /* Reduce bounce intensity */
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-15px);
        }
    }
}


/* ========================================
   MOBILE LANDSCAPE (481px - 767px)
   ======================================== */
@media (max-width: 768px) and (min-width: 481px) {
    .animation-container {
        padding: 15px;
        /* min-height: 350px; */
    }
    
    .main-image {
        width: 70%;
    }
    
    .floating-icon {
        width: 65px;
        height: 65px;
        padding: 8px;
        border-radius: 8px;
    }
    
    /* Compact positioning for mobile landscape */
    .icon-1 {

        top: 20px;
        left: 220px;
    }
    
    .icon-2 {

        top: 20px;
        right: 150px;
    }
    
    .icon-3 {

        top: 40%;
        right: 40px;
        transform: translateY(-50%);
    }
    
    .icon-4 {

        bottom: 30px;
        left: 230px;
        z-index: 5;
    }
    
    .icon-5 {

        bottom: 30px;
        right: 140px;
        z-index: 5;
    }
    .icon-6 {
        top: 40%;
        left: 80px;
        transform: translateY(-50%);
        z-index: 5;
    }
    
    /* Gentler bounce for mobile */
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-12px);
        }
    }
    
}


/* ========================================
   MOBILE PORTRAIT (320px - 480px)
   ======================================== */
@media (max-width: 480px) {
    .animation-container {
        padding: 10px;
        min-height: 300px;
    }
    
    .main-image {
        width: 80%;
        max-width: 350px;
    }
    
    .floating-icon {
        width: 50px;
        height: 50px;
        padding: 5px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    /* Optimized for small screens */
    .icon-1 {

        top: 30px;
        left: 100px;
    }
    
    .icon-2 {

        top: 30px;
        right: 100px;
    }
    
    .icon-3 {
        z-index: 5;
        top: 40%;
        right: 20px;
        transform: translateY(-50%);
    }
    
    .icon-4 {
        bottom: 60px;
        left: 100px;
        z-index: 5;
    }
    
    .icon-5 {
        bottom: 60px;
        right: 100px;
        z-index: 5;
    }
    .icon-6 {
        top: 40%;
        left: 40px;
        transform: translateY(-50%);
        z-index: 5;
    }
    
    /* Subtle bounce for small screens */
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }
}


/* ========================================
   EXTRA SMALL MOBILE (below 360px)
   ======================================== */
@media (max-width: 359px) {
    .animation-container {
        padding: 8px;
        min-height: 300px;
    }
    
   
    
    /* Very compact positioning */
  .icon-1 {

        top: 30px;
        left: 70px;
    }
    
    .icon-2 {

        top: 30px;
        right: 70px;
    }
    
    .icon-3 {
        z-index: 5;
        top: 40%;
        right: 10px;
        transform: translateY(-50%);
    }
    
    .icon-4 {
        bottom: 100px;
        left: 80px;
        z-index: 5;
    }
    
    .icon-5 {
        bottom: 100px;
        right: 80px;
        z-index: 5;
    }
    .icon-6 {
        top: 40%;
        left: 10px;
        transform: translateY(-50%);
        z-index: 5;
    }
}


/* ========================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .animation-container {
        min-height: auto;
        height: 90vh;
    }
    
    .main-image {
        width: 70%;
        max-width: 300px;
    }
    
    .floating-icon {
        width: 40px;
        height: 40px;
    }
    
    /* Tighter positioning for landscape */
    .icon-1 {
        top: 10px;
        left: 10%;
    }
    
    .icon-2 {
        top: 10px;
        right: 15%;
    }
    
    .icon-3 {
        top: 50%;
        right: 5%;
    }
    
    .icon-4 {
        bottom: 10px;
        left: 15%;
    }
    
    .icon-5 {
        bottom: 10px;
        right: 20%;
    }
}


/* ========================================
   ACCESSIBILITY & PERFORMANCE
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .floating-icon {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .floating-icon {
        border: 2px solid #000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
}

/* Print styles */
@media print {
    .floating-icon {
        animation: none;
        position: static;
        display: inline-block;
        margin: 10px;
    }
}

















.Short-Service-section{
    max-width: 1300px;
    margin: 3rem auto;
    width: 95%;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    padding: 1rem;
    border-radius: 1.2rem;
}

 .Short-Service-section::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 70%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="943" height="315" viewBox="0 0 943 315" fill="none"><path fill="%23026bcd" d="M58.12 315.209c32.098 0 58.119-24.899 58.119-55.614 0-30.715-26.02-55.615-58.12-55.615C26.022 203.98 0 228.88 0 259.595c0 30.715 26.021 55.614 58.12 55.614Z"></path><path fill="%23032b61" d="M688.911 276.117c34.589 0 62.629-26.694 62.629-59.622 0-32.929-28.04-59.623-62.629-59.623s-62.629 26.694-62.629 59.623c0 32.928 28.04 59.622 62.629 59.622ZM110.62 230.102c12.19 53.104 49.119 90.514 82.483 83.557 33.365-6.957 50.53-55.646 38.34-108.75-12.189-53.105-49.118-90.515-82.483-83.558-33.364 6.957-50.53 55.646-38.34 108.751Z"></path><path fill="%23026bcd" d="m245.706 277.233 70.98 35.346a21.516 21.516 0 0 0 9.074 2.234 21.564 21.564 0 0 0 9.177-1.808 20.598 20.598 0 0 0 7.399-5.48 19.369 19.369 0 0 0 4.106-8.029l14.92-62.009a18.89 18.89 0 0 0-1.378-12.669c-1.915-3.961-5.154-7.207-9.21-9.229l-41.002-20.413a21.618 21.618 0 0 0-13.206-1.937c-4.505.763-8.619 2.926-11.698 6.152l-44.887 47.085a19.502 19.502 0 0 0-4.573 7.798 18.84 18.84 0 0 0-.495 8.921 19.268 19.268 0 0 0 3.684 8.215 20.465 20.465 0 0 0 7.109 5.823Z"></path><path fill="%23032b61" d="m917.052 160.199-126.737-26.254a35.109 35.109 0 0 0-15.176.211c-4.976 1.176-9.603 3.423-13.525 6.57-3.923 3.146-7.037 7.108-9.103 11.58a30.67 30.67 0 0 0-2.812 14.218l4.5 102.957c.31 7.059 3.065 13.822 7.834 19.229 4.769 5.408 11.284 9.156 18.526 10.66l73.209 15.158c7.242 1.498 14.801.667 21.498-2.362 6.696-3.03 12.152-8.087 15.516-14.384l49.005-91.871a30.77 30.77 0 0 0 3.647-14.049 30.69 30.69 0 0 0-3.227-14.138c-2.196-4.415-5.425-8.291-9.439-11.329-4.015-3.038-8.707-5.158-13.716-6.196ZM515.939 234.865l-82.778-45.533a23.246 23.246 0 0 0-8.304-2.687 23.597 23.597 0 0 0-8.755.544 22.97 22.97 0 0 0-7.872 3.692 21.767 21.767 0 0 0-5.79 6.276l-47.914 78.801a20.7 20.7 0 0 0-2.968 8.943 20.442 20.442 0 0 0 1.332 9.288 21.296 21.296 0 0 0 5.377 7.852 22.678 22.678 0 0 0 8.39 4.909c27.004 8.933 56.212 9.946 83.844 2.908 27.632-7.039 52.415-21.804 71.142-42.386a21.14 21.14 0 0 0 4.693-8.24 20.41 20.41 0 0 0 .548-9.353 20.806 20.806 0 0 0-3.702-8.676 22.078 22.078 0 0 0-7.243-6.338ZM402.915 194.444l13.23-26.369a24.861 24.861 0 0 0 2.604-12.892c-.308-4.439-1.81-8.728-4.362-12.453l-16.767-24.509c-2.547-3.728-6.058-6.769-10.195-8.829a28.298 28.298 0 0 0-13.428-2.933l-30.649.9c-4.988.146-9.838 1.598-14.02 4.195-4.181 2.597-7.533 6.24-9.687 10.531l-13.229 26.368a24.89 24.89 0 0 0-2.606 12.894c.307 4.439 1.806 8.73 4.355 12.457l16.766 24.509c2.551 3.726 6.065 6.765 10.203 8.823a28.329 28.329 0 0 0 13.429 2.933l30.649-.9c4.989-.146 9.839-1.597 14.02-4.195 4.181-2.597 7.533-6.24 9.687-10.53Z"></path><rect width="166.393" height="84.508" fill="%23026bcd" rx="42.254" transform="matrix(.59912 .80066 -.82703 .56215 560.805 150.383)"></rect><path fill="%23032b61" d="m699.2 120.226-12.357 24.902c-1.879 3.791-4.751 7.056-8.339 9.482-3.589 2.426-7.772 3.93-12.147 4.368l-90.039 10a26.757 26.757 0 0 1-12.836-1.853c-4.041-1.657-7.566-4.278-10.236-7.61l-17.54-21.89c-2.855-3.563-4.627-7.805-5.122-12.263a23.433 23.433 0 0 1 2.316-13.014l12.356-24.9c1.881-3.792 4.753-7.058 8.34-9.485 3.588-2.427 7.771-3.934 12.146-4.376l90.038-10c4.376-.439 8.796.202 12.837 1.861 4.04 1.66 7.565 4.28 10.236 7.612l17.54 21.89c2.855 3.563 4.627 7.805 5.122 12.263a23.436 23.436 0 0 1-2.315 13.013Z"></path><path fill="%23026bcd" d="m538.247 43.247 8.11 26.329a24.418 24.418 0 0 1 .53 12.366 24.445 24.445 0 0 1-5.601 11.043l-56.624 65.346a24.444 24.444 0 0 1-22.626 7.871l-27.12-4.86a24.417 24.417 0 0 1-11.881-5.751 24.414 24.414 0 0 1-7.154-11.093l-8.11-26.329a24.448 24.448 0 0 1-.531-12.368 24.48 24.48 0 0 1 5.595-11.048l56.624-65.345a24.488 24.488 0 0 1 22.633-7.865l27.12 4.86a24.426 24.426 0 0 1 19.035 16.844ZM843.357 143.199l79.166-4.515a21.507 21.507 0 0 0 8.986-2.561 21.567 21.567 0 0 0 7.072-6.122 20.582 20.582 0 0 0 3.707-8.429c.57-3.023.427-6.104-.418-9.008l-17.801-61.243a18.893 18.893 0 0 0-7.481-10.317c-3.628-2.49-8.05-3.702-12.574-3.446l-45.729 2.613a21.608 21.608 0 0 0-12.427 4.868c-3.534 2.897-6.033 6.816-7.107 11.144l-15.62 63.149a19.486 19.486 0 0 0-.103 9.04 18.825 18.825 0 0 0 3.995 7.991 19.251 19.251 0 0 0 7.273 5.306 20.447 20.447 0 0 0 9.061 1.53Z"></path></svg>');
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: contain;
            opacity: 0.06;
            z-index: 0;
            pointer-events: none;
        }
.service-title h1{
    font-size: 2.5rem;
    font-weight: 700;
    padding-bottom: 1.5rem;

}

/* Grid Responsive */
.service-container{
    margin: 0 auto;
    max-width: 1300px;
    padding: 2rem 0;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: center;
    justify-content: center;
}

/* Card Style */
.service-details{
    
    width: 100%;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-top-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.69);
    padding: .8rem;
    transition: .3s ease-in-out;
    position: relative;
}

.service-details::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, #296ec970, transparent);
            transition: left 0.5s;
        }

        .service-details:hover::before {
            left: 100%;
        }

.service-icon img{
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.service-name span{
    font-size: 1.2rem;
    font-weight: 600;
    color: #000000;
    margin-top: 0.5rem;
}

.service-details:hover{
    transform: translateY(-10px);
}


/* ======================= Responsive Media Queries ======================= */

/* Large Tablets / Small Laptops */
@media (max-width: 1024px){
    .service-title h1{
        font-size: 2rem;
        text-align: center;
    }

    .service-details{
        height: 200px;
    }
    
}

/* Tablets */
@media (max-width: 768px){
    .service-title h1{
        font-size: 1.8rem;
    }
    .service-icon img{
        width: 50px;
    }
    .service-name span{
        font-size: 1.1rem;
    }
}

/* Mobile */
@media (max-width: 480px){
    .service-title h1{
        font-size: 1.6rem;
            
    }
    .service-details{
        height: 180px;
        padding: 0.5rem;
            
    }
    .service-icon img{
        width: 45px;
    }
    .service-name span{
        font-size: 1rem;
            
    }
}










 .about-section {
    max-width: 1300px;
    width: 95%;
    margin: 0 auto;
            background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
            padding: 1rem 1.5rem;
            position: relative;
            overflow: hidden;
        }

        .about-section::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 70%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="943" height="315" viewBox="0 0 943 315" fill="none"><path fill="%23026bcd" d="M58.12 315.209c32.098 0 58.119-24.899 58.119-55.614 0-30.715-26.02-55.615-58.12-55.615C26.022 203.98 0 228.88 0 259.595c0 30.715 26.021 55.614 58.12 55.614Z"></path><path fill="%23032b61" d="M688.911 276.117c34.589 0 62.629-26.694 62.629-59.622 0-32.929-28.04-59.623-62.629-59.623s-62.629 26.694-62.629 59.623c0 32.928 28.04 59.622 62.629 59.622ZM110.62 230.102c12.19 53.104 49.119 90.514 82.483 83.557 33.365-6.957 50.53-55.646 38.34-108.75-12.189-53.105-49.118-90.515-82.483-83.558-33.364 6.957-50.53 55.646-38.34 108.751Z"></path><path fill="%23026bcd" d="m245.706 277.233 70.98 35.346a21.516 21.516 0 0 0 9.074 2.234 21.564 21.564 0 0 0 9.177-1.808 20.598 20.598 0 0 0 7.399-5.48 19.369 19.369 0 0 0 4.106-8.029l14.92-62.009a18.89 18.89 0 0 0-1.378-12.669c-1.915-3.961-5.154-7.207-9.21-9.229l-41.002-20.413a21.618 21.618 0 0 0-13.206-1.937c-4.505.763-8.619 2.926-11.698 6.152l-44.887 47.085a19.502 19.502 0 0 0-4.573 7.798 18.84 18.84 0 0 0-.495 8.921 19.268 19.268 0 0 0 3.684 8.215 20.465 20.465 0 0 0 7.109 5.823Z"></path><path fill="%23032b61" d="m917.052 160.199-126.737-26.254a35.109 35.109 0 0 0-15.176.211c-4.976 1.176-9.603 3.423-13.525 6.57-3.923 3.146-7.037 7.108-9.103 11.58a30.67 30.67 0 0 0-2.812 14.218l4.5 102.957c.31 7.059 3.065 13.822 7.834 19.229 4.769 5.408 11.284 9.156 18.526 10.66l73.209 15.158c7.242 1.498 14.801.667 21.498-2.362 6.696-3.03 12.152-8.087 15.516-14.384l49.005-91.871a30.77 30.77 0 0 0 3.647-14.049 30.69 30.69 0 0 0-3.227-14.138c-2.196-4.415-5.425-8.291-9.439-11.329-4.015-3.038-8.707-5.158-13.716-6.196ZM515.939 234.865l-82.778-45.533a23.246 23.246 0 0 0-8.304-2.687 23.597 23.597 0 0 0-8.755.544 22.97 22.97 0 0 0-7.872 3.692 21.767 21.767 0 0 0-5.79 6.276l-47.914 78.801a20.7 20.7 0 0 0-2.968 8.943 20.442 20.442 0 0 0 1.332 9.288 21.296 21.296 0 0 0 5.377 7.852 22.678 22.678 0 0 0 8.39 4.909c27.004 8.933 56.212 9.946 83.844 2.908 27.632-7.039 52.415-21.804 71.142-42.386a21.14 21.14 0 0 0 4.693-8.24 20.41 20.41 0 0 0 .548-9.353 20.806 20.806 0 0 0-3.702-8.676 22.078 22.078 0 0 0-7.243-6.338ZM402.915 194.444l13.23-26.369a24.861 24.861 0 0 0 2.604-12.892c-.308-4.439-1.81-8.728-4.362-12.453l-16.767-24.509c-2.547-3.728-6.058-6.769-10.195-8.829a28.298 28.298 0 0 0-13.428-2.933l-30.649.9c-4.988.146-9.838 1.598-14.02 4.195-4.181 2.597-7.533 6.24-9.687 10.531l-13.229 26.368a24.89 24.89 0 0 0-2.606 12.894c.307 4.439 1.806 8.73 4.355 12.457l16.766 24.509c2.551 3.726 6.065 6.765 10.203 8.823a28.329 28.329 0 0 0 13.429 2.933l30.649-.9c4.989-.146 9.839-1.597 14.02-4.195 4.181-2.597 7.533-6.24 9.687-10.53Z"></path><rect width="166.393" height="84.508" fill="%23026bcd" rx="42.254" transform="matrix(.59912 .80066 -.82703 .56215 560.805 150.383)"></rect><path fill="%23032b61" d="m699.2 120.226-12.357 24.902c-1.879 3.791-4.751 7.056-8.339 9.482-3.589 2.426-7.772 3.93-12.147 4.368l-90.039 10a26.757 26.757 0 0 1-12.836-1.853c-4.041-1.657-7.566-4.278-10.236-7.61l-17.54-21.89c-2.855-3.563-4.627-7.805-5.122-12.263a23.433 23.433 0 0 1 2.316-13.014l12.356-24.9c1.881-3.792 4.753-7.058 8.34-9.485 3.588-2.427 7.771-3.934 12.146-4.376l90.038-10c4.376-.439 8.796.202 12.837 1.861 4.04 1.66 7.565 4.28 10.236 7.612l17.54 21.89c2.855 3.563 4.627 7.805 5.122 12.263a23.436 23.436 0 0 1-2.315 13.013Z"></path><path fill="%23026bcd" d="m538.247 43.247 8.11 26.329a24.418 24.418 0 0 1 .53 12.366 24.445 24.445 0 0 1-5.601 11.043l-56.624 65.346a24.444 24.444 0 0 1-22.626 7.871l-27.12-4.86a24.417 24.417 0 0 1-11.881-5.751 24.414 24.414 0 0 1-7.154-11.093l-8.11-26.329a24.448 24.448 0 0 1-.531-12.368 24.48 24.48 0 0 1 5.595-11.048l56.624-65.345a24.488 24.488 0 0 1 22.633-7.865l27.12 4.86a24.426 24.426 0 0 1 19.035 16.844ZM843.357 143.199l79.166-4.515a21.507 21.507 0 0 0 8.986-2.561 21.567 21.567 0 0 0 7.072-6.122 20.582 20.582 0 0 0 3.707-8.429c.57-3.023.427-6.104-.418-9.008l-17.801-61.243a18.893 18.893 0 0 0-7.481-10.317c-3.628-2.49-8.05-3.702-12.574-3.446l-45.729 2.613a21.608 21.608 0 0 0-12.427 4.868c-3.534 2.897-6.033 6.816-7.107 11.144l-15.62 63.149a19.486 19.486 0 0 0-.103 9.04 18.825 18.825 0 0 0 3.995 7.991 19.251 19.251 0 0 0 7.273 5.306 20.447 20.447 0 0 0 9.061 1.53Z"></path></svg>');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            opacity: 0.06;
            z-index: 0;
            pointer-events: none;
        }

        .about-container {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .about-image {
            position: relative;
            width: 100%;
            /* height: 550px; */
            overflow: hidden;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(3, 43, 97, 0.15);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .about-image img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .about-image:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 80px rgba(3, 43, 97, 0.25);
        }

        .about-image video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .about-image .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(3, 43, 97, 0.5) 0%, rgba(2, 107, 205, 0.3) 100%);
            z-index: 2;
            transition: opacity 0.4s ease;
        }

        .about-image:hover .overlay {
            opacity: 0.7;
        }

        .about-details {
            width: 100%;
            padding: 1.2rem 0;
        }
        .globalTag{
            font-size: 1rem;
            background: linear-gradient(135deg, #026bcd 0%, #032b61 100%); 
            padding: .3rem;
            border-radius: 1rem;
            color: #fff;
        }
        .text1{
            color: #000 !important;
            font-size: 1rem;
        }
        .globalH1 {
            text-transform: uppercase;
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            position: relative;
            font-weight: 800;
            color: #032b61;
            margin-top: .5rem;
            margin-bottom: 2rem;
            line-height: 1.3;
        }

        .globalH1 span {
            font-size: clamp(1.4rem, 3vw, 2rem);
            color: #026bcd;
            display: block;
            margin-top: 0.5rem;
        }

        .globalH1::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -15px;
            width: 120px;
            height: 5px;
            background: linear-gradient(90deg, #032b61 0%, #026bcd 100%);
            border-radius: 3px;
            animation: slideIn 0.8s ease-out;
        }

        .feature-item i{
            font-size: 1.2rem;
            color: #032b61;
        }

        @keyframes slideIn {
            from {
                width: 0;
            }
            to {
                width: 120px;
            }
        }

        .globalP {
            font-size: 1.1rem;
            font-weight: 400;
            color: #2c3e50;
            line-height: 1.8;
            text-align: justify;
            margin-top: 1.5rem;
        }

        .svg-decoration {
            margin-top: 3rem;
            display: flex;
            justify-content: center;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
        }

        .svg-decoration svg {
            max-width: 100%;
            height: auto;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .about-container {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .about-image {
                height: 450px;
            }

            .about-details {
                padding: 1rem 0;
            }
        }

        @media (max-width: 768px) {
            .about-section {
                padding: 2.5rem 1rem;
            }

            .about-image {
                
                border-radius: 15px;
            }

            .globalH1 {
                margin-bottom: 1.5rem;
            }

            .globalH1::after {
                width: 80px;
                height: 4px;
                bottom: -10px;
            }

            @keyframes slideIn {
                from {
                    width: 0;
                }
                to {
                    width: 80px;
                }
            }

            .globalP {
                font-size: 1rem;
            
            }

            .svg-decoration {
                margin-top: 2rem;
            }
        }

        @media (max-width: 480px) {
            .about-section {
                padding: 2rem 0.75rem;
            
            }

            .about-image {
                
                border-radius: 12px;
            }

            .globalP {
                font-size: 0.95rem;
                line-height: 1.7;
            
            }
        }















.design-section{
    max-width: 1300px;
    margin: 2rem auto;
    width: 95%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.design-section img{
    width: 95%;
    padding: 2rem 0;
}

.design-section .design-text{
    font-family: "Roboto",sans-serif !important;
    margin: 0 auto;
    font-weight: 100;
    text-align: center;
    font-size: 2.8rem;
}
.design-section strong{
    font-weight: 600;
}

.design-section p{
    width: 90%;
    text-align: center;
    font-size: 1rem;
    margin-bottom: .5rem;
    font-weight: 300;
}


@media (max-width:768px){
    .design-section{
        gap: 0;
    }
    .design-section img{
        width: 100%;
        padding: 1rem 0;
    }
    .design-section .design-text{
        font-size: 2rem;
    }

}
@media (max-width:480px){
    .design-section .design-text{
        font-size: 1.3rem;
    }
    .design-section p{
        font-size: .9rem;
    }
}












/* Hero Section */
        .hero {
        

            
    background-color: #044aa5; 
    background-image: radial-gradient( #000000 20.6%, transparent 20%);
    background-size: 8px 8px; 
    color: white; 
    padding: 100px 20px;
    border-top-right-radius: 3.5rem;
    border-bottom-left-radius: 3.5rem;
    text-align: center;
        }

        .hero h1 {
            font-size: 3.5rem;
            /* color: #026bcd; */
            margin-bottom: 1rem;
            font-weight: 700;
            text-shadow: 0 5px 10px #00000050;
        }

        .hero p {
            font-size: 1.25rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Main Sticky Container */
        .sticky-container {
            position: relative;
            height: 450vh; /* Extended for better scroll experience */
        }

        .sticky-wrapper {
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .content-grid {
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
            padding: 0 3rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: center;
        }

        /* Left Side - Sequential Sliding Content */
        .left-side {
            position: relative;
            height: 550px;
            perspective: 1000px;
        }

        .slide-section {
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: translateY(120px) scale(0.9);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
            pointer-events: none;
        }

        .slide-section.active {
            opacity: 1;
            transform: translateY(0) scale(1);
            z-index: 10;
            pointer-events: auto;
        }

        .slide-section.past {
            opacity: 0;
            transform: translateY(-120px) scale(0.9);
            z-index: 5;
        }

        .slide-section.next {
            opacity: 0.4;
            transform: translateY(100px) scale(0.92);
            z-index: 2;
        }

        .slide-card {
            background: white;
            border-radius: 1.5rem;
            padding: 2.5rem;
            box-shadow: 0 20px 50px -12px rgba(3, 44, 97, 0.826);
            min-height: 100%;
            background: #f8f9fa;
            display: flex;
            flex-direction: column;
            border: 1px solid #e2e8f0;
        }

        .slide-number {
            font-size: 3rem;
            font-weight: 700;
            color: #e2e8f0;
            line-height: 1;
            margin-bottom: 1.5rem;
        }

        .slide-card h3 {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: #032b61;
            font-weight: 700;
        }

        .slide-card p {
            font-size: 1rem;
            line-height: 1.7;
            color: #64748b;
            margin-bottom: 1.5rem;
            flex-grow: 1;
        }

        .read-more {
            display: inline-flex;
            align-items: center;
            color: #026bcd;
            font-weight: 600;
            text-decoration: none;
            font-size: 0.875rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }

        .read-more:hover {
            color: #032b61;
            gap: 8px;
        }

        .read-more::after {
            content: '→';
            margin-left: 5px;
            transition: margin-left 0.3s ease;
        }

        .tech-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tech-tag {
            background: #e8f2fc;
            color: #032b61;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            border: 1px solid #026bcd;
        }

        /* Right Side - Sticky Content */
        .right-side {
            position: relative;
        }

        .sticky-card {
            background: linear-gradient(135deg, #032b61 0%, #026bcd 100%);
            color: white;
            border-radius: 1.5rem;
            padding: 3rem;
            box-shadow: 0 25px 50px -12px rgba(3, 43, 97, 0.4);
        }

        .sticky-header {
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #94a3b8;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .sticky-card h2 {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            font-weight: 700;
        }

        .sticky-card .description {
            font-size: 1rem;
            line-height: 1.8;
            color: #e8f2fc;
            margin-bottom: 1rem;
        }

        .cta-button {
            background: linear-gradient(135deg, #026bcd 0%, #032b61 100%);
            color: white;
            padding: 1rem 2rem;
            border-radius: 0.75rem;
            border: 2px solid rgba(255, 255, 255, 0.2);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 2rem;
            display: inline-block;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.4);
        }

        /* Features Grid */
        .features-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .feature-icon::before {
            content: '✓';
            color: white;
            font-weight: bold;
        }

        .feature-text {
            font-size: 0.875rem;
            color: #e8f2fc;
            line-height: 1.5;
        }

        /* Next Section */
        .next-section {
            background: white;
            padding: 100px 20px;
            text-align: center;
        }

        .next-section h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: #032b61;
            font-weight: 700;
        }

        .next-section p {
            font-size: 1.125rem;
            color: #64748b;
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .next-section img{
            width: 100%;
        }
        /* Responsive */
       @media (max-width: 850px) {
    
        
    .sticky-container {
        height: auto !important; 
    }

    .sticky-wrapper {
        position: static; 
        height: auto;
    }
    .content-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 0 2rem;
    }

    .left-side {
        height: auto; 
        min-height: 500px; 
        order: 2;
    }
    
    .slide-section {
        position: relative; 
        opacity: 1; 
        transform: none; 
        transition: none;
        z-index: auto;
        pointer-events: auto;
        margin-bottom: 2rem; 
    }

    .slide-section.active,
    .slide-section.past,
    .slide-section.next {
        opacity: 1; 
        transform: none;
        position: relative;
    }

    .right-side {
        order: 1;
    }

    
    .hero h1 {
        font-size: 2.5rem;
    }

    .slide-card h3 {
        font-size: 1.75rem;
    }

    .sticky-card h2 {
        font-size: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    
    .sticky-container {
        height: auto !important; 
    }

    .sticky-wrapper {
        position: static; 
        height: auto;
    }

    .left-side {
        height: auto;
        min-height: auto; 
    }

    /* slide-section के लिए: */
    .slide-section {
        position: relative; 
        opacity: 1; 
        transform: none; 
        transition: none;
        z-index: auto;
        pointer-events: auto;
        margin-bottom: 1.5rem; 
    }
    
    .slide-section.active,
    .slide-section.past,
    .slide-section.next {
        opacity: 1; 
        transform: none;
        position: relative;
    }

    /* ... (आपके बाकी 640px मीडिया क्वेरी के नियम) ... */

    .hero {
        padding: 60px 20px;
    }

    .hero h1 {
        font-size: 1.75rem;
        
    }

    .hero p {
        font-size: 1rem;
        
    }

    .content-grid {
        padding: 0 1rem;
        gap: 2rem;
    }

    .slide-card {
        padding: 1.5rem;
    }

    .slide-number {
        font-size: 2rem;
    }

    .slide-card h3 {
        font-size: 1.5rem;
        
    }

    .slide-card p {
        font-size: 0.9rem;
        
    }

    .sticky-card {
        padding: 2rem;
    }

    .sticky-card h2 {
        font-size: 1.75rem;
        
    }

    .sticky-card .description {
        font-size: 0.9rem;
        
    }

    .cta-button {
        padding: 0.875rem 1.5rem;
        font-size: 0.75rem;
        width: 100%;
    }

    .tech-tags {
        gap: 0.375rem;
    }

    .tech-tag {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        
    }

    .features-grid {
        gap: 0.75rem;
    }

    .feature-icon {
        width: 32px;
        height: 32px;
    }

    .feature-text {
        font-size: 0.8rem;
        
    }
}























.dream-sub-section{
    max-width: 1200px;
    width: 95%; 
    height: 50vh;
    margin:3rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "Roboto",sans-serif;
    padding-top: 1.5rem;
}

.dream-sub-section h1{
    font-size: 3.5rem;
    /* color: #f9a007; */
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.dream-sub-data{
    
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 2rem;
}
.dream-sub-card h2{
    font-size: 3rem;
    color: #180158;
    font-weight: 200;
}
.dream-sub-card p{
    font-size: 1.4rem;
    line-height: 1.4;
    color: #0284c7;
    font-weight: 300;
}

.dream-sub-card{
    padding: 1.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    align-items: center;
}
.dream-sub-card:hover{
    cursor: default;
    border-top-right-radius:2rem ;
    border-bottom-left-radius:2rem ;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}



@media (max-width:786px) {
    .dreams-container p{
        width: 100%;
    }
    .dream-data{
        padding-top: 1.5rem;
        flex-direction: column;
    }
    .dream-sub-section{
        height: auto;
    }
    .dream-sub-section h1{
        font-size: 2.5rem;
    word-wrap: break-word;
    }
    .dream-sub-data{
        grid-template-columns: repeat(2,1fr);
    }
    .dream-sub-data h2{
        font-size: 3rem;
    word-wrap: break-word;
    }
    .dream-sub-data p{
        font-size: 1.7rem;
    word-wrap: break-word;
    }
}

@media (max-width:480px) {
    .dreams-container h1{
        font-size: 2rem;
    word-wrap: break-word;
    }
    .dream-sub-section h1{
        font-size: 2rem;
    word-wrap: break-word;
    }
    .dream-sub-data{
        grid-template-columns: 1fr;
        padding: 2rem;
    }
    .dream-sub-data h2{
        font-size: 2.5rem;
    word-wrap: break-word;
    }
    .dream-sub-data p{
        font-size: 1.2rem;
    word-wrap: break-word;
    }
}


    
        .client-section {
            max-width: 1400px;
            width: 95%;
            text-align: center;
            height: 100%;
            margin: 3rem auto;
            overflow: hidden; /* SVG clipping fix */
            position: relative;
        }

        .our-clients {
            position: relative; /* MANDATORY: For ::before positioning */
            max-width: 1400px;
            width: 95%;
            margin: 0 auto;
            display: grid;
            /* Desktop Default: 6 columns */
            grid-template-columns: repeat(6, 1fr);
            gap: 1.5rem;
            padding: 4rem 0;
            z-index: 10;
        }
        
        /* Your provided SVG background for decoration */
        .client-section::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60%; /* Height adjusted to cover the whole grid area */
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="943" height="315" viewBox="0 0 943 315" fill="none"><path fill="%23026bcd" d="M58.12 315.209c32.098 0 58.119-24.899 58.119-55.614 0-30.715-26.02-55.615-58.12-55.615C26.022 203.98 0 228.88 0 259.595c0 30.715 26.021 55.614 58.12 55.614Z"></path><path fill="%23032b61" d="M688.911 276.117c34.589 0 62.629-26.694 62.629-59.622 0-32.929-28.04-59.623-62.629-59.623s-62.629 26.694-62.629 59.623c0 32.928 28.04 59.622 62.629 59.622ZM110.62 230.102c12.19 53.104 49.119 90.514 82.483 83.557 33.365-6.957 50.53-55.646 38.34-108.75-12.189-53.105-49.118-90.515-82.483-83.558-33.364 6.957-50.53 55.646-38.34 108.751Z"></path><path fill="%23026bcd" d="m245.706 277.233 70.98 35.346a21.516 21.516 0 0 0 9.074 2.234 21.564 21.564 0 0 0 9.177-1.808 20.598 20.598 0 0 0 7.399-5.48 19.369 19.369 0 0 0 4.106-8.029l14.92-62.009a18.89 18.89 0 0 0-1.378-12.669c-1.915-3.961-5.154-7.207-9.21-9.229l-41.002-20.413a21.618 21.618 0 0 0-13.206-1.937c-4.505.763-8.619 2.926-11.698 6.152l-44.887 47.085a19.502 19.502 0 0 0-4.573 7.798 18.84 18.84 0 0 0-.495 8.921 19.268 19.268 0 0 0 3.684 8.215 20.465 20.465 0 0 0 7.109 5.823Z"></path><path fill="%23032b61" d="m917.052 160.199-126.737-26.254a35.109 35.109 0 0 0-15.176.211c-4.976 1.176-9.603 3.423-13.525 6.57-3.923 3.146-7.037 7.108-9.103 11.58a30.67 30.67 0 0 0-2.812 14.218l4.5 102.957c.31 7.059 3.065 13.822 7.834 19.229 4.769 5.408 11.284 9.156 18.526 10.66l73.209 15.158c7.242 1.498 14.801.667 21.498-2.362 6.696-3.03 12.152-8.087 15.516-14.384l49.005-91.871a30.77 30.77 0 0 0 3.647-14.049 30.69 30.69 0 0 0-3.227-14.138c-2.196-4.415-5.425-8.291-9.439-11.329-4.015-3.038-8.707-5.158-13.716-6.196ZM515.939 234.865l-82.778-45.533a23.246 23.246 0 0 0-8.304-2.687 23.597 23.597 0 0 0-8.755.544 22.97 22.97 0 0 0-7.872 3.692 21.767 21.767 0 0 0-5.79 6.276l-47.914 78.801a20.7 20.7 0 0 0-2.968 8.943 20.442 20.442 0 0 0 1.332 9.288 21.296 21.296 0 0 0 5.377 7.852 22.678 22.678 0 0 0 8.39 4.909c27.004 8.933 56.212 9.946 83.844 2.908 27.632-7.039 52.415-21.804 71.142-42.386a21.14 21.14 0 0 0 4.693-8.24 20.41 20.41 0 0 0 .548-9.353 20.806 20.806 0 0 0-3.702-8.676 22.078 22.078 0 0 0-7.243-6.338ZM402.915 194.444l13.23-26.369a24.861 24.861 0 0 0 2.604-12.892c-.308-4.439-1.81-8.728-4.362-12.453l-16.767-24.509c-2.547-3.728-6.058-6.769-10.195-8.829a28.298 28.298 0 0 0-13.428-2.933l-30.649.9c-4.988.146-9.838 1.598-14.02 4.195-4.181 2.597-7.533 6.24-9.687 10.531l-13.229 26.368a24.89 24.89 0 0 0-2.606 12.894c.307 4.439 1.806 8.73 4.355 12.457l16.766 24.509c2.551 3.726 6.065 6.765 10.203 8.823a28.329 28.329 0 0 0 13.429 2.933l30.649-.9c4.989-.146 9.839-1.597 14.02-4.195 4.181-2.597 7.533-6.24 9.687-10.53Z"></path><rect width="166.393" height="84.508" fill="%23026bcd" rx="42.254" transform="matrix(.59912 .80066 -.82703 .56215 560.805 150.383)"></rect><path fill="%23032b61" d="m699.2 120.226-12.357 24.902c-1.879 3.791-4.751 7.056-8.339 9.482-3.589 2.426-7.772 3.93-12.147 4.368l-90.039 10a26.757 26.757 0 0 1-12.836-1.853c-4.041-1.657-7.566-4.278-10.236-7.61l-17.54-21.89c-2.855-3.563-4.627-7.805-5.122-12.263a23.433 23.433 0 0 1 2.316-13.014l12.356-24.9c1.881-3.792 4.753-7.058 8.34-9.485 3.588-2.427 7.771-3.934 12.146-4.376l90.038-10c4.376-.439 8.796.202 12.837 1.861 4.04 1.66 7.565 4.28 10.236 7.612l17.54 21.89c2.855 3.563 4.627 7.805 5.122 12.263a23.436 23.436 0 0 1-2.315 13.013Z"></path><path fill="%23026bcd" d="m538.247 43.247 8.11 26.329a24.418 24.418 0 0 1 .53 12.366 24.445 24.445 0 0 1-5.601 11.043l-56.624 65.346a24.444 24.444 0 0 1-22.626 7.871l-27.12-4.86a24.417 24.417 0 0 1-11.881-5.751 24.414 24.414 0 0 1-7.154-11.093l-8.11-26.329a24.448 24.448 0 0 1-.531-12.368 24.48 24.48 0 0 1 5.595-11.048l56.624-65.345a24.488 24.488 0 0 1 22.633-7.865l27.12 4.86a24.426 24.426 0 0 1 19.035 16.844ZM843.357 143.199l79.166-4.515a21.507 21.507 0 0 0 8.986-2.561 21.567 21.567 0 0 0 7.072-6.122 20.582 20.582 0 0 0 3.707-8.429c.57-3.023.427-6.104-.418-9.008l-17.801-61.243a18.893 18.893 0 0 0-7.481-10.317c-3.628-2.49-8.05-3.702-12.574-3.446l-45.729 2.613a21.608 21.608 0 0 0-12.427 4.868c-3.534 2.897-6.033 6.816-7.107 11.144l-15.62 63.149a19.486 19.486 0 0 0-.103 9.04 18.825 18.825 0 0 0 3.995 7.991 19.251 19.251 0 0 0 7.273 5.306 20.447 20.447 0 0 0 9.061 1.53Z"></path></svg>');
            background-repeat: no-repeat;
            background-position: center ;
            background-size: contain;
            opacity: 0.05;
            z-index: 0;
            pointer-events: none;
        }

        .client-card {
            padding: .3rem;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: white;
            border-top-right-radius:2.5rem ;
            border-bottom-left-radius:2.5rem ;
            box-shadow: 0 4px 15px rgba(3, 44, 97, 0.497); /* Agency branding color shadow */
            height: 150px; 
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .client-card:hover {
            box-shadow: 0 8px 20px rgba(3, 43, 97, 0.15);
            border-top-left-radius:2.5rem ;
            border-bottom-right-radius:2.5rem ;
            
            border-top-right-radius:0 ;
            border-bottom-left-radius:0 ;
        }
        .client-card img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

     


        /* --- Responsive Overrides --- */
        @media (max-width: 1024px) {
            .our-clients {
                /* Tablet: 4 columns */
                grid-template-columns: repeat(4, 1fr);
                gap: 1.25rem;
                padding: 2rem 0;
            }
        }

        @media (max-width: 640px) {
            .our-clients {
                /* Mobile: 3 columns */
                grid-template-columns: repeat(3, 1fr);
                gap: 0.75rem;
                padding: 1.5rem 0;
            }
            .client-card {
                height: 80px;
            }
        }

        @media (max-width: 480px) {
            .our-clients {
                /* Small Mobile: 2 columns */
                grid-template-columns: repeat(2, 1fr);
            }
            .client-card{
                
            border-top-right-radius:1.2rem ;
            border-bottom-left-radius:1.2rem ;
            }
        }






















.faq-section {
            max-width: 1300px;
            margin: 40px auto;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            border: 1px solid var(--light-blue);
            height: 100%;
            width: 100%;
        }

        .faq-heading {
            margin-top: 1.5rem;
            font-size: 2.5rem;
            font-weight: 800;
            text-align: center;
            padding: 30px 0 20px 0;
            color: var(--primary-blue);
        }

            .faq-image{
                width: 40%;
                height: 100%;
                overflow: hidden;
                transition: all .3s ease-in-out;
            border-top-right-radius:3rem ;
            border-bottom-left-radius:3rem ;
                box-shadow: 0 5px 10px #00000063;

            }

             .faq-image2{
                width: 40%;
                padding: 2rem;
                height: 100%;
                overflow: hidden;
                transition: all .3s ease-in-out;
            border-top-right-radius:3rem ;
            border-bottom-left-radius:3rem ;
                box-shadow: 0 5px 10px #00000063;

            }
             .faq-image2:hover{
            border-top-right-radius:0 ;
            border-bottom-left-radius:0 ;
            border-top-left-radius:3rem ;
            border-bottom-right-radius:3rem ;
                box-shadow: 0 5px 15px #000;
            }

            .faq-image:hover{
            border-top-right-radius:0 ;
            border-bottom-left-radius:0 ;
            border-top-left-radius:3rem ;
            border-bottom-right-radius:3rem ;
                box-shadow: 0 5px 15px #000;
            }
            .faq-image video{
                width: 100%;
                height: 500px;
            }
            .naac_v-data{
                margin-top: 2.5rem;
                padding: 1.5rem;
                font-size: 1.05rem;
                color: #333;
            }

            .accordion-container{
                width: 60%;
                height: 100%;
            }

            .faq-image img{
                width: 100%;
                height: 100%;
                min-height: 400px;
                object-fit: cover;
                transition: all .3s ease-in-out;
            }
              .faq-image2 img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all .3s ease-in-out;
            }

            .faq-section-wrapper img:hover{
                transform: scale(1.1);
            }

        .faq-section-wrapper{
            display: flex;
            justify-content: center;
            padding: 1rem;
            gap: 1rem;
                min-height: 550px;
        }

        .faq-item {
            border-top: 1px solid #f3f4f6;
        }

        .nac_arrow{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }
        .nac_arrow i{
            color: #0077b5;
        }
        .faq-item:last-child {
            border-bottom: none;
        }

        .faq-question {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 25px;
            border: none;
            background-color: transparent;
            text-align: left;
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--text-color);
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        
        .faq-question:hover,
        .faq-question.active {
            background-color: var(--light-blue);
            color: var(--primary-blue);
        }

        
        .faq-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 1.8rem;
            line-height: 1;
            color: var(--accent-sky);
            border: 2px solid var(--accent-sky);
            transition: transform 0.4s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
        }
        
        
        .faq-question:hover .faq-icon {
            background-color: var(--accent-sky);
            color: #fff;
            transform: scale(1.1);
            box-shadow: 0 4px 10px rgba(14, 165, 236, 0.4);
        }
        
        
        .faq-question.active .faq-icon {
            transform: rotate(45deg);
            background-color: var(--primary-blue);
            color: #fff;
            border-color: var(--primary-blue);
        }

        
        .faq-answer-wrapper {
            max-height: 0; 
            overflow: hidden;
            background-color: #f9f9fb;
            
            transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
        }

        .faq-answer-wrapper.answer-expanded {
            
            max-height: 300px; 
            padding: 15px 25px;
        }

        .faq-answer-content {
            margin: 0;
            color: #4b5563;
            line-height: 1.7;
            font-size: 1rem;
        }
        .svgSecBtn{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }

  @media (max-width: 768px) {
            .faq-section {
                margin: 20px auto;
                width: 100%;
                border-radius: 8px;
            }
            
            .faq-section-wrapper {
                flex-direction: column; 
                padding: 1rem;
                min-height: auto;
            }

            .faq-image {
                width: 100%; 
                height: 250px; 
                border-radius: 8px; 
            }
            .faq-image2 {
                width: 100%; 
                height: 300px; 
                border-radius: 8px; 
            }
            .faq-image2 img{
                object-fit: contain;
            }
            .faq-image video{
                height: 100%;
            }

            .accordion-container {
                width: 100%; 
                margin-top: 1rem;
            }

            .faq-heading {
                font-size: 2rem;
                padding: 20px 10px 10px 10px;
            }
            
            .faq-question {
                font-size: 1rem;
                padding: 15px 0px;
            }
            .faq-answer-wrapper.answer-expanded {
                 padding: 10px 20px;
            }
        }   

        @media (max-width:480px) {
                 .faq-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            font-size: 1rem;
            line-height: 1;
            color: var(--accent-sky);
            border: 2px solid var(--accent-sky);
            transition: transform 0.4s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
        }
        .nac_arrow{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .1rem;
            
        } 
        .faq-image2 {
                width: 100%; 
                padding: 1rem;
            }
        
.faq-image img {
    width: 100%;
    height: 100%;
     min-height: 0;
}

.faq-image2 img {
    width: 100%;
    height: 100%;
    min-height: 0px;
}
            .faq-question{
                font-size: .9rem;
            }
            .faq-answer-content{
                font-size: .8rem;
            }
            .faq-heading {
                font-size: 1.5rem;
                
            }
        }





































          .contact-section { background-color: #eeefefc1; 
    background-image: radial-gradient( #72a4f491 12.6%, transparent 20%);
    background-size: 8px 8px; 
            padding: 40px 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header {
            text-align: center;
            margin-bottom: 50px;
        }

        .header h1 {
            font-size: 48px;
            color: #1a1a2e;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .header p {
            color: #999;
            font-size: 18px;
        }

        .contact-container {
            display: flex;
            max-width: 1200px;
            width: 100%;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
        }

        .contact-info {
            flex: 1;
            background: linear-gradient(135deg, #032b61 0%, #026bcd 50%, #0380e8 100%);
            padding: 50px 40px;
            color: white;
            position: relative;
            overflow: hidden;
            min-width: 300px;
        }

        .contact-info::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(55, 157, 254, 0.89);
            border-radius: 50%;
            bottom: -100px;
            left: -50px;
        }

        .contact-info::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba(5, 71, 147, 0.826);
            border-radius: 50%;
            bottom: 50px;
            right: -50px;
        }

        .info-content {
            position: relative;
            z-index: 10;
        }

        .info-content h2 {
            font-size: 32px;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .info-content > p {
            font-size: 14px;
            margin-bottom: 40px;
            opacity: 0.9;
            line-height: 1.6;
        }

        .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }

        .info-icon {
            width: 25px;
            height: 25px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .info-text {
            font-size: 15px;
            font-weight: 100;
            letter-spacing: .8px;
            opacity: 0.95;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 50px;
        }

        .contact-form {
            flex: 1.5;
            padding: 50px 60px;
        }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
        }

        .form-group {
            flex: 1;
        }

        .form-group.full-width {
            width: 100%;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #666;
            font-size: 13px;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: none;
            border-bottom: 2px solid #e0e0e0;
            font-size: 14px;
            font-family: inherit;
            transition: border-color 0.3s;
            outline: none;
            background: transparent;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            border-bottom-color: #026bcd;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
        }

        .form-group textarea:focus {
            border-color: #026bcd;
        }

        .radio-group-label {
            display: block;
            margin-bottom: 15px;
            color: #333;
            font-size: 14px;
            font-weight: 500;
        }

        .radio-options {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
        }

        .radio-option {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .radio-option input[type="radio"] {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            cursor: pointer;
            accent-color: #026bcd;
        }

        .radio-option label {
            font-size: 14px;
            color: #666;
            cursor: pointer;
        }

        .other-input {
            margin-top: 15px;
            display: none;
            animation: slideDown 0.3s ease;
        }

        .other-input.visible {
            display: block;
        }

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

        .other-input input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            transition: border-color 0.3s;
            outline: none;
            background: white;
        }

        .other-input input:focus {
            border-color: #026bcd;
        }

        .submit-btn {
            background: linear-gradient(135deg, #032b61 0%, #026bcd 100%);
            color: white;
            padding: 15px 50px;
            border: none;
            border-radius: 30px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            float: right;
            transition: all 0.3s;
            box-shadow: 0 5px 20px rgba(2, 107, 205, 0.3);
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(2, 107, 205, 0.4);
        }

        @media (max-width: 968px) {
            .contact-container {
                flex-direction: column;
            }

            .contact-info {
                min-width: 100%;
            }

            .contact-form {
                padding: 40px 30px;
            }

            .form-row {
                flex-direction: column;
                gap: 25px;
            }

            .header h1 {
                font-size: 32px;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 20px 10px;
            }

            .header h1 {
                font-size: 28px;
            }

            .contact-info {
                padding: 40px 30px;
            }

            .contact-form {
                padding: 30px 20px;
            }

            .submit-btn {
                width: 100%;
                float: none;
            }

            .radio-options {
                flex-direction: column;
                gap: 15px;
            }
        }



























          .appointment-section {
            background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
            padding: 80px 40px;
            text-align: center;
        }

        .icon-container1 {
            width: 80px;
            height: 80px;
            background: #fefefe;
            border-radius: 5px;
            margin: 0 auto 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .icon-container1 img{
            width: 80%;
            height: 80%;

            object-fit: cover;
        }

    

        .appointment-section h1 {
            font-size: 48px;
            color: #1a1a2e;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .appointment-section p {
            font-size: 16px;
            color: #666;
            max-width: 600px;
            margin: 0 auto 40px;
            line-height: 1.6;
        }

        .book-btn {
            background: linear-gradient(135deg, #032b61 0%, #026bcd 100%);
            color: white;
            padding: 16px 40px;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
            box-shadow: 0 5px 20px rgba(93, 95, 239, 0.3);
        }

        .book-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(93, 95, 239, 0.4);
        }

        .arrow {
            font-size: 18px;
        }

        footer {
            background: #f0f6fb;
            padding: 60px 40px 30px;
        }
        

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 40px;
            margin-bottom: 50px;
        }

        .footer-column h3 {
            font-size: 18px;
            color: #1a1a2e;
            margin-bottom: 25px;
            font-weight: 600;
        }

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

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

        .footer-column ul li a {
            color: #666;
            text-decoration: none;
            font-size: 15px;
            transition: color 0.3s;
        }

        .footer-column ul li a:hover {
            color: #025091;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 20px;
        }

        .contact-icon {
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg, #032b61 0%, #026bcd 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
            color: #fff;
        }

       

        .contact-text {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }

        .footer-bottom {
            max-width: 1400px;
            margin: 0 auto;
            padding-top: 30px;
            border-top: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .copyright {
            color: #666;
            font-size: 14px;
        }

        .copyright a {
            color: #026bcd;
            text-decoration: none;
        }

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

        .footer-links a {
            color: #666;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: #026bcd;
        }

        @media (max-width: 1024px) {
            .footer-content {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            .appointment-section h1 {
                font-size: 32px;
            }

            .footer-content {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
        }

        @media (max-width: 480px) {
            .appointment-section {
                padding: 60px 20px;
            }

            .appointment-section h1 {
                font-size: 28px;
            }

            .footer-content {
                grid-template-columns: 1fr;
            }

            footer {
                padding: 40px 20px 20px;
            }
        }