/* @font-face {
    font-family: "CSQuetzal";
    src: url("/src/assets/fonts/CSQuetzal-Regular.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
} */

body, h2 {
    margin: 0;
    font-family: "Montserrat", sans-serif;
}
h1 {
    font-size: 30px;
}
.submenu-toggle {
      font-family: "Montserrat", sans-serif;
}
.president_quotes > h1 {
    font-size: 30px;
    text-transform: uppercase;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
}

.content {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
  min-height: 80px;
  padding: 20px 0;
  display: flex;
}
/* contact section in all pages */
.contact_section {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-top: 50px;
}
.contact_section a {
    color: #000000;
    text-decoration: none;
    font-weight: 700;
}
.contact_section > div {
    padding-top: 20px;
}
.contact_section > div > span > a:hover {
    opacity: 0.5;
}
.contact_section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: #000;
    transform: translateX(-50%);
}
/* Form */
    #contact-form {
        display: flex;
        flex-direction: column;
        width: 40%;
        margin: 20px auto ;
    }
    .contact_text {
        text-align: center;
        margin: 60px;
    }
    .form_line {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
    input {
        flex: 1;
        min-height: 30px;
    }
    input, textarea {
        border-radius: 7px;
        border: solid 1px grey;
        font-family: "Montserrat", sans-serif;
        padding: 0 10px;
    }
    textarea {
        min-height: 100px;
    }
    #contact-form > button {
        color: #000000;
        border: solid 1px #000000;
        padding: 10px 30px;
        border-radius: 40px;
        width: fit-content;
        margin-top: 20px;
        cursor: pointer;
        margin-left: auto;
    }
    #contact-form > button:hover {
        transform: translateY(-3px);
        transition: transform .3s ease;
    }
/* End form */
/* a-propos - presidents words */
.president_quotes {
    padding: 30px 0;
    max-width: 38rem;
    color: #000000;
    position: relative;
    margin: 0 auto; 
    text-align: center; 
}

.president_quotes::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 50%;
    height: 1px;
    background-color: #000; 
    transform: translateX(-50%);
}
.president_quotes h2 {
    font-size: 30px;
}
.quote_president {
    text-transform: uppercase;
    font-style: italic ;
}
.quote_sign {
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 30px;
}

.one_president {
    display: flex;
    justify-content: center;
    max-width: 1100px;
    margin: 100px auto;
}
.reverse_president {
    flex-direction: row-reverse;
    margin-bottom: 100px;
}
.one_president > div {
    align-content: center;
}
.one_president_img {
    width: 60%;
    height: auto;
}
.one_president_img > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.one_president_text {
    width: 40%;
}
.one_president_text_inner {
    padding: 0 50px;
}
.president_job {
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 5px;
}
.president_name {
    font-size: 50px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.president_text {
    line-height: 1.5;
}
/* end a propos */

/* legal */
    .legal_section {
        margin: 0 10% 100px;
    }
/* home made design pages */
    h1.design_title {
        font-size: 50px;
        text-transform: uppercase;
        text-align: center;
        position: relative;
        margin-bottom: 0;
        margin-top: 80px;
        /* padding-bottom: 100px;
        margin-bottom: 100px; */
    }
    /* h1.design_title::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 20%;
        height: 1px;
        background-color: #000; 
        transform: translateX(-50%);
    } */
    .design_text {
        flex: 1;
    }
    .design_section {
        display: flex;
        width: 80%;
        margin: auto auto 10px auto;
    }
    .design_section > div {
        align-content: center;
    }
    .design_img {
        width: 100%;
        height: auto;
        /* aspect-ratio: 3 / 4; */
        aspect-ratio: 6 / 6;
        flex: 1.5
    }
    .design_img > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .design_text_inner {
        padding: 0 45px;  
        font-size: 18px;
    }
    .design_text_section {
        font-size: 18px;
        width: 80%;
        margin: auto auto 50px auto;
        text-align: center;
    }
    .design_text_section > ul {
        text-align: left;
        place-self: center;
    }
    /* End homemade design pages */

    /* experts 360 pages */
    .experts_section {
        margin: auto auto 50px;
    }
    .experts_intro {
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 18px;
    }
    .experts_subtitle {
        font-size: 33px;
        margin-top: 10px;
    }
    h3.experts_titles {
        text-align: center;
        text-transform: uppercase;
        font-size: 30px;
        font-weight: 300;
    }
    .experts_intro {
        position: relative;
        /* padding-bottom: 50px; */
    }
    /* .experts_intro::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 20%;
        height: 1px;
        background-color: #000; 
        transform: translateX(-50%);
    } */
    .experts_line1 {
        display: flex;
        /* justify-content: space-between; */
        /* margin: 50px 0 50px; */
        justify-content: center;
        gap: 10px;
        position: relative;

    }
    .experts_card, .experts_line2 {
        width: 40%;
        /* flex: 1; */
    }
    .experts_images {
        width: 100%;
        height: auto;
        margin: auto;
    }
    .experts_first_img {
        width: 65%;
    }
    .first_text > p {
        margin-block-start: 10px;
        margin-block-end: 10px;
    }
    .experts_images > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .experts_card_inner {
        /* padding: 25px; */
        text-align: center;
        font-size: 18px;
    }
    .experts_card_text > ol {
        /* list-style-type: none; */
        /* text-align: left; */
        list-style-position: inside;
        text-align: center;
        margin-block-start: 10px;
    }
    .plane2 {
        width: 20%;
        /* position: absolute;
        top: 0; */
    }
    .plane2 > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .plane1 {
        width: 25%;
        height: auto;
        /* position: absolute; */
        /* left: -12%;
        top: 10%; */
    }
    .plane1 > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .plane3 {
        /* rotate: 21deg; */
        width: 30%;
        margin-top: inherit;
        /* position: absolute;
        top: 68%;
        left: 50%; */
        }
    .plane3 > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .experts_line2 {
        display: flex;
        gap: 25px;
        margin: 25px auto 0;
        width: 50%;
    }
    @media (max-width: 768px) {
        .plane1, .plane2, .plane3 {
            display: none;
        }
        .experts_line1 {
            flex-direction: column;
            margin: 30px 0 auto;
        }
        .experts_card, .experts_line2 {
            width: 100%;
        }
        .experts_intro {
            padding-bottom: 30px;
            font-size: 16px;
        }
        .experts_card_inner {
            font-size: 16px;
            padding: 0;
        }
    }
    /* end experts 360 */

    /* commitment pages */
    .commitment_section {
        display: flex;
        width: 80%;
        margin: 50px auto;
        flex-direction: row-reverse;
        gap: 20px;
        align-items: center;
    }
    .international_text, .commitment_image {
        flex: 1;
        align-content: center;
        font-size: 18px;
    }
    .international_text_inner {
        padding-right: 45px;
    }
    .commitment_image {
        width: auto;
        height: 100%;
        /* aspect-ratio: 3 / 4; */
        aspect-ratio: 6 / 6;
    }
    .commitment_image > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .commitment_secondpix {
        width: 80%;
        height: 500px;
        margin: auto auto 50px;
    }
    .commitment_secondpix > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* end commitment */


@media (max-width: 1024px) {
    .contact_section {
        margin: 50px 30px;
    }
    .one_president {
        margin: 60px 30px;
    }
    .plane1, .plane2, .plane3 {
        display: none;
    }
    .experts_section, .commitment_section {
        width: auto;
        margin: 0 30px;
    }
    .experts_card {
        width: 50%;
    }
    .experts_line2 {
        width: 100%;
    }
    #contact-form {
        width: 60%;
    }
    .design_section {
        flex-direction: column;
        margin: auto auto 60px;
    }
    .commitment_section {
        flex-direction: column;
        width: 80%;
        margin: auto auto 60px;
    }
}

@media (max-width: 768px) {
    .president_quotes {
        margin: 0 20px;
    }
    .one_president {
        flex-direction: column;
        margin: 60px 20px;
    }
    .one_president > div {
        width: 100%;
    }
    .one_president_text_inner {
        padding: 0;
    }
}

    @media (max-width: 768px) {
        .commitment_section {
            flex-direction: column;
            width: 80%;
            margin: auto auto 60px;
        }
        .international_text_inner {
            padding: 0;
        }
        #contact-form {
            width: auto;
            margin: 0 20px 20px 20px;
        }
        .form_line {
            flex-direction: column;
        }
        h1.design_title {
            font-size: 30px;
            padding-bottom: 50px;
            margin-bottom: 50px;
        }
        .design_section {
            flex-direction: column;
            margin: auto auto 60px;
        }
        .design_text_inner {
            padding: 0;
        }
    }
        @media (max-width: 768px) {
        .plane1, .plane2, .plane3 {
            display: none;
        }
        .experts_line1 {
            flex-direction: column;
            margin: 30px 0 auto;
        }
        .experts_card, .experts_line2 {
            width: 100%;
        }
        .experts_intro {
            padding-bottom: 30px;
            font-size: 16px;
        }
        .experts_card_inner {
            font-size: 16px;
            padding: 0;
        }
    }