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

body {
    font-family: 'Poppins', sans-serif;
    background: #f8f9ff;
    padding-top: 90px;
}

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

.navbar{
    position:fixed;
    top:0;
    z-index:1000;

    width:100%;
    height:90px;

    background:rgba(255,245,250,.95);
    backdrop-filter:blur(18px);

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

    padding:0 7%;

    transition:.35s;
}

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

/*====================================
            LOGO
====================================*/

.logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
}

.logo img{
    width:140px;
}

.logo h2{
    font-size:24px;
    line-height:1.2;
    color:#23235f;
}

.logo span{
    color:#f57bc1;
}

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

.nav-links{
    display:flex;
    align-items:center;
    gap:40px;
    list-style:none;
}

.nav-links li{
    position:relative;
}

.nav-links a{

    text-decoration:none;
    color:#23235f;

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

    transition:.3s;
}

.nav-links>a:hover{
    color:#ff63b3;
}

/* underline */

.nav-links li>a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:#ff63b3;

    transition:.35s;

}

.nav-links li>a:hover::after{

    width:100%;

}

/*====================================
          DROPDOWN
====================================*/

/* .arrow{

    font-size:12px;

    margin-left:6px;

} */

.dropdown-menu{

    position:absolute;

    top:55px;
    left:0;

    width:260px;

    list-style:none;

    background:#fff;

    border-radius:18px;

    padding:12px 0;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu li{

    width:100%;

}

.dropdown-menu a{

    display:block;

    padding:14px 22px;

    color:#2f3467;

    font-size:15px;

}

.dropdown-menu a:hover{

    background:#fff2f8;

    color:#ff63b3;

    padding-left:28px;

}

.dropdown-menu a::after{

    display:none;

}

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

.right{

    display:flex;

    align-items:center;

    gap:18px;

}

.pickup-btn{

    text-decoration:none;

    color:#fff;

    background:#23235f;

    padding:14px 32px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.pickup-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(35,35,95,.25);

}

/*====================================
      HAMBURGER
====================================*/

.menu-btn{

    display:none;

    width:34px;

    cursor:pointer;

}

.menu-btn span{

    display:block;

    height:3px;

    margin:6px 0;

    background:#23235f;

    border-radius:20px;

    transition:.35s;

}


/*================ HERO =================*/

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 70px 70px 70px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff8fd, #f7fbff);
}

.hero-left {
    width: 48%;
    z-index: 2;
}

.tag {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 40px;
    background: #ffe6f5;
    color: #ff4ba2;
    font-weight: 700;
    margin-bottom: 25px;
    animation: fadeUp 1s ease;
}

.title {
    font-size: 45px;
    line-height: 0.95;
    letter-spacing: -2px;
    color: #1d2255;
    font-family: "Poppins", serif;
    animation: fadeLeft 1s ease;
    font: weight 700px;
}

.title .pink {
    color: #ff5ea9;
}

.subtitle {

    font-size: 19px;

    font-weight: 400;

    color: #6b6f8f;

    line-height: 1.8;

    max-width: 600px;

}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    animation: fadeUp 1.5s ease;
}

.btn-primary {

    color: white;
    text-decoration: none;
    padding: 18px 34px;
    border-radius: 50px;
    font-weight: 700;
    transition: .35s;
    box-shadow: 0 15px 30px rgba(31, 35, 92, .25);
    background: linear-gradient(90deg,
            #f468b4,
            #77c4ff);
}

.btn-primary:hover {
    transform: translateY(-8px);
}

.btn-outline {
    padding: 18px 34px;
    border: 2px solid #23275f;
    border-radius: 50px;
    color: #23275f;
    text-decoration: none;
    font-weight: 700;
    transition: .35s;
}

.btn-outline:hover {
    background: #23275f;
    color: white;
}

.stats {
    display: flex;
    gap: 25px;
    margin-top: 70px;
}

.card {
    background: white;
    border-radius: 22px;
    padding: 22px;
    width: 160px;
    height: 120px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
    transition: .35s;
    animation: floatCard 5s infinite ease-in-out;
}

.card:hover {
    transform: translateY(-12px);
}

.card h2 {
    color: #ff5ca9;
    font-size: 34px;
}

.card p {
    color: #6a6f90;
}

.btn-primary,
.btn-outline {

    padding: 20px 38px;

    font-size: 18px;

}

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

.hero-right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-image {
    width: 650px;
    max-width: 100%;
    border-radius: 35px;
    object-fit: cover;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .15);

    animation: floatImage 4s ease-in-out infinite;
}

.hero-image-wrapper {
    opacity: 0;
    transform: translateX(120px);
    animation: slideInRight 1.2s ease forwards;
}

/*============== BLURS ==============*/

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

.blur1 {
    width: 280px;
    height: 280px;
    background: #ffb3d9;
    left: -100px;
    top: 60px;
}

.blur2 {
    width: 320px;
    height: 320px;
    background: #b8dcff;
    right: -120px;
    bottom: -80px;
}

/*============== ANIMATIONS ==============*/
@keyframes slideInRight {

    from {
        opacity: 0;
        transform: translateX(120px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes floatImage {

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

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

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

}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.about {

    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;

    padding: 120px 70px;

    overflow: hidden;

    background: linear-gradient(135deg, #f8fbff, #fff9fd);

}

/*============ LEFT ============*/

.about-left {

    width: 50%;

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

    opacity: 0;
    transform: translateX(-120px);

}

.about.show .about-left {

    animation: aboutLeft 1.1s ease forwards;

}

.about-image {

    width: 620px;
    max-width: 100%;

    border-radius: 35px;

    display: block;

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

    animation: aboutFloat 4s ease-in-out infinite;

}

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

.about-right {

    width: 45%;

    opacity: 0;

    transform: translateX(120px);

}

.about.show .about-right {

    animation: aboutRight 1.1s ease forwards;

}

.about-tag {

    display: inline-block;

    font-family: Poppins, sans-serif;

    font-size: 15px;

    letter-spacing: 3px;

    color: #27346b;

    font-weight: 600;

    margin-bottom: 20px;

}

.about-title {

    font-family: "Poppins";

    font-size: 48px;

    line-height: .95;

    color: #1d2255;

    margin-bottom: 45px;

}

.about-title span {

    background: linear-gradient(90deg, #ff65b4, #8897ff);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

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

.feature {

    display: flex;

    align-items: flex-start;

    gap: 22px;

    margin-bottom: 34px;

}

.icon {

    width: 60px;

    height: 60px;

    flex-shrink: 0;

    border-radius: 50%;

    background: linear-gradient(135deg, #ffe6f4, #eef7ff);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 25px;

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

    transition: .35s;

}

.icon:hover {

    transform: translateY(-8px) scale(1.08);

}

.feature h3 {

    font-family: Poppins, sans-serif;

    font-size: 23px;

    color: #1d2255;

    margin-bottom: 8px;

    font-weight: 700;

}

.feature p {

    font-family: Poppins, sans-serif;

    font-size: 19px;

    color: #6d7392;

    line-height: 1.7;

}

/*============ GLOW ============*/

.about::before {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    left: -120px;

    top: 100px;

    border-radius: 50%;

    background: #ff98cf;

    filter: blur(120px);

    opacity: .18;

}

.about::after {

    content: "";

    position: absolute;

    width: 340px;

    height: 340px;

    right: -140px;

    bottom: -120px;

    border-radius: 50%;

    background: #97d8ff;

    filter: blur(120px);

    opacity: .18;

}

/*====================================
KEYFRAMES
====================================*/

@keyframes aboutLeft {

    from {

        opacity: 0;

        transform: translateX(-120px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes aboutRight {

    from {

        opacity: 0;

        transform: translateX(120px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes aboutFloat {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-15px);

    }

    100% {

        transform: translateY(0px);

    }

}




/* services */

.services{

    width:100%;
    padding:90px 8%;
}

.heading{

    text-align:center;
    margin-bottom:70px;
}

.heading span{

    color:#ff5ea8;
    letter-spacing:3px;
    font-size:14px;
    font-weight:600;
}

.heading h2{

    margin-top:15px;
    font-family:'Playfair Display',serif;
    font-size:60px;
    color:#22265b;
    line-height:1.2;
}

.heading h2 span{

    background:linear-gradient(90deg,#ff78b7,#8da2ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.service-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.service-card{

    position:relative;
    background:rgba(255,255,255,.8);
    border:1px solid rgba(255,255,255,.4);
    border-radius:28px;
    padding:35px;
    overflow:hidden;
    transition:.35s ease;
    backdrop-filter:blur(12px);

    box-shadow:
    0 15px 40px rgba(122,125,255,.08);
}

.service-card::before{

    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:radial-gradient(circle,
    rgba(255,130,185,.18),
    transparent 70%);
    top:-120px;
    right:-80px;
}

.service-card::after{

    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:radial-gradient(circle,
    rgba(121,205,255,.18),
    transparent 70%);
    bottom:-130px;
    left:-70px;
}

.service-card:hover{

    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(93,93,255,.15);
}

.icon{

    width:64px;
    height:64px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg,#ff77ba,#80b8ff);

    color:white;
    font-size:24px;

    margin-bottom:30px;
}

.service-card h3{

    font-family:'Playfair Display',serif;
    color:#22265b;
    font-size:34px;
    margin-bottom:18px;
}

.service-card p{

    color:#646b8c;
    font-size:18px;
    line-height:1.7;
}




/* ==========================
   PRICING SECTION
========================== */

.pricing{
    width:100%;
    padding:90px 8%;
}

/* ==========================
   HEADING
========================== */

.pricing-heading{
    text-align:center;
    margin-bottom:60px;
}

.pricing-heading span{
    color:#ff67b3;
    font-size:14px;
    font-weight:600;
    letter-spacing:3px;
}

.pricing-heading h2{
    margin-top:15px;
    font-size:62px;
    line-height:1.15;
    font-family:'Playfair Display',serif;
    color:#22265b;
}

.pricing-heading h2 span{
    background:linear-gradient(90deg,#ff71bc,#7aa7ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ==========================
   CARDS
========================== */

.pricing-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

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

.price-card{

    position:relative;

    background:#fff;

    border-radius:32px;

    padding:34px;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:
    0 20px 45px rgba(64,81,181,.08);

    border:1px solid rgba(255,255,255,.6);
}

.price-card::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    top:-130px;
    right:-100px;

    background:
    radial-gradient(circle,
    rgba(255,160,205,.18),
    transparent 70%);
}

.price-card::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    bottom:-120px;
    left:-80px;

    background:
    radial-gradient(circle,
    rgba(120,200,255,.15),
    transparent 70%);
}

.price-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 28px 60px rgba(64,81,181,.15);
}

/* ==========================
   PREMIUM
========================== */

.premium{

    color:#fff;

    background:
    linear-gradient(135deg,
    #f46bb2,
    #5db5ff);
}

.premium h1,
.premium h3,
.premium p,
.premium li{
    color:#fff;
}

.premium button{

    background:#fff;
    color:#25245d;
}

.badge{

    position:absolute;

    top:20px;
    right:24px;

    padding:7px 15px;

    border-radius:30px;

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:13px;

    font-weight:600;
}

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

.price-card h3{

    font-family:'Playfair Display',serif;

    font-size:25px;

    margin-bottom:25px;
}

/* ==========================
   PRICE
========================== */

.price{

    display:flex;

    align-items:flex-end;

    gap:8px;

    margin-bottom:28px;
}

.price h1{

    font-size:39px;

    font-weight:700;

    line-height:1;
}

.price p{

    color:#7c82a5;

    font-size:18px;

    margin-bottom:10px;
}

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

.price-card ul{

    list-style:none;

    margin-bottom:35px;
}

.price-card ul li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#51597d;

    font-size:17px;
}

.price-card ul li i{

    color:#ff7dbd;

    font-size:18px;
}

.premium ul li i{
    color:#fff;
}

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

.price-card button{

    width:100%;

    height:60px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    background:#25245d;

    color:#fff;

    font-size:18px;

    font-weight:600;

    transition:.3s;
}

.price-card button:hover{

    transform:scale(1.03);

    opacity:.92;
}




/* ==========================================
   HOW IT WORKS
========================================== */

.how-it-works{
    position: relative;
    width: 100%;
    padding: 100px 8%;
    background: url("/images/backimage.jpg") center center/cover no-repeat;
    overflow: hidden;
}

/* Overlay */

.overlay{
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.60);
    backdrop-filter: blur(3px);
}

/* Container */

.container{
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: auto;
}

/* Heading */

.section-title{
    text-align: center;
    margin-bottom: 65px;
}

.section-title h2{
    font-size: 48px;
    color: #1f2b52;
    margin-bottom: 15px;
}

.section-title p{
    color: #5f6b82;
    font-size: 20px;
}

/* Grid */

.steps{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
}

/* Card */
.step-card{
    position: relative;
    background: rgba(255,255,255,.92);
    border-radius: 24px;
    padding: 70px 28px 35px;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
    transition: .35s;

}

/* Active Animation */

.step-card.show{
    animation: dropDown 2.0s ease forwards;
}

.step-card:nth-child(1).show{
    animation-delay: .1s;
}

.step-card:nth-child(2).show{
    animation-delay: .3s;
}

.step-card:nth-child(3).show{
    animation-delay: .5s;
}

.step-card:nth-child(4).show{
    animation-delay: .7s;
}

/* Hover */

.step-card:hover{

    transform: translateY(-12px);

    box-shadow:0 28px 60px rgba(0,0,0,.18);

}

/* Number */

.step-number{

    position:absolute;

    left:50%;
    top:-28px;

    transform:translateX(-50%);

    width:60px;
    height:60px;

    border-radius:50%;

    background:#2563eb;

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

    color:#fff;

    font-size:28px;

    font-weight:700;

    box-shadow:0 10px 25px rgba(37,99,235,.45);

}

/* Title */

.step-card h3{

    font-size:22px;

    color:#1f2b52;

    margin-bottom:18px;

}

/* Text */

.step-card p{

    color:#68758d;

    line-height:1.8;

    font-size:16px;

}

/* Animation */

@keyframes dropDown{

0%{

opacity:0;

transform:translateY(-180px) scale(.75);

}

70%{

opacity:1;

transform:translateY(20px) scale(1.03);

}

100%{

opacity:1;

transform:translateY(0) scale(1);

}

}


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

.footer{
    position:relative;
    overflow:hidden;
    background:black;
    color:#fff;
    padding-top:8px;
}

/*==========================
    Animated Top Border
==========================*/

.footer-top-line{
    height:5px;
    width:100%;
    background:linear-gradient(
        90deg,
        #ff5ea8,
        #7c8cff,
        #4ecbff,
        #ff5ea8
    );
    background-size:300% 100%;
    animation:gradientMove 8s linear infinite;
}

@keyframes gradientMove{

0%{
background-position:0%;
}

100%{
background-position:300%;
}

}

/*==========================
    Background Glow
==========================*/

.footer-blur{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.25;
}

.footer-blur-1{
    width:320px;
    height:320px;
    background:#ff5ea8;
    left:-120px;
    top:80px;
}

.footer-blur-2{
    width:300px;
    height:300px;
    background:#55b8ff;
    right:-120px;
    bottom:40px;
}

/*==========================
    Container
==========================*/

.footer-container{

    max-width:1300px;
    margin:auto;

    padding:80px 8% 60px;

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

    position:relative;
    z-index:2;
}

/*==========================
      Logo
==========================*/

.footer-logo{

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

    text-decoration:none;

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

    color:#fff;
}

.footer-logo span{

    background:linear-gradient(90deg,#ff67b6,#74b8ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.footer-logo i{

    color:#ff6eb8;
}

.brand p{

    margin:25px 0;

    line-height:1.8;

    color:#cbd5e1;
}

/*==========================
      Contact
==========================*/

.contact-item{

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

    margin:16px 0;

    color:#d6dce7;
}

.contact-item i{

    width:42px;
    height:42px;

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

    border-radius:50%;

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

    color:#7dc7ff;

    transition:.3s;
}

.contact-item:hover i{

    background:linear-gradient(135deg,#ff66b5,#66b7ff);

    color:#fff;

    transform:rotate(10deg);
}

/*==========================
      Titles
==========================*/

.footer-column h3{

    font-size:22px;

    margin-bottom:25px;
}

/*==========================
      Links
==========================*/

.footer-column ul{

    list-style:none;
}

.footer-column ul li{

    margin-bottom:16px;
}

.footer-column ul li a{

    color:#cbd5e1;

    text-decoration:none;

    transition:.3s;
}

.footer-column ul li a:hover{

    color:#ff71bc;

    padding-left:8px;
}

/*==========================
      Newsletter
==========================*/

.newsletter-text{

    color:#cbd5e1;

    margin-bottom:20px;
}

.newsletter{

    display:flex;

    background:#fff;

    border-radius:50px;

    overflow:hidden;
}

.newsletter input{

    flex:1;

    border:none;

    outline:none;

    padding:16px 20px;

    font-size:15px;
}

.newsletter button{

    border:none;

    cursor:pointer;

    padding:16px 28px;

    background:linear-gradient(135deg,#ff67b5,#63b6ff);

    color:#fff;

    font-weight:600;

    transition:.3s;
}

.newsletter button:hover{

    transform:scale(1.05);
}

/*==========================
      Social
==========================*/

.social-icons{

    display:flex;

    gap:16px;

    margin-top:28px;
}

.social-icons a{

    width:48px;
    height:48px;

    border-radius:50%;

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

    text-decoration:none;

    color:#fff;

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

    transition:.35s;
}

.social-icons a:hover{

    background:linear-gradient(135deg,#ff67b5,#67b9ff);

    transform:translateY(-8px);
}

/*==========================
      Bottom
==========================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:25px 8%;

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

    color:#bfc9d7;

    position:relative;
    z-index:2;
}

.footer-bottom a{

    color:#bfc9d7;

    text-decoration:none;

    margin-left:20px;

    transition:.3s;
}

.footer-bottom a:hover{

    color:#ff6db8;
}




/*some part of nav and hero */

.active-link {
    color: #ff5ea9 !important;
    font-weight: 700;
}

.active-link::after {
    width: 100% !important;
}

.hidden {
    opacity: 0;
    transform: translateY(50px);
    transition: all .8s ease;
}

.show {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================
   BOOK PICKUP POPUP 
   ========================================== */

:root {
    --booking-accent: #ff4d7d;      
    --booking-accent-dark: #e0335f;
    --booking-accent-light: #ffe3ec;
    --booking-text: #1a1a1a;
    --booking-text-muted: #6b6b6b;
}

.booking-modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 20, 0.6);
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    padding: 24px 16px;
    overflow-y: auto;
}

.booking-modal.active {
    display: flex;
    animation: bookingFadeIn 0.2s ease-out;
}

@keyframes bookingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.booking-box {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    margin-top: 90px;
    overflow: hidden;
    animation: bookingSlideUp 0.25s ease-out;
}

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


.booking-box::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, var(--booking-accent), var(--booking-accent-dark));
}

.booking-box h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 1.5rem 2rem 0.35rem;
    color: var(--booking-text);
}

.booking-box h2::after {
    content: "Free pickup within 24 hours";
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--booking-text-muted);
    margin-top: 4px;
}

.close-booking {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--booking-text-muted);
    background: #f4f4f4;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}

.close-booking:hover {
    background: var(--booking-accent-light);
    color: var(--booking-accent-dark);
}

.booking-box form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 1.5rem 2rem 2rem;
}

.booking-box input,
.booking-box select {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e6e6e6;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: var(--booking-text);
    background: #fafafa;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.booking-box input::placeholder {
    color: #a3a3a3;
}

.booking-box input:hover,
.booking-box select:hover {
    border-color: #cfcfcf;
}

.booking-box input:focus,
.booking-box select:focus {
    outline: none;
    border-color: var(--booking-accent);
    background: #fff;
    box-shadow: 0 0 0 4px var(--booking-accent-light);
}

.booking-box select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23ff4d7d' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    color: var(--booking-text);
}

.booking-box select:invalid {
    color: #a3a3a3;
}

.booking-box button[type="submit"] {
    padding: 15px 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--booking-accent), var(--booking-accent-dark));
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 8px 20px rgba(255, 77, 125, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.booking-box button[type="submit"]:hover {
    filter: brightness(1.05);
    box-shadow: 0 10px 24px rgba(255, 77, 125, 0.45);
}

.booking-box button[type="submit"]:active {
    transform: scale(0.97);
}

#bookingSuccessMsg {
    color: #1a7f37;
    background: #eafaf0;
    border: 1px solid #b8ecc8;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    font-size: 14.5px;
    font-weight: 500;
    margin-top: 4px;
    display: none;
}




/*=========================================
                FAQ SECTION
=========================================*/

.pricing-faq{
    padding:90px 20px;
    background:#f8fafc;
}

.pricing-faq-container{
    max-width:1200px;
    margin:auto;
}
.pricing-faq-heading{
    text-align:center;
    margin-bottom:60px;
}

.pricing-faq-heading span{

    display:inline-block;
    color:#ff7a00;
    background:#fff3e8;
    padding:8px 20px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;

}

.pricing-faq-heading h2{

    font-size:48px;
    font-weight:700;
    color:#1f2937;
    line-height:1.2;
    margin-bottom:18px;

}

.pricing-faq-heading p{

    max-width:700px;
    margin:auto;
    color:#6b7280;
    font-size:18px;
    line-height:1.8;

}
.pricing-faq-item{

    background:#fff;
    border-radius:18px;
    margin-bottom:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;

}

.pricing-faq-item:hover{

    transform:translateY(-4px);

}

.pricing-faq-question{

    width:100%;
    border:none;
    background:#fff;
    padding:24px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;

    font-size:20px;
    font-weight:700;
    color:#111827;

}

.pricing-faq-question i{

    width:40px;
    height:40px;
    border-radius:50%;
    background:#fff3e8;
    color:#ff7a00;

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

    transition:.35s;

}

.pricing-faq-answer{

    max-height:0;
    overflow:hidden;
    transition:.4s;

}

.pricing-faq-answer p{

    padding:0 30px 28px;
    color:#6b7280;
    font-size:17px;
    line-height:1.9;

}

.pricing-faq-item.active{

    border-left:5px solid #ff7a00;

}

.pricing-faq-item.active .pricing-faq-answer{

    max-height:250px;

}

.pricing-faq-item.active i{

    transform:rotate(45deg);

}


.footer .logo{
    background: rgba(255, 245, 250, .95);
       border-radius: 18px;
    display: inline-flex;
   }

.footer .logo img{
    width: 110px;
}



/* ==========================================
   RESPONSIVE (all breakpoints, desktop → mobile)
   ========================================== */

@media (max-width: 1100px) {

.footer-container{

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

}

}

@media (max-width: 1024px) {

.navbar{

padding:0 17px;

}

.logo img{

width:55px;

}

.logo h2{

font-size:20px;

}

.nav-links{

gap: 10px;

}

.pickup-btn{

padding:12px 24px;

}

    .booking-box {
        margin-top: 100px;
    }

}

@media (max-width: 992px) {

.service-grid{

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

}

.heading h2{

font-size:45px;

}

.pricing-container{

grid-template-columns:1fr;

}

.pricing-heading h2{

font-size:48px;

}

.steps{

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

}

.section-title h2{

font-size:42px;

}

}

@media (max-width: 991px) {

    .about {

        flex-direction: column;

        padding: 90px 25px;

        text-align: center;

        gap: 50px;

    }

    .about-left,
    .about-right {

        width: 100%;

    }

    .about-title {

        font-size: 38px;

    }

    .about-image {

        width: 100%;

    }

    .feature {

        text-align: left;

    }

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

    .hero-left,
    .hero-right {
        width: 100%;
    }

    .title {
        font-size: 40px;
    }

    .stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-image {
        width: 330px;
        margin-top: 40px;
    }

    .circle {
        width: 380px;
        height: 380px;
    }

    .hero-buttons {
        justify-content: center;
    }

}

@media (max-width: 768px) {

.navbar{

height:80px;

padding:0 20px;

}

.logo img{

width:45px;

}

.logo h2{

font-size:18px;

}

.menu-btn{

display:block;

z-index:1002;

}

.pickup-btn{

display:none;

}

.nav-links{

position:absolute;

top:80px;

left:-100%;

width:100%;

background:#fff;

flex-direction:column;

align-items:flex-start;

gap:0;

padding:20px;

transition:.4s;

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

}

.nav-links.active{

left:0;

}

.nav-links>li{

width:100%;

padding:16px 0;

border-bottom:1px solid #eee;

}



.dropdown-menu{

position:static;

width:100%;

display:none;

opacity:1;

visibility:visible;

transform:none;

box-shadow:none;

padding-left:18px;

background:#fafafa;

margin-top:12px;

border-radius:12px;

}

.dropdown-menu.active{

display:block;

}



.dropdown-menu a{

padding:12px 15px;

}

.services{

padding:70px 25px;

}

.service-grid{

grid-template-columns:1fr;

}

.heading h2{

font-size:34px;

}

.service-card{

padding:30px;

}

.service-card h3{

font-size:30px;

}

.pricing{

padding:70px 25px;

}

.pricing-heading h2{

font-size:36px;

}

.price-card{

padding:28px;

}

.price h1{

font-size:48px;

}

.price-card h3{

font-size:22px;

}

.price-card ul li{

font-size:15px;

}

.price-card button{

height:55px;

}

.how-it-works{

padding:80px 20px;

}

.steps{

grid-template-columns:1fr;

gap:45px;

}

.section-title h2{

font-size:34px;

}

.section-title p{

font-size:17px;

}

.step-card{

padding:65px 22px 30px;

}

.footer-container{

grid-template-columns:1fr;

gap:45px;

padding:70px 25px 45px;

}

.footer-bottom{

padding:20px 25px;

flex-direction:column;

gap:15px;

text-align:center;

}

.newsletter{

flex-direction:column;

border-radius:20px;

}

.newsletter input{

width:100%;

}

.newsletter button{

width:100%;

}

.footer-logo{

font-size:30px;

}

    .booking-modal {
        padding: 16px;
        align-items: flex-start;
    }

    .booking-box {
        margin-top: 110px;
        max-width: 100%;
    }

    .booking-box h2 {
        font-size: 1.35rem;
        margin: 1.25rem 1.5rem 0.3rem;
    }

    .booking-box form {
        padding: 1.25rem 1.5rem 1.75rem;
        gap: 14px;
    }

    .booking-box input,
    .booking-box select {
        padding: 12px 14px;
        font-size: 14.5px;
    }

    .booking-box button[type="submit"] {
        font-size: 15px;
    }

.pricing-faq-heading h2{
    font-size:2rem;
}

.pricing-faq-question{
    font-size:16px;
    padding:18px;
}

.pricing-faq-answer p{
    padding:0 18px 18px;
}

}

@media (max-width: 400px) {

    .booking-box {
        margin-top: 90px;
    }

    .booking-box h2 {
        margin: 1rem 1.25rem 0.3rem;
    }

    .booking-box form {
        padding: 1rem 1.25rem 1.5rem;
    }

}