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

body{
font-family:'Poppins',sans-serif;
background:#000;
}

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

html{

    scroll-behavior:smooth;

}


.header{

    position:fixed;

    top:25px;

    width:100%;

    display:flex;

    justify-content:center;

    z-index:1000;

}

.navbar{

    width:92%;

    max-width:1400px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 40px;

    border-radius:70px;

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

    backdrop-filter:blur(18px);

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

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

    transition:.4s;

}

.logo{

    color:#c9a227;

    text-decoration:none;

    font-size:1.8rem;

    font-weight:700;

    letter-spacing:1px;

}

.logo span{

    color:#FFF;

}

.nav-links{

    display:flex;

    gap:45px;

    list-style:none;

}

.nav-links a{

    position:relative;

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:.3s;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#c9a227;

    transition:.3s;

}

.nav-links a:hover::after,

.nav-links .active::after{

    width:100%;

}

.nav-links a:hover{

    color:#c9a227;

}

.btn-nav{

    padding:14px 32px;

    border-radius:40px;

    background:#c9a227;

    color:#111;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-nav:hover{

    transform:translateY(-3px);

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

}

.menu-btn{

    display:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}


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

@media (max-width:992px){

    .navbar{

        position:relative;

        padding:18px 28px;

    }

    .nav-links{

        position:absolute;

        top:calc(100% + 15px);

        left:0;

        width:100%;

        background:rgba(15,15,15,.98);

        backdrop-filter:blur(20px);

        border-radius:20px;

        padding:30px 0;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:25px;

        opacity:0;

        visibility:hidden;

        transform:translateY(-20px);

        transition:.4s;

    }

    .nav-links.show{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }

    .btn-nav{

        display:none;

    }

    .menu-btn{

        display:block;

        color:#fff;

        font-size:30px;

        cursor:pointer;

        z-index:1001;

    }

}




.scroll{

    position:absolute;

    left:8%;

    bottom:40px;

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-size:.95rem;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.3s;

    animation:scrollMove 2s infinite;

}

.scroll i{

    font-size:1.3rem;

}

.scroll:hover{

    color:#ee7e22;

}

@keyframes scrollMove{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

}



.hero{

position:relative;
height:100vh;
overflow:hidden;

display:flex;
align-items:center;

}

.video-bg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Reducimos la opacidad general para que el video respire y se vea más vivo */
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.55), /* Un poco menos oscuro en la izquierda */
        rgba(0, 0, 0, 0.1)   /* Casi transparente a la derecha */
    ),
    linear-gradient(
        to top,
        rgba(0, 0, 0, 0.4),  /* Oscuridad sutil abajo para el texto "Scroll" */
        transparent 50%      /* Desaparece más rápido hacia arriba */
    );
    
    /* ELIMINADO: backdrop-filter: blur(2px); -> Esto era lo que quitaba la nitidez */
}

.hero-content{

position:relative;
z-index:5;

padding-left:10%;

max-width:700px;

color:white;

}

.hero-content span{

letter-spacing:5px;

font-size:13px;

opacity:.8;

}

.hero-content h1{

font-size:clamp(4rem,9vw,8rem);

font-weight:700;

line-height:.95;

margin-top:25px;

margin-bottom:30px;

}

.hero-content p{

font-size:20px;

color:#d9d9d9;

line-height:1.7;

margin-bottom:45px;

max-width:550px;

}

.buttons{

display:flex;

gap:20px;

}

.btn-primary{

padding:18px 45px;

background:white;

color:black;

text-decoration:none;

border-radius:100px;

font-weight:600;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-5px);

}

.btn-secondary{

padding:18px 45px;

border:1px solid white;

color:white;

text-decoration:none;

border-radius:100px;

transition:.35s;

}

.btn-secondary:hover{

background:white;

color:black;

}

.scroll{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

color:white;

letter-spacing:5px;

font-size:13px;

animation:scroll 2s infinite;

z-index:5;

}

@keyframes scroll{

0%{

transform:translate(-50%,0);

opacity:1;

}

50%{

transform:translate(-50%,15px);

opacity:.5;

}

100%{

transform:translate(-50%,0);

opacity:1;

}

}



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

.section{

    padding:120px 8%;
    background:#0f0f0f;
    position:relative;
    overflow:hidden;

}

.about-container{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;

}

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

.about-image{

    position:relative;
    z-index:1;

}

.about-image img{

    width:100%;
    display:block;
    border-radius:25px;
    object-fit:cover;
    transition:.6s;

}

.about-image:hover img{

    transform:scale(1.02);

}

.experience-box{

    position:absolute;
    right:-25px;
    bottom:35px;

    width:180px;

    background:#fff;
    color:#111;

    padding:25px;

    border-radius:20px;

    text-align:center;

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

    z-index:5;

}

.experience-box h2{

    font-size:3rem;
    color:#c9a227;

}

.experience-box span{

    font-size:.9rem;
    color:#555;

}

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

.about-content{

    position:relative;
    z-index:2;

}

.section-subtitle{

    color:#c9a227;
    letter-spacing:4px;
    font-size:.85rem;
    font-weight:600;

}

.about-content h2{

    color:#fff;
    font-size:3rem;
    line-height:1.2;
    margin:20px 0;

}

.about-content p{

    color:#c9c9c9;
    font-size:18px;
    line-height:1.9;
    margin-bottom:50px;

}

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

.about-cards{

    display:grid;

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

    gap:25px;

    margin-bottom:50px;

    position:relative;

    z-index:20;

}

.card{

    position:relative;

    background:#181818;

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

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    cursor:pointer;

    overflow:hidden;

    transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;

    will-change:transform;

}

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(212,175,55,.35),
        transparent 60%
    );

    opacity:0;

    transition:.35s;

}

.card:hover{

    transform:translateY(-12px);

    border-color:#c9a227;

    background:#1f1f1f;

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

}

.card:hover::before{

    opacity:1;

}

.card:hover i{

    transform:scale(1.15);

}

.card:hover h3{

    color:#c9a227;

}

.card i{

    font-size:2.2rem;

    color:#c9a227;

    margin-bottom:20px;

    transition:.35s;

}

.card h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:10px;

    transition:.35s;

}

.card span{

    color:#999;

    font-size:.95rem;

}

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

.about-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    border-radius:60px;

    background:#c9a227;

    color:#111;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.about-btn:hover{

    transform:translateY(-5px);

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

}

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

@media(max-width:991px){

    .about-container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-content{

        text-align:center;

    }

    .about-cards{

        grid-template-columns:1fr;

    }

    .experience-box{

        right:20px;

        bottom:20px;

    }

    .about-content h2{

        font-size:2.3rem;

    }

}




/* =========================================
   VIDEO DE RECORRIDOS ARQUITECTÓNICOS
   ========================================= */

.video-recorridos {
    width: 100%;
    padding: 100px 5% 110px;
    background: #000;
    overflow: hidden;
}

.video-recorridos-header {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

.video-recorridos-header .section-label {
    display: block;
    margin-bottom: 15px;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 500;
    color: #c9a227;
}

.video-recorridos-header h2 {
    margin: 0 0 18px;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
}

.video-recorridos-header p {
    max-width: 650px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.8;
    color: #fff;
}

/* CONTENEDOR DEL VIDEO */

.video-recorridos-container {
    position: relative;
    width: 90%;
    max-width: 1500px;
    height: 570px;
    margin: 0 auto;
    overflow: hidden;
    background: #111;
    border-radius: 4px;
}

/* VIDEO */

.video-recorridos-container video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* OVERLAY */

.video-recorridos-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.15)
    );
}

/* BOTÓN SONIDO */

.video-sound-button {
    position: absolute;
    right: 25px;
    bottom: 25px;

    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.35);
    color: #fff;

    font-size: 18px;
    cursor: pointer;

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

    transition: all 0.3s ease;
}

.video-sound-button:hover {
    background: rgba(0, 0, 0, 0.65);
    transform: scale(1.05);
}

/* TABLET */

@media (max-width: 900px) {

    .video-recorridos {
        padding: 80px 4% 90px;
    }

    .video-recorridos-container {
        width: 94%;
        height: 450px;
    }
}

/* CELULAR */

@media (max-width: 600px) {

    .video-recorridos {
        padding: 65px 20px 75px;
    }

    .video-recorridos-header {
        margin-bottom: 30px;
    }

    .video-recorridos-header h2 {
        font-size: 32px;
    }

    .video-recorridos-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .video-recorridos-container {
        width: 100%;
        height: 390px;
        border-radius: 3px;
    }

    .video-sound-button {
        right: 15px;
        bottom: 15px;
        width: 42px;
        height: 42px;
    }
}





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

.projects{

    background:#070707;

}

.section-header{

    max-width:800px;

    margin:auto;

    text-align:center;

    margin-bottom:80px;

}

.section-header h2{

    font-size:3.5rem;

    color:#fff;

    margin:20px 0;

}

.section-header p{

    color:#bdbdbd;

    font-size:18px;

    line-height:1.8;

}

.projects-grid{

    display:grid;

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

    gap:30px;

}

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

}

.project-card img{

    width:100%;

    height:420px;

    object-fit:cover;

    transition:.6s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.85)

    );

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    opacity:0;

    transition:.4s;

}

.project-card:hover .project-overlay{

    opacity:1;

}

.project-overlay span{

    color:#c9a227;

    letter-spacing:2px;

}

.project-overlay h3{

    color:#fff;

    margin-top:10px;

    font-size:2rem;

}



/*==================== OTROS PROYECTOS ====================*/

.carousel-container{

display:flex;

align-items:center;

gap:25px;

}

.project-slider{

display:flex;

gap:30px;

overflow-x:auto;

scroll-behavior:smooth;

scrollbar-width:none;

}

.project-slider::-webkit-scrollbar{

display:none;

}

.modern-card{

position:relative;

min-width:430px;

height:580px;

border-radius:28px;

overflow:hidden;

cursor:pointer;

flex-shrink:0;

transition:.45s;

}

.modern-card:hover{

transform:translateY(-12px);

}

.modern-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.8s;

}

.modern-card:hover img{

transform:scale(1.12);

}

.card-overlay{

position:absolute;

left:0;

bottom:0;

width:100%;

padding:35px;

background:linear-gradient(to top,#000 5%,rgba(0,0,0,.85) 35%,transparent);

color:#fff;

}

.card-overlay span{

display:inline-block;

padding:6px 16px;

background:#d4af37;

color:#111;

font-size:.8rem;

font-weight:700;

border-radius:30px;

margin-bottom:18px;

}

.card-overlay h3{

font-size:2rem;

margin-bottom:15px;

}

.card-overlay p{

margin-bottom:10px;

font-size:17px;

}

.card-overlay small{

display:block;

margin-bottom:25px;

opacity:.8;

font-size:15px;

}

.card-overlay a{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 28px;

border-radius:50px;

background:#fff;

color:#111;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.card-overlay a:hover{

background:#d4af37;

}

.slider-arrow{

width:65px;

height:65px;

border:none;

border-radius:50%;

background:#d4af37;

font-size:30px;

cursor:pointer;

flex-shrink:0;

transition:.3s;

}

.slider-arrow:hover{

transform:scale(1.12);

}

@media(max-width:768px){

.modern-card{

min-width:90%;

height:470px;

}

.slider-arrow{

display:none;

}

.card-details{

    margin:20px 0;

}

.card-details p{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

    font-size:15px;

    color:#f5f5f5;

}

.card-details i{

    color:#d4af37;

    font-size:18px;

    min-width:20px;

}

.card-details strong{

    color:#ffffff;

    font-weight:600;

}

}





.view-project{

    display:inline-flex;

    align-items:center;

    gap:15px;

    margin-top:auto;

    padding:8px 8px 8px 22px;

    border-radius:50px;

    background:#fff;

    color:#111;

    text-decoration:none;

    font-weight:700;

    width:200px;

}

.view-project span{

    flex:1;

}

.view-project i{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#d8ad2f;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.view-project:hover{

    transform:translateY(-4px);

}

.view-project:hover i{

    transform:translateX(4px);

}






.other-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.4s;
    z-index:9999;
}

.other-modal.active{
    opacity:1;
    visibility:visible;
}

.other-modal-container img#otherMainImage{

    width:100%;

    height:55vh;

    object-fit:contain;

    background:#111;

    border-radius:18px;

}

.other-modal-container img{

width:100%;

height:520px;

object-fit:cover;

border-radius:20px;

}

.other-thumbnails{

    display:flex;

    gap:12px;

    overflow-x:auto;

    overflow-y:hidden;

    margin-top:20px;

    padding-bottom:10px;

    scroll-behavior:smooth;

}

.other-thumbnails img{

    width:85px;

    height:85px;

    flex:none;

    object-fit:cover;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

}

.other-thumbnails::-webkit-scrollbar{

    height:6px;

}

.other-thumbnails::-webkit-scrollbar-thumb{

    background:#d4af37;

    border-radius:20px;

}

.other-info{

margin-top:25px;

color:white;

}

.other-close{

position:absolute;

right:50px;

top:30px;

font-size:45px;

color:white;

cursor:pointer;

}


@media (min-width:991px){

.other-modal-container img#otherMainImage{

    height:70vh;

}

}


@media(max-width:768px){

.other-modal-container{

    width:95%;

    max-height:90vh;

    overflow-y:auto;

    padding:18px;

    border-radius:22px;

}

}








/*================ MODAL =================*/

.project-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(15px);

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:9999;

}

.project-modal.active{

    opacity:1;

    visibility:visible;

}

.modal-container{

    position:relative;

    width:90%;

    max-width:1200px;

    max-height:90vh;

    overflow-y:auto;

    background:#111;

    border-radius:20px;

    padding:30px;

}

.modal-image{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#111;

    border-radius:15px;

    overflow:hidden;

    padding:20px;

}

.modal-image img{

    max-width:100%;

    max-height:80vh;

    width:auto;

    height:auto;

    object-fit:contain;

    display:block;

}

.close-modal{

    position:absolute;

    top:20px;

    right:25px;

    color:#fff;

    font-size:40px;

    cursor:pointer;

    transition:.3s;

    z-index:100;

}

.close-modal:hover{

    color:#c9a227;

    transform:rotate(180deg);

}

/*================ THUMBNAILS =================*/

.thumbnail-container{

    display:flex;

    gap:15px;

    margin-top:25px;

    overflow-x:auto;

    padding-bottom:10px;

}

.thumbnail{

    width:120px;

    height:80px;

    border-radius:10px;

    overflow:hidden;

    cursor:pointer;

    border:2px solid transparent;

    transition:.3s;

    flex-shrink:0;

}

.thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.thumbnail:hover{

    border-color:#c9a227;

}

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

.modal-info{

    margin-top:35px;

}

.modal-info h2{

    color:#fff;

    font-size:2.3rem;

}

.modal-info span{

    display:block;

    margin:15px 0;

    color:#c9a227;

    font-weight:600;

}

.modal-info p{

    color:#c9c9c9;

    line-height:1.8;

}

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

@media(max-width:991px){

    .projects-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .section-header h2{

        font-size:2.5rem;

    }

    .modal-container{

        width:95%;

        padding:20px;

    }

}


#mainImage{

    transition:.35s;

}




/*================ SERVICES ================*/

.services{

    background:#141414;

}

.section-title{

    text-align:center;

    max-width:700px;

    margin:auto auto 70px;

}

.section-title span{

    color:#c9a227;

    font-size:.95rem;

    letter-spacing:3px;

    font-weight:600;

}

.section-title h2{

    color:#fff;

    font-size:3rem;

    margin:18px 0;

    line-height:1.2;

}

.section-title p{

    color:#b9b9b9;

    line-height:1.9;

}

.services-container{

    display:grid;

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

    gap:35px;

}

.service-card{

    background:#1d1d1d;

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

    border-radius:18px;

    padding:45px 35px;

    transition:.45s;

    position:relative;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    width:100%;

    height:4px;

    background:#c9a227;

    left:-100%;

    top:0;

    transition:.5s;

}

.service-card:hover::before{

    left:0;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:#c9a227;

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

}

.service-icon{

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(201,162,39,.12);

    margin-bottom:28px;

}

.service-icon i{

    color:#c9a227;

    font-size:2rem;

}

.service-card h3{

    color:#fff;

    margin-bottom:18px;

    font-size:1.45rem;

}

.service-card p{

    color:#b5b5b5;

    line-height:1.9;

}


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

@media(max-width:992px){

    .section-title h2{

        font-size:2.5rem;

    }

}

@media(max-width:768px){

    .services{

        padding:90px 7%;

    }

    .services-container{

        grid-template-columns:1fr;

    }

}

@media(max-width:500px){

    .section-title h2{

        font-size:2rem;

    }

    .service-card{

        padding:35px 25px;

    }

}




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

.contact{

    background:#141414;

}

.contact-container{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:start;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.contact-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#1d1d1d;

    padding:28px;

    border-radius:18px;

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

    transition:.35s;

}

.contact-card:hover{

    border-color:#c9a227;

    transform:translateY(-5px);

}

.contact-card i{

    font-size:2rem;

    color:#c9a227;

}

.contact-card h3{

    color:#fff;

    margin-bottom:8px;

}

.contact-card p{

    color:#b5b5b5;

    line-height:1.7;

}

.contact-form{

    background:#1d1d1d;

    padding:45px;

    border-radius:20px;

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

}

.input-group{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    background:#111;

    color:#fff;

    border:none;

    outline:none;

    padding:18px 22px;

    border-radius:12px;

    margin-bottom:20px;

    border:1px solid transparent;

    transition:.3s;

    font-size:1rem;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:#c9a227;

}

.contact-form textarea{

    resize:none;

}

.contact-form .btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#c9a227;

    color:#111;

    padding:18px 38px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-weight:600;

    transition:.35s;

}

.contact-form .btn:hover{

    background:#fff;

    transform:translateY(-3px);

}



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

@media(max-width:991px){

    .contact-container{

        grid-template-columns:1fr;

        gap:45px;

    }

}

@media(max-width:768px){

    .input-group{

        grid-template-columns:1fr;

    }

    .contact-form{

        padding:35px 25px;

    }

}

@media(max-width:500px){

    .contact-card{

        padding:22px;

    }

}


.form-message{

    margin-top:20px;

    padding:15px;

    border-radius:10px;

    font-size:.95rem;

    display:none;

}

.form-message.success{

    display:block;

    background:#1f3d27;

    color:#7CFC9A;

    border:1px solid #2b7c42;

}

.form-message.error{

    display:block;

    background:#451d1d;

    color:#ffb3b3;

    border:1px solid #b13d3d;

}

.btn.loading{

    opacity:.7;

    cursor:not-allowed;

    pointer-events:none;

}




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

.footer{
    background:#000000;
    padding:40px 8%;
}

.footer-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.footer-logo img{
    width:100px;
    height:100px;
    object-fit:contain;
}

.footer-logo h2{
    color:#fff;
    font-size:2rem;
    font-weight:700;
}

.footer-logo span{
    color:#d89b2b;
}

.footer p{
    color:#bbb;
}

.footer-top{

    display:grid;

    grid-template-columns:1.6fr 1fr;

    gap:120px;

    align-items:flex-start;

}

.footer-logo{

    font-size:7rem;

    color:#fff;

    line-height:1;

    letter-spacing:10px;

    margin-bottom:30px;

    font-weight:800;

}

.footer-logo span{

    color:#c9a227;

}

.footer-description{

    max-width:650px;

    color:#9f9f9f;

    font-size:1.1rem;

    line-height:2;

    margin-bottom:40px;

}

.footer-social{

    display:flex;

    gap:18px;

}

.footer-social a{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#202020;

    border-radius:50%;

    color:#fff;

    font-size:1.3rem;

    transition:.4s;

}

.footer-social a:hover{

    background:#c9a227;

    color:#111;

    transform:translateY(-6px);

}

.footer-links{

    display:grid;

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

    gap:60px;

}

.footer-links h3{

    color:#fff;

    margin-bottom:25px;

    font-size:1.3rem;

}

.footer-links a{

    display:block;

    color:#9f9f9f;

    margin-bottom:15px;

    transition:.3s;

}

.footer-links a:hover{

    color:#c9a227;

    padding-left:8px;

}

.footer-links p{

    color:#9f9f9f;

    margin-bottom:15px;

    line-height:1.8;

}

.footer-divider{

    width:100%;

    height:1px;

    background:rgba(3, 3, 3, 0.08);

    margin:80px 0 35px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer-bottom p{

    color:#7d7d7d;

}

.footer-top-btn{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#c9a227;

    color:#111;

    border-radius:50%;

    font-size:1.4rem;

    transition:.4s;

}

.footer-top-btn:hover{

    background:#fff;

    transform:translateY(-8px);

}


@media(max-width:1100px){

    .footer-top{

        grid-template-columns:1fr;

        gap:70px;

    }

    .footer-links{

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

    }

}

@media(max-width:768px){

    .footer{

        padding:90px 7% 40px;

    }

    .footer-logo{

        font-size:4.5rem;

        letter-spacing:5px;

    }

    .footer-links{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        flex-direction:column;

        gap:25px;

    }

}






.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    text-decoration:none;

    box-shadow:0 8px 25px rgba(0,0,0,.3);

    z-index:9999;

    transition:.3s;

}

.whatsapp-float:hover{

    transform:scale(1.08);

}