/* ================================
   GOOGLE FONT
==================================*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

html{
    overflow-x:hidden;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0b0b0b;
    color:#ffffff;
    overflow-x:hidden;

    background-image:

   radial-gradient(circle at top right,

   rgba(212,175,55,.08),

   transparent 40%),

   radial-gradient(circle at bottom left,

   rgba(255,255,255,.03),

   transparent 40%);

   ::selection{

background:#D4AF37;

color:black;

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#D4AF37;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#FFD700;

}

}



/* ================================
   VARIABLES
==================================*/

:root{

    --gold:#D4AF37;
    --gold2:#F7D774;
    --dark:#0b0b0b;
    --card:#171717;
    --text:#ffffff;
    --gray:#bdbdbd;

}

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

a{

    text-decoration:none;
    color:white;

}

ul{

    list-style:none;

}

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

header{

    width:100%;
    position:fixed;
    top:0;
    left:0;

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

    backdrop-filter:blur(15px);

    z-index:1000;

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

}

/* ================================
   NAVIGATION
==================================*/

nav{

    width:95%;
    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

/*====================================
        ACTIVE NAVIGATION
====================================*/

nav ul li a{

    position:relative;

    transition:.4s ease;

}

nav ul li a.active{

    color:var(--gold);

}

nav ul li a.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:100%;

    height:2px;

    background:var(--gold);

    border-radius:10px;

}

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

.logo-link{

display:flex;

align-items:center;

gap:18px;

}

.logo-img{

width:65px;

height:65px;

border-radius:50%;

object-fit:cover;

border:3px solid var(--gold);

box-shadow:0 0 20px rgba(212,175,55,.35);

transition:.4s;

}

.logo-img:hover{

transform:rotate(8deg) scale(1.08);

}

.logo-text h2{

font-size:1.35rem;

color:var(--gold);

font-weight:700;

}

.logo-text p{

font-size:.85rem;

letter-spacing:2px;

color:#d9d9d9;

}

/* ================================
   MENU
==================================*/

nav ul{

display:flex;

gap:35px;

}

nav ul li a{

font-weight:500;

transition:.4s;

position:relative;

}

nav ul li a:hover{

color:var(--gold);

padding:8px 0;



}

nav ul li a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.4s;

}

nav ul li a:hover::after{

width:100%;

}

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

.hero{

width:95%;

max-width:1400px;

margin:auto;

min-height:100vh;

display:flex;

justify-content:space-between;

align-items:center;

padding-top:120px;

gap:70px;

}

.hero-text{

flex:1;

}

.hero-text h4{

font-size:1.2rem;

color:var(--gold);

margin-bottom:10px;

}

.hero-text h1{

font-size:clamp(3rem,7vw,5rem);


line-height:1.1;

margin-bottom:10px;

}

.hero-text h3{

font-weight:500;

color:var(--gold2);

margin-bottom:15px;

}

.hero-text h2{

font-size:1.6rem;

font-weight:500;

color:#d7d7d7;

margin-bottom:25px;

}

.hero-text p{

font-size:1rem;

line-height:1.8;

color:#cfcfcf;

max-width:700px;

margin-bottom:40px;

}

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

.hero-buttons{

display:flex;

gap:20px;

}

.btn{



background:linear-gradient(

45deg,

#D4AF37,

#FFD700,

#D4AF37

);



color:black;

padding:15px 35px;

border-radius:40px;

font-weight:600;

transition:.4s;

}

.btn:hover{

background:white;

transform:translateY(-5px);

}

.btn2{

border:2px solid var(--gold);

padding:15px 35px;

border-radius:40px;

transition:.4s;

}

.btn2:hover{

background:var(--gold);

color:black;

}

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

.hero-image{

flex:1;

text-align:center;

}

.hero-image img{

width:420px;

max-width:100%;

border-radius:50%;

border:5px solid var(--gold);



box-shadow:

0 0 20px rgba(212,175,55,.25),

0 0 45px rgba(212,175,55,.20),

0 0 90px rgba(212,175,55,.15);



animation:float 10s ease-in-out infinite;



transition:.5s;



}

.hero-image img:hover{

transform:scale(1.05);

}

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

section{

padding:100px 2.5%;

}

section h2{

text-align:center;

font-size:2.6rem;

margin-bottom:60px;

color:var(--gold);

}

.about-container{

display:flex;

align-items:center;

gap:70px;

}

.about-image img{

width:350px;

border-radius:20px;

border:3px solid var(--gold);

}

.about-text h3{

margin-bottom:20px;

font-size:2rem;

}

.about-text p{

line-height:1.9;

color:#cfcfcf;

margin-bottom:20px;

}

/* ================================
   SKILLS
==================================*/

.skills-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.skill-box{

background:#161616;

padding:35px;

border-radius:20px;

text-align:center;

transition:.4s;

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



cursor:pointer;



}

.skill-box:hover{

transform:translateY(-10px);

border-color:var(--gold);

box-shadow:0 0 25px rgba(212,175,55,.15);

}

.skill-box i{

font-size:3rem;

color:var(--gold);

margin-bottom:20px;

}

.skill-box h3{

margin-bottom:20px;

}

.skill-box p{

line-height:1.8;

color:#d0d0d0;

}

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

footer{

background:#070707;

text-align:center;

padding:35px;

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

}

footer p{

color:#a5a5a5;

}

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

@media(max-width:992px){

.hero{

flex-direction:column-reverse;

text-align:center;

}

.hero-text p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.about-container{

flex-direction:column;

text-align:center;

}

nav{

flex-direction:column;

gap:20px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:20px;

}

.hero-text h1{

font-size:2.8rem;

}

} 

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

} 

/*====================================
      PORTFOLIO SECTION
=====================================*/

#portfolio{

    width:95%;
    max-width:1400px;
    margin:auto;

}

.portfolio-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:35px;

    margin-top:60px;

}

.portfolio-card{

    background:var(--card);

    border-radius:20px;

    overflow:hidden;

    transition:.4s;

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

}

.portfolio-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:0 25px 45px rgba(212,175,55,.18);

}

.portfolio-image{

    position:relative;

    display:block;

    overflow:hidden;

    cursor:pointer;

}

.portfolio-image img{

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;

    transition:.6s;

}

.portfolio-card:hover .portfolio-image img{

    transform:scale(1.08);

}

.portfolio-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
    to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.35) 
    );

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.4s;

}

.portfolio-card:hover .portfolio-overlay{

    opacity:1;

} 

.portfolio-overlay i{

    width:80px;

    height:80px;

    border-radius:50%;

    background:rgba(212,175,55,.95);

    color:#111;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    transform:scale(.5);

    transition:.4s;

    box-shadow:0 0 25px rgba(212,175,55,.5);

}

.portfolio-card:hover .portfolio-overlay i{

    transform:scale(1);

}  


.portfolio-card:hover .portfolio-overlay i{

    animation:pulse 1.8s infinite;

}

/*====================================
      WEB PROJECTS
====================================*/

#projects{

    width:95%;
    max-width:1400px;
    margin:auto;

}

.project-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:35px;

    margin-top:60px;

}

.project-card{

    background:var(--card);

    border-radius:20px;

    overflow:hidden;

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

    transition:.4s;

}

.project-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:0 20px 40px rgba(212,175,55,.18);

}

.project-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

}

.project-card h3{

    color:var(--gold);

    padding:25px 25px 10px;

}

.project-card p{

    padding:0 25px;

    line-height:1.8;

    color:#d2d2d2;

}

.project-buttons{

    display:flex;

    gap:15px;

    padding:25px;

    flex-wrap:wrap;

} 

/*====================================
      PHOTO RESTORATION
====================================*/

#restoration{

    width:95%;
    max-width:1400px;
    margin:auto;

}

.restore-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:35px;

    margin-top:60px;

}

.restore-box{

    background:var(--card);

    border-radius:20px;

    overflow:hidden;

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

    transition:.4s;

    text-align:center;

}

.restore-box:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:0 20px 40px rgba(212,175,55,.18);

}

.restore-box img{

    width:100%;

    height:auto;

    max-height:500px;

    object-fit:contain;

    padding:20px;

    display:block;

    background:#111;

}

.restore-box h3{

    color:var(--gold);

    padding:20px;

}


/*====================================
      WHY CHOOSE US
=====================================*/

#why{

    width:95%;

    max-width:1400px;

    margin:auto;

}

.why-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.why-grid div{

    background:var(--card);

    padding:35px;

    border-radius:20px;

    text-align:center;

    transition:.4s;

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

}

.why-grid div:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:0 20px 40px rgba(212,175,55,.15);

}

.why-grid h3{

    color:var(--gold);

    margin-bottom:15px;

}

.why-grid p{

    color:#d0d0d0;

    line-height:1.8;

} 

@media(max-width:768px){

.portfolio-container,

.project-grid,

.restore-container,

.why-grid{

    grid-template-columns:1fr;

}

.project-buttons{

    flex-direction:column;

}

.portfolio-card img,

.project-card img{

    height:auto;

}

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(212,175,55,.7);

}

70%{

box-shadow:0 0 0 25px rgba(212,175,55,0);

}

100%{

box-shadow:0 0 0 0 rgba(212,175,55,0);

}

}

/*====================================
        TESTIMONIALS
====================================*/

#testimonials{

    width:95%;
    max-width:1400px;
    margin:auto;
    text-align:center;
    position:relative;

}

.testimonial-subtitle{

    max-width:700px;
    margin:20px auto 60px;
    color:#cfcfcf;
    line-height:1.8;

}

.testimonial-container{

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

}

.testimonial-card{

    position:relative;
    overflow:hidden;

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

    backdrop-filter:blur(12px);

    padding:40px 30px;

    border-radius:25px;

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

    transition:.5s;

}

.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:0 20px 45px rgba(212,175,55,.25);

}

.testimonial-card::before{

    content:"❝";

    position:absolute;

    top:10px;

    left:20px;

    font-size:7rem;

    color:rgba(212,175,55,.08);

    font-family:serif;

    line-height:1;

}



.client-img{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid var(--gold);

    margin-bottom:20px;

    transition:.5s;

}


.testimonial-card:hover .client-img{

    transform:scale(1.08);

    box-shadow:0 0 30px rgba(212,175,55,.45);

}


@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.client-img{

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

}


.stars{

    color:var(--gold);

    font-size:1.4rem;

    letter-spacing:4px;

    margin-bottom:18px;

    transition:.4s;

}

.testimonial-card:hover .stars{

    transform:scale(1.08);

}



.testimonial-card p{

    color:#d8d8d8;

    line-height:1.9;

    font-style:italic;

    margin-bottom:25px;

}



.testimonial-card h3{

    color:var(--gold);

    margin-bottom:5px;

}


.testimonial-card span{

    color:#bdbdbd;

    font-size:.9rem;

}


.verified{

    display:inline-block;

    margin-top:12px;

    padding:6px 15px;

    border-radius:50px;

    background:#123d1d;

    color:#8df0a7;

    font-size:.8rem;

    font-weight:600;

}



/*====================================
      VIDEO TESTIMONIAL
====================================*/

#video-testimonial{

    width:95%;

    max-width:900px;

    margin:120px auto;

    text-align:center;

}

.video-card{

    position:relative;

    overflow:hidden;

    border-radius:25px;

    display:block;

    border:2px solid rgba(255,255,255,.08);

    transition:.5s;

}


.video-card img{

    width:100%;

    display:block;

    transition:.6s;

}


.video-card:hover img{

    transform:scale(1.05);

}


.video-overlay{

    position:absolute;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.5s;

}

.video-card:hover .video-overlay{

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

}


.video-overlay i{

    font-size:5rem;

    color:var(--gold);

    transition:.5s;

}

.video-card:hover i{

    transform:scale(1.2);

}


.video-duration{

    position:absolute;

    bottom:15px;

    right:15px;

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

    color:white;

    padding:6px 10px;

    border-radius:8px;

    font-size:.85rem;

}


.testimonial-card::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    background:linear-gradient(to right,var(--gold),#fff,var(--gold));

    transform:translateX(-50%);

    transition:.5s;

}

.testimonial-card:hover::after{

    width:100%;

}
.video-label{

    position:absolute;

    bottom:20px;

    left:20px;

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

    color:#fff;

    padding:10px 18px;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

    border:1px solid var(--gold);

    transition:.4s;

}

.video-card:hover .video-label{

    background:var(--gold);

    color:#000;

}


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

#contact{

    width:95%;
    max-width:1400px;
    margin:120px auto;
    text-align:center;

}

.contact-subtitle{

    max-width:750px;
    margin:20px auto 70px;
    color:#cfcfcf;
    line-height:1.8;
    font-size:1.05rem;

}

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

.contact-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

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

.contact-card{

    position:relative;

    overflow:hidden;

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

    backdrop-filter:blur(15px);

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

    border-radius:25px;

    padding:40px 25px;

    transition:.45s;

}

/* Hover */

.contact-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:0 20px 45px rgba(212,175,55,.20);

}

/* Gold Line */

.contact-card::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    background:linear-gradient(to right,var(--gold),#fff,var(--gold));

    transform:translateX(-50%);

    transition:.5s;

}

.contact-card:hover::after{

    width:100%;

}

/*=========================
          ICONS
==========================*/

.contact-card i{

    font-size:3rem;

    color:var(--gold);

    margin-bottom:20px;

    transition:.4s;

}

.contact-card:hover i{

    transform:scale(1.2) rotate(8deg);

}

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

.contact-card h3{

    color:var(--gold);

    margin-bottom:15px;

    font-size:1.35rem;

}

.contact-card p{

    color:#d0d0d0;

    line-height:1.8;

    margin-bottom:25px;

}

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

.contact-card a{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

    border:2px solid var(--gold);

    color:white;

    transition:.4s;

    font-weight:600;

}

.contact-card a:hover{

    background:var(--gold);

    color:black;

}

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

.contact-cta{

    margin-top:100px;

    padding:70px 30px;

    border-radius:30px;

    background:linear-gradient(145deg,#1b1b1b,#0b0b0b);

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

    position:relative;

    overflow:hidden;

}

/* Gold Glow */

.contact-cta::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(212,175,55,.08);

    border-radius:50%;

    filter:blur(100px);

    top:-120px;

    right:-100px;

}

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

.contact-cta h3{

    color:var(--gold);

    font-size:2.3rem;

    margin-bottom:20px;

}

/*=========================
       CTA TEXT
==========================*/

.contact-cta p{

    max-width:700px;

    margin:auto;

    line-height:1.9;

    color:#d0d0d0;

    margin-bottom:40px;

}

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

.contact-cta .btn{

    padding:16px 45px;

    font-size:1rem;

}

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

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

.contact-cta .btn{

animation:pulse 2.5s infinite;

}

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

@media(max-width:768px){

.contact-container{

grid-template-columns:1fr;

}

.contact-cta{

padding:50px 20px;

}

.contact-cta h3{

font-size:1.8rem;

}

}



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

#footer{

    background:#070707;

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

    padding:80px 5% 30px;

    margin-top:120px;

}

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

.footer-container{

    display:grid;

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

    gap:50px;

    max-width:1400px;

    margin:auto;

}

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

.footer-logo{

    width:80px;

    height:80px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid var(--gold);

    margin-bottom:20px;

    box-shadow:0 0 20px rgba(212,175,55,.30);

}

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

.footer-box h2{

    color:var(--gold);

    margin-bottom:15px;

}

.footer-box h3{

    color:var(--gold);

    margin-bottom:20px;

    font-size:1.2rem;

}

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

.footer-box p{

    color:#cfcfcf;

    line-height:1.8;

    margin-bottom:12px;

}

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

.footer-box ul{

    list-style:none;

    padding:0;

}

.footer-box ul li{

    margin-bottom:14px;

}

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

.footer-box a{

    color:#d5d5d5;

    transition:.35s;

}

.footer-box a:hover{

    color:var(--gold);

    padding-left:8px;

}

/*=========================
      SOCIAL ICONS
==========================*/

.footer-social{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:60px 0 35px;

}

.footer-social a{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:2px solid rgba(212,175,55,.35);

    color:var(--gold);

    font-size:1.3rem;

    transition:.4s;

}

.footer-social a:hover{

    background:var(--gold);

    color:black;

    transform:translateY(-8px);

    box-shadow:0 10px 25px rgba(212,175,55,.35);

}

/*=========================
      HORIZONTAL LINE
==========================*/

#footer hr{

    border:none;

    height:1px;

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

    margin:30px 0;

}

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

.footer-bottom{

    text-align:center;

}

.footer-bottom p{

    color:#9f9f9f;

    line-height:1.8;

}

.footer-bottom strong{

    color:var(--gold);

}

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

.footer-box{

    transition:.4s;

}

.footer-box:hover{

    transform:translateY(-6px);

}

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

@media(max-width:768px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-box ul{

padding:0;

}

.footer-social{

flex-wrap:wrap;

}

.footer-logo{

margin:auto auto 20px;

}

}

.footer-logo{

    transition:.5s;

}

.footer-logo:hover{

    transform:rotate(360deg) scale(1.08);

    box-shadow:0 0 35px rgba(212,175,55,.6);

}

/*====================================
      FLOATING WHATSAPP BUTTON
====================================*/

.floating-whatsapp{
    position:fixed;
    right:25px;
    bottom:100px;
    z-index:999;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 18px;
    border-radius:50px;
    background:#25D366;
    color:#062b15;
    font-weight:700;
    box-shadow:0 8px 25px rgba(0,0,0,.35);
    transition:transform .3s ease, box-shadow .3s ease;
    animation:whatsapp-pulse 2.5s ease-in-out infinite;
}

.floating-whatsapp i{
    font-size:1.5rem;
}

.floating-whatsapp:hover{
    color:#062b15;
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 12px 30px rgba(37,211,102,.35);
    animation:none;
}

@keyframes whatsapp-pulse{
    0%, 100%{
        box-shadow:0 8px 25px rgba(0,0,0,.35);
    }
    50%{
        box-shadow:0 8px 25px rgba(37,211,102,.5);
    }
}

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

@media (max-width: 600px){

    body{
        font-size:.95rem;
    }

    header{
        position:fixed;
    }

    nav{
        width:100%;
        padding:10px 4%;
        gap:10px;
    }

    .logo-link{
        gap:10px;
    }

    .logo-img{
        width:46px;
        height:46px;
        border-width:2px;
    }

    .logo-text h2{
        font-size:.86rem;
        line-height:1.2;
    }

    .logo-text p{
        font-size:.58rem;
        letter-spacing:1px;
    }

    nav ul{
        width:100%;
        gap:8px 15px;
        justify-content:center;
    }

    nav ul li a{
        font-size:.78rem;
    }

    .hero{
        width:90%;
        min-height:auto;
        padding-top:170px;
        padding-bottom:70px;
        gap:35px;
    }

    .hero-text h4{
        font-size:1rem;
    }

    .hero-text h1{
        font-size:clamp(2rem, 11vw, 3rem);
        overflow-wrap:anywhere;
    }

    .hero-text h2{
        font-size:1.05rem;
        line-height:1.6;
    }

    .hero-text p{
        font-size:.92rem;
        line-height:1.7;
        margin-bottom:28px;
    }

    .hero-image img{
        width:min(78vw, 310px);
    }

    .hero-buttons,
    .project-buttons{
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .btn,
    .btn2{
        display:block;
        width:100%;
        padding:13px 20px;
        text-align:center;
    }

    section{
        padding:65px 5%;
    }

    section h2{
        font-size:1.8rem;
        line-height:1.3;
        margin-bottom:35px;
    }

    .about-container{
        gap:30px;
    }

    .about-image,
    .about-image video{
        width:100%;
        max-width:100%;
    }

    .about-text h3{
        font-size:1.5rem;
    }

    .about-text p,
    .skill-box p,
    .project-card p,
    .why-grid p,
    .testimonial-card p,
    .contact-card p{
        line-height:1.7;
    }

    .skills-container,
    .portfolio-container,
    .project-grid,
    .restore-container,
    .why-grid,
    .testimonial-container,
    .contact-container,
    .footer-container{
        grid-template-columns:1fr;
        gap:20px;
    }

    .skill-box,
    .testimonial-card,
    .contact-card{
        padding:28px 20px;
    }

    #portfolio,
    #projects,
    #restoration,
    #why,
    #testimonials,
    #contact,
    #video-testimonial{
        width:90%;
        margin-left:auto;
        margin-right:auto;
    }

    .portfolio-container,
    .project-grid,
    .restore-container{
        margin-top:35px;
    }

    .portfolio-image img,
    .project-card img{
        height:auto;
        min-height:170px;
    }

    .contact-subtitle,
    .testimonial-subtitle{
        margin-bottom:35px;
        font-size:.92rem;
    }

    .contact-card p{
        overflow-wrap:anywhere;
    }

    .contact-cta{
        margin-top:55px;
        padding:40px 18px;
    }

    .contact-cta h3{
        font-size:1.5rem;
        line-height:1.4;
    }

    .video-label{
        left:12px;
        bottom:12px;
        padding:8px 12px;
        font-size:.75rem;
    }

    #footer{
        padding:55px 5% 25px;
        margin-top:65px;
    }

    .footer-social{
        margin:40px 0 25px;
        gap:12px;
    }

    #topBtn{
        right:15px;
        bottom:15px;
        width:45px;
        height:45px;
    }

    .floating-whatsapp{
        right:15px;
        bottom:75px;
        width:52px;
        height:52px;
        padding:0;
        justify-content:center;
        border-radius:50%;
    }

    .floating-whatsapp span{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        white-space:nowrap;
    }

}

/*====================================
        BACK TO TOP
====================================*/

#topBtn{

    position:fixed;

    bottom:30px;

    right:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--gold);

    color:#000;

    font-size:1.2rem;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 10px 25px rgba(212,175,55,.35);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.4s;

    z-index:999;

}

#topBtn.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#topBtn:hover{

    background:#fff;

    color:#000;

    transform:translateY(-6px);

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

}

/*====================================
        LOADING SCREEN
====================================*/

#loader{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:#070707;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity .8s ease,
               visibility .8s ease;

}

#loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-content{

    text-align:center;

}

.loader-logo{

    width:120px;

    height:120px;

    border-radius:50%;

    border:4px solid var(--gold);

    object-fit:cover;

    margin-bottom:25px;

    animation:logoFloat 2s ease-in-out infinite;

    box-shadow:0 0 30px rgba(212,175,55,.35);

}

.loader-content h1{

    color:var(--gold);

    font-size:2rem;

    margin-bottom:10px;

    letter-spacing:2px;

}

.loader-content p{

    color:#cfcfcf;

    margin-bottom:35px;

    letter-spacing:3px;

}

/*=========================
      LOADING BAR
==========================*/

.loader-bar{

    width:260px;

    height:6px;

    background:#222;

    border-radius:30px;

    overflow:hidden;

    margin:auto;

}

.loader-bar span{

    display:block;

    width:0;

    height:100%;

    background:linear-gradient(to right,
            var(--gold),
            var(--gold2));

    animation:loading 2s linear forwards;

}

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

@keyframes loading{

0%{

width:0;

}

100%{

width:100%;

}

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}