/* ==========================================
   GOOGLE FONT
========================================== */

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

body{

    background:linear-gradient(135deg,#ffe6f0,#fff5f9,#fce4ec);

    overflow-x:hidden;

}

/* ================= Loader ================= */

#loader{

    position:fixed;

    width:100%;

    height:100%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:99999;

}

.loader-heart{

    font-size:70px;

    animation:pulse 1s infinite;

}

@keyframes pulse{

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

}

/* ================= Floating Hearts ================= */

.hearts{

position:fixed;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

z-index:-1;

}

.hearts span{

position:absolute;

bottom:-50px;

width:25px;

height:25px;

background:pink;

transform:rotate(45deg);

animation:float 12s linear infinite;

}

.hearts span::before,
.hearts span::after{

content:"";

position:absolute;

width:25px;

height:25px;

background:pink;

border-radius:50%;

}

.hearts span::before{

left:-12px;

}

.hearts span::after{

top:-12px;

}

.hearts span:nth-child(1){left:5%;animation-duration:8s;}
.hearts span:nth-child(2){left:20%;animation-duration:11s;}
.hearts span:nth-child(3){left:40%;animation-duration:10s;}
.hearts span:nth-child(4){left:60%;animation-duration:13s;}
.hearts span:nth-child(5){left:80%;animation-duration:9s;}
.hearts span:nth-child(6){left:95%;animation-duration:12s;}

@keyframes float{

0%{

transform:translateY(0) rotate(45deg);

opacity:1;

}

100%{

transform:translateY(-120vh) rotate(405deg);

opacity:0;

}

}

/* ================= Header ================= */

header{

position:fixed;

top:0;

left:0;

width:100%;

padding:20px 8%;

display:flex;

justify-content:space-between;

align-items:center;

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

backdrop-filter:blur(15px);

z-index:1000;

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

}

.logo{

font-size:30px;

font-family:'Pacifico',cursive;

color:#ff3d7f;

}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav ul li a{

text-decoration:none;

color:#444;

font-weight:600;

transition:.3s;

}

nav ul li a:hover,
nav ul li a.active{

color:#ff3d7f;

}

#messageBtn{

padding:12px 25px;

border:none;

border-radius:40px;

background:#ff3d7f;

color:white;

font-size:16px;

cursor:pointer;

transition:.4s;

}

#messageBtn:hover{

transform:scale(1.08);

background:#ff1e68;

}
/* ===========================
   Hero Section
=========================== */

.hero{

    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:130px 8% 80px;
    gap:50px;

}

.left{

    flex:1;

}

.left h1{

    font-size:65px;
    color:#333;
    line-height:1.2;

}

.left h1 span{

    color:#ff3d7f;
    font-family:'Pacifico',cursive;

}

.left p{

    margin:25px 0;
    font-size:18px;
    color:#666;
    line-height:1.8;

}

.btn{

    display:inline-block;
    padding:15px 35px;
    background:#ff3d7f;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    transition:.4s;
    font-weight:600;

}

.btn:hover{

    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(255,61,127,.35);

}

.social{

    margin-top:30px;

}

.social a{

    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:50px;
    height:50px;
    background:#fff;
    color:#ff3d7f;
    border-radius:50%;
    text-decoration:none;
    margin-right:15px;
    font-size:22px;
    box-shadow:0 5px 20px rgba(0,0,0,.12);
    transition:.4s;

}

.social a:hover{

    transform:translateY(-8px) scale(1.1);
    background:#ff3d7f;
    color:#fff;

}

.right{

    flex:1;
    text-align:center;

}

.right img{

    width:100%;
    max-width:500px;
    border-radius:30px;
    box-shadow:0 20px 40px rgba(0,0,0,.2);
    animation:floatImage 4s ease-in-out infinite;

}

@keyframes floatImage{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

/* ===========================
   About Section
=========================== */

#about{

    padding:100px 8%;
    text-align:center;

}

#about h2{

    font-size:42px;
    color:#ff3d7f;
    margin-bottom:50px;
    font-family:'Pacifico',cursive;

}

.cards{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;

}

.card{

    background:#fff;
    padding:35px;
    border-radius:25px;
    cursor:pointer;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.card:hover{

    transform:translateY(-15px);
    box-shadow:0 20px 40px rgba(255,61,127,.3);

}

.card i{

    font-size:45px;
    color:#ff3d7f;
    margin-bottom:20px;

}

.card h3{

    font-size:25px;
    margin-bottom:15px;
    color:#333;

}

.card p{

    color:#666;
    line-height:1.8;

}

/* ===========================
   Memory Section
=========================== */

#memory{

    padding:100px 8%;
    text-align:center;

}

.quote{

    background:#fff;
    padding:60px;
    border-radius:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);

}

.quote h2{

    color:#ff3d7f;
    margin-bottom:20px;
    font-family:'Pacifico',cursive;
    font-size:42px;

}

.quote p{

    font-size:22px;
    color:#555;
    line-height:1.8;

}

/* ===========================
   Counter
=========================== */

.counter{

    padding:100px 8%;

}

.counter-box{

    background:#ff3d7f;
    color:#fff;
    border-radius:30px;
    padding:50px;

}

.counter-box h2{

    text-align:center;
    margin-bottom:40px;
    font-size:40px;

}

.counter-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:30px;
    text-align:center;

}

.counter-grid h3{

    font-size:45px;

}

.counter-grid span{

    font-size:18px;

}
/* ===========================
   Gallery
=========================== */

#gallery{

    padding:100px 8%;
    text-align:center;

}

#gallery h2{

    font-size:42px;
    color:#ff3d7f;
    margin-bottom:50px;
    font-family:'Pacifico',cursive;

}

.gallery{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;

}

.gallery img{

    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:20px;
    cursor:pointer;
    transition:.4s;
    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.gallery img:hover{

    transform:scale(1.06);
    box-shadow:0 20px 35px rgba(255,61,127,.3);

}

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

#contact{

    padding:100px 8%;
    text-align:center;

}

#contact h2{

    font-size:42px;
    color:#ff3d7f;
    margin-bottom:40px;
    font-family:'Pacifico',cursive;

}

#contactForm{

    max-width:700px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:20px;

}

#contactForm input,
#contactForm textarea{

    padding:18px;
    border:none;
    outline:none;
    border-radius:15px;
    background:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.1);
    font-size:16px;

}

#contactForm button{

    padding:18px;
    border:none;
    border-radius:40px;
    background:#ff3d7f;
    color:#fff;
    cursor:pointer;
    font-size:18px;
    transition:.3s;

}

#contactForm button:hover{

    background:#ff1e68;
    transform:scale(1.05);

}

/* ===========================
   Footer
=========================== */

footer{

    background:#ff3d7f;
    color:#fff;
    padding:60px 8%;
    text-align:center;

}

.footer-content h2{

    font-family:'Pacifico',cursive;
    font-size:38px;
    margin-bottom:20px;

}

.footer-content p{

    margin:15px 0;

}

.footerSocial{

    margin:25px 0;

}

.footerSocial a{

    color:white;
    font-size:26px;
    margin:0 12px;
    transition:.3s;

}

.footerSocial a:hover{

    transform:scale(1.3);

}

.copy{

    margin-top:30px;
    opacity:.9;

}

/* ===========================
   Popup
=========================== */

#popup{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;

}

.popup-box{

    width:420px;
    background:#fff;
    padding:35px;
    border-radius:25px;
    text-align:center;
    position:relative;
    animation:popup .4s;

}

@keyframes popup{

    from{

        transform:scale(.5);
        opacity:0;

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}

.popup-box h2{

    color:#ff3d7f;
    margin-bottom:20px;

}

.popup-box p{

    color:#555;
    line-height:1.8;

}

#closePopup{

    position:absolute;
    top:15px;
    right:20px;
    font-size:30px;
    cursor:pointer;
    color:#ff3d7f;

}

/* ===========================
   Scroll Button
=========================== */

#topBtn{

    position:fixed;
    right:25px;
    bottom:25px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#ff3d7f;
    color:#fff;
    cursor:pointer;
    font-size:22px;
    display:none;
    box-shadow:0 10px 20px rgba(0,0,0,.2);
    transition:.3s;

}

#topBtn:hover{

    transform:scale(1.1);

}

/* ===========================
   Cursor
=========================== */

.cursor{

    position:fixed;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#ff3d7f;
    pointer-events:none;
    transform:translate(-50%,-50%);
    z-index:99999;

}

/* ===========================
   Falling Hearts
=========================== */

.flower{

    position:fixed;
    font-size:25px;
    animation:fall linear forwards;
    pointer-events:none;
    z-index:999;

}

@keyframes fall{

    from{

        transform:translateY(-50px);

    }

    to{

        transform:translateY(110vh);

    }

}

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

@media(max-width:900px){

.hero{

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

}

.left h1{

font-size:45px;

}

header{

flex-direction:column;
gap:20px;

}

nav ul{

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

}

}
/* ===========================
   Dark Mode Button
=========================== */

#darkModeBtn{

    padding:12px 20px;

    border:none;

    border-radius:30px;

    background:#222;

    color:#fff;

    cursor:pointer;

    transition:.3s;

    margin-left:10px;

}

#darkModeBtn:hover{

    transform:scale(1.05);

}

/* ===========================
   Dark Mode
=========================== */

body.dark{

    background:#121212;

    color:white;

}

body.dark header{

    background:#1f1f1f;

}

body.dark .card{

    background:#2a2a2a;

    color:white;

}

body.dark .quote{

    background:#2a2a2a;

    color:white;

}

body.dark #contactForm input,
body.dark #contactForm textarea{

    background:#333;

    color:white;

}

body.dark footer{

    background:#000;

}

body.dark .popup-box{

    background:#2a2a2a;

    color:white;

}

body.dark nav a{

    color:white;

}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark p{

    color:white;

}
/* ===========================
Music Button
=========================== */

#musicBtn{

    position:fixed;

    left:20px;

    bottom:20px;

    padding:15px 22px;

    border:none;

    border-radius:40px;

    background:#ff3d7f;

    color:white;

    cursor:pointer;

    font-size:16px;

    z-index:9999;

    transition:.3s;

}

#musicBtn:hover{

    transform:scale(1.1);

    background:#ff1e68;

}
/* ===========================
Fireworks Hearts
=========================== */

.firework{

    position:fixed;

    font-size:22px;

    pointer-events:none;

    z-index:99999;

    animation:explode 1.2s ease-out forwards;

}

@keyframes explode{

    0%{

        transform:translate(0,0) scale(.5);

        opacity:1;

    }

    100%{

        transform:translate(var(--x),var(--y)) scale(1.8);

        opacity:0;

    }

}
/* ===============================
Gallery Lightbox
=============================== */

#lightbox{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.9);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

#lightbox img{

    max-width:80%;

    max-height:80%;

    border-radius:20px;

    box-shadow:0 0 30px white;

}

#closeLightbox{

    position:absolute;

    top:20px;

    right:35px;

    color:white;

    font-size:45px;

    cursor:pointer;

}

#prevImage,
#nextImage{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:white;

    font-size:60px;

    cursor:pointer;

    user-select:none;

    padding:20px;

}

#prevImage{

    left:30px;

}

#nextImage{

    right:30px;

}

#prevImage:hover,
#nextImage:hover,
#closeLightbox:hover{

    color:pink;

}
/* ===========================
Instagram Like Animation
=========================== */

#likeAnimation{

    position:fixed;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%) scale(0);

    font-size:120px;

    opacity:0;

    pointer-events:none;

    z-index:999999;

}

#likeAnimation.show{

    animation:likePop .8s ease;

}

@keyframes likePop{

0%{

transform:translate(-50%,-50%) scale(.2);

opacity:0;

}

30%{

transform:translate(-50%,-50%) scale(1.3);

opacity:1;

}

60%{

transform:translate(-50%,-50%) scale(1);

opacity:1;

}

100%{

transform:translate(-50%,-50%) scale(.5);

opacity:0;

}

}
/* ===========================
Memory Video
=========================== */

.memory-video{

text-align:center;

margin-top:40px;

}

.memory-video video{

width:80%;

max-width:800px;

border-radius:20px;

box-shadow:0 0 30px rgba(255,0,100,.4);

transition:.4s;

}

.memory-video video:hover{

transform:scale(1.03);

}

.memory-video p{

margin-top:20px;

font-size:22px;

font-weight:bold;

color:#ff4f8b;

}
/* ===========================
MEMORIES
=========================== */

#memory{

padding:80px 10%;

background:#fff5f8;

text-align:center;

}

#memory h2{

font-family:Pacifico,cursive;

font-size:45px;

color:#ff4081;

margin-bottom:10px;

}

.memory-text{

font-size:20px;

color:#666;

margin-bottom:35px;

}

.memory-box{

width:800px;

max-width:100%;

margin:auto;

padding:15px;

background:white;

border-radius:25px;

box-shadow:0 10px 30px rgba(255,64,129,.3);

overflow:hidden;

transition:.4s;

}

.memory-box:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(255,64,129,.4);

}

.memory-box video{

width:100%;

height:auto;

aspect-ratio:16/9;

object-fit:contain;

background:#000;

border-radius:20px;

display:block;

}
/* ==========================================
TIMELINE
========================================== */

#timeline{

    padding:80px 10%;

    background:linear-gradient(135deg,#fff0f6,#ffe4ec);

}

#timeline h2{

    text-align:center;

    font-size:42px;

    color:#ff3f81;

    margin-bottom:60px;

}

.timeline{

    max-width:900px;

    margin:auto;

}

.timeline-item{

    margin:30px 0;

    cursor:pointer;

    transition:.4s;

}

.timeline-content{

    background:#fff;

    padding:25px;

    border-radius:20px;

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

    transition:.4s;

}

.timeline-content:hover{

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

    box-shadow:0 20px 40px rgba(255,64,129,.35);

}

.timeline-content h3{

    color:#ff4081;

    margin-bottom:10px;

}

.timeline-content p{

    color:#555;

}

/* ==========================================
POPUP
========================================== */

#timelinePopup{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(8px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.popupContent{

    width:90%;

    max-width:700px;

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    text-align:center;

    animation:popup .4s ease;

}

.popupContent img{

    width:100%;

    height:350px;

    object-fit:cover;

}

.popupContent h2{

    color:#ff4081;

    margin:20px;

}

.popupContent p{

    padding:0 25px 25px;

    color:#444;

    font-size:18px;

}

#closeTimeline{

    position:absolute;

    right:25px;

    top:15px;

    font-size:40px;

    color:#fff;

    cursor:pointer;

}

@keyframes popup{

    from{

        transform:scale(.7);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* Mobile */

@media(max-width:768px){

.popupContent img{

height:220px;

}

#timeline h2{

font-size:32px;

}

}
/* ==========================
   AI Friend Chatbot
========================== */

#chatToggle{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    border:none;
    border-radius:50%;
    background:#ff4d88;
    color:#fff;
    font-size:30px;
    cursor:pointer;
    box-shadow:0 8px 25px rgba(0,0,0,.3);
    z-index:9999;
    transition:.3s;
}

#chatToggle:hover{
    transform:scale(1.1);
}

#chatBox{
    position:fixed;
    right:25px;
    bottom:100px;
    width:350px;
    height:500px;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.25);
    display:none;
    flex-direction:column;
    z-index:9999;
}

.chat-header{
    background:linear-gradient(45deg,#ff4d88,#ff80aa);
    color:#fff;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    font-weight:bold;
}

#closeChat{
    background:none;
    border:none;
    color:white;
    font-size:22px;
    cursor:pointer;
}

#chatMessages{
    flex:1;
    padding:15px;
    overflow-y:auto;
    background:#fff7fa;
}

.bot-message{
    background:#ffe4ec;
    padding:12px;
    border-radius:15px;
    margin-bottom:12px;
    max-width:80%;
    animation:fadeIn .4s;
}

.user-message{
    background:#ff4d88;
    color:#fff;
    padding:12px;
    border-radius:15px;
    margin-left:auto;
    margin-bottom:12px;
    max-width:80%;
    text-align:right;
    animation:fadeIn .4s;
}

.chat-input{
    display:flex;
    border-top:1px solid #ddd;
}

.chat-input input{
    flex:1;
    border:none;
    padding:15px;
    font-size:15px;
    outline:none;
}

.chat-input button{
    width:70px;
    border:none;
    background:#ff4d88;
    color:white;
    font-size:22px;
    cursor:pointer;
}

.chat-input button:hover{
    background:#ff2f74;
}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(15px);
    }

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

}

/* Mobile */

@media(max-width:768px){

#chatBox{

    width:95%;
    right:2.5%;
    bottom:90px;
    height:75vh;

}

#chatToggle{

    right:15px;
    bottom:15px;

}

}
/* ==========================================
   3D GALLERY - PART 2
========================================== */

#gallery{
    padding:100px 20px;
    text-align:center;
    overflow:hidden;
}

#gallery h2{
    font-size:40px;
    color:#ff4d88;
    margin-bottom:10px;
}

.gallery-title{
    color:#666;
    margin-bottom:50px;
    font-size:18px;
}

.gallery3d-wrapper{

    width:100%;
    height:520px;

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

    perspective:1500px;

}

.gallery3d{

    position:relative;

    width:240px;
    height:320px;

    transform-style:preserve-3d;

   animation: none;

}

.gallery3d span{

    position:absolute;

    width:100%;
    height:100%;

    transform:
    rotateY(calc(var(--i) * 45deg))
    translateZ(420px);

}

.gallery3d img{

    width:100%;
    height:100%;

    border-radius:20px;

    object-fit:cover;

    cursor:pointer;

    border:5px solid white;

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

    transition:.5s;

}

.gallery3d img:hover{

    transform:scale(1.08);

    box-shadow:
    0 20px 45px rgba(255,0,120,.6);

}

@keyframes rotateGallery{

    from{

        transform:rotateY(0deg);

    }

    to{

        transform:rotateY(360deg);

    }

}

/* Glass Buttons */

.gallery-buttons{

    margin-top:50px;

}

.gallery-buttons button{

    margin:10px;

    padding:12px 28px;

    border:none;

    border-radius:30px;

    cursor:pointer;

    font-size:16px;

    background:linear-gradient(45deg,#ff4d88,#ff8fb5);

    color:white;

    transition:.3s;

}

.gallery-buttons button:hover{

    transform:translateY(-5px);

}

/* Popup */

#galleryPopup{

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.92);

    display:none;

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

    z-index:99999;

}

#popupGalleryImage{

    width:80%;

    max-width:900px;

    max-height:90vh;

    object-fit:contain;

    border-radius:20px;

    box-shadow:
    0 0 40px rgba(255,255,255,.3);

}

#closeGallery{

    position:absolute;

    top:30px;
    right:40px;

    font-size:45px;

    color:white;

    cursor:pointer;

}

/* Mobile */

@media(max-width:768px){

.gallery3d{

    width:180px;

    height:240px;

}

.gallery3d span{

    transform:
    rotateY(calc(var(--i) * 45deg))
    translateZ(260px);

}

.gallery3d-wrapper{

    height:380px;

}

#gallery h2{

    font-size:28px;

}

#popupGalleryImage{

    width:95%;

}

}
/* ==========================================
   MOBILE RESPONSIVE - FINAL FIX
   Best Friends Website
========================================== */

@media (max-width: 768px) {

    /* ------------------------------
       GLOBAL
    ------------------------------ */

    * {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        margin: 0;
    }

    section {
        width: 100%;
        padding: 70px 18px;
    }


    /* ------------------------------
       MUSIC BUTTON
    ------------------------------ */

    #musicBtn {

        position: fixed;

        top: 0;
        left: 50%;

        transform: translateX(-50%);

        z-index: 10000;

        padding: 10px 25px;

        border-radius: 0 0 25px 25px;

        font-size: 15px;

        white-space: nowrap;

    }


    /* ------------------------------
       HEADER
    ------------------------------ */

    header {

        width: 100%;

        min-height: auto;

        padding: 65px 18px 25px;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 20px;

        position: relative;

    }


    /* LOGO */

    .logo {

        font-size: 30px;

        text-align: center;

        white-space: nowrap;

    }


    /* ------------------------------
       NAVIGATION
    ------------------------------ */

    nav {

        width: 100%;

    }

    nav ul {

        width: 100%;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        gap: 10px 25px;

        padding: 0;

        margin: 0;

        list-style: none;

    }

    nav ul li {

        margin: 0;

    }

    nav ul li a {

        display: block;

        padding: 6px 0;

        font-size: 16px;

        white-space: nowrap;

    }


    /* ------------------------------
       HEADER BUTTONS
    ------------------------------ */

    #messageBtn,
    #darkModeBtn {

        width: auto;

        min-width: 170px;

        margin: 0;

        padding: 13px 22px;

        font-size: 15px;

    }


    /* ------------------------------
       HERO
    ------------------------------ */

    .hero {

        width: 100%;

        min-height: auto;

        padding: 65px 20px 50px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        text-align: center;

        gap: 35px;

    }


    .hero .left {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

    }


    .hero .left h1 {

        width: 100%;

        margin: 0 0 20px;

        font-size: clamp(38px, 11vw, 55px);

        line-height: 1.15;

        word-break: normal;

    }


    .hero .left p {

        width: 100%;

        max-width: 450px;

        margin: 0 auto 25px;

        font-size: 17px;

        line-height: 1.8;

    }


    .hero .btn {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: auto;

        max-width: 90%;

        padding: 15px 25px;

        font-size: 16px;

    }


    /* SOCIAL */

    .social {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 18px;

        margin-top: 20px;

    }


    .social a {

        width: 48px;

        height: 48px;

        display: flex;

        align-items: center;

        justify-content: center;

    }


    /* HERO IMAGE */

    .hero .right {

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

    }


    .hero .right img {

        width: 100%;

        max-width: 420px;

        height: auto;

        max-height: 420px;

        object-fit: cover;

        border-radius: 25px;

        display: block;

    }


    /* ------------------------------
       ABOUT
    ------------------------------ */

    #about {

        padding: 70px 18px;

    }


    #about h2,
    #memory h2,
    #gallery h2,
    #contact h2,
    #timeline h2 {

        font-size: clamp(27px, 7vw, 36px);

        line-height: 1.3;

        text-align: center;

    }


    .cards {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .card {

        width: 100%;

        min-height: auto;

        padding: 30px 22px;

    }


    /* ------------------------------
       MEMORY VIDEO
    ------------------------------ */

    #memory {

        width: 100%;

        padding: 65px 18px;

    }


    .memory-text {

        width: 100%;

        text-align: center;

        font-size: 16px;

        line-height: 1.7;

    }


    .memory-box {

        width: 100%;

        max-width: 500px;

        margin: 25px auto 0;

        padding: 0;

    }


    .memory-box video {

        width: 100%;

        height: auto;

        max-height: 70vh;

        object-fit: contain;

        display: block;

        border-radius: 20px;

    }


    /* ------------------------------
       COUNTER
    ------------------------------ */

    .counter {

        width: 100%;

        padding: 60px 18px;

    }


    .counter-box {

        width: 100%;

    }


    .counter-grid {

        display: grid;

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

        gap: 15px;

    }


    .counter-grid > div {

        min-width: 0;

        padding: 20px 10px;

    }


    .counter-grid h3 {

        font-size: 30px;

    }


    /* ------------------------------
       GALLERY
    ------------------------------ */

    #gallery {

        width: 100%;

        padding: 70px 15px;

    }


    .gallery {

        width: 100%;

        display: grid;

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

        gap: 12px;

    }


    .gallery img {

        width: 100%;

        height: 180px;

        object-fit: cover;

        border-radius: 15px;

    }


    /* ------------------------------
       3D GALLERY
    ------------------------------ */

    .gallery3d-wrapper {

        width: 100%;

        height: 400px;

        overflow: hidden;

    }


    .gallery3d {

        width: 170px;

        height: 230px;

    }


    .gallery3d span {

        width: 170px;

        height: 230px;

        transform:
            rotateY(calc(var(--i) * 45deg))
            translateZ(250px);

    }


    .gallery3d img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        border-radius: 15px;

    }


    .gallery-buttons {

        width: 100%;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 8px;

        margin-top: 20px;

    }


    .gallery-buttons button {

        margin: 0;

        padding: 10px 15px;

        font-size: 14px;

    }


    /* ------------------------------
       CONTACT
    ------------------------------ */

    #contact {

        padding: 65px 18px;

    }


    #contactForm {

        width: 100%;

        max-width: 500px;

        margin: auto;

    }


    #contactForm input,
    #contactForm textarea,
    #contactForm button {

        width: 100%;

        max-width: 100%;

    }


    #contactForm textarea {

        resize: vertical;

    }


    /* ------------------------------
       TIMELINE
    ------------------------------ */

    #timeline {

        width: 100%;

        padding: 65px 18px;

    }


    .timeline {

        width: 100%;

    }


    .timeline-item {

        width: 100%;

        margin-bottom: 20px;

    }


    .timeline-content {

        width: 100%;

        padding: 22px 18px;

    }


    /* ------------------------------
       TIMELINE POPUP
    ------------------------------ */

    #timelinePopup {

        padding: 15px;

    }


    .popupContent {

        width: 100%;

        max-width: 450px;

        max-height: 90vh;

        overflow-y: auto;

        padding: 20px;

        border-radius: 20px;

    }


    #popupImage {

        width: 100%;

        max-height: 55vh;

        object-fit: contain;

    }


    /* ------------------------------
       LIGHTBOX
    ------------------------------ */

    #lightbox {

        padding: 15px;

    }


    #lightboxImg {

        width: 95%;

        max-height: 80vh;

        object-fit: contain;

    }


    #closeLightbox {

        top: 15px;

        right: 20px;

    }


    #prevImage,
    #nextImage {

        font-size: 25px;

    }


    /* ------------------------------
       FOOTER
    ------------------------------ */

    footer {

        width: 100%;

        padding: 50px 18px;

        text-align: center;

    }


    .footer-content {

        width: 100%;

    }


    .footer-content h2 {

        font-size: 25px;

        line-height: 1.4;

    }


    .footer-content p {

        font-size: 15px;

        line-height: 1.7;

    }


    .footerSocial {

        display: flex;

        justify-content: center;

        flex-wrap: wrap;

        gap: 15px;

    }


    /* ------------------------------
       TOP BUTTON
    ------------------------------ */

    #topBtn {

        right: 15px;

        bottom: 15px;

        width: 45px;

        height: 45px;

    }

}


/* ==========================================
   SMALL PHONES
   320px - 480px
========================================== */

@media (max-width: 480px) {

    header {

        padding-left: 12px;

        padding-right: 12px;

    }


    .logo {

        font-size: 27px;

    }


    nav ul {

        gap: 8px 18px;

    }


    nav ul li a {

        font-size: 15px;

    }


    #messageBtn,
    #darkModeBtn {

        width: 170px;

        min-width: 0;

    }


    .hero {

        padding-left: 15px;

        padding-right: 15px;

    }


    .hero .left h1 {

        font-size: 40px;

    }


    .hero .left p {

        font-size: 16px;

        line-height: 1.7;

    }


    .hero .btn {

        width: 210px;

        max-width: 100%;

    }


    .hero .right img {

        max-height: 350px;

    }


    .counter-grid {

        grid-template-columns: 1fr 1fr;

        gap: 10px;

    }


    .counter-grid > div {

        padding: 18px 8px;

    }


    .counter-grid h3 {

        font-size: 25px;

    }


    .counter-grid span {

        font-size: 13px;

    }


    .gallery3d-wrapper {

        height: 350px;

    }


    .gallery3d {

        width: 145px;

        height: 200px;

    }


    .gallery3d span {

        width: 145px;

        height: 200px;

        transform:
            rotateY(calc(var(--i) * 45deg))
            translateZ(210px);

    }


    .gallery-buttons button {

        padding: 9px 12px;

        font-size: 13px;

    }

}
/* =========================================
   MOBILE MUSIC BUTTON - FINAL FIX
========================================= */

#musicBtn {
    position: fixed !important;

    top: 0 !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: auto !important;
    min-width: 145px !important;
    max-width: 200px !important;

    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;

    padding: 8px 20px !important;
    margin: 0 !important;

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

    border: none !important;
    border-radius: 0 0 25px 25px !important;

    font-size: 15px !important;
    line-height: 1 !important;

    z-index: 99999 !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;

    overflow: hidden !important;
}


/* Small mobile */

@media (max-width: 480px) {

    #musicBtn {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        padding: 8px 15px !important;

        font-size: 14px !important;
    }

}
/* =========================================
   MUSIC BUTTON - LAPTOP + MOBILE
========================================= */

#musicBtn {
    position: fixed !important;

    top: 15px !important;
    right: 20px !important;
    left: auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 180px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    padding: 8px 18px !important;
    margin: 0 !important;

    transform: none !important;

    border-radius: 25px !important;

    font-size: 15px !important;
    line-height: 1 !important;

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

    white-space: nowrap !important;

    z-index: 999999 !important;

    box-sizing: border-box !important;
}


/* ===============================
   MOBILE
================================ */

@media (max-width: 768px) {

    #musicBtn {

        top: 10px !important;
        right: 10px !important;

        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        padding: 6px 12px !important;

        font-size: 14px !important;

        border-radius: 20px !important;

    }

}
/* ================================
   MOBILE HERO IMAGE - FIX ONLY
================================ */

@media (max-width: 768px) {

    .hero .right img {
        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        object-fit: contain !important;

        display: block !important;

        border-radius: 25px !important;
    }

}