@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@100;300;400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Baskervville&family=Montserrat:ital,wght@0,400;0,500;1,400&display=swap');

:root{
    --font-family-text:'Montserrat', sans-serif;
    --font-family-title:'Baskervville', serif;
    --color-title: #19757A;
    --color-primary : #1F9299;
    --color-secundary: rgba(0, 0, 0, .8); 
    --color-fff: #f4f4f4;
    --color-deposition : rgba(31, 146, 153,70%);
    --color-btn: #4CA8AD;
    --color-bg-footer:#1F9299;
    --color-bg-copy:#4CA8AD;
    --background-deposition:rgba(31, 146, 152, 0.20);
    --font-size-h1-banner:3.75em;
    --font-size-h1-banner-mobile:2.5em;
    --font-size-p-banner:1.8em;
    --font-size-p-banner-mobile:1.2em;
    --font-size-h1:2.8em;
    --font-size-p:1.2em;
    --font-copy:.8em;
    --font-size-depositions:1em;
    --font-size-i: 34px;
    --font-size-i-face:1.6em;
    --font-size-title-gallery:1.2em;
}
html{
    scroll-behavior: smooth;
}
h1, h2 , h3 {
   font-family: var(--font-family-title);
   font-size: var(--font-size-h1);
   color: var(--color-title);
}
*{
    font-family: var(--font-family-text);
    box-sizing: content-box;
}
p,span{
    font-size: var(--font-size-p);
}
body{
    width: 100vw;
    overflow-x: hidden;
    background-color: var(--color-fff);
}
ul{
    list-style: none; 
    overflow: hidden;
}

.brand{
   width: 14em !important;
}
/* ---------------------------Header -------------------------- */
header{

    background: var(--color-primary);
}
/* --------------------- Header - Menu------------------------ */
.menu{
    background: var(--color-primary);
    background-size: cover;
}
.menu{
    font-size: 1vw;
}
.menu img{
    width: 13em !important;
}
.menu li a{
    color: var(--color-fff);
    text-decoration: none;
    font-size: 1.1em;
    font-weight:500;
    transition: all .3s;
}
.menu li a:hover{
    color: var(--color-secundary);
    
}
.menu li a:hover{
    color: var(--color-secundary);
    text-decoration: none;
}

.menu a i {
    color:white;
    font-size:var(--font-size-i);
    transition: all .3s;
}

.menu a i:hover{
    color: var(--color-secundary);
}

/* ----------------------- header Banner ---------------------  */

header .banner{
    background: url('../imgs/banner.jpg') no-repeat;
    background-size: contain;  
}
 #titles{
    background-color: var(--color-deposition) !important;
    border-radius: 8px;
    margin-left: -2em;
}
header .banner h1{
    margin-left: 40px;
    color: var(--color-fff);
    font-size: var(--font-size-h1-banner);
    font-weight: 300;
    line-height: .8em;
}
header .banner p{
    margin-left: 40px;
    color: var(--color-fff);
    font-style: italic;
    font-size: var(--font-size-p-banner);
}
header .banner a{
    border: none;
    margin-left: 40px;
    margin-top: 40px;
    border-radius: 8px;
    font-weight: bold;
    color: var(--color-fff);
    font-weight: 500;
    background-color: var(--color-btn);
}
header .banner a:hover{
    color: var(--color-primary);
    border: solid thin var(--color-secundary);
    background-color: var(--color-fff);
    font-weight: 700;
}

/* ----------------------- Main -------------------------------- */

.content{
    color: var(--color-secundary);
}
main img{
    width: 423px !important;
    height: 347px !important;
    resize: none;
    background-color: rgba(0,0,0,.1);
    padding: 14px 0;
    border-radius: 5px;
}

/* -------------------- Deposition --------------------- */
#deposition{    
    background-color: var(--background-deposition);
    height: 840px;
}

.depositions{
    height:726px ;
    /* width: 90vw; */
}
.depositions div>h2{
    font-family: var(--font-family-title);
    font-size: var(--font-size-h1);
    color: var(--color-title);
}


.depositions a {
    text-decoration: none;
    color: var(--color-secundary);
    font-size: var(--font-size-depositions) !important;
}
.depositions a:hover{
    color: var(--color-secundary);
}
.depositions a span{
    color: var(--color-primary);
}
.depositions a span:hover{
    color: var(--color-title)
}
.depositions img{
    width: 11em;
}

.depositions #depositionInstagram{
  font-size: var(--font-size-p);
  font-weight: 100;
  
}
.depositions #depositionInstagram p{
    width: 25vw;
}

.depositions p:first-of-type{
    font-style: italic;
}

.depositions .hast{
    font-size: 1em;
    font-weight: 600;
}
.depositions .spandeposition{
    font-size: 3em;
    line-height: 50px;
}


.depositions .client-name{
   
    font-weight: 700 !important;
    color:var(--color-secundary);
}
.depositions .client-name:hover{
    color:var(--color-btn);
    font-weight: 700 !important;
}

/* --------------------- Gallery ------------------------ */
.gallery h2:first-of-type{
   font-family: var(--font-family-title);
   color: var(--color-title);
   font-size: var(--font-size-h1);
   padding-left: 0;
}
.gallery figcaption{
    margin-top: -1.2em;
    font-weight: 600;
}
.controlGallery{
    width: 420px;
    height: 525px;
    overflow: hidden;
    margin: 70px;
}
.carousel-caption{
    background-color: var(--color-deposition);
    padding: 8px !important;
    border-radius: 2px;
    text-align: left !important;
    padding-left: 1.2em !important;
    margin-left: -4.2em;
}
.carousel-caption h5{
    font-family: var(--font-family-title);
    font-size: var(--font-size-title-gallery);
}
.carousel-control-prev , 
.carousel-control-next {
    text-decoration: none;
}

.carousel-control-prev i    , 
.carousel-control-next i    {
    font-size: 2em !important;
    color: var(--color-secundary);
    background-color: #f4f4f4;
    border-radius: 10em;
    padding: 0;
}




/* ------------------------------budget ----------------- */

.budget {
    color: var(--color-secundary)!important;
}
.budget h2{
    margin-left: 2em;
    
}
#contacts{
    font-family: var(--font-family-title);
   color: var(--color-title);
   font-size: var(--font-size-h1);
}
.budget-form div input{
    width: 30vw;
    border: none;
    border-bottom: solid var(--color-secundary) thin;
    transition: all .2s;
}
.budget-form div input:focus{
    margin: none;
    box-shadow: 0 0 0 0!important;
    border-bottom: solid var(--color-primary) 2px;
}

.budget-form div textarea{
    border: solid var(--color-secundary) thin;
    height: 7em;
    border-radius: 8px;
    transition: all .2s;
}
.budget-form div textarea:focus{
    box-shadow: 0 0 0 0!important;
    border: var(--color-primary) solid 2px;
}

.budget img{
    width: 420px;
}
.btn-custom {
    border: none;
    margin-top: 2.1em;
    border-radius: 8px;
    font-weight: bold;
    color: var(--color-fff);
    font-weight: 500;
    background-color: var(--color-btn);
    transition: all .2s;
}
.btn-custom:hover{
    color: var(--color-primary);
    background-color: var(--color-fff);
    border: solid thin var(--color-secundary);
    font-weight: 700;   
}

.budget figure figcaption{
    font-weight: 700;
}

/* ------------------------- Footer ------------------- */
footer{
    background-color: var(--color-bg-footer);
}
footer img{
    width: 200px;
  
}

footer a{
    text-decoration: none;
    color: var(--color-fff);
    font-weight: 500;
}
footer a:hover{
    color: var(--color-secundary);
    font-weight: 700;
}

footer i{    
    color: var(--color-fff);
    border-radius: 20em; 
    padding: .5em;
}
footer .fa-instagram, footer  .fa-whatsapp{
    font-size: var(--font-size-i);
    padding: .3em .4em;
    transition: all .4s;
}
footer .fa-facebook-f{
    font-size: var(--font-size-i-face);
    padding: .5em .7em;
}
footer .fa-instagram:hover, footer .fa-whatsapp:hover,footer .fa-facebook-f:hover{
    background-color: var(--color-fff);
    color: var(--color-secundary);
}
/*---------------- Footer Copy --------------------- */
.copy{
    background-color: var(--color-bg-copy);
    color: var(--color-fff);
    font-size: var(--font-copy) ;
    height: 10vh;
}
.copy i{
    color: red;
}
.copy a:hover {
    color: var(--color-secundary);
}

 /* ========================== MEDIAS QUERIES =======================*/

 @media (min-width: 300px){
/* ------------------------heder menu ----------------------- */

.menu img{
    width: 40em !important;
}


 /* ----------------------- header Banner ---------------------  */
 header .banner{
    height: 100vh;
    background-size: cover;  
    
} 
#titles{
    background-color:transparent
}
header .banner h1{
    font-size:var(--font-size-h1-banner-mobile)
 }
 header .banner p{
    font-size: var(--font-size-p-banner-mobile);
 }
 header .banner a{
    font-weight: 500;
    background-color: var(--color-btn);
}

/* -------------------- Deposition --------------------- */
.depositions #depositionInstagram p{
    width: 90vw;
    text-align: center;
}
.depositions{
    display: block;
    overflow: hidden;
    height:1600px !important;
}
#deposition{
    height:1600px !important;
}
.instaDeposition{
   overflow: hidden;
}


/* --------------------- Gallery ------------------------ */

.controlGallery{
    margin: 10px;
}
#gallerys h2{
    margin-left: -10px !important;
}
/* ------------------------------budget ----------------- */
.budget-form div input{
    width: 75vw;
}
/*---------------- Footer Copy --------------------- */
.copy{
    height: 10vh;
    padding-top: 1em;
}
 }
 /* ==================================================================== */
 /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
/* -------------------header menu ------------------- */
.menu img{
    width: 15em !important;
}

 /* ----------------------- header Banner ---------------------  */
header .banner{
    height: 100vh;
} 
header .banner h1{
    font-size:var(--font-size-h1-banner-mobile)
 }
 header .banner p{
    font-size: var(--font-size-p-banner-mobile);
 }
 /* -------------------- Deposition --------------------- */
 #deposition{
    height:1500px !important;
}

 }
/* ============================================================================================================ */
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
/* -------------------header menu ------------------- */
.menu img{
    width: 20em !important;
}
 /* ----------------------- header Banner ---------------------  */
header .banner{
    height: 100vh;
} 
header .banner h1{
    font-size:var(--font-size-h1-banner-mobile)
 }
 header .banner p{
    font-size: var(--font-size-p-banner-mobile);
 }
 /* -------------------- Deposition --------------------- */
 .depositions #depositionInstagram p{
    width: 70vw;
}
#deposition{
    height:850px !important;
}
}
/* ================================================================================================= */
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
 /* ----------------------- header Banner ---------------------  */
header .banner{
    height: 100vh;
}
/* ------------------------------budget ----------------- */
.budget-form div input{
    width: 30vw; 
}
/* --------------------- Gallery ------------- */
#blindControls, #curtainsControls{
    opacity: .5;
    transition: all .2s;
}
#blindControls:hover, #curtainsControls:hover{
   opacity: 1 !important;
}
/*---------------- Footer Copy --------------------- */
.copy{
    height: 6vh;
    padding-top: 1em;
   
}
 }

/* ============================================================================================= */

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
/* ---------------------------Header -------------------------- */

/* ----------------------- header Banner ---------------------  */

/* --------------------- Header - Menu------------------------ */
.menu{
    background: var(--color-primary);
    width: 78vw !important;
}
.menu img{
    width: 12vw !important;
}

/* ----------------------- header Banner ---------------------  */
#titles{
    margin-top: 15vh;
}   

header .banner h1{
        
        font-size:var(--font-size-h1-banner);
        padding-left: 9.5vw;    
    }
header .banner p{
        font-size: var(--font-size-p-banner);
        padding-left: 9.5vw;    
 }
header .banner a{
        margin-left: 13.5vw;
     }
header .banner{
    height: 100vh;
}
/* --------------- Depositions ----------------- */
#deposition{
    margin-top: 6em!important;
}
.depositions h2, .instaDeposition{
    margin-left: 1.4em;
}


/* --------------------- Gallery ------------- */
#blindControls, #curtainsControls{
    opacity: .5;
    transition: all .2s;
}
#blindControls:hover, #curtainsControls:hover{
   opacity: 1 !important;
}
.gallery h2:first-of-type{
    padding-left: 2em
}

/* ------------------------Budget --------------- */
.budget-form div input{
    width: 420px;
}
.budget h2{
    margin-left: 2em !important;
}
/* -------------------------- Footer ----------------------- */
footer img{
    margin-left:1.8em;
    width: 8em;
}
/*---------------- Footer Copy --------------------- */
.copy{
    height: 5vh;
    padding-top: 1em;
}

 }