:root {
  --brand: #265EAC;
  --brand2: #7B8DC7;


}

/* @font-face {
    font-family: 'Vanitas';
     src: url('fonts/Vanitas-Bold.otf') format('opentype'); 
    font-weight: 700;
} */








html{
    scroll-behavior: smooth;
}
body{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: #3D5567;
    font-size: 23px;
}



a{-webkit-transition: all 0.32s ease-out; -moz-transition: all 0.32s ease-out; -o-transition: all 0.32s ease-out; -ms-transition:  all 0.32s ease-out; transition: all 0.32s ease-out; text-decoration:none;}
a:hover{color: var(--red); text-decoration: none;}

::placeholder { color: 000; opacity: 1; }
:-ms-input-placeholder { color: 000;}
::-ms-input-placeholder { color: 000;}

/*COMMOM STYLES*/
.ff-va{font-family: "Italiana", sans-serif;}

.fw-bo{font-weight: 700;}
.fw-re{font-weight: 400;}
.fw-li{font-weight: 300;}
.fw-th{font-weight: 200;}

.fs-90{font-size: 90px;}
.fs-45{font-size: 45px;}
.fs-14{font-size: 14px;}


.ls-1{letter-spacing: 1px;}
.ls-2{letter-spacing: 2px;}

.lh-2{line-height: 2;}


@media screen and (min-width:992px){
    .mt-lg-lg{margin-top: 54px!important;}
    .mb-lg-lg{margin-bottom: 54px!important;}

    .mt-lg-xl{margin-top: 54px!important;}
    .mb-lg-xl{margin-bottom: 54px!important;}
  
}

.bg-brand{background-color: var(--brand)!important;}
.bg-brand2{background-color: var(--brand2)!important;}

.text-brand{color:var(--brand)!important;}
.text-brand2{color:var(--brand2)!important;}


.btn-register{background-color:var(--brand); border:1px solid transparent; display: inline-block;  transition: all 0.32s ease-out; color: #FFF; font-weight: 700; font-size: 15px; padding: 9px 27px; letter-spacing: 1.5px; border-radius: 35.95px; z-index: 10;}
.btn-register:hover{background-color: var(--brand2); color: #FFF!important; border: 1px solid #FFF;}



.has-bg{background-position: center; background-size: cover; }


.img-linked{
    -webkit-transition: all 0.32s ease-out;
    -moz-transition: all 0.32s ease-out;
    -o-transition: all 0.32s ease-out;
    -ms-transition:  all 0.32s ease-out;
    transition: all 0.32s ease-out;
}
.img-linked:hover{
    transform: scale(.90);
    cursor: pointer;
}

.text-linked{color: inherit;}
.text-linked:hover{color: inherit; text-decoration: underline;}

footer{background-color: var(--brand);}
.footer-container{background-image: url('../images/footer-g.png'); background-position: right; background-repeat: no-repeat; background-size: contain;}

/* Navigation */
.hero-btn{position: absolute; top: 50px; right: 50px;}
.hero-logo{position: absolute; top: 0; left: calc(var(--bs-gutter-x) * .5); max-width: 25%; width: 320px; z-index: 10;}
.hero-caption{position: absolute; left:4% ; bottom: 18%; color: #FFF; font-size: 108px; line-height: 95%;}

.intimate-collection{position: absolute;top: 4%; left: 4%; z-index: 10; width:90% ; color: #FFF;}

.collection-wrapper{background-image: url('../images/rendering.jpg'); background-size: cover;}
.img-g{position: relative; top: -27%;}

.features-wrapper {background: var(--brand2); background-image: url('../images/bg-features.png'); background-position: right; background-repeat: no-repeat; background-size: contain;}
.feature-list{column-count: 3;}



.img-animation{position: absolute; opacity: 0; overflow: hidden;}

#l1{left: -100%; z-index: 8;}
#l2{right: -100%; z-index: 7;}
#l3{right: -100%; z-index: 6;}
#l4{left: -100%; z-index: 5;}
#l5{right: -100%; z-index: 4;}
#l6{left: -100%; z-index: 9;}
#l7{right: -100%; z-index: 2;}
#l8{left: -100%; z-index: 1;}



#registrationForm .form-control{border-radius: 0; border: 1px solid #827C7C; margin-bottom: 36px;}
#registrationForm .form-control::placeholder { color: #827C7C; opacity: 1; }
#registrationForm .form-control:-ms-input-placeholder { color: #827C7C;}
#registrationForm .form-control::-ms-input-placeholder { color: #827C7C;}
#registrationForm label{color: var(--brand); font-size: 16px; font-weight: 700; margin-bottom: 9px;}
#registrationForm  select {
    display: block;
   line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='46' height='43' viewBox='0 0 46 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.48519' y='0.48519' width='44.6374' height='41.7263' fill='%23265EAC'/%3E%3Crect x='0.48519' y='0.48519' width='44.6374' height='41.7263' stroke='%23827C7C' stroke-width='0.970379'/%3E%3Cpath d='M22.9949 24.392L32.8313 14.5557L34.3452 16.0696L22.9949 27.4199L11.6446 16.0696L13.1586 14.5557L22.9949 24.392Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right ;

}

@media screen and (max-width: 1199px){
    body{font-size: 18px;}
    .hero-caption{font-size: 63px; left: 27px;}
    .fs-90{font-size: 54px;}
    .fs-45{font-size: 36px;}




}


@media screen and (max-width: 991px){
    body{font-size: 18px;}
    .hero-caption{font-size: 36px; left: 27px;}
    .fs-90{font-size: 54px;}
    .fs-45{font-size: 36px;}

     .hero-btn{top: 18px; right: 18px;}

    .intimate-collection{position: relative; background-color: var(--brand2); width: 100%; left: 0;top: 0; padding: 15px; text-align: center;}
    .feature-list{column-count: 2;}
    #registrationForm .form-control{margin-bottom: 18px;}
}


@media screen and (max-width: 767px){
    body{font-size: 18px;}
    .hero-caption{font-size: 27px; left: 27px;}
    .fs-90{font-size: 36px;}
    .fs-45{font-size: 27px;}

     .hero-btn{top: 9px; right: 9px;}

    .feature-list{column-count: 1;}
    #registrationForm .form-control{margin-bottom: 18px;}
}

@media screen and (max-width: 576px){

    body{font-size: 18px;}
    .hero-caption{font-size: 36px; left: 27px;}
    .fs-90{font-size: 36px;}
    .fs-45{font-size: 18px;}

    
}

@media screen and (max-width: 372px){

    body{font-size: 18px;}
    .hero-caption{font-size: 27px; left: 27px;}
    .fs-90{font-size: 27px;}
    .fs-45{font-size: 18px;}

    
}


@media(min-width:768px) and (max-width: 991px){
}

@media screen and (min-width:992px){
   
}