/*Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    /*background:#07122d;*/
}

a{
    text-decoration:none;
}

/** PRELOADER **/
#preloader{

    position:fixed;
    inset:0;

    background:#f5f1e8;

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

    z-index:99999;

    transition:.8s;
}

.preloader-content{
    text-align:center;
}

.logo-loader{

    font-size:4rem;
    font-weight:900;
    color:#716443;

    margin-bottom:20px;

    animation:fillLogo 3s infinite;
}

.loading-text{

    color:#716443;
    margin-bottom:10px;
}

#loading-percentage{

    font-size:1.5rem;
    color:#d0b26b;
}

@keyframes fillLogo{

    0%{
        color:#716443;
    }

    50%{
        color:#d0b26b;
    }

    100%{
        color:#716443;
    }

}

/** HOME **/
.site-header{

    position:fixed;

    top:0;
    left:0;

width: 64%;
    margin-left: 18%;

    padding:25px 60px;

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

    z-index:500;

    /*backdrop-filter:blur(10px);*/
}

.logo-container img{

    height:60px;
    width:auto;
}

.main-nav{

    display:flex;
    gap:35px;
}

.main-nav a{

    color:#716443;

    font-size:14px;
    letter-spacing:1px;

    transition:.3s;
}

.main-nav a:hover{
    color:#ffffff;
}

.main-nav a.active{
    color:#d0b26b;
}

.home-section{

    position:relative;

    width:100vw;
    height:100vh;

    overflow:hidden;

    /*background:
    radial-gradient(
    circle at center,
    #0d1838 0%,
    #07122d 50%,
    #020816 100%);*/
}

.background-words{

    position:absolute;
    inset:0;

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

    gap:20px;

    pointer-events:none;
}

.word-row{

    display:flex;

    gap:80px;

    white-space:nowrap;
}

.word-row span{

    font-size:7vw;
    font-weight:900;
line-height: 110px;
    color:rgba(255,255,255,.05);
}

.move-left{
    animation:leftMove 60s linear infinite;
}

.move-right{
    animation:rightMove 60s linear infinite;
}

@keyframes leftMove{

    from{
        transform:translateX(0);
    }

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

@keyframes rightMove{

    from{
        transform:translateX(-20%);
    }

    to{
        transform:translateX(0);
    }
}

.hero-container{

    position:absolute;

    left:50%;
    top:62%;

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

    z-index:100;
}

.hero-image{

    height:100vh;
    width:auto;

    transition:
    transform .3s ease,
    filter .3s ease;

    filter:
    drop-shadow(
    0 0 40px rgba(0,0,0,.5));
}

.hero-image:hover{

    transform:
    scale(1.02)
    translateY(-6px);
}

/** QUIENES SOMOS **/
.about-section{

    min-height:100vh;

    padding-top:130px;

    overflow:hidden;
}
.about-container{

    /*width: 90%;*/
    /* max-width: 1600px; */
    margin: auto;
    display: grid;
    grid-template-columns: 40% 60%;
    /* gap: 60px; */
    align-items: center;
}
.about-image{

    position:relative;

    display:flex;
    /*justify-content:right;*/
}
.about-image img{

    height:auto;

    transition:.4s ease;
}
.about-image img:hover{

    transform:
    translateY(-8px)
    scale(1.01);
}
.about-content{

    color:#3f3f3f;
}
.about-content h1{

    font-size:52px;

    color:#716443;

    margin-bottom:40px;

    font-weight:300;
}
.about-text{

    max-height:70vh;

    overflow-y:auto;

    padding-right:20px;
}
.about-text::-webkit-scrollbar{

    width:8px;
}
.about-text::-webkit-scrollbar-track{

    background:#efefef;
}
.about-text::-webkit-scrollbar-thumb{

    background:#d0b26b;

    border-radius:20px;
}
.about-text p{

    font-size:16px;

    line-height:1.2;

    margin-bottom:25px;

    color:#716443;
}
.about-image::before{

    content:'';

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(208,178,107,.20),
    transparent
    );

    z-index:-1;
}

/** CONTACTO **/
.contact-section{

    position:relative;

    min-height:100vh;

    /*background:
    radial-gradient(
    circle at center,
    #0d1838 0%,
    #07122d 50%,
    #020816 100%);*/

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

    padding-top:120px;

    overflow:hidden;
}
.contact-card{

    position:relative;

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

    padding:50px;

    border-radius:20px;

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

    backdrop-filter:blur(15px);

    z-index:10;
}
.contact-card h1{

    text-align:center;

    color:#d0b26b;

    margin-bottom:15px;

    font-size:48px;

    font-weight:300;
}
.contact-subtitle{

    text-align:center;

    color:#d5d5d5;

    line-height:1.8;

    margin-bottom:40px;
}
.contact-card input,
.contact-card textarea{

    width:100%;

    padding:18px;

    margin-bottom:18px;

    border:none;

    border-radius:12px;

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

    color:#fff;

    outline:none;
}
.contact-card input::placeholder,
.contact-card textarea::placeholder{

    color:
    rgba(255,255,255,.6);
}
.contact-card button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:#d0b26b;

    color:#07122d;

    font-weight:bold;

    transition:.3s;
}
.contact-card button:hover{

    background:#fff;
}
.contact-info{

    margin-top:30px;

    display:flex;

    flex-direction:column;

    gap:12px;

    text-align:center;
}
.contact-info a{

    color:#d0b26b;

    transition:.3s;
}
.contact-info a:hover{

    color:#fff;
}
#successModal{

    position:fixed;

    inset:0;

    display:none;

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

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

    z-index:9999;
}
.modal-content{

    width:500px;

    max-width:90%;

    background:#fff;

    color:#333;

    padding:40px;

    border-radius:20px;

    text-align:center;
}
.modal-content h2{

    color:#716443;

    margin-bottom:20px;
}