﻿body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    
}

header {
    /*background-image: url('../images/Immigration Online (Small).jpg');*/
    display: flex;
    /*flex: 1;*/
    background-color: #ecdfc3;
    width: 100%;
    /*height: 350px;*/
    padding-top: 110px;
}
#headerImage {
    width:100%;

}
.headerContainer {
    max-height: 375px;
    display: flex;
    flex-direction: column;
    grid-template-rows: 300px;
    background-color: #eedab0; 
    justify-content: center;
}
.headerContainerItem1 {
    
    display:block;
    margin-left: auto;
    margin-right: auto;
    /**/
}

.FirstRow {
    background-color: #fff;
    width: 100%;
    color: #171bce;
    text-align: left;
    font-size: medium;
    padding-left: 20%;
    padding-right: 20%;
}
/*.FirstRow1 {
    color: #171bce;
    font-size: xx-large;
    text-align: center;
}

.FirstRow2 {
    color: #171bce;
    font-size: large;
    text-align: center;
}*/
.SecondRow {
    background-color: #fff;

    width: 100%;
    /*justify-content: space-between;
    align-items: center;*/
}
    .SecondRow p {
        color: #171bce;
        text-align: left;
        font-size: medium;
        margin-left:20%;
        margin-right: 20%;
    }
/*.SecondRowImage {
    flex: 0 0 40%;*/ /* Takes up 40% of the width */
    /*max-width: 250px;*/ /* Limits the max width to 250px */
    /*text-align: right;*/ /* Aligns the image to the right */
/*}
    .SecondRowImage img {
        width: 100%;*/ /* Ensures image fills the section */
        /*height: auto;*/ /* Maintains aspect ratio */
    /*}*/


    .SecondRow h1 {
        color: #171bce;
        font-size: xx-large;
        text-align: center;
    }
    .SecondRow h2 {
        color: #171bce;
        font-size: large;
        text-align: center;
    }

.responsive-div {
    display: flex;
    height: 450px;
}

.responsive-image {
/*    max-width: 350px;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;*/
}

.responsive-text {
    flex: 0 0 60%; /* Takes up 60% of the width */
    text-align: center; /* Centers the text */
    display: flex;
    flex-direction: column; /* Stacks elements vertically */
    justify-content: center; /* Aligns them centrally */
}


.article2 {
    background-color: antiquewhite;
    height: 250px;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 30px;

}

.references {
    margin-left: auto;
    margin-top: auto;
    max-width:100%;
}
/*text Sizes*/

/*h1 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #b78414;
}*/
.veryLargeBold {
    font-size: 30px;
    font-weight: bold;
}
.veryLargeBoldCenter {
    font-size: 30px;
    font-weight: bold;
    text-align:center;
}
.largeBold {
    font-size: 20px;    
    font-weight: bold;
}
.smallText {
    font-size: 12px;
}
.veryLargeBoldCenterBrown {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #644738;
}
.veryLargeBoldCenterGold {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #b78414;
}
.largeBoldCenterGold {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #b78414;
}
.largeCenterGold {
    font-size: 24px;
    text-align: center;
    color: #b78414;
}
.mediumCenterGold {
    font-size: 20px;
    text-align: center;
    color: #b78414;
}
.assitanceLarge {
    font-size: 20px;
    text-align: center;
    color: #b78414;
}
/*Analisis Divs*/
.divHeadingContainer {
    width: 60%;
    margin-left: 20%;
    margin-top: 10%;
}
.divQuestionsContainer {
    width: 70%;
    /*height: 60%;*/
    background-color: #ecdfc3;
    margin-left: 15%;
    margin-top: 20%;
    padding: 25px 20px;
    border-radius: 15px;
    /*transition: all 5s ease-in-out;*/

    /*position: absolute;
    
    transition: transform 1s ease-in-out;*/
}
.divQuestions {
    transition: all 1s ease-in-out;
}

.hide {
    display: none;
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-200%);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.active-slide-out {
    animation: slideOutLeft 1s forwards;
}

.active-slide-in {
    animation: slideInRight 1s forwards;
}



.GVButton {
    background-color: #ce9b2c;
    color: #fff;
    font-size: large;
    
    border-radius: 15px;
    border-color: #d3b8aa;
}
/*.divTop {
    width: 60%;*/
    /*height: 60%;*/
    
    /*margin-left: 20%;
    margin-top: 10%;*/
    /*display: flex;
        flex-direction: column;*/
/*}
.divAnalisisArea {
    width: 60%;
    margin-left: 20%;
    margin-top: 10%;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #b78414;
}*/
.divButtonContainer {
    width: 100%;
    padding: 0 5px;
    display: flex;
}
.divButtonContainerY {
    width: 100%;
    padding: 0 5px;
    display: flex;
}

.divButtonContainerCol {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction:column;
}

.divEmailContainer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: #000099;
    text-align: left;
}
.ButtonYesNoDiv {
    height: 45px;
    margin: 15px;
    
    background-color: #ce9b2c;
    color: #fff;
    font-size: large;
    flex: 1;
    border-radius: 15px;
    border-color: #d3b8aa;
}
.ButtonYesNoDivCol {
    height: 65px;
    padding: 10px;
    min-width: 60%;
    margin: auto;
    /*padding: 10px;*/
    background-color: #ce9b2c;
    color: #fff;
    font-size: large;
    flex: 1;
    border-radius: 15px;
    border-color: #d3b8aa;
}
.ButtonNextDiv {
    height: 65px;
    margin: 15px;
    min-width: 45%;
    background-color: #ce9b2c;
    color: #fff;
    font-size: large;
    flex: 1;
    justify-content:right;
    border-radius: 15px;
    border-color: #d3b8aa;
}
.parQuestion {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: #000099;
    text-align: left;
}
/*Second Row Table*/
.secondRowTableContainer {
    border-top: 20px;
    border-bottom: 20px;
    padding-left: 10%;
    padding-right: 10%;
    background-color: #ecdfc3;
}
.secondRowTable {

    align-self: flex-end;
}
.actionButton {
    font-size:larger;
    color: white;
    background-color: #ce9b2c;
    width: 40%;
    height: 50px;
    border-radius: 30px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    position: relative;
    left: 30%;
    margin: 0 20px;
}
.columnOne {
    width: 20%;
}
.columnTwo {
    width: 10%;
}
.columnThree{
    width: 90%;
}
#ImageScondRow {
    width: 100%;
}
nav {
    background-color: antiquewhite;
    position: fixed;
    top: 0px;
    width: 100%;
    max-width: 1400px;
}
.navMenu {
    
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 1;
}
.navMenuButton {
    
    text-decoration: none;
    color: #644738;
    background-color: #e9d7bf;
    padding: 10px 15px;
    height: 100%;
    display: flex;
    flex: 1;
    align-items: center;
    margin: 2px 5px;
    border-radius:15px;
    border-color: #d3b8aa;

}
    .navMenuButton:hover {
        text-decoration: none;
        color: white;
        background-color: #ce9b2c;
        padding: 10px 15px;
        height: 100%;
        display: flex;
        flex: 1;
        align-items: center;
        margin: 2px 5px;
        border-radius: 15px;
        border-color: #d3b8aa;
    }
.navMenuButtonSelected {
    text-decoration: none;
    color: white;
    background-color: #ce9b2c;
    padding: 10px 15px;
    height: 100%;
    display: flex;
    flex: 1;
    align-items: center;
    margin: 2px 5px;
    border-radius: 15px;
    border-color: #d3b8aa;
}
.navSidebar {
    position: fixed;
    top: 15px;
    right: 0;
    height: 50vh;
    width: 250px;
    z-index: 999;
    background-color: rgb(250, 235, 215, 0.33);
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px #808080;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.navSidebarButton {
    text-decoration: none;
    color: #644738;
    background-color: #e9d7bf;
    padding: 10px 15px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 2px 5px;
    border-radius: 15px;
    border-color: #d3b8aa;
}
    .navSidebarButton:hover {
        text-decoration: none;
        color: white;
        background-color: #ce9b2c;
        padding: 10px 15px;
        width: 100%;
        display: flex;
        align-items: center;
        margin: 2px 5px;
        border-radius: 15px;
        border-color: #d3b8aa;
    }
.navSidebarButtonSelected {
    text-decoration: none;
    color: white;
    background-color: #ce9b2c;
    padding: 10px 15px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 2px 5px;
    border-radius: 15px;
    border-color: #d3b8aa;
}
.navLogo {
    margin-right: auto;
}
.artHomeMain {
    background-color: #ece8df;
}


.header {
    background-color: #9f5326;
    margin-top: 0;
    max-width: 1200px;
}
#ImageLogo {
    width: 35vw;
    max-width: 400px;
}

#ImageMenuX {
    width: 26px;
}
#ImageMenuH {
    width: 26px;
}
#ImageButtonH {
    width: 40px;
    display: none;
}
#ImageButtonX {
    width: 30px;
    
}
#ButtonSidebarOpen {
}
#divMenuH {
    display: none;
}
main {
    padding: 0 25Px;
}
.ParHeader {
    color: #373292;
    font-size:x-large;
    font-weight:bold;
}
.artHomeBenefCont {
    max-height: 375px;
    display: flex;
    flex-direction: column;
    grid-template-rows: 300px;
    background-color: #eedab0;
    justify-content: center;
}
.artHomeBenef {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
footer {
    background-color: #86715e;
    height: 120px;
    color: #fff;    
}
footer a{
    text-decoration:none;
    color:#fff;
}
.footer-table {
    font-size:small;
    padding:15px;
    width: 350px;
    color:#fff;
    text-align:center;
}

/*From Dreamweaver*/
.row {
    width: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    display: flex;
}

    .row.blockDisplay {
    flex: 1;
    }

.column_half {
    width: 50%;
    float: left;
    margin-top: 0px;
}

.columns {
    width: 25%;
    float: left;
    font-family: "Source Sans Pro";
    color: #682d09;
    line-height: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items:stretch;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}
    .columns:hover {
        background-color: #ecdfc3;
    }
    .columns a {
        text-decoration: none;
        color: #682d09;
    }
.row .columns p {
    padding-left: 10%;
    padding-right: 10%;
    text-align: justify;
}

.columns h4 {
    text-align: center;
    color: #682d09;
    font-size:large;
}


.thumbnail {
    width: 100%;
    border-radius: 200px;
    max-height: 250px;
    margin-left: auto;
    background-size: cover;
    display:block;
}

.thumbnail_align {
    text-align: center;
    background-size: cover;
}

/*Politica de Privacidad*/
.privacy {
    width: 65%;
    padding-left: 15%;
    padding-right: 15%;
}
.privacy h2{
    color:#171bce;
    text-align:center;
}
.privacy h3 {
    color: #171bce;
}
.emailHeaderTable {
    width: 600px;
    background-color: #273842;
    color: #fff;
    display:inline-flex;
}

.emailHeaderTableCol1 {
    width: 60%;
    flex:auto;
}
.emailHeaderTableCol2R1 {
    font-size: x-large;
    color: #cb9b2c;
    flex: auto;
}
.emailBody {
    font-family:'Times New Roman', Times, serif;
    font-size:medium;
}
.emailBodyBold {
    font-weight: bold;
    color: #171bce;
}
/*end from Dreamweaver*/
/*From Copilot*/

/*End From Copilot*/
.headeImageMed {
    display: none;
}


/* MEDIA 800 */

@media (max-width: 800px) {
    .headerImage {
        display:none;
    }
    .headeImageMed {
        display:block;
    }

    .navMenuButton {
        display: none;
    }
    .navMenuButtonSelected {
        display: none;
    }
    .menu {
        display: none;
        flex-direction: column;
    }

        .menu.open {
            display: flex;
        }

    .hamburger-menu {
        display: flex;
    }

    nav ul li {
        margin: 0;
    }

        nav ul li a {
            padding: 10px;
            text-align: center;
        }
    #divMenuX {
        display: flex;
    }
    #ImageButtonH {
        display: flex;
    }
    header {
        padding-top: 80px;
    }
    .row {
        display:block;
        align-content: center;
        float:inherit;
       
    }
    .columns {
        align-content: center;
        min-width: 300px;
    }
    .headerContainer {
        display: flex;
        justify-content: flex-end;
        max-width:100%;
        align-content:flex-end;
        height:auto;
    }
    #headerImage {
        width: 100%; /* Allow shrinking */
        max-width: 700px; /* Prevent scaling larger than original */
        height: auto; /* Maintain aspect ratio */
    }
    .actionButton {
        width: 70%;
        position: relative;
        left: 15%;
    }
    .divQuestionsContainer {
        width: 90%;
        /*height: 60%;*/
        background-color: #ecdfc3;
        margin-left: 5%;
        margin-top: 20%;
        padding: 25px 5px;
        border-radius: 15px;
    }
    .actionButton {
        font-size: large;
        color: white;
        background-color: #ce9b2c;
        width: 60%;
        height: 50px;
        border-radius: 30px;
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
        position: relative;
        left: 20%;
        margin: 0 20px;
    }
    .ButtonYesNoDiv {
        min-width:60%;
    }
    .divButtonContainer {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .divButtonContainerY {
        width: 100%;
        padding: 0 5px;
        display: flex;
        
    }
/*    .divTop {
        width: 90%;
        margin-left: 5%;
        margin-top: 10%;
    }
    .divAnalisisArea {
        width: 90%;
        margin-left: 50%;
        margin-top: 10%;
        font-size: 20px;
    }*/
    .ButtonYesNoDiv {
        height: 65px;
        min-width: 60%;
        margin: auto;
        padding: 10px;
        background-color: #ce9b2c;
        color: #fff;
        font-size: large;
        flex: 1;
        border-radius: 15px;
        border-color: #d3b8aa;
    }
    .ButtonNextDiv {
        height: 65px;
        min-width: 60%;
        margin: auto;
        padding: 10px;
        background-color: #ce9b2c;
        color: #fff;
        font-size: large;
        flex: 1;
        border-radius: 15px;
        border-color: #d3b8aa;
    }

    /* Text Sizes */
    .veryLargeBoldCenterGold {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        color: #b78414;
    }
    .largeBoldGold {
        font-size: 16px;
        font-weight: bold;
        color: #b78414;
    }

    .largeBoldCenterGold {
        font-size: 20px;
        font-weight: bold;
    }
    .assitanceLarge {
        font-size: 18px;
        text-align: center;
        color: #b78414;
    }
    .largeCenterGold {
        font-size: 18px;
        text-align: center;
        color: #b78414;
    }
    .mediumCenterGold {
        font-size: 16px;
        text-align: center;
        color: #b78414;
    }
    /*Second Row Table*/
    .secondRowTable {
        width: 100%;
    }
    .secondRowTableContainer {
        padding-left: 3%;
        padding-right: 3%;
        
    }
    
    .columnThree {
        width: 90%;
        padding-left: 10px;
    }

    #ImageScondRow {
        width: 100%;
    }

    .responsive-image {
        max-width: 200px;
        max-height: 100%;
        height: auto;
        width: auto;
        object-fit: contain;
    }
    
    /*Politica de Privacidad*/
    .privacy {
        width: 80%;
        padding-left: 10%;
        padding-right: 10%;
    }


    /*Email defs Analisis RP*/

}
@media (max-width:499px) {
    header {
        padding-top: 60px;
    }
    .row {
        width:80%;
        align-content: center;
        float: none;
    }

    .columns {
        align-content: center;
        min-width: 350px;
    }
    .headerContainer {
        display: block;
        max-width: 100%;
    }
}
