/* *>* {
    border: 2px solid red;
} */

.md\:w-auto {
    width: 16em;
}
.md\:h-32 {
    height: auto;
}
.h-12 {
    height: auto;
}
#footer-container >footer {
    background-color: #000;
    color: #fff;
    max-width: 100%;
}
/* *, :before, :after {
    
    border-style: none;
    
} */

header{
    background-color:#662631 !important ;
    max-width: 100% !important;
    margin-bottom: 0;
    border: 0px;
}

.bg-container{
    background-image: url("/assets/d9ff66_314209681bf141d78480d0f812e589e6~mv2.png") !important;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100vh;
    filter: brightness(90%);
    --bg-overlay-color: rgb(0, 0, 0);
   position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit; /* Ensures the pseudo-element has the same background as the hero section */
    filter: brightness(50%); /* Adjust the value as needed */
    z-index: 1;
}

.second-container{
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50rem;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

/* Container to hold the images */
.container {
    position: relative; 
    width: 60%;
    height: 666px; /* Full viewport height */
    overflow: hidden; /* Hide any overflowing parts of the images */
    margin-left: 15%;

}

/* Base image styling */
.image {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background-size: cover;
    background-position: center;
}

/* First image (background) */
.image1 {
    background-image: url('/assets/sean-pollock-PhYq704ffdA-unsplash.png'); /* Replace with your first image path */
    z-index: 1;
    height:600px;
    width:410px;
 
}

/* Second image (foreground) */
.image2 {
    background-image: url('/assets/second_container_img.png'); /* Replace with your second image path */
    z-index: 3;
    opacity: 1; /* Optional: Set transparency to see the background image */
    /* margin-left:230px;
    margin-top:450px; */
    top: 450px;
    left: 250px;
    width: 350px;
    height: 200px;
}

.image3{
    background-color:#446178 ;
    height: 120px;
    width: 80px;
    z-index: 3;
    top: -10px;
    left: -20px;
}


#bln-api-ajax-content-div{
    position: relative;
    z-index: 1; /* Ensure the text stays above the background */
    margin-top:5%;
    background-color: #ffffff;
    padding-right: 1px;
    width: 35%;
    border-radius: 2%;

    position: relative;
    z-index: 2; /* Ensure the form is above the background overlay */
    
}


/* 
* > div:not(#bln-api-ajax-content-div) {
    
    border-style: solid;
    
} */

.second-con-text {
    height: 75%;
    font-family: wfont_28f36a_c82d04988d374c919b4deee071338a56,wf_c82d04988d374c919b4deee07,orig_rufina;
}
.second-con-text h1{
    color: #662631;
    position: relative;
    left:-170px;
    font-size: 35px;
    letter-spacing: 1.75px;
    font-family: wfont_28f36a_c82d04988d374c919b4deee071338a56,wf_c82d04988d374c919b4deee07,orig_rufina;
}

.second-con-text strong{
    color: #000000;
    font-size: 14px;
    font-family: "Gill Sans", sans-serif;
}
.second-con-text p{
    width: 60%;
    margin-top: 4%;
    
    letter-spacing:0.05em;
    line-height: 1.6em;
    
    
    /* font-family: monospace;
    font-family: cursive;
    font-family: fantasy;
    font-family: system-ui;
    font-family: ui-serif;
    font-family: ui-sans-serif;
    font-family: ui-monospace;
    font-family: ui-rounded;
    font-family: emoji;
    font-family: math;
    font-family: fangsong; */
   
}

.third-container{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-inline: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
}
.third-img-container{
    display: flex;
    margin-block: 50px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.third-img-container div{
    margin: 10px;
    text-align: center;

}

.third-img-container h2{
    font-family: wfont_28f36a_c82d04988d374c919b4deee071338a56,wf_c82d04988d374c919b4deee07,orig_rufina;
    margin-block: 5px;
}

.small-img-info > p {
    font-family: "Gill Sans", sans-serif;
    font-size: 14px;
    margin-block: 2px;
    
}

.third-heading{
    color:#662631;
    letter-spacing: 0.05em;
    font-size: 35px;
    font-family: wfont_28f36a_c82d04988d374c919b4deee071338a56,wf_c82d04988d374c919b4deee07,orig_rufina;
    line-height: 1.1em;
}

.map-container{
    width: auto;
    margin-left: auto;
    margin-right: auto;
    
    

}
.map-container h1 {
    color: #662631;
    font-family: wfont_28f36a_c82d04988d374c919b4deee071338a56,wf_c82d04988d374c919b4deee07,orig_rufina;
    font-size: 35px;
    text-align: center;
}
.map-container img {
    height: auto;
    width: 100%;
}
.map-small-div {
    margin-block: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    color: #662631;
    font-family: wfont_28f36a_c82d04988d374c919b4deee071338a56,wf_c82d04988d374c919b4deee07,orig_rufina;
    font-size: 35px;
    margin-left: auto;
    margin-right: auto;
}

.map-small-div > div{
    background-color: #662631;
    height: 1px;
    width: 20%;
}

.map-small-div h1{
    margin-inline: 1%;
    letter-spacing:0.05em;
}

.last-text{
    color: #000000;
    font-family: wfont_6c5776_4f47414d61e645aeb5d47770d7921b99, wf_4f47414d61e645aeb5d47770d, orig_archivo_regular;
    letter-spacing: 0.05em;
    line-height: 1.6em;
    text-align: center;
    font-size: 14px;
}

#footer-container{
    max-width: 100% !important;
    font-family: lulo-clean-w01-one-bold, lulo-clean-w05-one-bold, sans-serif;
    font-weight: bold;
    text-transform: capitalize;
}

#header-links{
    color: #fff;
    border: none;
    text-decoration: none !important; 
}

#header-links:hover{
    color: #D3D3D3;
    text-decoration: none !important;
}


/* @media  screen and (max-width:1071px) {
    .md\:w-auto {
        width: 16rem;
    }
    .md\:h-32 {
        height: auto;
    }
    .h-12 {
        height: auto;
    }
    .md\:py-2 {
        padding-block: 1rem;
    }
    .bg-container{
        width: 100%;
    }
    #bln-api-ajax-content-div{
        width: 100%;
        border-radius: 2%;
    }
    
} */

/* @media  screen and (max-width:1366px) {
    .bg-container{
        height: 48rem;
    }
    #bln-api-ajax-content-div{
        width: 52%;
        border-radius: 2%;
    }
} */

/* @media  screen and (max-width:600px) {
    .bg-container{
        height: 10rem ;
    }
    #bln-api-ajax-content-div{
        width: 150%;
        border-radius: 2%;
    }
} */


@media only screen and (min-width:1651px) {
    .second-container {
        
        margin-left: auto;
        margin-right: auto;
        width: 250px;
        /* background-color: green !important; */
    }
}

@media only screen and (min-width:1541px) {
    .second-container {
        
        margin-left: auto;
        margin-right: auto;
        width: 1550px;
        /* background-color: red; */
    }
}

@media only screen and (max-width:1540px) {
    .second-container {
        /* background-color: rgb(30, 27, 173); */
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        height: 10%;
        object-fit: contain;
    }
    .container {
        min-height: 75vh; /* Full viewport height */
        margin-top: 8%;
        width: 80%;
        
        
    }
    .image1 {
        height:500px;
        width: 280px;
    }
    
    .image2 {    
        top: 370px;
        left: 180px;
        width: 300px;
        height: 190px;
    }
    
    .image3{
        height: 100px;
        width: 60px;
        top: -10px;
        left: -20px;
    }
    .second-con-text {
        height: 95%;
        
    }
    .second-con-text h1{
        font-size: 25px;
    }
    .third-container{
        width: 100%;
  
        align-items: baseline;
    }
    
}

@media only screen and (max-width: 1283px) {
    .second-container{
        flex-direction: column;
        justify-content: center;
        align-content: center;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        
        
    }
    .container {
        width: 50%;
        /*margin-left: auto;
        margin-right: auto; */
        display: flex;
        justify-content: center;
        align-items: center;
     }
     .second-con-text{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10%;
 
     }
     .second-con-text h1{
         left:0px;
     }
}

@media only screen and (max-width: 1087px) {
    .second-container{
        flex-direction: column;
        justify-content: center;
        align-content: center;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        
        
    }
    .container {
       width: 50%;
       /*margin-left: auto;
       margin-right: auto; */
       display: flex;
       justify-content: center;
       align-items: center;
    }
    .second-con-text{
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       margin-bottom: 10%;

    }
    .second-con-text h1{
        left:0px;
    }
  
    
}

@media only screen and (max-width: 960px) {
    .image1 {
        height:400px;
        width: 220px;
    }
    
    .image2 {    
        top: 300px;
        left: 140px;
        width: 250px;
        height: 150px;
        object-fit: cover;
    }
    
    .image3{
        height: 80px;
        width: 40px;
        top: -8px;
        left: -10px;
    }
}
  
/* @media only screen and (max-width: 864px) {
    
    .container {
        width: 100%;
    }
    .image {
        width: 50%;
        height: 50%;
    }
    
    .image1 {
        height:600px;
        width:410px;
    }
    
   
    .image2 {
        width: 350px;
        height: 200px;
    }
    .image3{
        height: 120px;
        width: 80px;
    }
} */

@media only screen and (max-width:793px) {
    .container {
       margin-left: 0%;
       width:60%;
    }
    /* .image1 {
        height:250px;
        width: 150px;
    }
    
    .image2 {    
        top: 180px;
        left: 100px;
        width: 150px;
        height: 90px;
        
    }
    
    .image3{
        height: 80px;
        width: 40px;
        top: -8px;
        left: -10px;
    } */
    
}

@media only screen and (max-width:653px) {
    .container{
        margin-left: 0%;
        width:70%;
    }
}
@media only screen and (max-width:553px) {
    .container{
        margin-left: 0%;
        width:100%;
    }
}
/* @media only screen and (max-width:653px) {
    .container{
        margin-left: 0%;
        width:90%;
    }
} */
  


  
  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (max-width: 768px) {
    header{
        padding-block: 1%;
    }
    .bg-container{
        height: 65rem ;
    }
    #bln-api-ajax-content-div{
        width: 35rem;
        
    }
    
  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
    .bg-container{
         height: 55rem ;
    }
    #bln-api-ajax-content-div{
        width: 44.2rem;
        margin-top: 0;
    } 
  }