@font-face{
        font-family: Kanit;
        src: url(fonts/Kanit/Kanit-Medium.ttf);
    }
    @font-face {
        font-family: Archive;
        src: url(fonts/Archivo/Archivo-VariableFont_wdth\,wght.ttf);
    }
    *{
        box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      font-family: Archive;
    }
    .page-wrapper{
        background: #ffffff;
        margin-left: auto;
        margin-right: auto;
        max-width: 77%;
    }
    .navbar, footer {
      background-color: rgb(255, 255, 255);
      color: black;
    }
    .navbar, .nav-link, .navbar-brand, footer p {
      color: black;
      font-size: 1.3rem;
    }
    .btn{
        font-size: 1.3rem;
        color: white;
    }
    .btn-contacto {
      background-color: #d32f2f; 
      border: none;
    }
    .btn-contacto:hover {
      background-color: #231766;
      color: white;
    }
    .card-img-top{
        max-width: 70px;
        margin: auto;
    }
    .card-body{
        text-align: center;
    }
    .card-text{
        text-align: justify;
    }
    .sticky-top{
        margin-bottom: 1%;
        box-shadow: 0px 1px 5px #222;
    }
    .footer{
        background-color: #03132B;
        color: white !important;
    }
    .img-fluid{
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
        outline: 5px solid #09254e;
        /* border: 2px solid #b71c1c; */
        padding: 0;
    }
    .phrase{
        border: 5px;
    }
    .footer-menu{
        width: auto;
        max-width: 50%;
        display: flex;
        align-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-menu-secondary{
        border-right: 1px solid white;
        padding: 2%;
    }
    .linkedin{
        width: 12%;
        margin-top: 5px;
        background-color: white;
        border-radius: 5px;
        border: 1px solid black;
    }
    li, ul{
        list-style-type: none;
    }
    @media (min-width: 320px) { 
        
    .footer-menu{
        padding-left: 0;
        width: auto;
        display: flex;
    }
    .menu-divider{
        padding-right: 0%;
    }
    li, ul{
        padding-left: 1%;
        list-style-type: none;
    }
        .navbar-brand{
            width: 5%;
        }
        .navbar-toggler-icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: middle;
            background-image: var(--bs-navbar-toggler-icon-bg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
        }
        .navbar-collapse{
            width: 100vw; 
        }
        .navbar-nav {
            width: 30vw;      
        }
        .page-wrapper{
            background: #ffffff;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
        }
        .mainBanner{
            background-color: #f2f1ef;
            overflow: hidden;
            padding-top: 1rem;
            padding-bottom: 1rem;
            position: relative;
            z-index: 5;
            border-top:5px solid #b71c1c;
            border-bottom: 5px solid #b71c1c;
        }
        .container, .container-fluid {
            clear: both;
            padding-left: 4%;
            padding-right: 4%;
            position: relative;
        }
        .row, .row-fluid {
            clear: both;
            margin-left: auto;
            margin-right: auto;
            max-width: 104rem;
            position: relative;
            width: 100%;
            z-index: 1;
        } 
        .banner{
            padding-right: 0%;        
        }
        .footer-menu{
            width: auto;
            max-width: 100%;
            display: flex;
            margin-left: auto;
            margin-right: auto;
        }
        .banner_row{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            min-height: 20rem;
            position: relative;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -webkit-box-align: center;
            align-items: center;
        }
        .banner_content{
            width: 100%;
        }
        .banner_header{
            font-family: Kanit;
            color: rgb(190, 44, 44);
            font-size: 13vw;
            font-weight: 400;
            font-weight: bold;
        }
        .banner_text{
            font-family: Kanit;
            font-size: 6vw;
            font-weight: 400;
            line-height: 2;
            word-spacing: 5px;
        }
        .banner_img{
            height: 100%;
            left: 0;
            overflow: hidden;
            width: 100%;
            z-index: 1;
        }
        .banner_img img{
            object-fit: cover;
            object-position: center top;
            right: 0;
            width: 100%;
        }
        .banImg{
            width: 0%;
            height: 0%;
            position: absolute;
            top: 0;
        }
        .linkedin{
            width: 30%;
            margin-top: 5px;
            background-color: white;
            border-radius: 5px;
            border: 1px solid black;
        }
    }

    @media (min-width: 360px) {
        .navbar-toggler-icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: middle;
            background-image: var(--bs-navbar-toggler-icon-bg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
        }
        .navbar-collapse{
            width: 100vw; 
        }
        .navbar-nav {
            width: 30vw;      
        }
        .page-wrapper{
            background: #ffffff;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
        }
        .mainBanner{
            background-color: #f2f1ef;
            overflow: hidden;
            padding-top: 1rem;
            padding-bottom: 1rem;
            position: relative;
            z-index: 5;
            border-top:5px solid #b71c1c;
            border-bottom: 5px solid #b71c1c;
        }
        .container, .container-fluid {
            clear: both;
            padding-left: 4%;
            padding-right: 4%;
            position: relative;
        }
        .row, .row-fluid {
            clear: both;
            margin-left: auto;
            margin-right: auto;
            max-width: 104rem;
            position: relative;
            width: 100%;
            z-index: 1;
        } 
        .banner{
            padding-right: 35%;        
        }
        .footer-menu{
            width: auto;
            max-width: 100%;
            display: flex;
            margin-left: auto;
            margin-right: auto;
        }
        .banner_row{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            min-height: 20rem;
            position: relative;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -webkit-box-align: center;
            align-items: center;
        }
        .banner_content{
            width: 100%;
        }
        .banner_header{
            font-family: Kanit;
            color: rgb(190, 44, 44);
            font-size: 7.7vw;
            font-weight: 400;
            font-weight: bold;
        }
        .banner_text{
            font-family: Kanit;
            font-size: 4.5vw;
            font-weight: 400;
            line-height: 1.3;
            word-spacing: 5px;
        }
        .banner_img{
            height: 100%;
            left: 0;
            overflow: hidden;
            width: 100%;
            z-index: 1;
        }
        .banner_img img{
            object-fit: cover;
            object-position: center top;
            right: 0;
            width: 100%;
        }
        .banImg{
            object-fit: cover;
            object-position: center;
            right: 0;
            width: 115%;
            height: 100%;
            position: absolute;
            top: 0;
        }
        .linkedin{
            width: 20%;
            margin-top: 5px;
            background-color: white;
            border-radius: 5px;
            border: 1px solid black;
        }
     }
    @media (min-width: 425px) { 
        .navbar-collapse{
            width: 100vw; 
        }
        .navbar-nav {
            width: 30vw;      
        }
        .page-wrapper{
            background: #ffffff;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
        }
        .mainBanner{
            background-color: #f2f1ef;
            overflow: hidden;
            padding-top: 1rem;
            padding-bottom: 1rem;
            position: relative;
            z-index: 5;
            border-top:5px solid #b71c1c;
            border-bottom: 5px solid #b71c1c;
        }
        .container, .container-fluid {
            clear: both;
            padding-left: 4%;
            padding-right: 4%;
            position: relative;
        }
        .row, .row-fluid {
            clear: both;
            margin-left: auto;
            margin-right: auto;
            max-width: 104rem;
            position: relative;
            width: 100%;
            z-index: 1;
        } 
        .banner{
            padding-right: 35%;        
        }
        .banner_row{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            min-height: 20rem;
            position: relative;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -webkit-box-align: center;
            align-items: center;
        }
        .banner_content{
            width: 100%;
        }
        .banner_header{
            font-family: Kanit;
            color: rgb(190, 44, 44);
            font-size: 7.7vw;
            font-weight: 400;
            font-weight: bold;
        }
        .footer-menu{
            width: auto;
            max-width: 100%;
            display: flex;
            align-content: center;
            margin-left: auto;
            margin-right: auto;
        }
        .banner_text{
            font-family: Kanit;
            font-size: 4.5vw;
            font-weight: 400;
            line-height: 1.3;
            word-spacing: 5px;
        }
        .banner_img{
            height: 100%;
            left: 0;
            overflow: hidden;
            width: 100%;
            z-index: 1;
        }
        .banner_img img{
            object-fit: cover;
            object-position: center top;
            right: 0;
            width: 100%;
        }
        .banImg{
            object-fit: cover;
            object-position: center;
            right: 0;
            width: 105%;
            height: 100%;
            position: absolute;
            top: 0;
        }
      }
      @media (min-width: 555px) { 
        .navbar-collapse{
            width: 100vw; 
        }
        .navbar-nav {
            width: 30vw;      
        }
        .page-wrapper{
            background: #ffffff;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
        }
        .mainBanner{
            background-color: #f2f1ef;
            overflow: hidden;
            padding-top: 2rem;
            padding-bottom: 2rem;
            position: relative;
            z-index: 5;
            border-top:5px solid #b71c1c;
            border-bottom: 5px solid #b71c1c;
        }
        .container, .container-fluid {
            clear: both;
            padding-left: 4%;
            padding-right: 4%;
            position: relative;
        }
        .row, .row-fluid {
            clear: both;
            margin-left: auto;
            margin-right: auto;
            max-width: 104rem;
            position: relative;
            width: 100%;
            z-index: 1;
        } 
            
        .banner{
            padding-right: 42%;        
        }
        .banner_row{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            min-height: 20rem;
            position: relative;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -webkit-box-align: center;
            align-items: center;
        }
        .footer-menu{
            width: auto;
            max-width: 70%;
            display: flex;
            align-content: center;
            margin-left: auto;
            margin-right: auto;
        }
        .banner_content{
            width: 100%;
        }
        .banner_header{
            font-family: Kanit;
            color: rgb(190, 44, 44);
            font-size: 3rem;
            font-weight: 400;
            font-weight: bold;
        }
        .banner_text{
            font-family: Kanit;
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 1.7;
            word-spacing: 5px;
        }
        .banner_img{
            height: 100%;
            left: 0;
            overflow: hidden;
            width: 100%;
            z-index: 1;
        }
        .banner_img img{
            object-fit: cover;
            object-position: center top;
            right: 0;
            width: 100%;
        }
        .banImg{
            object-fit: cover;
            object-position: center;
            right: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
      }
    @media (min-width: 768px) { 
        .navbar-collapse{
            width: 60vw; 
        }
        .navbar-nav {
            width: 12vw;                
        }
        .mainBanner{
            background-color: #f2f1ef;
            overflow: hidden;
            padding-bottom: 6rem;
            padding-top: 7.199999999999999rem;
            position: relative;
            z-index: 5;
            border-top:5px solid #b71c1c;
            border-bottom: 5px solid #b71c1c;
        }
        .container, .container-fluid {
            clear: both;
            padding-left: 4%;
            padding-right: 4%;
            position: relative;
        }
        .row, .row-fluid {
            clear: both;
            margin-left: auto;
            margin-right: auto;
            max-width: 104rem;
            position: relative;
            width: 100%;
            z-index: 1;
        } 
            
        .banner{
            padding-right: 55%;        
        }
        .banner_row{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            min-height: 20rem;
            position: relative;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -webkit-box-align: center;
            align-items: center;
            
        }
        .footer-menu{
            width: auto;
            max-width: 50%;
            display: flex;
            align-content: center;
            margin-left: auto;
            margin-right: auto;
        }
        .banner_content{
            width: 100%;
        }
        .banner_header{
            font-family: Kanit;
            color: rgb(190, 44, 44);
            font-size: 3rem;
            font-weight: 400;
            font-weight: bold;
        }
        .banner_text{
            font-family: Kanit;
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 1.7;
            word-spacing: 5px;
        }
        .banner_img{
            height: 100%;
            left: 0;
            overflow: hidden;
            width: 100%;
            z-index: 1;
        }
        .banner_img img{
            object-fit: cover;
            object-position: center top;
            right: 0;
            width: 100%;
        }
        .banImg {
            object-fit: cover;
            object-position: center;
            right: 0;
            width: 130%;
            height: 100%;
            position: absolute;
            top: 0;
        }
        .img-fluid{
            max-width: 250px;
            margin-left: auto;
            margin-right: auto;
            outline: 5px solid #09254e;
            /* border: 2px solid #b71c1c; */
            padding: 0;
        }
        .phrase{
            padding: 10%;
            padding-right: 0;
        }
        .linkedin{
            width: 19%;
            margin-top: 5px;
            background-color: white;
            border-radius: 5px;
            border: 1px solid black;
        }
     }

    @media (min-width: 991px) { 
        .navbar-nav,  .navbar-collapse {
            width: 50vw;                
        }  
        .mainBanner{
            background-color: #f2f1ef;
            overflow: hidden;
            padding-bottom: 6rem;
            padding-top: 7.199999999999999rem;
            position: relative;
            z-index: 5;
            border-top:5px solid #b71c1c;
            border-bottom: 5px solid #b71c1c;
        }
        .container, .container-fluid {
            clear: both;
            padding-left: 4%;
            padding-right: 4%;
            position: relative;
        }
        .row, .row-fluid {
            clear: both;
            margin-left: auto;
            margin-right: auto;
            max-width: 104rem;
            position: relative;
            width: 100%;
            z-index: 1;
        } 
            
        .banner{
            padding-right: 42%;        
        }
        .banner_row{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            min-height: 20rem;
            position: relative;
            -ms-flex-align: center;
            -webkit-align-items: center;
            -webkit-box-align: center;
            align-items: center;
            
        }
        .banner_content{
            width: 100%;
        }
        .banner_header{
            font-family: Kanit;
            color: rgb(190, 44, 44);
            font-size: 3.4rem;
            font-weight: 400;
            font-weight: bold;
        }
        .banner_text{
            font-family: Kanit;
            font-size: 1.9rem;
            font-weight: 400;
            line-height: 1.7;
            word-spacing: 5px;
        }
        .banner_img{
            height: 100%;
            left: 0;
            overflow: hidden;
            width: 100%;
            z-index: 1;
        }
        .banner_img img{
            object-fit: cover;
            object-position: center top;
            right: 0;
            width: 100%;
        }
        .banImg{
            object-fit: cover;
            object-position: center;
            right: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
        .linkedin{
            width: 15%;
            margin-top: 5px;
            background-color: white;
            border-radius: 5px;
            border: 1px solid black;
        }
    }
    

    @media (min-width: 1565px) { 
    .navbar-nav,  .navbar-collapse {
        width: 30vw;            
    }        
    .mainBanner{
        background-color: #f2f1ef;
        font-size: 1.8rem;
        overflow: hidden;
        padding-bottom: 6rem;
        padding-top: 7.199999999999999rem;
        position: relative;
        z-index: 5;
        border-top: 5px solid #b71c1c;
        border-bottom: 5px solid #b71c1c;
    }
    .container, .container-fluid {
        clear: both;
        padding-left: 4%;
        padding-right: 4%;
        position: relative;
    }
    .row, .row-fluid {
        clear: both;
        margin-left: auto;
        margin-right: auto;
        max-width: 104rem;
        position: relative;
        width: 100%;
        z-index: 1;
    } 
        
    .banner{
        padding-right: 45%;        
    }
    .banner_row{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        min-height: 20rem;
        position: relative;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
        
    }
    .banner_content{
        width: 100%;
    }
    .banner_header{
        font-family: Kanit;
        color: rgb(190, 44, 44);
        font-size: 4.3rem;
        font-weight: 400;
        font-weight: bold;
    }
    .banner_text{
        font-family: Kanit;
        font-size: 1.7rem;
        font-weight: 400;
        line-height: 1.6;
        word-spacing: 5px;
    }
    .banner_img{
        height: 100%;
        left: 0;
        overflow: hidden;
        width: 100%;
        z-index: 1;
    }
    .banner_img img{
        object-fit: cover;
        object-position: center top;
        right: 0;
        width: 100%;
    }
    .banImg{
        object-fit: cover;
        object-position: center;
        right: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
    }
    .linkedin{
        width: 12%;
        margin-top: 5px;
        background-color: white;
        border-radius: 5px;
        border: 1px solid black;
    }
    }