/* body { font-family: Arial; background: #f4f6f9; text-align: center; margin-top: 50px; } */

html, body {
    overflow-x: hidden;
}

/* HERO SECTION */
.hero-section {
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    background: linear-gradient(135deg, rgb(255,119,119), rgb(247, 123, 74), rgb(251, 158, 82));
    color: white;
    flex-wrap: wrap;
}

.hero-text {
    max-width: 100%;
    min-width: 300px;
    margin-bottom: 20px;
    margin-top: 60px;
}

.hero-cta {
    margin-bottom: 40px;
}

.hero-text h1 {
    font-size: 3rem;
    font-weight: 700;
}

.hero-text p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-top: 15px;
    color: navy;
}

.hero-image {
    max-width: 45%;
    min-width: 250px;
    position: relative;
}

.hero-image img {
    width: 100%;
    border-radius: 90px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    position: relative;
    z-index: 2;
}

.hero-image::before,
.hero-image::after {
    content: "";
    position: absolute;
    z-index: 1;
    filter: blur(100px);
}

.hero-image::before {
    top: -60px;
    left: -60px;
    width: 140%;
    height: 140%;
    background: rgba(255,255,255,0.25);
    border-radius: 50% 30% 60% 40%;
    transform: rotate(15deg);
}

.hero-image::after {
    bottom: -40px;
    right: -40px;
    width: 80%;
    height: 80%;
    background: rgba(255,255,255,0.2);
    border-radius: 40% 60% 30% 50%;
    transform: rotate(-10deg);
}


.brand-section {
    overflow: hidden;
    padding: 50px 0;
    background: #f8f9fa;
}

.brand-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.brand-track {
    display: flex;
    align-items: center;
    gap: 40px;
    will-change: transform;
}

.brand-track img {
    width: 160px;
    flex-shrink: 0;
}


.brand-item {
    flex: 0 0 auto;
    margin: 0 1.5rem;
    display: flex;
    align-items: center;
}

.brand-item img {
    height: 60px;
    object-fit: contain;
}

@keyframes scrollBrands {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.about-style-section {
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

.image-side {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blob-shape {
    position: absolute;
    width: 420px;
    height: 420px;
    background-color:  rgb(249, 137, 68);
    border-radius: 60% 40% 50% 70% / 60% 50% 70% 40%;
    z-index: 1;
    left: 40px;

        animation: blobMorph 8s ease-in-out infinite, blobFloat 6s ease-in-out infinite;

}


@keyframes blobMorph {
    0% {
        border-radius: 60% 40% 50% 70% / 60% 50% 70% 40%;
    }
    25% {
        border-radius: 50% 60% 40% 60% / 50% 60% 40% 70%;
    }
    50% {
        border-radius: 70% 50% 60% 40% / 60% 40% 60% 50%;
    }
    75% {
        border-radius: 40% 70% 50% 60% / 70% 50% 40% 60%;
    }
    100% {
        border-radius: 60% 40% 50% 70% / 60% 50% 70% 40%;
    }
}


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


@media (max-width: 768px) {
    .blob-shape {
        animation: blobMorph 10s ease-in-out infinite;
    }
}


.about-img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 450px;
    border-radius: 120px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.text-side {
    padding-left: 40px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: navy;
}
@media (max-width: 992px) {
    .hero-section { flex-direction: column; text-align: center; }
    .hero-text, .hero-image { max-width: 100%; }
    .text-side { padding-left: 0; margin-top: 40px; text-align: center; }
    .blob-shape { width: 300px; height: 300px; left: 50%; transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .section-title { font-size: 1.8rem; }
    .brand-item img { height: 40px; }
    
}

@media (max-width: 576px) {
    .blob-shape { width: 230px; height: 230px; }
    .about-img { max-width: 260px; }
}

/* 🔥 CENTER MESSAGE SECTION */
.center-message {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #f8f9fa, #eef2f7);
}

.message-content {
    max-width: 900px;
}


.main-heading {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 800;
    color: #fa8136;;
    margin-bottom: 20px;
}

.sub-heading {
    font-size: clamp(16px, 2.5vw, 22px);
    color: #555;
    line-height: 1.7;
}

/* Mobile spacing fix */
@media (max-width: 768px) {
    .center-message {
        padding: 80px 15px;
    }
}


/* 🔥 SERVICES SECTION */
.services-section {
    padding: 100px 20px;
    background: #ffffff;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 per row */
    gap: 30px;
}

/* CARD STYLE */
.service-card {
    
    background: linear-gradient(135deg, rgb(250, 156, 113), rgb(245, 190, 169), rgb(239, 154, 104));
    padding: 40px 30px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.service-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #1b1f3b;
}

.service-card p {
    color: #555;
    font-size: 15px;
    margin-bottom: 25px;
}

/* BUTTON */
.learn-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 30px;
    background: #fa8136;;
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* HOVER EFFECT */
.service-card:hover {
    background: #f4a777;/* light red */
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(249, 163, 97, 0.986);
}

.service-card:hover .learn-btn {
    opacity: 1;
    transform: translateY(0);
}


/* Tablet */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 576px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 30px 20px;
    }
}






.services-section {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}


.service-item {
    border-radius: 25px;
    margin-bottom: 18px;
    overflow: hidden;
    transition: all 0.4s ease;
}


.service-header {
    background: linear-gradient(180deg, #ffd9b3, #ffb066);
    color: navy;
    padding: 28px 35px;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 25px;
    transition: all 0.4s ease;
}


.service-header:hover {
    background: linear-gradient(180deg, #ffb066, #ff7a00);
    box-shadow: 0 10px 30px rgba(255, 120, 0, 0.35);
    transform: translateY(-3px);
}


.service-item.active .service-header {
    background: linear-gradient(180deg, #ff8c2f, #ff4d00);
    color: white;
    box-shadow: 0 12px 32px rgba(255, 90, 0, 0.45);
}

.service-header span {
    font-size: 26px;
    transition: transform 0.4s ease;
}

.service-item.active .service-header span {
    transform: rotate(180deg);
}


@keyframes orangeFlow {
    0% { background-position: left; }
    50% { background-position: right; }
    100% { background-position: left; }
}

.service-item.active .service-header {
    animation: orangeFlow 4s ease infinite;
}


.arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.service-content {
    max-height: 0;
    overflow: hidden;
    background: #ffc790;
    border-radius: 0 0 25px 25px;
    padding: 0 35px;
    transition: all 0.5s ease;
}

.service-item.active .service-content {
    max-height: 250px;
    padding: 20px 35px 30px;
}


.service-content p {
    margin: 12px 0;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

@media (max-width: 992px) {
    .services-section {
        margin: 40px auto;
    }

    .service-header {
        font-size: 18px;
        padding: 18px 20px;
    }

    .service-content p {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .service-header {
        font-size: 18px;
        padding: 20px;
    }

    .service-content {
        font-size: 14px;
    }



    .service-item.active .service-content {
        padding: 12px 16px 20px;
    }

    .service-content p {
        font-size: 14px;
    }
}

html {
    scroll-behavior: smooth;
}


/* 🔥 HERO BASE */
.hero-section {
    position: relative;
    height: 100vh; /* same visual impact as before */
    min-height: 520px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🎥 VIDEO */
.hero-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

/* 🔥 LIGHT OVERLAY */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(253, 252, 252, 0.444); /* light transparent layer */
    z-index: 2;
}

/* 🔹 CONTENT */
.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 900px;
    width: 100%;
    height: 80vh;              /* controls hero inner height */
    display: flex;             
    flex-direction: column;    
    justify-content: space-between;  /* 🔥 pushes CTA to bottom */
    padding: 40px 20px;
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #0a1f44;
}

.hero-content p {
    font-size: 1.2rem;
    color: #333;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .hero-section {
        height: 75vh;
        min-height: 420px;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

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

/* ===============================
   OUR PARTNERS
================================ */
.partners-section {
    padding: 90px 0;
    background: #f6f8ff; /* light blue background */
}

.partners-section .section-title {
    
    font-weight: 700;
    color: navy;
}

.partners-section .section-subtitle {
    max-width: 650px;
    margin: 15px auto 40px;
    color: #444;
}

.partners-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.partner-card {
    background: #ffffff;
    padding: 35px 50px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    transition: all 0.35s ease;
}

.partner-card h3 {
    color: #020124;
    font-weight: 700;
}

.partner-card p {
    margin-top: 8px;
    color: #666;
    font-size: 0.95rem;
}

/* hover */
.partner-card:hover {
    transform: translateY(-8px);
    background: #ff8c00;
}

.partner-card:hover h3,
.partner-card:hover p {
    color: #ffffff;
}

.section-text p{
    color: navy;

}
.reviews-section{
padding:80px 0;
background:#f9fbff;
text-align:center;
}

.reviews-container{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;
margin-top:40px;
}

.review-card{
background:#fff;
padding:30px;
border-radius:14px;
width:280px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
}

.review-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 30px rgba(0,0,0,0.12);
}


/* Light mode */
.section-title{
    color: navy;
}

/* Dark mode */
body.dark-mode .section-title{
    color: #ffffff;
}

/* Light Mode */
.section-subtitle{
    color: navy;
}

/* Dark Mode */
body.dark-mode .section-subtitle{
    color: #ffffff;
}

/* ================= CTA BUTTONS ================= */

/* Primary CTA Button */
.btn-primary-cta{
background:#ff7a00;
color:#ffffff;
border:none;
padding:14px 32px;
border-radius:40px;
font-weight:600;
transition:all 0.35s ease;
}

/* Primary Hover */
.btn-primary-cta:hover{
background:#e96d00;
color:#ffffff;
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(255,122,0,0.35);
}


/* Secondary CTA Button */
.btn-secondary-cta{
background:transparent;
color:navy;
border:2px solid #ff7a00;
padding:14px 32px;
border-radius:40px;
font-weight:600;
transition:all 0.35s ease;
}

/* Secondary Hover */
.btn-secondary-cta:hover{
background:#ff7a00;
color:#ffffff;
border-color:#ff7a00;
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(255,122,0,0.35);
}


/* ================= DARK MODE ================= */

/* Secondary button text white in dark mode */
body.dark-mode .btn-secondary-cta{
color:#ffffff;
border-color:#ff7a00;
}

/* Hover still orange */
body.dark-mode .btn-secondary-cta:hover{
background:#ff7a00;
color:#ffffff;
}

.profile-icon{
font-size:60px;
margin-bottom:10px;
}



.reviews-section{
padding:80px 0;
background:#f9fbff;
text-align:center;
overflow:hidden;
}

.reviews-slider{
overflow:hidden;
width:100%;
margin-top:40px;
}

.reviews-track{
display:flex;
gap:30px;
width:max-content;

}


.reviews-slider{
overflow:hidden;
width:100%;
}

.reviews-track{
display:flex;
gap:30px;
width:max-content;
}

.review-card{
background:#fff;
padding:25px;
border-radius:14px;
width:260px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
text-align:center;
flex-shrink:0;
}

.profile-icon{
font-size:60px;
margin-bottom:10px;
}



.review-role{
display:block;
font-size:13px;
color:#777;
margin-bottom:8px;
}

.stars{
margin:6px 0;
}

.star{
font-size:18px;
color:#d6d6d6;
}

.star.filled{
color:#ff9d00;
}

.review-card p{
font-size:14px;
color:#555;
}




@keyframes scrollReviews{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

/* Animation */
@keyframes scrollReviews {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
/* ❌ Prevent video from blocking clicks */
.hero-section.hero-video video {
    pointer-events: none;
}

/* ❌ Prevent overlay from blocking clicks */
.hero-section.hero-video .hero-overlay {
    pointer-events: none;
}
/* ✅ Allow clicks on text & buttons */
.hero-section.hero-video .hero-content {
    pointer-events: auto;
}

.hero-section.hero-video .hero-cta,
.hero-section.hero-video .hero-cta a,
.hero-section.hero-video .hero-cta button {
    pointer-events: auto;
    z-index: 4;
}

/* ===============================
   PARTNERS CAROUSEL
================================ */

.partners-carousel {
    overflow: hidden;
    width: 100%;
    position: relative;
    margin-top: 40px;
}

.partners-track {
    display: flex;
    gap: 25px;
    animation: scrollPartners 20s linear infinite;
}

.partner-card {
    min-width: 260px;
    background: #fa8c25;
    padding: 25px 20px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    text-align: center;
    flex-shrink: 0;
}

/* Typography */
.partner-card h3 {
    margin-bottom: 8px;
    font-size: 18px;
    color:navy;
}

.partner-card p {
    font-size: 14px;
    color:navy;
}

/* Infinite scroll animation */
@keyframes scrollPartners {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Pause on hover */
.partners-carousel:hover .partners-track {
    animation-play-state: paused;
}

/* Mobile */
@media (max-width: 768px) {
    .partner-card {
        min-width: 220px;
    }
}