/*
Theme Name: Casas Cadena 
Author: Webshau!
Description: Landing page CasasCadena
Version: 1.4.0
*/

html, *, *::after, *::before{
    box-sizing:                         border-box;
}

:root{
    --blackColor:                       black;
    --whiteColor:                       white;
    --blueStrongColor:                  #303A53;
    --blueColor:                        #323C56;
    --orangeColor:                      #E48963;
}

/* Webfont: Serotiva-Regular */@font-face {
    font-family: 'Serotiva';
    src: url('Serotiva-Regular.eot'); /* IE9 Compat Modes */
    src: url('Serotiva-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Serotiva-Regular.woff') format('woff'), /* Modern Browsers */
         url('Serotiva-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('Serotiva-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Serotiva-Bold */@font-face {
    font-family: 'Serotiva';
    src: url('Serotiva-Bold.eot'); /* IE9 Compat Modes */
    src: url('Serotiva-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Serotiva-Bold.woff') format('woff'), /* Modern Browsers */
         url('Serotiva-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('Serotiva-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: bold;         
    text-rendering: optimizeLegibility;
}    

/* Webfont: Serotiva-ExtraBold */@font-face {
    font-family: 'Serotiva';
    src: url('Serotiva-ExtraBold.eot'); /* IE9 Compat Modes */
    src: url('Serotiva-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Serotiva-ExtraBold.woff') format('woff'), /* Modern Browsers */
         url('Serotiva-ExtraBold.woff2') format('woff2'), /* Modern Browsers */
         url('Serotiva-ExtraBold.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: 800;         
    text-rendering: optimizeLegibility;
}    

/* Webfont: Mesveda-Regular */@font-face {
    font-family: 'Mesveda';
    src: url('./assets/fonts/Mesveda-Regular.eot'); /* IE9 Compat Modes */
    src: url('./assets/fonts/Mesveda-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./assets/fonts/Mesveda-Regular.woff') format('woff'), /* Modern Browsers */
    url('./assets/fonts/Mesveda-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('./assets/fonts/Mesveda-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Mesveda-Medium */@font-face {
    font-family: 'Mesveda';
    src: url('./assets/fonts/Mesveda-Medium.eot'); /* IE9 Compat Modes */
    src: url('./assets/fonts/Mesveda-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./assets/fonts/Mesveda-Medium.woff') format('woff'), /* Modern Browsers */
         url('./assets/fonts/Mesveda-Medium.woff2') format('woff2'), /* Modern Browsers */
         url('./assets/fonts/Mesveda-Medium.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: 500;
    text-rendering: optimizeLegibility;
}

/* Webfont: Mesveda-SemiBold */@font-face {
    font-family: 'Mesveda';
    src: url('./assets/fonts/Mesveda-SemiBold.eot'); /* IE9 Compat Modes */
    src: url('./assets/fonts/Mesveda-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./assets/fonts/Mesveda-SemiBold.woff') format('woff'), /* Modern Browsers */
    url('./assets/fonts/Mesveda-SemiBold.woff2') format('woff2'), /* Modern Browsers */
    url('./assets/fonts/Mesveda-SemiBold.ttf') format('truetype'); /* Safari, Android, iOS */
    font-style: normal;
    font-weight: 600;
    text-rendering: optimizeLegibility;
}

/* Webfont: Mesveda-Bold */@font-face {
    font-family: 'Mesveda';
    src: url('./assets/fonts/Mesveda-Bold.eot'); /* IE9 Compat Modes */
    src: url('./assets/fonts/Mesveda-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./assets/fonts/Mesveda-Bold.woff') format('woff'), /* Modern Browsers */
         url('./assets/fonts/Mesveda-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('./assets/fonts/Mesveda-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

body{
    font-family:                            "Mesveda";
    font-weight:                            500;
    background-color:                       #fbfbfb;
}

.img{
    position:                               relative;
    height:                                 264px;
}

.im{
    position:                               absolute;
    top:                                    0;
    left:                                   0;
    width:                                  100%;
}

.icon{
    mask-size:                              contain;
    mask-position:                          center;
    mask-repeat:                            no-repeat;
}

h1, .h1 {
    font-size:                              70px;
    font-weight:                            500;
}

h2, .h2{
    font-weight:                            500;
    font-size:                              54px;
}

.whatsapp-button{
    position:                               fixed;
    bottom:                                 50px;
    right:                                  40px;
    border-radius:                          50%;
    width:                                  70px;
    height:                                 70px;
    background-color:                       rgba(246, 246, 246, 0.65);
    backdrop-filter:                        blur(10px);
    z-index:                                10;
    box-shadow:                             0 0 40px 0 rgba(0, 0, 0, 0.311);
    cursor:                                 pointer;            
}

.whatsapp-button::after{
    position:                               absolute;
    width:                                  30px;
    height:                                 30px;
    background-color:                       #61FFB3;
    top:                                    20px;
    left:                                   20px;
    content:                                '';
    mask-size:                              contain;
    mask-repeat:                            no-repeat;
    mask-position:                          center;
    mask-image:                             url('./assets/images/whatsapp.svg');
}

header{
    margin:                                 45px 40px 0px;
    position:                               relative;
    z-index:                                5;
}

header .desktopNav{
    height:                                 75px;
    background-color:                       rgba(255, 255, 255, 0.3);
    padding:                                10px 30px;
    border-radius:                          30px;
}
header .desktopNav .menuToggle {
    display:                                none;
}
header .desktopNav .logo{
    height:                                 55px;
    max-height:                             55px;
    width:                                  auto;
    margin:                                 auto 0;
}
header .desktopNav .options a{
    color:                                  var(--blueColor);
    font-weight:                            normal;
    text-decoration:                        none;
    margin:                                 auto 20px;
}

footer{
    background-color:                       var(--blueColor);
    font-family:                            "Mesveda";
    padding:                                10px 10px 15px 10px;
    border-top-right-radius:                20px;
    border-top-left-radius:                 20px;
    margin-top:                             90px;
}

/*Logo de footer*/
footer .logo{
    mask-image:                             url("./assets/images/triangleIcon.svg");
    mask-size:                              contain;
    mask-repeat:                            no-repeat;
    mask-position:                          center;
    background-color:                       #E48963;
    width:                                  60px;
    height:                                 50px;
    margin-top: 30px;
}

/*Titulo de footer formulario*/
footer .title{
    background:                             linear-gradient(to bottom, #F6A27E, #E97342); /* Define your gradient */
    -webkit-background-clip:                text; /* Clip the gradient to the text */
    -webkit-text-fill-color:                transparent; /* Make the text transparent so the gradient shows through */
    margin-top:                             30px;
}

/*Descripcion de footer formulario*/    
footer .content{
    color:                                  white;
    font-weight:                            500;
    margin-bottom:                          15px;
}

footer .picture-outter{
    position:                               relative;
}

footer .picture-outter::after{
    mask-image:                             url("./assets/images/lifeStyleLogo.svg");
    mask-size:                              contain;
    mask-repeat:                            no-repeat;
    mask-position:                          center;
    width:                                  200px;
    height:                                 200px;
    background-color:                       white;
    content:                                '';
    top:                                    0;
    left:                                   40px;
    position:                               absolute;
}

footer .picture{
    width:                                  calc(100% - (100% / 28));
    transform:                              translateX(calc(100% / 14));
}

footer .form input, footer .form textarea{
    background-color:                       transparent;
    color:                                  var(--whiteColor);
    border:                                 1px solid #6E84BC;
    border-radius:                          10px;
    padding:                                10px;
    font-weight:                            12px;
    font-weight:                            500;
    width:                                  100%;
    resize:                                 none;
}

footer .form p{
    margin-bottom:                          10px;
}

footer .form input::placeholder, footer .form textarea::placeholder{
    color:                                  var(--whiteColor);
    font-weight:                            12px;
    font-weight:                            500;
}

footer .form input[type="submit"]{
    color:                                  var(--orangeColor);
    font-size:                              16px;
    font-weight:                            500;
    position:                               relative;
    background-color:                       var(--blueColor);
    border:                                 none;
    height:                                 calc(100% - 2px);
    width:                                  calc(100% - 1px);
}

footer .form p:last-of-type{
    position:                               relative;
    margin-bottom:                          0;
    border-radius:                          10px;
    height:                                 calc(65px);
    border-radius:                          10px;
    display:                                flex;
    align-items:                            center;
    justify-content:                        center;
}

footer .wpcf7-spinner{
    display:                                none;
}

footer .form p:last-of-type::before{
    border-radius:                          10PX;
    content:                                "";
    position:                               absolute;
    top:                                    -1px;
    left:                                   -1px;
    right:                                  -1px;
    bottom:                                 -1px;
    background:                             linear-gradient(to bottom, #f6a481 0%, #e86f3c 100%);
}

footer .wpcf7-response-output {
    color:                                 #fff;
}

footer .bottom{
    color:                                  var(--whiteColor);
    font-weight:                            500;
    display:                                grid;
    grid-template-columns:                  repeat(3, 1fr);
    padding:                                25px 1% 0px;
    margin-top:                             30px;
    position:                               relative;
}

footer .bottom .link{
    width:                                  fit-content;
    color:                                  white;
    text-decoration:                        none;
}

footer .bottom .link:not(.wrap) p{
    text-wrap:                              nowrap;
}

footer .bottom::after{
    position:                               absolute;
    top:                                    0;
    left:                                   1%;
    width:                                  98%;
    height:                                 1px;
    content:                                '';
    background-color:                       #6E84BC;
}

footer .bottom .whatsapp{
    mask-image:                             url("./assets/images/whatsapp.svg");
    width:                                  20px;
    height:                                 20px;
    background:                             linear-gradient(to bottom, #f6a380, #e86f3c);
}

footer .bottom .address{
    mask-image:                             url("./assets/images/locationIcon.svg");
    width:                                  20px;
    height:                                 20px;
    background:                             linear-gradient(to bottom, #f6a380, #e86f3d);
}
footer .bottom a {
    color:                                #fff;
    text-decoration:                        none;
}
footer .bottom a:hover,
footer .bottom a:focus,
footer .bottom a:active {
    text-decoration:                        underline;
}

/* Mobile */
@media screen and (max-width: 767.98px) {
    footer {
        padding:                            50px 38px;
        margin-top:                         100px;
    }
    footer .logo {
        position:                           absolute;
        top:                                0;
        right:                              12px;
        width:                              35px;
        height:                             30px;
        margin-top:                         0;
    }
    footer .title {
        font-size:                          48px;
        letter-spacing:                     .5px;
        width:                              calc(100% - 45px);
        margin-top:                         0;
    }
    footer .picture-outter {
        margin-top:                         50px;
    }
    footer .picture {
        width:                              100%;
        transform:                          none;
        border-radius:                      10px;
    }
    footer .picture-outter::after {
        left:                               0;
        top:                                0;
        width:                              140px;
        height:                             140px;
    }
    footer .bottom {
        margin-top:                         50px;
        padding:                            50px 0 0;
        display:                            flex;
        flex-direction:                     column;
        align-items:                        center;
        gap:                                20px;
    }
    footer .form p:not(:last-child) {
        margin-bottom:                      30px;
    }
}

/* Until Desktop */
@media screen and (max-width: 991.98px) {
    header {
        margin:                             0;
    }
    header .desktopNav {
        padding:                            0;
        height:                             auto;
        border-radius:                      0;
    }
    header .desktopNav.is-toggled {
        background-color:                 rgba(255, 255, 255, 0.7);
    }
    header .navContainer {
        padding:                            16px;
    }
    header .desktopNav > .row {
        padding:                            0;
        margin:                             0;
    }
    header .desktopNav .menuToggle {
        display:                            block;
        appearance:                         none;
        background-color:                   transparent;
        border:                             none;
        cursor:                             pointer;
    }
    header .desktopNav .menuToggle .bar {
        display:                            block;
        background-color:                   var(--blueColor);
        width:                              30px;
        height:                             4px;
    }
    header .desktopNav .menuToggle .bar:not(:last-child) {
        margin-bottom:                      5px;
    }
    header .desktopNav.is-toggled .bar:nth-child(1) {
        transform:                          rotate(45deg) translate(5px, 5px);
    }
    header .desktopNav.is-toggled .bar:nth-child(2) {
        visibility:                         hidden;
    }
    header .desktopNav.is-toggled .bar:nth-child(3) {
        transform:                          rotate(-45deg) translate(8px, -8px);
    }
    header .desktopNav a.logo {
        display:                            none;
    }
    header .desktopNav .options {
        display:                            none;
        position:                           absolute;
        top:                                100%;
        left:                               0;
        right:                              0;
        background-color:                 rgba(255, 255, 255, 0.7);
        border-bottom-left-radius:          30px;
        border-bottom-right-radius:         30px;
        backdrop-filter:                    blur(10px);
    }
    header .desktopNav .options a {
        display:                            block;
        padding:                            20px;
        font-size:                          20px;
        font-weight:                        700;
        letter-spacing:                     .5px;
        text-align:                         center;
    }
}