.header-wrapper{
    overflow-x: hidden;
    overflow-y: visible;
}

.topbar,
.header{
    position: relative;
    z-index: 5;
}

.navbar{
    position: relative;
    z-index: 999;
}

.menu-btn{
    position: relative;
    z-index: 1001;
}

.nav-links{
    z-index: 1000;
}

.floating-icon{
    pointer-events: none;
    z-index: 0;
}
.header-wrapper{

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: var(--z-header);

    overflow: hidden;

    transition: var(--transition);
/* 
    background:
    linear-gradient(
        180deg,
        #8fd3ff 0%,
        #bde7ff 50%,
        #dff4ff 100%
    ); */

}


.header-wrapper::before{

    content: "";

    position: absolute;

    top: -120px;
    left: -120px;

    width: 400px;
    height: 400px;

    background:
    radial-gradient(
        rgba(255,255,255,0.55),
        transparent 70%
    );

    border-radius: 50%;

    z-index: -1;

}



.header-wrapper::after{

    content: "";

    position: absolute;

    bottom: -150px;
    right: -100px;

    width: 450px;
    height: 450px;

    background:
    radial-gradient(
        rgba(255,255,255,0.45),
        transparent 70%
    );

    border-radius: 50%;

    z-index: -1;

}


.header-wrapper.sticky{

    box-shadow: var(--shadow-md);

    backdrop-filter: blur(12px);

}



.topbar{

    padding: 12px 0;

}


.topbar-flex{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}



.logo img{

    width: 150px;

}


.topbar-right{

    display: flex;

    align-items: center;

    gap: 25px;

}



.topbar-right a{

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text-dark);

    font-size: 15px;

    font-weight: var(--fw-medium);

}


.social-icons{

    display: flex;

    align-items: center;

    gap: 10px;

}



.social-icons a{

    width: 35px;
    height: 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}



.social-icons a:hover{

    background: var(--white);

    transform: translateY(-3px);

}



/* =========================================================
   HEADER
========================================================= */

.header{

    padding-bottom: 15px;

}



/* =========================================================
   NAVBAR
========================================================= */

.navbar{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}



/* =========================================================
   NAV LINKS
========================================================= */

.nav-links{

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}



/* =========================================================
   NAV LINKS ITEM
========================================================= */

.nav-links li a{

    position: relative;
    display: inline-block;

    background: var(--white);

    padding: 6px 24px;

    border-radius: 16px;

    color: var(--text-dark);

    font-size: 16px;

    font-weight: var(--fw-semibold);

    box-shadow:
    0 4px 10px rgba(0,0,0,0.05);

    transition: var(--transition);

}



.nav-links li a:hover{

    transform: translateY(-3px);

}



.nav-links li a.active::after{

    content: "";

    position: absolute;

    left: 20px;
    bottom: -8px;


    width: 55px;
    height: 4px;

    border-radius: 20px;

    background: #ffc400;

}


.login-btn{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    background: var(--white);

    padding: 6px 20px;

    border-radius: 18px;

    color: var(--text-dark);

    font-weight: var(--fw-bold);

    box-shadow:
    0 4px 10px rgba(0,0,0,0.05);

    transition: var(--transition);

    white-space: nowrap;

}



.login-btn:hover{

    transform: translateY(-3px);

}



/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-btn{

    display: none;

    width: 50px;
    height: 50px;

    border: none;

    background: var(--white);

    border-radius: 15px;

    font-size: 20px;

    cursor: pointer;

}



/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:992px){

    .topbar-flex{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }

    .topbar-right{
        display:flex !important;
        align-items:center;
        gap:8px;
                margin-right: 60px;
    }

    .topbar-right a span{
        display:none;
    }

    .topbar-right > a{
        width:40px;
        height:40px;

        display:flex;
        align-items:center;
        justify-content:center;

        background:transparent!important;

        border-radius:12px;
    }

    .social-icons{
        display:none;
    }

    .menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;

        width:42px;
        height:42px;

        border-radius:12px;
    }

    /* IMPORTANT */
    .navbar {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 20px;
    margin-top: -60px;
    margin-right: 18px;
    }


    .nav-links{
        position:absolute;

        top:100%;
        left:0;

        width:100%;

        border-radius:0 0 20px 20px;

        background:#a9d7ff;

        padding:20px;

        flex-direction:column;

        display:none;

        z-index:9999;
    }

    .nav-links.active{
        display:flex;
    }

    .login-btn{
        display:none;
    }

}

@media(max-width:576px){

    .logo img{

        width: 120px;

    }

}


.hero-section{

    position: relative;
    padding: 120px 0 0;

    /* padding-top: 140px; */
    /* padding-bottom: 90px; */

    overflow: hidden;
/* 
    background:
    linear-gradient(
        180deg,
        #fff5df 0%,
        #fffdf8 100%
    ); */

}

.heroSwiper{

    overflow: hidden;

}


.hero-banner{

    position: relative;

    overflow: hidden;

}


.hero-banner img{

    width: 100%;

    display: block;

    object-fit: cover;

}


.hero-next,
.hero-prev{

    width: 40px !important;
    height: 40px !important;

    border-radius: 50%;

    background:
    rgba(255,255,255,0.95);

    box-shadow:
    0 10px 30px rgba(0,0,0,0.12);

    transition: var(--transition);

}



.hero-next:hover,
.hero-prev:hover{

    transform: scale(1.08);

}



.hero-next::after,
.hero-prev::after{

    font-size: 10px !important;

    font-weight: 700;

    color: var(--primary);

}


@media(max-width:992px){

    .hero-next,
    .hero-prev{

        width: 50px !important;
        height: 50px !important;

    }

}



@media(max-width:768px){

    .hero-next,
    .hero-prev{

        display: none !important;

    }

}
/* about css */
/* 
.about-section{
    position: relative;
    overflow: hidden;
    padding: 110px 0 90px;


} */


.about-section .container{
    width: 92%;
    max-width: 1400px;
    margin: auto;
    position: relative;
    z-index: 5;
}


.floating-shape{
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.rainbow{
    top: 50px;
    left: 40px;

    font-size: 65px;
    opacity: .2;

    animation:
    bounce 2s infinite;
}

.star{
    top: 90px;
    right: 60px;

    font-size: 55px;
    opacity: .2;

    animation:
    pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}

.about-head{
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.abt-title-icon{
    display: inline-block;

    font-size: 65px;
    margin-bottom: 10px;

    transform-origin: top center;

    animation:
    pendulum 3s ease-in-out infinite;
}

.section-title h2{

    font-size: 62px;
    font-weight: 700;
    line-height: 1.2;

    margin: 0;

    background:
    linear-gradient(
        90deg,
        #9333ea,
        #ec4899
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================================
   ABOUT WRAPPER
========================================================= */

.about-wrapper{
    position: relative;

    background:
    rgba(255,255,255,.82);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius: 34px;

    padding: 20px 40px;

    border:
    1px solid #edd5ff;

    box-shadow:
    0 25px 50px -12px rgba(147,51,234,.25);

    overflow: hidden;

    margin-bottom: 70px;
}

/* glow */


.quote{
    position: absolute;

    font-size: 60px;
    line-height: 1;

    color: #101010;

    opacity: .55;

    font-family: serif;
}

.quote-left{
    top: -5px;
    left: 12px;
}

.quote-right{
    right: 14px;
    bottom: -18px;
}

/* =========================================================
   CONTENT
========================================================= */

.about-content{
    position: relative;
    z-index: 5;
}

.about-text{

    font-size: 16px;
    line-height: 1.9;
    font-weight: 300;

    color: #4b5563;

    /* margin-bottom: 28px; */

    text-align: center;
}


.highlight{

    font-weight: 600;

    background:
    linear-gradient(
        90deg,
        #9333ea,
        #ec4899
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.specialize-box{
    margin-bottom: 28px;
}

.specialize-box h4{

    text-align: center;

    font-size: 22px;
    font-weight: 400;

    color: #4b5563;

    /* margin-bottom: 22px; */
}

.specialize-grid{

    display: grid;
    grid-template-columns: repeat(2,1fr);

    gap: 18px 50px;

    max-width: 900px;
    margin: auto;
}

.special-item{

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
}

.special-item span{
    font-size: 22px;
    font-weight: 700;
}

.special-item p{

    margin: 0;

    font-size: 20px;
    font-weight: 300;
}


.mission-text{
    margin-bottom: 5px;
}

.red{
    color: #ef4444;
    font-weight: 600;
}

.mission-text strong{
    font-weight: 500;
}


.bottom-quote{

    background:
    linear-gradient(
        90deg,
        #faf5ff,
        #fdf2f8
    );

    border:
    1px solid #e9d5ff;

    border-radius: 22px;

    padding: 10px 20px;

    text-align: center;

    font-size: 16px;
    font-weight: 400;
   

    color: #374151;
}


.about-cards{

    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 26px;
}


.about-card{

    position: relative;

    background: #fff;

    border-radius: 32px;

    padding: 38px;

    overflow: hidden;

    box-shadow:
    0 10px 35px rgba(0,0,0,.08);

    transition:
    transform .45s ease,
    box-shadow .45s ease;
}


.about-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.12);
}


.circle-bg{

    position: absolute;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    top: -65px;
    right: -65px;

    opacity: .12;
}

.red-bg{
    background:
    linear-gradient(
        135deg,
        #ef4444,
        #ec4899
    );
}

.blue-bg{
    background:
    linear-gradient(
        135deg,
        #3b82f6,
        #06b6d4
    )!important;
}

.yellow-bg{
    background:
    linear-gradient(
        135deg,
        #f59e0b,
        #f97316
    )!important;
}


.card-icon{

    width: 95px;
    height: 95px;

    border-radius: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    font-size: 42px;

    margin-bottom: 26px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);

    transition:
    transform .35s ease;

    animation:
    iconPulse 2.8s ease-in-out infinite;
}

/* individual delays */

.card1 .card-icon{
    animation-delay: 0s;
}

.card2 .card-icon{
    animation-delay: .4s;
}

.card3 .card-icon{
    animation-delay: .8s;
}

/* hover */

.info-card:hover .card-icon{

    transform:
    scale(1.12);
}

/* gradients */

.red-gradient{
    background:
    linear-gradient(
        135deg,
        #ef4444,
        #ec4899
    );
}

.blue-gradient{
    background:
    linear-gradient(
        135deg,
        #3b82f6,
        #06b6d4
    );
}

.yellow-gradient{
    background:
    linear-gradient(
        135deg,
        #f59e0b,
        #f97316
    );
}


.about-card h3{

    font-size: 32px;
    font-weight: 500;

    color: #1f2937;

    margin-bottom: 18px;
}

.about-card p{

    font-size: 18px;
    line-height: 1.9;

    color: #6b7280;

    margin: 0;
}

/* =========================================================
   ANIMATIONS
========================================================= */

/* bounce */

@keyframes bounce {

    0%,100%{
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8,0,1,1);
    }

    50%{
        transform: none;
        animation-timing-function: cubic-bezier(0,0,0.2,1);
    }
}

/* pulse */

@keyframes pulse {

    50%{
        opacity: .5;
    }
}

/* pendulum */

@keyframes pendulum{

    0%{
        transform: rotate(-8deg);
    }

    50%{
        transform: rotate(6deg);
    }

    100%{
        transform: rotate(-8deg);
    }
}

/* icon pulse */

@keyframes iconPulse{

    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.08);
    }

    100%{
        transform: scale(1);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

    .section-title h2{
        font-size: 50px;
    }

    .about-cards{
        grid-template-columns: 1fr;
    }

    .about-wrapper{
        padding: 35px 28px;
    }
}

@media(max-width:768px){
/*  */
    /* .about-section{
        padding: 80px 0;
    } */

    .section-title h2{
        font-size: 40px;
    }

    .abt-title-icon{
        font-size: 50px;
    }

    .about-wrapper{
        padding: 26px 20px;
    }

    .about-text{
        font-size: 15px;
        line-height: 1.8;
    }

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

    .special-item{
        justify-content: flex-start;
    }

    .special-item p{
        font-size: 17px;
    }

    .about-card{
        padding: 30px;
    }

    .card-icon{
        width: 82px;
        height: 82px;
        font-size: 34px;
    }

    .about-card h3{
        font-size: 28px;
    }

    .about-card p{
        font-size: 16px;
    }
}
/*====================================
 JOURNEY SECTION
====================================*/
/* =========================================================
   GROWTH JOURNEY SECTION
========================================================= */

.growth-journey{
    position: relative;
    padding: 90px 0 70px;
}

/* =========================================================
   TITLE
========================================================= */

.growth-title{

    text-align: center;

    font-size: 40px;
    font-weight: 400;

    color: #1f2937;

}

.growth-title span{

    display: inline-block;

}


.journey-wrapper{
    position: relative;
}


.journey-line{

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 4px;

    transform: translateY(-50%);

    background:
    linear-gradient(
        90deg,
        rgba(253,186,116,.6),
        rgba(252,211,77,.6),
        rgba(253,186,116,.6)
    );

    box-shadow:
    0 0 10px 2px rgba(249,115,22,.25);

    z-index: 1;
}

/* =========================================================
   JOURNEY GRID
========================================================= */

.journey-grid{

    position: relative;
    z-index: 5;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 5px;
}

/* =========================================================
   JOURNEY CARD
========================================================= */

.journey-card{

    position: relative;

    /* width: 250px; */

    background: #fff;

    border-radius: 24px;

    padding: 15px;

    text-align: center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);

    transition:
    transform .4s ease,
    box-shadow .4s ease;
}

/* hover */

.journey-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 18px 35px rgba(0,0,0,.12);
}

/* connector */

.journey-card::after{

    content: "";

    position: absolute;

    left: 50%;
    bottom: -28px;

    transform: translateX(-50%);

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background:
    rgba(253,186,116,.85);

    border: 3px solid #fff;

    box-shadow:
    0 0 0 2px rgba(249,115,22,.18);

    z-index: 10;
}


.journey-icon-1{

    font-size: 30px;
  display: inline-block;

    animation:
    iconFloat 2.8s ease-in-out infinite;
}


.journey-year{

    font-size: 34px;
    font-weight: 700;

    margin-bottom: 14px;

    background:
    linear-gradient(
        90deg,
        #9333ea,
        #ec4899
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.journey-text{

    font-size: 18px;
    line-height: 1.6;

    color: #4b5563;

    margin-bottom: 18px;
}



.award-box{

    margin-top: 10px;
}

/* anchor */

.award-link{

    width: 58px;
    height: 58px;

    border-radius: 12px;

    overflow: hidden;

    display: inline-block;

    border: 1px solid #e5e7eb;

    box-shadow:
    0 3px 10px rgba(0,0,0,.08);

    transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.award-link:hover{

    transform:
    scale(1.12);

    box-shadow:
    0 8px 18px rgba(0,0,0,.18);
}

.award-link img{

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.award-title{

    margin-top: 10px;

    font-size: 13px;
    line-height: 1.5;

    color: #6b7280;
}

/* multiple award */

.multi-award{

    display: flex;
    justify-content: center;

    gap: 10px;
}

/* =========================================================
   STATS
========================================================= */

.stats-grid{

    margin-top: 120px;

    display: grid;
    grid-template-columns: repeat(4,1fr);

    gap: 24px;
}

/* =========================================================
   STAT CARD
========================================================= */

.stat-card{

    background: #fff;

    border-radius: 24px;

    padding: 34px 25px;

    text-align: center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);

    transition:
    transform .35s ease,
    box-shadow .35s ease;
}

/* hover */

.stat-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 16px 30px rgba(0,0,0,.12);
}


.stat-emoji{

    font-size: 40px;

    margin-bottom: 12px;

    display: inline-block;

    animation:
    zoomPulse 2.2s ease-in-out infinite;
}

/* =========================================================
   NUMBER
========================================================= */

.stat-number{

    font-size: 48px;
    font-weight: 700;

    margin-bottom: 10px;

    background:
    linear-gradient(
        90deg,
        #9333ea,
        #ec4899
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================================
   LABEL
========================================================= */

.stat-label{

    font-size: 18px;

    color: #6b7280;
}

/* =========================================================
   ANIMATIONS
========================================================= */

/* rocket */

@keyframes rocketFloat{

    0%{
        transform:
        translateY(0px)
        rotate(-8deg);
    }

    50%{
        transform:
        translateY(-8px)
        rotate(8deg);
    }

    100%{
        transform:
        translateY(0px)
        rotate(-8deg);
    }
}

/* icon float */

@keyframes iconFloat{

    0%{
        transform:
        translateY(0px)
        scale(1);
    }

    50%{
        transform:
        translateY(-6px)
        scale(1.08);
    }

    100%{
        transform:
        translateY(0px)
        scale(1);
    }
}

/* stat zoom */

@keyframes zoomPulse{

    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.14);
    }

    100%{
        transform: scale(1);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){

    .journey-grid{
        gap: 20px;
    }

    .journey-card{
        width: 210px;
    }
}

@media(max-width:991px){

    .growth-title{
        font-size: 46px;
    }

    .journey-line{
        display: none;
    }

    .journey-grid{

        flex-wrap: wrap;
        justify-content: center;

        gap: 30px;
    }

    .journey-card{
        width: calc(50% - 20px);
    }

    .journey-card::after{
        display: none;
    }

    .stats-grid{
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px){

    .growth-journey{
        padding: 70px 0 60px;
    }

    .growth-title{
        font-size: 38px;
        margin-bottom: 55px;
    }

    .journey-card{
        width: 100%;
        max-width: 320px;
    }

    .journey-year{
        font-size: 28px;
    }

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

    .stats-grid{
        margin-top: 70px;
        gap: 18px;
    }

    .stat-card{
        padding: 28px 18px;
    }

    .stat-emoji{
        font-size: 48px;
    }

    .stat-number{
        font-size: 36px;
    }

    .stat-label{
        font-size: 16px;
    }
}

@media(max-width:576px){

    .stats-grid{
        grid-template-columns: 1fr;
    }
}
/*==================================
 SERVICES SECTION
==================================*/


.services-section{
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        #f7f5fb 0%,
        #eef4ff 100%
    );
}


.service-blob{
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .25;
    z-index: 0;
}

.blob-1{
    width: 320px;
    height: 320px;
    background: #ff6bb3;
    top: -120px;
    left: -100px;
}

.blob-2{
    width: 300px;
    height: 300px;
    background: #67b8ff;
    right: -120px;
    bottom: -120px;
}

.section-title{
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.section-title h2{
    font-size: 44px;
    font-weight: 700;
    color: #7b3ff2;
    margin-bottom: 18px;
}

.service-subtitle{
    max-width: 720px;
    margin: auto;
    line-height: 1.9;
    color: #555;
    font-size: 17px;
}


.services-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

/*==================================
CARD
==================================*/

.service-card{
    position: relative;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(10px);
    border-radius: 28px;
    padding: 28px 22px 22px;
    overflow: hidden;
    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition: .45s ease;
    border: 1px solid rgba(255,255,255,.8);

    min-height: 500px;
}

.service-card:hover{
    transform: translateY(-10px);
    box-shadow:
    0 20px 45px rgba(0,0,0,.12);
}



.pink-card:hover{
    background: rgba(255,84,138,.10);
}

.blue-card:hover{
    background: rgba(0,183,255,.10);
}

.green-card:hover{
    background: rgba(0,212,124,.10);
}

.orange-card:hover{
    background: rgba(255,166,0,.10);
}

.purple-card:hover{
    background: rgba(138,92,246,.10);
}
/* 
.service-card:hover{
    transform: scale(1.2);
} */

/*==================================
BOTTOM ROTATING IMAGE
==================================*/

.card-corner-shape{
    position: absolute;
    width: 70px;
    bottom: -12px;
    right: -12px;
    opacity: .28;
    animation: rotateShape 10s linear infinite;
    pointer-events: none;
}

/*==================================
ICON
==================================*/

.service-icon{
    width: 64px;
    height: 64px;

    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 25px;

    margin-bottom: 18px;

    box-shadow:
    0 10px 20px rgba(0,0,0,.12);

}

.service-card:hover .service-icon{
    transform: scale(1.08) rotate(-6deg);
}

.pink-gradient{
    background: linear-gradient(
        135deg,
        #ff5b8f,
        #ff3cb0
    );
}

.blue-gradient{
    background: linear-gradient(
        135deg,
        #4f8cff,
        #00b7ff
    );
}

.green-gradient{
    background: linear-gradient(
        135deg,
        #00d26a,
        #00c9a7
    );
}

.orange-gradient{
    background: linear-gradient(
        135deg,
        #ffb100,
        #ff7a00
    );
}

.purple-gradient{
    background: linear-gradient(
        135deg,
        #8b5cf6,
        #3b82f6
    );
}

.service-emoji{
    font-size: 42px;
    margin-bottom: 12px;

    display: inline-block;

    animation: emojiFloat 3s ease-in-out infinite;
}


@keyframes emojiFloat{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-10px);
    }

    100%{
        transform: translateY(0px);
    }

}
/*==================================
TEXT
==================================*/

.service-card h3{
    font-size: 28px;
    line-height: 1.35;
    margin-bottom: 16px;
    color: #222;
    font-weight: 700;
}

.service-card p{
    color: #666;
    line-height: 1.8;
    margin-bottom: 24px;
    font-size: 15px;
}

/*==================================
FEATURES
==================================*/

.service-features{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-item{
    display: flex;
    align-items: center;
    gap: 10px;

    color: #555;
    font-size: 14px;
}

.service-item i{
    color: #00c853;
    font-size: 13px;
}

/*==================================
BUTTON
==================================*/

.service-btn{
    margin-top: 28px;

    height: 48px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    color: #fff;

    font-size: 15px;
    font-weight: 600;

    transition: .4s ease;
}

.service-btn:hover{
    transform: translateY(-3px);
}

.pink-btn{
    background: linear-gradient(
        90deg,
        #ff5b8f,
        #ff3cb0
    );
}

.blue-btn{
    background: linear-gradient(
        90deg,
        #4f8cff,
        #00b7ff
    );
}

.green-btn{
    background: linear-gradient(
        90deg,
        #00d26a,
        #00c17c
    );
}

.orange-btn{
    background: linear-gradient(
        90deg,
        #ffb100,
        #ff7a00
    );
}

.purple-btn{
    background: linear-gradient(
        90deg,
        #9b5cff,
        #ff3ca6
    );
}

/*==================================
ANIMATIONS
==================================*/

@keyframes floatY{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-14px);
    }

    100%{
        transform: translateY(0px);
    }

}

@keyframes iconPulse{

    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.08);
    }

    100%{
        transform: scale(1);
    }

}

@keyframes emojiZoom{

    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.12);
    }

    100%{
        transform: scale(1);
    }

}

@keyframes rotateShape{

    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1100px){

    .services-grid{
        grid-template-columns: repeat(2,1fr);
    }

}

@media(max-width:768px){

    .services-grid{
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .section-title h2{
        font-size: 34px;
    }

    .service-card{
        min-height: auto;
        padding: 26px 20px;
    }

    .service-card h3{
        font-size: 24px;
    }

    .service-shape{
        display: none;
    }

}

@media(max-width:480px){

    .section-title h2{
        font-size: 30px;
    }

    .service-subtitle{
        font-size: 15px;
    }

    .service-card{
        border-radius: 24px;
    }

    .service-icon{
        width: 58px;
        height: 58px;
        font-size: 22px;
    }

    .service-emoji{
        font-size: 36px;
    }

}


.corner-emoji{
    position: absolute;
    right: -35px;
    bottom: -20px;
    font-size: 60px;
    opacity: .16;
    pointer-events: none;
    animation: rotateEmoji 8s linear infinite;
}

/* rotation animation */

@keyframes rotateEmoji{

    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }

}
/*==================================
 CTA SECTION
==================================*/

.service-cta{
    position: relative;

    margin-top: 90px;

    padding: 20px 20px;

    border-radius: 40px;

    overflow: hidden;

    text-align: center;

    background:
    linear-gradient(
        90deg,
        #facc15,
        #fb923c,
        #ef4444
    );

    box-shadow:
    0 25px 60px rgba(251,146,60,.35);
}


.cta-floating-emoji{
    position: absolute;

    opacity: .18;

    pointer-events: none;

    user-select: none;
}

.emoji-star{
    top: 10px;
    left: 20px;

    font-size: 60px;

    animation: floatStar 6s ease-in-out infinite;
}

.emoji-balloon{
    right: 15px;
    bottom: 10px;

    font-size: 70px;

    animation: floatBalloon 7s ease-in-out infinite;
}


.cta-content{
    position: relative;
    z-index: 2;
}


.cta-rocket{
    display: inline-block;

    font-size: 50px;

    margin-bottom: 18px;

    animation: rocketSwing 3s ease-in-out infinite;
}


.service-cta h3{
    font-size: 52px;
    font-weight: 800;

    line-height: 1.2;

    color: #fff;

    margin-bottom: 22px;
}


.service-cta p{
    max-width: 760px;

    margin: auto auto 40px;

    font-size: 20px;
    line-height: 1.9;

    color: rgba(255,255,255,.92);
}


.cta-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 18px 42px;

    border-radius: 100px;

    background: #fff;

    color: #ea580c;

    font-size: 18px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
    0 15px 35px rgba(0,0,0,.15);

    transition: .35s ease;
}

.cta-btn:hover{
    transform: translateY(-6px) scale(1.04);
}

/*==================================
 ANIMATIONS
==================================*/

@keyframes rocketSwing{

    0%{
        transform: rotate(-8deg);
    }

    50%{
        transform: rotate(8deg);
    }

    100%{
        transform: rotate(-8deg);
    }

}

@keyframes floatStar{

    0%{
        transform: translate(0px,0px);
    }

    50%{
        transform: translate(14px,10px);
    }

    100%{
        transform: translate(0px,0px);
    }

}

@keyframes floatBalloon{

    0%{
        transform: translate(0px,0px);
    }

    50%{
        transform: translate(-10px,-8px);
    }

    100%{
        transform: translate(0px,0px);
    }

}

/*==================================
 RESPONSIVE
==================================*/

@media(max-width:991px){

    .service-cta{
        padding: 70px 30px;
    }

    .service-cta h3{
        font-size: 40px;
    }

}

@media(max-width:767px){

    .service-cta{
        padding: 60px 24px;
        border-radius: 30px;
    }

    .service-cta h3{
        font-size: 32px;
    }

    .service-cta p{
        font-size: 17px;
        line-height: 1.8;
    }

    .cta-btn{
        width: 100%;
        padding: 16px 20px;
        font-size: 16px;
    }

    .cta-rocket{
        font-size: 56px;
    }

    .emoji-star{
        font-size: 54px;
    }

    .emoji-balloon{
        font-size: 65px;
    }

}
/*====================================
 CONTACT SECTION
====================================*/

/*===================================
CONTACT SECTION
===================================*/

.contact-section{
    position: relative;
    overflow: hidden;
    background: #f5f7ff;
}

/*===================================
BG EMOJIS
===================================*/

.contact-bg-emoji{
    position: absolute;
    opacity: .12;
    z-index: 0;
    user-select: none;
    pointer-events: none;
}

.emoji-1{
    top: 80px;
    left: 20px;
    font-size: 90px;

    animation:
    floatEmoji 7s ease-in-out infinite;
}

.emoji-2{
    right: 30px;
    top: 120px;
    font-size: 100px;

    animation:
    floatEmoji 8s ease-in-out infinite;
}

.emoji-3{
    left: 60px;
    bottom: 120px;
    font-size: 90px;

    animation:
    floatEmoji 6s ease-in-out infinite;
}

/*===================================
TITLE
===================================*/

.contact-title-wrap{
    margin-bottom: 70px;
}

.contact-title-emoji{
    font-size: 70px;
    margin-bottom: 18px;

    display: inline-block;

    animation:
    pendulum 2.8s ease-in-out infinite;
}

.contact-main-title{
    font-size: 58px;
    font-weight: 700;
    color: #6c4df6;
    margin-bottom: 16px;
}

.contact-subtitle{
    font-size: 17px;
    color: #555;
}

/*===================================
WRAPPER
===================================*/

.contact-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: start;
}

/*===================================
FORM CARD
===================================*/

.contact-form-card{
    background: #fff;
    border-radius: 28px;
    padding: 34px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
}

.form-heading{
    font-size: 34px;
    margin-bottom: 30px;

    color: #222;

    display: flex;
    align-items: center;
    gap: 12px;
}

.form-heading span{
    display: inline-block;

}

.form-group{
    margin-bottom: 22px;
}

.form-group label{
    display: block;
    margin-bottom: 10px;

    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.form-group input,
.form-group textarea{
    width: 100%;
    border: 1px solid #e4e4e4;

    border-radius: 16px;

    padding: 16px 18px;

    font-size: 15px;

    transition: .3s;
}

.form-group input:focus,
.form-group textarea:focus{
    outline: none;

    border-color: #7c4dff;

    box-shadow:
    0 0 0 4px rgba(124,77,255,.12);
}

.form-group textarea{
    resize: none;
}

.contact-submit-btn{
    width: 100%;
    border: none;

    height: 58px;

    border-radius: 16px;

    background:
    linear-gradient(
        90deg,
        #3b82f6,
        #a855f7
    );

    color: #fff;

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;

    transition: .35s;
}

.contact-submit-btn:hover{
    transform: translateY(-4px);
}

/*===================================
RIGHT SIDE
===================================*/

.contact-right-side{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/*===================================
INFO CARD
===================================*/

.contact-info-card{
    background: #fff;

    border-radius: 22px;

    padding: 22px 24px;

    display: flex;
    align-items: center;
    gap: 18px;

    box-shadow:
    0 8px 22px rgba(0,0,0,.08);
}

.contact-info-icon{
    width: 72px;
    height: 72px;

    border-radius: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    font-size: 28px;

    flex-shrink: 0;

    animation:
    pendulum 3s ease-in-out infinite;
}

.contact-info-content span{
    display: block;
    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.contact-info-content h4{
    font-size: 17px;
    line-height: 1.7;
    color: #222;
}

/*===================================
GRADIENTS
===================================*/

.green-gradient{
    background:
    linear-gradient(
        135deg,
        #00d26a,
        #16db93
    );
}

.blue-gradient{
    background:
    linear-gradient(
        135deg,
        #38bdf8,
        #2563eb
    );
}

.pink-gradient{
    background:
    linear-gradient(
        135deg,
        #ff4d94,
        #ff6fa5
    );
}

/*===================================
MAP CARD
===================================*/

.contact-map-card{
    overflow: hidden;

    border-radius: 24px;

    background: #fff;

    box-shadow:
    0 10px 24px rgba(0,0,0,.08);
}

.map-card-top{
    background:
    linear-gradient(
        90deg,
        #3b82f6,
        #a855f7
    );

    text-align: center;

    padding: 24px;
}

.map-card-top h3{
    color: #fff;
    font-size: 28px;
}

.map-frame iframe{
    width: 100%;
    height: 260px;
    border: none;
    display: block;
}

.map-bottom-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 18px;
}

.map-bottom-bar p{
    font-size: 14px;
    line-height: 1.7;
    color: #444;
}

.map-btn{
    flex-shrink: 0;

    background: #5b6cff;
    color: #fff;

    padding: 12px 18px;

    border-radius: 14px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;
}

/*===================================
SOCIAL BOX
===================================*/

.social-follow-box{
    padding: 28px;

    border-radius: 24px;

    background:
    linear-gradient(
        90deg,
        #ffcc00,
        #ff6b6b
    );

    text-align: center;

    box-shadow:
    0 12px 26px rgba(0,0,0,.1);
}

.social-follow-box h4{
    color: #fff;
    font-size: 24px;
    margin-bottom: 22px;
}

.emoji-social-links{
    display: flex;
    justify-content: center;
    gap: 16px;
}

.emoji-social-links a{
    width: 58px;
    height: 58px;

    background: #fff;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;

    text-decoration: none;

    transition: .35s;
}

.emoji-social-links a:hover{
    transform:
    translateY(-8px)
    scale(1.12);
}

/*===================================
ANIMATIONS
===================================*/

@keyframes pendulum{

    0%{
        transform: rotate(0deg);
    }

    25%{
        transform: rotate(12deg);
    }

    50%{
        transform: rotate(0deg);
    }

    75%{
        transform: rotate(-12deg);
    }

    100%{
        transform: rotate(0deg);
    }

}

@keyframes floatEmoji{

    0%{
        transform:
        translateY(0px);
    }

    50%{
        transform:
        translateY(-18px);
    }

    100%{
        transform:
        translateY(0px);
    }

}

/*===================================
RESPONSIVE
===================================*/

@media(max-width:991px){

    .contact-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:768px){

    .contact-main-title{
        font-size: 42px;
    }

    .contact-form-card{
        padding: 26px;
    }

    .contact-info-card{
        flex-direction: column;
        align-items: flex-start;
    }

    .map-bottom-bar{
        flex-direction: column;
        align-items: flex-start;
    }

    .emoji-social-links{
        flex-wrap: wrap;
    }

}

@media(max-width:576px){

    .contact-main-title{
        font-size: 34px;
    }

    .form-heading{
        font-size: 26px;
    }

    .contact-title-emoji{
        font-size: 56px;
    }

}


/*====================================
 FOOTER
====================================*/

/*==================================
 FOOTER TOP CTA
==================================*/

.footer-top-cta{
    text-align: center;
    margin-bottom: 70px;
}

.footer-top-emoji{
    font-size: 50px;
    margin-bottom: 8px;
    display: inline-block;
    animation: footerParty 4s ease-in-out infinite;
}

.footer-top-cta h3{
    font-size: clamp(2rem,4vw,2rem);
    color: var(--text-dark);
    /* margin-bottom: 18px; */
}

.footer-top-cta p{
    max-width: 720px;
    margin: auto;
    font-size: var(--fs-lg);
    line-height: 1.8;
    color: var(--text);
}

/*==================================
 FOOTER
==================================*/

.magic-footer{
    position: relative;
    overflow: hidden;
    padding: 100px 0 50px;
    
}

/*==================================
 BLOBS
==================================*/

.footer-blob{
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .35;
}

.footer-blob-1{
    width: 320px;
    height: 320px;
    background: #ffffff;
    top: -120px;
    left: -120px;
}

.footer-blob-2{
    width: 300px;
    height: 300px;
    background: #d9c2ff;
    bottom: -100px;
    right: -100px;
}

/*==================================
 FLOATING EMOJIS
==================================*/

.footer-float{
    position: absolute;
    opacity: .18;
    z-index: 0;
    animation: floatEmoji 8s infinite ease-in-out;
}

.footer-float-1{
    font-size: 70px;
    left: 4%;
    bottom: 12%;
}

.footer-float-2{
    font-size: 60px;
    top: 8%;
    right: 5%;
}

.footer-float-3{
    font-size: 50px;
    left: 50%;
    top: 20%;
}

.footer-float-4{
    font-size: 90px;
    right: 8%;
    bottom: 8%;
}

/*==================================
 GRID
==================================*/

.footer-grid{
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;

    margin-bottom: 70px;
}

/*==================================
 ABOUT
==================================*/

.footer-logo{
    font-size: 34px;
    font-weight: var(--fw-bold);
    color: var(--text-dark);
    margin-bottom: 22px;
}

.footer-about p{
    color: var(--text);
    line-height: 1.9;
    margin-bottom: 26px;
}

/*==================================
 SOCIALS
==================================*/

.footer-socials{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.footer-socials a{
     width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    transition: var(--transition);
    color: black;
    font-weight: 400;

}

.footer-socials a:hover{
    transform: translateY(-8px) rotate(8deg);
}

/*==================================
 CONTACT LIST
==================================*/

.footer-contact-list{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-contact-list a{
    color: var(--text-dark);
    line-height: 1.7;
    transition: var(--transition);
}

.footer-contact-list a:hover{
    transform: translateX(5px);
}

.footer-app-store{
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.footer-app-store img{
    width: 140px;
    height: auto;
    border: 2px solid #554e4e;
    border-radius: 6px;
}

/*==================================
 LINKS
==================================*/

.footer-links h4{
    font-size: var(--fs-lg);
    color: var(--text-dark);
    margin-bottom: 24px;
}

.footer-links ul{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links a{
    color: var(--text);
    transition: var(--transition);
}

.footer-links a:hover{
    color: var(--primary);
    transform: translateX(4px);
}

/*==================================
 NEWSLETTER
==================================*/

.footer-newsletter{
    position: relative;
    z-index: 2;

    text-align: center;

}

.newsletter-emoji{
    font-size: 40px;
    display: inline-block;
    animation: pulseEmoji 3s infinite ease-in-out;
}

.footer-newsletter h3{
    font-size: clamp(2rem,4vw,2rem);
    color: var(--text-dark);
   
}

.footer-newsletter p{
    color: var(--text);
    margin-bottom: 6px;
    font-size: var(--fs-md);
}

.newsletter-form{
    max-width: 650px;
    margin: auto;

    display: flex;
    align-items: center;
    gap: 18px;
}

.footnewsletter-form input{
    flex: 1;
      margin-bottom:20px;
    height: 40px;

    border: none;
    outline: none;
     border: 1px solid rgba(255,255,255,.4);
    border-radius: 100px;

    background: rgba(255,255,255,.65);

    padding: 0 24px;

    font-size: var(--fs-base);

    box-shadow: 0 10px 25px rgba(0,0,0,.05);
}

.footnewsletter-form button{
    height: 40px;
    border: none;
    cursor: pointer;

    padding: 0 34px;

    border-radius: 100px;

    background:transparent;

    color: var(--text-white);

    font-weight: var(--fw-semibold);

    font-size: var(--fs-base);

    transition: var(--transition);
}

.footnewsletter-form button:hover{
    transform: translateY(-4px);
}

/*==================================
 FOOTER BOTTOM
==================================*/

.footer-bottom{
    position: relative;
    z-index: 2;

    padding-top: 35px;
    border-top: 1px solid rgba(255,255,255,.4);

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

    margin-bottom: 35px;
}

.footer-bottom p{
    color: var(--text-dark);
    line-height: 1.7;
}

.footer-bottom-links{
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-bottom-links a{
    color: var(--text-dark);
}

/*==================================
 BOTTOM EMOJIS
==================================*/

.footer-bottom-emojis{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    font-size: 42px;
}

.footer-bottom-emojis span{
    display: inline-block;
    animation: emojiDance 4s infinite ease-in-out;
}

.footer-bottom-emojis span:nth-child(2){
    animation-delay: .3s;
}

.footer-bottom-emojis span:nth-child(3){
    animation-delay: .6s;
}

.footer-bottom-emojis span:nth-child(4){
    animation-delay: .9s;
}

.footer-bottom-emojis span:nth-child(5){
    animation-delay: 1.2s;
}

.footer-bottom-emojis span:nth-child(6){
    animation-delay: 1.5s;
}

.footer-bottom-emojis span:nth-child(7){
    animation-delay: 1.8s;
}

/*==================================
 ANIMATIONS
==================================*/

@keyframes footerParty{

    0%,100%{
        transform: scale(1) rotate(0deg);
    }

    25%{
        transform: scale(1.08) rotate(-8deg);
    }

    50%{
        transform: scale(1.14) rotate(8deg);
    }

    75%{
        transform: scale(1.08) rotate(-5deg);
    }

}

@keyframes floatEmoji{

    0%,100%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-25px);
    }

}

@keyframes pulseEmoji{

    0%,100%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.14);
    }

}

@keyframes emojiDance{

    0%,100%{
        transform: translateY(0px) rotate(0deg);
    }

    50%{
        transform: translateY(-10px) rotate(10deg);
    }

}

/*==================================
 RESPONSIVE
==================================*/

@media(max-width:1100px){

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

}

@media(max-width:768px){

    .newsletter-form{
        flex-direction: column;
    }

    .newsletter-form input,
    .newsletter-form button{
        width: 100%;
    }

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

}

@media(max-width:576px){

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

    .footer-socials{
        flex-wrap: wrap;
    }

    .footer-bottom-emojis{
        flex-wrap: wrap;
        font-size: 34px;
    }

}

/* Tablet Devices (768px - 992px) */
@media (max-width: 992px) {
    .cloud-icon,
    .cloud1-icon{
        font-size: clamp(35px, 7vw, 60px);
        top: 15px;
    }
    
    .star-icon{
        left: 15%;
        top: 25px;
    }
    
    .star-icon1{
        right: 15%;
        top: 25px;
    }
    
    .sun-icon{
        font-size: clamp(30px, 6vw, 45px);
        top: 20px;
    }
    
    .sparkle-icon{
        right: 12%;
        top: 80px;
        font-size: clamp(16px, 4vw, 22px);
    }
}

/* Mobile Landscape (576px - 768px) */
@media (max-width: 768px) {
    .cloud-icon,
    .cloud1-icon{
        font-size: clamp(30px, 6vw, 50px);
        top: 10px;
        opacity: 0.7;
    }
    
    .star-icon{
        left: 10%;
        top: 30px;
        font-size: clamp(12px, 3.5vw, 18px);
    }
    
    .star-icon1{
        right: 10%;
        top: 30px;
        font-size: clamp(12px, 3.5vw, 18px);
    }
    
    .sun-icon{
        font-size: clamp(25px, 5vw, 38px);
        top: 25px;
        left: 50%;
    }
    
    .sparkle-icon{
        right: 8%;
        top: 100px;
        font-size: clamp(14px, 3.5vw, 20px);
    }
}

@media (max-width: 576px) {
    .cloud-icon,
    .cloud1-icon{
        font-size: clamp(25px, 5vw, 40px);
        top: 5px;
        opacity: 0.5;
    }
    
    .cloud-icon{
        right: -10px; /* Slightly hidden for better fit */
    }
    
    .cloud1-icon{
        left: -10px;
    }
    
    .star-icon{
        left: 5%;
        top: 35px;
        font-size: clamp(10px, 3vw, 14px);
    }
    
    .star-icon1{
        right: 5%;
        top: 35px;
        font-size: clamp(10px, 3vw, 14px);
    }
    
    .sun-icon{
        font-size: clamp(20px, 4.5vw, 30px);
        top: 30px;
        left: 50%;
    }
    
    .sparkle-icon{
        right: 5%;
        top: 120px;
        font-size: clamp(12px, 3vw, 16px);
        opacity: 0.8;
    }
}

/* Large Desktop (above 1200px) */
@media (min-width: 1200px) {
    .star-icon{
        left: 26%;
    }
    
    .star-icon1{
        right: 26%;
    }
    
    .sparkle-icon{
        right: 25%;
        top: 90px;
    }
}

/* Extra Large Desktop (above 1400px) */
@media (min-width: 1400px) {
    .cloud-icon,
    .cloud1-icon{
        font-size: 90px;
    }
    
    .star-icon,
    .star-icon1{
        font-size: 28px;
    }
    
    .sun-icon{
        font-size: 65px;
    }
    
    .sparkle-icon{
        font-size: 32px;
    }
}


.floating-shape{
    position: absolute;
    animation: floatShape 6s infinite ease-in-out;
}

.shape-abt{
    width: clamp(35px, 6vw, 60px);
    height: clamp(35px, 6vw, 60px);
    top: 10%;
    left: 5%;
}

.shape-abt-1{
    width: clamp(35px, 6vw, 60px);
    height: clamp(35px, 6vw, 60px);
    bottom: 15%;
    right: 2%;
}

/* Tablet */
@media (max-width: 768px) {
    .shape-abt,
    .shape-abt-1{
        width: 40px;
        height: 40px;
        opacity: 0.6;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .shape-abt,
    .shape-abt-1{
        width: 30px;
        height: 30px;
        opacity: 0.4;
        display: none; 
    }
}


@media (max-width: 992px) {
    .journey-shape{
        width: clamp(30px, 5vw, 50px) !important;
        opacity: 0.5;
    }
    
    .shape-1,
    .shape-2,
    .shape-3,
    .shape-4{
        width: auto;
    }
    
    .shape-1 img,
    .shape-2 img,
    .shape-3 img,
    .shape-4 img{
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 576px) {
    .journey-shape{
        display: none; 
    }
}


@media (max-width: 768px) {
    .service-shape{
        opacity: 0.4;
    }
    
    .service-shape-1,
    .service-shape-2,
    .service-shape-3,
    .service-shape-4{
        width: auto;
    }
    
    .service-shape-1 img,
    .service-shape-2 img,
    .service-shape-3 img,
    .service-shape-4 img{
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 576px) {
    .service-shape{
        display: none;
    }
}


@media (max-width: 768px) {
    .contact-shape{
        opacity: 0.4;
    }
    
    .contact-shape-1 img,
    .contact-shape-2 img,
    .contact-shape-3 img{
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 576px) {
    .contact-shape{
        display: none;
    }
}


@media (max-width: 992px) {
    .footer-shape{
        opacity: 0.3;
    }
    
    .footer-shape-1 img,
    .footer-shape-2 img,
    .footer-shape-3 img,
    .footer-shape-4 img,
    .footer-shape-5 img,
    .footer-shape-6 img{
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 768px) {
    .footer-shape{
        display: none;
    }
}

@media (max-width: 992px) {
    .about-blob,
    .journey-blob,
    .service-blob,
    .contact-blob,
    .footer-glow{
        opacity: 0.25;
    }
    
    .blob-1,
    .blob-2,
    .blob-3{
        width: clamp(150px, 25vw, 250px);
        height: clamp(150px, 25vw, 250px);
    }
}

@media (max-width: 576px) {
    .about-blob,
    .journey-blob,
    .service-blob,
    .contact-blob{
        opacity: 0.15;
        display: none;
    }
}

@media (max-width: 576px) {
    .floating-icon:not(.cloud-icon):not(.cloud1-icon) {
        display: none;
    }
    
    .cloud-icon,
    .cloud1-icon{
        opacity: 0.3;
        font-size: 30px;
    }
    .floating-shape,
    .journey-shape,
    .service-shape,
    .contact-shape,
    .footer-shape,
    .about-blob,
    .journey-blob,
    .service-blob,
    .contact-blob {
        display: none;
    }
}




/* =========================
   Coming Soon Section
========================= */

.coming-soon-section{

    padding: 150px 20px;
    overflow: hidden;
}

.coming-soon-content{
  text-align: center;
    position: relative;
}


.coming-image{
    animation: dropAnimation 1.5s ease forwards,
               floatingAnimation 3s ease-in-out infinite;
}

.coming-image img{
    width: 100%;
    max-width: 480px;
    margin: auto;
}

/* Ball Drop Effect */

@keyframes dropAnimation{

    0%{
        transform: translateY(-500px) scale(0.5);
        opacity: 0;
    }

    60%{
        transform: translateY(30px) scale(1.05);
        opacity: 1;
    }

    80%{
        transform: translateY(-10px);
    }

    100%{
        transform: translateY(0);
        opacity: 1;
    }

}

/* Floating Animation */

@keyframes floatingAnimation{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-15px);
    }

    100%{
        transform: translateY(0px);
    }

}



.coming-soon-content h1{
    font-size: 30px;
    font-weight: 700;
    color: var(--primary);
    
}

.coming-soon-content p{
    font-size: 16px;
  
}

.coming-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: #4f46e5;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 400;
    transition: 0.3s;
}

.coming-btn:hover{
    background: #111;
    transform: translateY(-3px);
}

/* =========================
   Responsive
========================= */

@media(max-width:768px){

    .coming-soon-content{
        padding: 40px 25px;
    }

    .coming-soon-content h1{
        font-size: 34px;
    }

    .coming-soon-content p{
        font-size: 16px;
    }

}