body {
    margin: 0;
    padding: 0;
    color:white;
    overflow-x: hidden;
    overflow-y: auto;  

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

/* Navbar */
.navbar {
    display: flex;
    padding: 15px 40px;
    background: black;
    width:100%;
    flex-wrap: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center; 

}

.nav-links {
    list-style: none;
    display: flex;
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

.nav-links li {
    margin: 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

.nav-links a {
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

.logo img{
    width: auto;
    height: 55px;
}

@media(max-width:768px){
    .logo img{
        width: auto;
    }
}
.logo{
    display: flex;
    align-items: center;   /* 🔥 vertical center */
    gap: 10px;             /* logo আর text এর gap */
}

.logo span{
    font-size: 22px;
    font-weight: 600;
    color: goldenrod;
}
 
.running-text{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 15px;
}

.running-text span{
    display: inline-block;
    padding-left: 100%;   /* start from right */
    animation:  runText 18s linear infinite;;
    color: black;  /* optional gold */
    font-size: 30px;
}

/* animation */
@keyframes runText{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }
}



/* Hero Sections */
.hero {
    background-size: cover;
    background-position: center;
    position: relative;   /* height remove */
    height: auto;
    margin-bottom: 0;
    color:white;

}
.services-slider{
    width:100%;
    overflow:hidden;
     background:#000;
    color:white;
    padding:40px 0;
}

.slider{
    display:flex;
    gap:40px;
    width:max-content;
    background:#000;
    color:white;
    align-items: center;
    animation:slide 45s linear infinite;
}

.circle img{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
}

@keyframes slide{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-100%);
    }
}

.about-bg{
background-image: url('../images/aboutbackground.jpg');
height:68vh;
}
.home-bg{
   background-position:center top;
   background-size: cover;
   background-repeat: no-repeat;
   height: 70vh;
    animation: homeSlider 12s infinite;
}
@keyframes homeSlider{

    0%{
        background-image: url('../images/homeback1.jpg');
    }

    33%{
        background-image: url('../images/homeback2.jpg');
    }

    66%{
        background-image: url('../images/homeback3.jpg');
    }

    100%{
        background-image: url('../images/homeback1.jpg');
    }
}
.contact-bg {
     background-image:url('../images/contactbackground.jpeg');
     height: 60vh;
}
.offer-bg {
    background-image: url('../images/offerbackground.jpg');
    height: 80vh;
    background-size: cover;        /* full cover */
    background-position: center;   /* center */
    background-repeat: no-repeat;
}
.services-bg{
background-image: url('../images/servicesbackground.jpg');
    height: 75vh;
}
.gallery-bg{
    background-image: url('../images/gallerybackground\ .jpg');
    height: 65vh;
}
.contact-section{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    padding:40px 80px;
    margin-top: 0;
    background: #000;
    color: white;
    margin-top: -30px;
}

.form-box{
    width:50%;
}

.image-box{
    width:50%;
}

.image-box img{
    width:100%;
    border-radius:15px;
}

input,
textarea{
    width:100%;
    padding:15px;
    margin-bottom:15px;
}

button{
    padding:15px 35px;
    cursor:pointer;
}
/*
.services-bg { background-image: url('../images/services.jpg'); }*/
/*.offer-bg { background-image: url('../images/offer.jpg'); }*/
/*.contact-bg { background-image: url('../images/contact.jpg'); }*/

.overlay {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000;
    
}
.h4{
    font-size: 50px;
}

.hero-heading{
    font-size: 100px;
    font-weight: 600;
    font-family:'Allura', cursive;
    letter-spacing: 3px;
    color: blue;
    text-align: center;

    text-shadow: 0 0 10px rgba(212, 139, 55, 0.877),
                 0 0 20px rgba(212, 196, 55, 0.5);

    animation: fadeUp 1s ease forwards;
}

.hero-sub{
    margin-top: 15px;
    font-size: 25px;
    letter-spacing: 2px;
    text-align: center;
    color:black;
}

@keyframes fadeUp{
    from{
        opacity: 0;
        transform: translateY(30px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
/*
.services{
    padding:60px 40px;
    background:#fff;
    text-align:center;
}

.card-container{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}

.card{
    width:280px;
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.card h3{
    margin:15px 0 10px;
}

.card p{
    padding:0 15px 20px;
}
*/
.services {
    padding: 50px;
    background:#000;
    padding: 60px 40px;
    text-align: center;
}

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

.card {
    background: black;
    padding: 15px;
    width: 285px;
    overflow: hidden;
    text-align: center;
    border-radius: 10px;
}

.card img {
    width: 85%;
    border-radius: 10px;
    height: 245px;
}
/* Contact */
.circle{
    text-align: center;
}
.circle p{
    margin-top: 10px;
    color:white;
    font-size: 16px;
    font-weight: bold;
}
.offer-section{
    padding:70px 40px;
    background: #000;
    color: white;
    text-align:center;
}

.offer-container{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.offer-card{
    width:300px;
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    transition:.3s;
}

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

.offer-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.offer-card h3{
    margin-top:20px;
    color:#222;
}

.offer-card p{
    color:#666;
    margin:15px;
}

.btn{
    display:inline-block;
    margin-bottom:20px;
    padding:12px 30px;
    background:#d4af37;
    color:white;
    text-decoration:none;
    border-radius:30px;
}
.sevices-section{
    padding:70px 40px;
    background: #000;
    color: white;
    text-align:center;
    text-align: center;
}

.services-container{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    min-height: 500px;
    background:#000;
    color:white;
}

.services-card{
    width:300px;
    background:black;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    transition:.3s;
    text-align: center;
}

.services-card:hover{
    transform:scale(1.03);
}

.services-card img{
    width:100%;
    height:210px;
    object-fit: cover; 
    
}

.services-card h3{
    margin-top:20px;
    color:white;
    text-align: center;
}

.servicesbtn{
    display:inline-block;
    margin-bottom:20px;
    padding:12px 30px;
    background:#d4af37;
    color:black;
    text-decoration:none;
    border-radius:30px;
}

/* Gallery Hero */
.gallery-bg{
    background-size:cover;
    background-position:center;
}

/* Gallery Section */
/* ===== FINAL GALLERY FIX ===== */

.gallery-section{
    padding:60px 80px;
    background: #000;
    color: white;
}

/* layout */
.gallery-box{
    display:flex;
    align-items:center;
    gap:50px;
    margin-bottom:80px;
}

/* image */
.gallery-box img{
    width:700px;
    height:300px;
    object-fit:cover;
    border-radius:12px;
}

/* right side reverse */
.gallery-box.right{
    flex-direction:row-reverse;
}

/* text */
.text{
    max-width:500px;
}

/* heading */
.text h3{
    font-size:28px;
    margin-bottom:15px;
}

/* paragraph */
.text p{
    font-size:18px;
    line-height:1.6;
    color:white;
}

/* LEFT animation */
.gallery-box.left .text{
    transform:translateX(-80px);
    opacity:0;
    animation:leftText 1s forwards;
}

/* RIGHT animation */
.gallery-box.right .text{
    transform:translateX(80px);
    opacity:0;
    animation:rightText 1s forwards;
}

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

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

/* TYPEWRITER (NO CURSOR) */
.gallery-box .typewriter{
    overflow:hidden;
    white-space:nowrap;
    width:0;
    animation:typing 2s steps(20,end) forwards;
}

/* paragraph typing */
.gallery-box .typewriter-p{
    overflow:hidden;
    width:0;
    animation:typing 3s steps(40,end) forwards;
}

/* typing animation */
@keyframes typing{
    from{width:0}
    to{width:100%}
}

/* ===== END ===== */

/* Review Section 
.review-section{
    padding:60px;
    background:#f5f5f5;
    text-align:center;
}

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

.review-card{
    width:280px;
    padding:20px;
    background:white;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

/* Review Form 
.review-form{
    max-width:400px;
    margin:auto;
}

.review-form input,
.review-form textarea{
    width:100%;
    padding:12px;
    margin:10px 0;
    border:1px solid #ccc;
    border-radius:6px;
}

.review-form button{
    padding:12px 25px;
    background:#d4af37;
    border:none;
    color:white;
    border-radius:6px;
    cursor:pointer;
}

/* ===== SERVICE PAGE ===== */
/* ===== GENDER SECTION (MEN & WOMEN) ===== */
.gender-layout{
    display:flex;
    gap:60px;
    padding:60px 80px;
    background: #000;
    color: white;
    align-items:flex-start;
}

/*LEFT IMAGE */
.gender-img-box{
    width:40%;
    overflow:hidden;
}

.gender-img-box img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:15px;
}
 .animation {
    transform:translateX(-100px);
    opacity:0;
    animation:slideGender 1s forwards;
}


.gender-text-box{
    width:60%;
}

.gender-title{
    font-size:32px;
    margin-bottom:30px;
}


.gender-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:40px;
              
}


.gender-col{
    flex:1;
}

.gender-col h3{
    margin-bottom:15px;
    font-size:20px;
}

 
.gender-col ul{
    padding-left:20px;
}

.gender-col ul li{
    margin-bottom:8px;
    font-size:16px;
    transition:0.3s;
}

 /*HOVER EFFECT*/ 
.gender-col ul li:hover{
    color:goldenrod;
    transform:translateX(5px);
}

.reverse{
    flex-direction: row-reverse;
}
/*IMAGE ANIMATION*/
@keyframes slideGender{
    to{
        transform:translateX(0);
        opacity:1;
    }
}
@media(max-width:768px){

    .gender-layout{
        flex-direction:column;
        padding:40px 20px;
    }

    .gender-img-box,
    .gender-text-box{
        width:100%;
    }

    .gender-img-box img{
        height:300px;
    }

    .gender-grid{
        flex-direction:column;
        gap:20px;
    }
}

.second-block{
    align-items:flex-start;
     display:flex;
    gap:50px;
    padding:60px 80px;
}

/*FORM BOX*/ 
.booking-box{
    width:50%;
}

.booking-box form{
    display:flex;
    flex-direction:column;
    gap:10px;
    width: 100%;
}

.booking-box input,
.booking-box textarea{
    padding:12px;
    width:100%;
    border:1px solid #ccc;
    margin-bottom: 0;
}

.booking-box button{
    padding:12px;
    background:goldenrod;
    border:none;
    cursor:pointer;
}

/*RIGHT IMAGE */
.right-img{
    width:50%;
}

.right-img img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:15px;

    /* SAME animation */
    transform:translateX(100px);
    opacity:0;
    animation:slideRight 1s forwards;
}

/* RIGHT animation */
@keyframes slideRight{
    to{
        transform:translateX(0);
        opacity:1;
    }
}

/* HERO */
.loyalty-bg{
    position: relative;
    height: 76vh;
    overflow: hidden;
    

}
.hero-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PLANS */
.loyalty-plans{
    padding:60px;
    text-align:center;
    background:#000;
    color:white;
}

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

.plan-card{
    padding:30px;
    width:250px;
    border-radius:12px;

}

.plan-card ul{
    margin:20px 0;
    padding-left:20px;

}

.plan-card button{
    padding:10px 20px;
    background:pink;
    border:none;
    cursor:pointer;
}

.premium{
    transform:scale(1.1);
    background:#ffe6f0;
}

/* BENEFITS */
.loyalty-benefits{
    display:flex;
    gap:50px;
    padding:60px 80px;
    background:#000;
    color:white;
}

.benefit-img img{
    width:400px;
    border-radius:15px;
}

.benefit-text{
    max-width:500px;
}

.benefit-text ul{
    margin-top:20px;
}
/* POPUP */

/* CTA 
.loyalty-cta{
    text-align:center;
    padding:80px 20px;
    background:#111;
    color:#fff;
    margin-top: 50px;
}

.loyalty-cta button{
    padding:12px 30px;
    background:pink;
    border:none;
    cursor:pointer;
}
/* Fo
/* ===== LOYALTY PAGE CARD DESIGN (SAFE) ===== */

/* ===== LOYALTY PAGE CARD DESIGN (SAFE) ===== */

.loyalty-plans .plan-card{
    background: linear-gradient(135deg, #000000, #1a1a1a);
    color: #f5d77a;  /* golden text */
    padding: 30px;
    width: 260px;
    border-radius: 15px;
    text-align: center;

    transition: 0.4s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

    position: relative;
    overflow: hidden;
}

/* GOLD BORDER */
.loyalty-plans .plan-card{
    position: relative;
    border-radius: 15px;
    padding: 30px;

    /* IMPORTANT PART */
    background:
        linear-gradient(#000, #000) padding-box,
        linear-gradient(45deg, gold, #ffcc00, gold) border-box;

    border: 2px solid transparent;

    color: gold;
}

/* HOVER EFFECT */
.loyalty-plans .plan-card:hover{
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.8),
                0 0 20px gold;
}

/* CLICK EFFECT (mobile touch) */
.loyalty-plans .plan-card:active{
    transform: scale(0.97);
}

/* BUTTON */
.loyalty-plans .plan-card button{
    margin-top: 15px;
    padding: 10px 20px;
    border: none;
    background: linear-gradient(45deg, gold, #ffcc00);
    color: black;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
}

/* BUTTON HOVER */
.loyalty-plans .plan-card button:hover{
    background: linear-gradient(45deg, #ffcc00, gold);
}

/* PREMIUM CARD (center one) */
.loyalty-plans .plan-card.premium{
    transform: scale(1.08);
    border: 1px solid gold;
}
/*footer {
    text-align: center;
    padding: 40px;
    background: black;
    width: 100%;
    display: block;
    margin-top: 0;
}*/
.contact-section{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    padding:40px 80px;
    margin-top: 0;
    
    margin-top: -30px;
}

.form-box{
    width:50%;
    flex: 1;
    min-width: 300px;
}

.image-box{
    width:50%;
    flex: 1;
    min-width: 300px;
}

.image-box img{
    width:100%;
    border-radius:15px;
    min-height: 400px;   /* 🔥 important */
    object-fit: cover;
}

input,
textarea{
    width:100%;
    padding:15px;
    margin-bottom:15px;
}

button{
    padding:15px 35px;
    cursor:pointer;
}

 /*Responsive */
.booking-section{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:40px;
    padding:60px 80px;
    background: #000;
    color: white;
    flex-wrap: wrap;
}

.booking-form{
    flex:1;
}

.booking-form h2{
    color:white;
    font-size:35px;
    margin-bottom:10px;
}

.booking-form p{
    color:white;
    margin-bottom:25px;
}

.booking-form form{
    display:flex;
    flex-direction:column;
}

.booking-form input,
.booking-form select,
.booking-form textarea{
    width:100%;
    padding:15px;
    margin-bottom:18px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:16px;
}

.booking-form textarea{
    height:120px;
    resize:none;
}

.booking-form button{
    background:#d4af37;
    color:white;
    border:none;
    padding:15px;
    font-size:18px;
    border-radius:8px;
    cursor:pointer;
    transition:.3s;
}

.booking-form button:hover{
    background:#b8912d;
}

.booking-image{
    flex:1;
}

.booking-image img{
    width:100%;
    height:650px;
    object-fit:cover;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
}
.dropdown{
    position: relative;
}

.dropdown-menu{
    position: absolute;
    top: 100%;
    left: 50%;
    transform:translateX(-50%);

    width:100px;

    display: flex;

    background: #fff;
    border-radius: 12px;
    overflow: hidden;

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

    opacity: 0;
    visibility: hidden;
    transition: 0.3s;

    z-index: 999;
    right: auto;
}

/* hover করলে খুলবে */
.dropdown:hover .dropdown-menu{
    opacity: 1;
    visibility: visible;
}

/* left side menu */
.menu-links{
    width: 55%;
    display: flex;
    flex-direction: column;
}

.menu-links a{
    padding: 18px;
    text-decoration: none;
    color: black;
    border-bottom: 1px solid #eee;
}

.menu-links a:hover{
    background: #f5f5f5;
}

/* right side image */
/*.menu-image{
    width: 100%;
    height: 100%;   /* important 
}

.menu-image img{
    width: 200%;
    height: 200%;
    object-fit: cover;
    display: block;
}
*/
/* DROPDOWN BOX */
.dropdown-services{
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

/* HEADER */
.dropdown-header{
    padding: 12px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #fff;
    color:#000;
    margin-bottom: 0;
}

/* DROPDOWN LIST */
.dropdown-list{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    color: #000;
    display: none;
    max-height: 180px;
    overflow-y: auto;
    z-index: 999;
}

/* CHECKBOX STYLE */
.dropdown-list label{
    display: block;
    padding: 8px 10px;
    font-size: 14px;
}
.booking-form .dropdown-header{
    border-radius: 8px;
}
.service-item{
    display:flex;
    align-items:center;   /* SAME LINE */
    gap:10px;
    padding:8px 10px;
    cursor:pointer;
}

/* checkbox size */
.service-item input{
    width:16px;
    height:16px;
    cursor:pointer;
}

/* text */
.service-item span{
    font-size:14px;
}
/* CARD FIX */
.card{
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* IMAGE FULL */
.card img{
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: 0.5s;
}

/* OVERLAY (hidden by default) */
.card-overlay{
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(to top, #d4af37, #b8962e);
    color: black;

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

    text-align: center;
    padding: 20px;

    transition: 0.5s;
}

/* TEXT STYLE */
.card-overlay h3{
    margin-bottom: 10px;
    font-size: 20px;
}

.card-overlay p{
    font-size: 14px;
}

/* HOVER EFFECT 🔥 */
.card:hover .card-overlay{
    bottom: 0;
}

/* IMAGE SLIDE UP */
.card:hover img{
    transform: translateY(-100%);
}
/* ===== FOOTER ===== */

.footer{
    background: #000;
    color: #fff;
    padding: 60px 20px 20px;
}

/* layout */
.footer-container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;  /* 🔥 important */
    gap: 40px;
    max-width: 1200px;
    margin: auto;
    
}

/* box */
.footer-box{
    flex: 1;
    min-width: 220px;
     /* 🔥 responsive magic */
}

/* headings */
.footer-box h2,
.footer-box h3{
    color: #d4af37;
    margin-bottom: 15px;
    
}

/* text */
.footer-box p{
    color: #aaa;
    font-size: 14px;
    line-height: 1.6;
}

/* links */
.footer-box ul{
    list-style: none;
}

.footer-box ul li{
    margin-bottom: 10px;
}

.footer-box ul li a{
    color: #ccc;
    text-decoration: none;
    transition: 0.3s;
}

.footer-box ul li a:hover{
    color: #d4af37;
    padding-left: 5px;
}

/* social */
.social{
    margin-top: 10px;
}

.social a{
    display: inline-block;
    margin-right: 12px;
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
}

.social a:hover{
    color: #d4af37;
}

/* bottom */
.footer-bottom{
    text-align: center;
    border-top: 1px solid #222;
    margin-top: 30px;
    padding-top: 15px;
    color: #777;
    font-size: 14px;
}

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

    .footer-container{
        flex-direction: column;   /* 🔥 vertical stack */
        text-align: center;
    }

    .footer-box{
        min-width: 100%;
    }

    .social a{
        display: inline-block;
        margin: 5px;
    }
}
/*.whatsapp-btn{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: white;
    font-size: 26px;
    padding: 15px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: 0.3s;
    z-index: 999;
}

.whatsapp-btn:hover{
    transform: translateY(-5px);
    background: #1ebe5d;
}
*/
.whatsapp-btn{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: white;
    font-size: 26px;
    width: 55px;
    height: 55px;

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

    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: 0.3s;
    z-index: 999;
}

.whatsapp-btn:hover{
    transform: translateY(-5px) scale(1.05);
    background: #1ebe5d;
}
.social a {
    font-size: 22px;
    margin-right: 12px;
    transition: 0.3s;
}

/* Original colors */
.social .fb i {
    color: #1877F2;
}

.social .insta i {
    color: #E1306C;
}

.social .wa i {
    color: #25D366;
}

.social .tw i {
    color: #1DA1F2;
}

/* Hover effect (optional) */
.social a:hover i {
    transform: scale(1.2);
}
/* IMAGE NORMAL */
/* NORMAL IMAGE */
/* FORCE ANIMATION ONLY THIS IMAGE */
/* ONLY CONTACT PAGE IMAGE ANIMATION */
.image-box{
    width: 50%;
}

.image-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    opacity: 0;
    transform: translateX(80px);
    animation: slideRight 0.8s ease forwards;
}
@keyframes slideRight{
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
/* HAMBURGER */
.menu-toggle{
    display:none;
    font-size:28px;
    color:white;
    cursor:pointer;
}
.menu-overlay.active{
    opacity:1;
    visibility:visible;
}
@media(max-width:1280px){

    .menu-toggle{
        display:block;
        position:absolute;
        right:20px;
        top:20px;
        z-index:1001;
    }

    .nav-links{
        position:absolute;
        top:60px;
        right:20px;

        width:220px;
        max-height:70vh;
        overflow-y:auto;

        background:black;

        flex-direction:column;
        align-items:center;

        padding:15px;
        border-radius:10px;

        display:none;
        z-index:1000;
    }

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

    .nav-links li{
        width:100%;
        margin:10px 0;
        align-items: center;
    }

    .nav-links a{
        display:block;
        width:100%;
    }
}
.footer-brand{
    display: flex;
    align-items: center;   /* same line */
    gap: 10px;
}

.footer-brand img{
    width: 40px;
    height: auto;
}

.footer-brand{
    color: #d4af37; /* optional gold */
    display:flex;
    align-items:center;
    gap:10px;
}
/* FIX FOOTER CUT ISSUE */
.footer{
    width: 100%;
    overflow: hidden;
}
@media (max-width: 768px){

    .footer-container{
        flex-direction: column;   /* 🔥 vertical stack */
        text-align: center;
    }

    .footer-box{
        min-width: 100%;
    }

    .social a{
        display: inline-block;
        margin: 5px;
    }
}
/* IMPORTANT */
/* 🔥 FOOTER FIX FINAL */
.footer{
    width: 100%;
    overflow: hidden;
}

.footer-container{
    display: flex;
    flex-wrap: wrap;   /* 🔥 eta most important */
    justify-content: space-between;
    gap: 30px;
}

/* each box */
.footer-box{
    flex: 1 1 220px;   /* 🔥 auto responsive */
    min-width: 220px;
}

/* mobile fix */
@media (max-width:768px){
    .footer-container{
        flex-direction: column;
        text-align: center;
    }

    .footer-box{
        width: 100%;
    }
}
@media(max-width: 768px){

    .contact-section{
        flex-direction: column;
        padding: 40px 20px;
    }

    .image-box img{
        height: 300px;
    }
}
/* ===== GALLERY RESPONSIVE FIX ===== */
@media(max-width:768px){

    .gallery-box{
        flex-direction: row;   /* column na, side by side */
        gap:15px;
        margin-bottom:40px;
    }

    .gallery-box img{
        width:50%;           /* half screen */
        height:180px;        /* choto kore */
    }

    .text{
        width:50%;
        max-width:100%;
    }

    .text h3{
        font-size:16px;
        white-space: normal;   /* 🔥 important (typewriter fix) */
    }

    .text p{
        font-size:13px;
        line-height:1.4;
        white-space: normal;   /* 🔥 important */
    }

    /* typewriter mobile e off na korle cut hoy */
    .typewriter,
    .typewriter-p{
        width:100% !important;
        animation:none !important;
    }

    /* reverse gulao same line e */
    .gallery-box.right{
        flex-direction: row;
    }
}
/* 🔥 OFFER FORM MOBILE FIX */
@media(max-width:768px){

    .booking-section{
        flex-direction: column;   /* side by side theke niche */
        padding: 40px 20px;
        gap: 25px;
    }

    .booking-form{
        width: 100%;
    }

    .booking-image{
        width: 100%;
    }

    .booking-image img{
        height: 300px;   /* 🔥 fixed height komao */
        width: 100%;
        object-fit: cover;
    }
}
/* ============================= */
/* 🔥 MEN + WOMEN PAGE FINAL FIX */
/* ============================= */

/* FIX GRID (important) */
.gender-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:25px;
}

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

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

/* MAIN LAYOUT FIX */
.gender-layout{
    display:flex;
    gap:40px;
    padding:60px 80px;
    flex-wrap: wrap;   /* 🔥 important */
}

/* IMAGE */
.gender-img-box{
    flex:1;
    min-width:300px;
}

.gender-img-box img{
    width:100%;
    height:400px;   /* 🔥 reduce height */
    object-fit:cover;
}

/* TEXT */
.gender-text-box{
    flex:1;
    min-width:300px;
}

/* SECOND BLOCK (FORM + IMAGE) */
.second-block{
    display:flex;
    gap:40px;
    flex-wrap: wrap;   /* 🔥 must */
}

/* FORM */
.booking-box{
    flex:1;
    min-width:300px;
}

/* IMAGE */
.right-img{
    flex:1;
    min-width:300px;
}

.right-img img{
    width:100%;
    height:400px;   /* 🔥 reduce */
    object-fit:cover;
}

/* 🔥 MOBILE FIX FINAL */
@media(max-width:768px){

    .gender-layout{
        flex-direction:column;
        padding:40px 20px;
    }

    .second-block{
        flex-direction:column;
    }

    .gender-img-box img,
    .right-img img{
        height:250px;   /* 🔥 small screen perfect */
    }

    .gender-title{
        font-size:24px;
    }

    .gender-col h3{
        font-size:18px;
    }

    .gender-col ul li{
        font-size:14px;
    }
}
/* ===== LOYALTY CARD MOBILE FIX ===== */
@media (max-width: 768px){

    .plan-container{
        flex-direction: column;   /* side by side theke niche */
        align-items: center;
        gap: 20px;
    }

    .plan-card{
        width: 90%;     /* full width but little gap */
        max-width: 350px;
    }

    .loyalty-plans{
        padding: 40px 20px;
    }
}
/* ===== BENEFITS MOBILE FIX ===== */
@media (max-width: 768px){

    .loyalty-benefits{
        flex-direction: column;   /* side by side → vertical */
        padding: 40px 20px;
        gap: 25px;
    }

    .benefit-img img{
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .benefit-text{
        max-width: 100%;
    }

    .benefit-text h2{
        font-size: 24px;
    }

    .benefit-text p,
    .benefit-text li{
        font-size: 14px;
        line-height: 1.5;
    }
}
@supports (-webkit-touch-callout: none) {
    .hero{
        min-height: -webkit-fill-available;
    }
}
.page-title{
position: absolute;
top: 30%;
left: 50%;
/*transform: translate(-50%, -50%);*/

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

font-family: 'Allura', cursive;

color:blue;
text-align: center;

letter-spacing: 3px;

text-shadow: 0 0 10px rgba(235, 181, 66, 0.6),
             0 0 20px rgba(235, 238, 73, 0.5);

animation: fadeUp 1s ease;

}


.page-title.left{
left: 40%;
}

@media(max-width:768px){
.page-title{
font-size: 32px;
letter-spacing: 1px;
}

.page-title.left{
    left: 50%;
   /* transform: translate(-50%, -50%);*/
}

}
.running-text{
    width:100%;
    overflow:hidden;
    padding:10px 0;
}

/* animation container */
.marquee{
    display:flex;
    width:max-content;
    animation:scrollLeft 12s linear infinite;
}

/* TEXT BLOCK */
.text-block{
    min-width:100vw;   /* 🔥 full screen width */
    text-align:center;
}

/* first line */
.text-block p{
    font-size:22px;
    color:black;
    margin:0;
}

/* phone number নিচে center */
.phone{
    margin-top:5px;
    font-weight:bold;
}

/* animation */
@keyframes scrollLeft{
    from{
        transform:translateX(100%);
    }
    to{
        transform:translateX(-100%);
    }
}
/* WRAPPER */
.floating-buttons{
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 999;
}

/* WHATSAPP (main big button) */
.whatsapp-btn{
    background: #25D366;
    color: white;
    font-size: 26px;
    width: 60px;
    height: 60px;
    bottom: 90px;

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

    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* CALL BUTTON (small circle on top) */
.call-btn{
    position: absolute;
    top: -0px;
    right: -10px;

    background: green;
    color: white;

    width: 60px;
    height: 60px;

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

    border-radius: 50%;
    font-size: 14px;

    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

/* hover */
.call-btn:hover{
    background: #0a8f2f;
}

.whatsapp-btn:hover{
    transform: scale(1.05);
}