@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@font-face {
    font-family: altoneTrialBold;
    src: url(fonts/altone-trial.bold.ttf);
}

html {
    scroll-behavior: smooth;
}

/*SCROLLBAR*/

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #999;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #666;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0;
}

/*BOTAO WHATSAPP CHAT*/
@keyframes bounce {
    0%      {scale: 1;}
    40%     {scale: 1;} 
    42%     {scale: 1.5;}
    44%     {scale: 1;}
    45%     {scale: 1.5;}
    46%     {scale: 1;}
    48%     {scale: 1.5;}
    50%     {scale: 1;}
    52%     {scale: 1.5;}
    54%     {scale: 1;}
    56%     {scale: 1.5;}
    58%     {scale: 1;}
    60%     {scale: 1.5;}
    62%     {scale: 1;}
    100%    {scale: 1;}
}

/*HEADER*/
header {
    z-index: 10;
    position: fixed;
    background-color: rgba(255, 255, 255, 1);
    width: calc(100vw - 20%);
    padding: 0 10% 0 10%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.mobile-menu {
    display: none;
}

header img {
    height: 100%;
}

nav {
    width: calc(90% - 250px);
    overflow: hidden;
}

header ul {
    font-weight: 600;
    width: 100%;
    display: flex;
    justify-content: space-between;
    list-style: none;
}

header li {
    font-size: clamp(0.9rem, 0.8vw, 2rem);
}

a {
    text-decoration: none;
    color: rgb(255, 115, 20);
}

.opt-header:hover {
    transition: all 0.3s;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.active-header {
    height: 80px;
    background-color: white;
}

.dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: rgb(100, 50, 0);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.menu-opts-mobile {
    display: none;
}


/*FUNDO BLUR*/

.fundo-blur {
    display: none;
    position: fixed;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-color: rgb(219, 219, 219, 0.5);
}

/*BANNERS - SECTION*/

.banners {
    padding-top: 80px;
    width: 100%;
    height: 75vh;
    position: relative;
    display: flex;
    cursor: pointer;
    overflow-x: hidden;
    overflow-y: hidden;
}

#seta-dir-banners {
    right: 20px;
    top: 45%;
}

#seta-esq-banners {
    left: 20px;
    top: 45%;
}

.content-banners {
    position: relative;
    min-width: calc(100%);
    height: calc(100%);
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.4s;
}

.container-banners {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease;
}

#banners-1 {
    background-image: url("imgs/banners/aprovados-6.jpeg");
}

#banners-2 {
    background-image: url("imgs/banners/aprovados-7.jpeg");
}

#banners-3 {
    background-image: url("imgs/banners/aprovados-8.jpeg");
}

#banners-4 {
    background-image: url("imgs/banners/aprovados-9.jpeg");
}

#banners-5 {
    background-image: url("imgs/banners/aprovados-10.jpeg");
}

#banners-6 {
    background-image: url("imgs/banners/banner-aprovados.jpg");
}

.container-aprovados {
    padding: 20px;
    border-radius: 20px;
    width: 30%;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    background-color: rgb(255, 115, 20);
    /* For browsers that do not support gradients */
    background-image: linear-gradient(rgb(255, 115, 20), #fdca23);
    text-align: center;
}

.container-aprovados h2 {
    color: white;
    font-family: altoneTrialBold;
    font-size: clamp(1.2rem, 2.5vw, 4rem);
}

/*HOME - SECTION 1*/

.home {
    background-image: url("imgs/gradients-blobs/gb-1.png"), url("imgs/gradients-blobs/gb-2.png"), linear-gradient(to right, #F6F6F6, #F6F6F6);
    background-size: 50% 100%, 50% 85%, 100% 100%;
    background-position: -6vw 0vh, 70vw 12vh, 0 0;
    background-repeat: no-repeat;
    padding-top: 100px;
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-home {
    width: 80%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.row1-home {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.col1-home {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.title-home {
    color: white;
    font-family: altoneTrialBold;
    font-size: clamp(1.5rem, 2.5vw, 4rem);
}

.subtitle-home {
    color: white;
    font-size: clamp(0.8rem, 1vw, 2rem);
    margin-bottom: 20px;
}

.btn-visita {
    cursor: pointer;
    width: 50%;
    text-align: center;
    background-color: rgb(255, 115, 20);
    color: white;
    border: 0;
    border-radius: 10px;
    padding: 15px;
    font-size: clamp(1rem, 1.2vw, 2rem);
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
    transition: all 0.2s;
}

.btn-visita:hover {
    scale: 1.05;
    background-color: rgb(214, 89, 6);
    color: white;
}

.col2-home {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.col2-home video {
    border-radius: 20px;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
}

.row2-home {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: space-between;
}

.widgets-home {
    width: 20%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
    transition: all 0.2s;
}

.widgets-home:hover {
    scale: 1.05;
    z-index: 0;
}

.header-widgets-home {
    height: 45%;
    margin-bottom: 10px;
}

.title-widgets-home {
    margin-bottom: 10px;
    font-family: altoneTrialBold;
    font-size: 20px;
    color: rgb(255, 115, 20);
}

.widgets-home img {
    height: 60%;
}

.widgets-home p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 1vw, 2rem);
}

/*ENSINO - SECTION 2*/

.ensino {
    background-image: url("imgs/gradients-blobs/gb-3.png"), url("imgs/gradients-blobs/gb-4.png"), linear-gradient(to right, #F6F6F6, #F6F6F6);
    background-size: 50% 90%, 50% 100%, 100% 100%;
    background-position: -20vw 5vh, 60vw 0px, 0 0;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-ensino {
    width: 80%;
    padding-top: 80px;
    height: calc(80%);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.cursos-ensino {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40%;
    height: 40%;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
    opacity: 0;
    transition: all 0.4s;
}

.cursos-ensino:hover {
    scale: 1.05;
    z-index: 0;
}

.row1-cursos {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.col1-cursos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 60%;
}

.title-cursos {
    margin-bottom: 10px;
    font-family: altoneTrialBold;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: rgb(255, 115, 20);
}

.col1-cursos p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 1vw, 2rem);
}

.col2-cursos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 40%;
}

.img-cursos {
    width: 80%;
}

.row2-cursos {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.lista-cursos {
    cursor: pointer;
    background-color: rgb(255, 115, 20);
    color: white;
    border: 0;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
    transition: all 0.2s;
}

.lista-cursos:hover {
    scale: 1.1;
    background-color: rgb(255, 102, 0);
}

.btn-mais-cursos {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    font-variation-settings: "slnt" 0;
    cursor: pointer;
    border: 0;
    background-color: transparent;
    text-decoration: none;
    color: rgb(255, 115, 20);
}

/*CLUBES - SECTION 3*/

.clubes {
    background-image: url("imgs/gradients-blobs/gb-7.png"), url("imgs/gradients-blobs/gb-2.png"), linear-gradient(to right, #F6F6F6, #F6F6F6);
    background-size: 50% 90%, 50% 100%, 100% 100%;
    background-position: -30vw 5vh, 60vw 0px, 0 0;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.content-clubes {
    width: 80%;
    padding-top: 80px;
    height: calc(80%);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.content-clubes h2 {
    font-family: altoneTrialBold;
    margin-bottom: 10px;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: rgb(255, 115, 20);
}

.content-clubes h3 {
    font-family: altoneTrialBold;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    color: rgb(100, 50, 0);
    margin-right: 10px;
}

.content-clubes p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 1vw, 2rem);
    margin-bottom: 10px;
}

/*overlay*/

.curso-overlay {
    z-index: 5;
    position: absolute;
    border-radius: 10px;
    padding: 20px;
    width: 80%;
    height: calc(80% - 40px);
    background-color: white;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
    transition: all 0.3s;
}

.curso-overlay h2 {
    font-family: altoneTrialBold;
    margin-bottom: 10px;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: rgb(255, 115, 20);
}

.curso-overlay h3 {
    font-family: altoneTrialBold;
    font-size: clamp(1rem, 1.5vw, 1.6rem);
    color: rgb(100, 50, 0);
    margin-right: 10px;
}

.curso-overlay p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 1vw, 2rem);
    margin-bottom: 10px;
}

.row1-overlay {
    height: 5%;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.row1-overlay button {
    cursor: pointer;
    border: 0;
    background-color: transparent;
    font-family: altoneTrialBold;
    font-size: 20px;
    color: rgb(255, 115, 20);
}

.row2-overlay {
    display: flex;
    width: 100%;
    height: 95%;
}

.col1-overlay,
.col2-overlay {
    display: flex;
    text-align: justify;
    flex-direction: column;
    width: 50%;
    height: 100%;
    overflow-y: scroll;
}

.col1-overlay {
    padding-right: 20px;
}

.col2-overlay {
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
}

.col2-overlay img {
    width: 80%;
}

.infantil-overlay,
.anos-iniciais-overlay,
.anos-finais-overlay,
.ensino-medio-overlay {
    display: none;
}

/*overlay*/

.row1-clubes,
.row2-clubes {
    width: 100%;
}

.row1-clubes {
    height: 20%;
}

.row1-clubes p {
    background-color: rgb(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 1%;
}

.row2-clubes {
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.mobile-menu-filtros {
    display: none;
}

.filtro-clubes {
    padding: 1%;
    background-color: rgb(255, 255, 255, 0.8);
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.filtro-clubes select {
    padding: 1%;
    font-size: clamp(0.8rem, 0.8vw, 2rem);
    color: rgb(100, 50, 0);
    border-radius: 10px;
    outline: none;
    margin-right: 10px;
}

.lista-dias-clubes {
    list-style: none;
    width: calc(100% - 20px);
    height: 75%;
    max-height: 80vh;
    padding: 10px;
    justify-content: space-between;
    display: flex;
    background-color: rgb(223, 223, 223, 0.8);
    border-radius: 10px;
    overflow-y: scroll;
}

.lista-dias-clubes li {
    width: 19%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

.table-clubes {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: white;
    padding: 1%;
}

.table-clubes tr {
    height: 100px;
}

.table-clubes th,
.table-clubes td {
    border-radius: 5px;
    padding: 2px;
}

.table-clubes td:first-child {
    padding: 10px;
}

tr:nth-child(odd) {
    background-color: rgb(230, 230, 230);
}

tr:nth-child(even) {
    background-color: rgb(255, 183, 135);
}

.table-clubes p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 0.8vw, 2rem);
    margin-bottom: 0;
}

/*INTEGRAL - SECTION 3*/

.integral {
    background-image: url("imgs/gradients-blobs/gb-integral.png"), linear-gradient(to right, #F6F6F6, #F6F6F6);
    background-size: 80% 90%, 100% 100%;
    background-position: center, 0 0;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-integral {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    align-content: space-between;
    justify-content: space-between;
}

.col1-integral {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 20px;
    padding-top: 0;
    width: 40%;
}

.col1-integral h3 {
    font-family: altoneTrialBold;
    margin-bottom: 10px;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    color: rgb(100, 50, 0);
}

.col1-integral h2 {
    font-family: altoneTrialBold;
    text-shadow: 1px 1px 1px rgba(100, 50, 0, 0.3);
    margin-bottom: 10px;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: white;
}

.col1-integral p {
    text-shadow: 1px 1px 1px rgba(100, 50, 0, 0.3);
    color: white;
    font-size: clamp(0.8rem, 1vw, 2rem);
    margin-bottom: 10px;
}

.mais-integral {
    font-weight: 600;
    color: white;
    font-size: clamp(1rem, 1.2vw, 2rem);
    margin-bottom: 10px;
}

.btns-integral {
    display: flex;
    justify-content: space-between;
}

.btn-visita-integral {
    cursor: pointer;
    width: 40%;
    background-color: white;
    color: rgb(255, 115, 20);
    border: 0;
    border-radius: 10px;
    padding: 15px;
    font-size: clamp(0.8rem, 1.2vw, 2rem);
    text-align: center;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
    transition: all 0.2s;
}

.btn-visita-integral:hover {
    scale: 1.05;
    background-color: rgb(214, 89, 6);
    color: white;
}

.btn-cardapio {
    cursor: pointer;
    width: 40%;
    background-color: rgb(93, 181, 96);
    color: white;
    border: 0;
    border-radius: 10px;
    padding: 15px;
    font-size: clamp(0.8rem, 1.2vw, 2rem);
    text-align: center;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
    transition: all 0.2s;
}

.btn-cardapio:hover {
    scale: 1.05;
    background-color: rgb(8, 155, 13);
    color: white;
}

.col2-integral {
    width: 50%;
}

.col2-integral img {
    width: 100%;
}

/*OLIMPIADAS - SECTION*/

.olimpiadas {
    background-image: url("imgs/gradients-blobs/gb-3.png"), url("imgs/gradients-blobs/gb-4.png"), linear-gradient(to right, #F6F6F6, #F6F6F6);
    background-size: 50% 90%, 50% 100%, 100% 100%;
    background-position: -20vw 5vh, 60vw 0px, 0 0;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-olimpiadas {
    width: 80%;
    padding-top: 80px;
    height: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}

.content-olimpiadas h2 {
    font-family: altoneTrialBold;
    margin-bottom: 10px;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: rgb(100, 50, 0);
}

.content-olimpiadas h3 {
    font-family: altoneTrialBold;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    color: rgb(100, 50, 0);
    margin-right: 10px;
}

.content-olimpiadas p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 1vw, 2rem);
    margin-bottom: 10px;
}

.col1-olimpiadas {
    width: 55%;
    height: 100%;
}

.historia-olimpiadas {
    height: 90%;
    background-color: rgb(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 10px;
    overflow-y: scroll;
}

.col2-olimpiadas {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.posts-olimpiadas {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 10px;
}

.posts-olimpiadas a {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    width: 90%;
    transition: all 0.3s;
}

.posts-olimpiadas a:hover {
    width: 100%;
}

.posts-olimpiadas a img {
    width: 100%;
}

/*ONU - SECTION*/

.onu {
    background-image: url("imgs/gradients-blobs/gb-7.png"), linear-gradient(to right, #F6F6F6, #F6F6F6);
    background-size: 50% 100%, 100% 100%;
    background-position: 60vw, 0 0;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-onu {
    width: 80%;
    padding-top: 80px;
    height: 80%;
    display: flex;
    flex-direction: row;
    align-content: space-between;
    justify-content: space-between;
}

.content-onu h2 {
    font-family: altoneTrialBold;
    margin-bottom: 10px;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: rgb(100, 50, 0);
}

.content-onu h3 {
    font-family: altoneTrialBold;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    color: rgb(100, 50, 0);
    margin-right: 10px;
}

.content-onu p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 1vw, 2rem);
    margin-bottom: 10px;
}

.col1-onu {
    width: 55%;
    height: 100%;
}

.historia-onu {
    height: 90%;
    background-color: rgb(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
    overflow-y: scroll;
}

.col2-onu {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.posts-onu {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 10px;
}

.posts-onu a {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    width: 90%;
    transition: all 0.3s;
}

.posts-onu a:hover {
    width: 100%;
}

.posts-onu a img {
    width: 100%;
}

/*INFRAESTRUTURA - SECTION */

.infraestrutura {
    background-image: url("imgs/gradients-blobs/gb-5.png"), url("imgs/gradients-blobs/gb-6.png"), linear-gradient(to right, #F6F6F6, #F6F6F6);
    background-size: 80% 90%, 50% 90%, 100% 100%;
    background-position: -50vw 10vh, 70vw, 0 0;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-infraestrutura {
    width: 80%;
    padding-top: 80px;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
}

.row1-infraestrutura {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
}

.col1-infraestrutura {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.col1-infraestrutura h2 {
    font-family: altoneTrialBold;
    margin-bottom: 10px;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: rgb(255, 115, 20);
}

.col1-infraestrutura p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 1vw, 2rem);
    margin-bottom: 10px;
}

.col2-infraestrutura {
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.carrossel-infraestrutura {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    overflow-x: hidden;
    border-radius: 20px;
}

.carrossel-infra-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
}

.seta-carrossel {
    width: 3%;
    position: absolute;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.seta-carrossel:hover {
    scale: 1.2;
    z-index: 2;
}

#seta-dir-carrossel {
    right: 10px;
    top: 45%;
}

#seta-esq-carrossel {
    left: 10px;
    top: 45%;
}

.img-carrossel {
    position: relative;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s;
}

.row2-infraestrutura {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/*FOTOS - SECTION 5*/

.fotos {
    background-image: url("imgs/gradients-blobs/gb-7.png"), linear-gradient(to right, #F6F6F6, #F6F6F6);
    background-size: 50% 100%, 100% 100%;
    background-position: 60vw, 0 0;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-fotos {
    width: 80%;
    padding-top: 80px;
    height: 80%;
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

.fotos-overlay {
    z-index: 5;
    display: flex;
    overflow-x: scroll;
    position: absolute;
    align-self: center;
    border-radius: 10px;
    width: 80%;
    height: 80%;
    background-color: white;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
    transition: all 0.3s;
    display: none;
}

.row1-fotos {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.col1-fotos {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.col1-fotos h2 {
    font-family: altoneTrialBold;
    margin-bottom: 10px;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: rgb(255, 115, 20);
}

.col1-fotos p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 1vw, 2rem);
    margin-bottom: 10px;
}

.col2-fotos {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.galeria-fotos {
    background-color: rgb(223, 223, 223, 0.8);
    width: 100%;
    height: calc(100% - 2%);
    padding-top: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    border-radius: 10px;
    overflow-y: scroll;
}

.album-fotos {
    background-color: white;
    cursor: pointer;
    border-radius: 10px;
    width: 45%;
    min-height: 30vh;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    transition: all 0.2s;
    background-position: center;
    background-size: cover;
}

.album-fotos:hover {
    opacity: 1.0;
    scale: 1.02;
}

.album-fotos img {
    width: 80%;
}

#album-onuc-2024 {
    background-image: url("imgs/fotos/albums/onuc2024-bg.jpg");
}

#album-agostina {
    background-image: url("imgs/fotos/albums/agostina-bg.jpg");
}

#album-colacao-3ao {
    background-image: url("imgs/fotos/albums/colacao-3ao-bg.jpg");
}

#album-colacao-9ano {
    background-image: url("imgs/fotos/albums/colacao-9ano-bg.jpg");
}

.ver-mais-fotos {
    position: absolute;
    display: flex;
    height: 4vh;
    align-items: center;
    padding: 10px;
    bottom: 0;
    right: 0;
    color: white;
    background-color: rgb(255, 115, 20);
}

.ver-mais-fotos img {
    height: 100%;
    margin-left: 10px;
}

/*UNIFORMES - SECTION 5*/

.uniformes {
    background-image: url("imgs/gradients-blobs/gb-uniformes.png"), linear-gradient(to right, #F6F6F6, #F6F6F6);
    background-size: 80% 80%, 100% 100%;
    background-position: center, 0 0;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-uniformes {
    width: 80%;
    padding-top: 80px;
    height: 80%;
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

.col1-uniformes {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.row1-uniformes {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.row2-uniformes {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.row2-uniformes img {
    width: 90%;
}

.content-uniformes h2 {
    font-family: altoneTrialBold;
    margin-bottom: 10px;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: rgb(255, 115, 20);
}

.content-uniformes p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 1vw, 2rem);
    margin-bottom: 10px;
}

.btn-loja {
    cursor: pointer;
    width: 250px;
    background-color: rgb(255, 115, 20);
    color: white;
    border: 0;
    border-radius: 10px;
    padding: 15px;
    font-size: 22px;
    text-align: center;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
    transition: all 0.2s;
}

.btn-loja:hover {
    scale: 1.1;
    background-color: rgb(255, 102, 0);
}

/*TRABALHE CONOSCO - SECTION 6*/

.trabalhe-conosco {
    background-image: url("imgs/gradients-blobs/gb-5.png"), url("imgs/gradients-blobs/gb-6.png"), linear-gradient(to right, #F6F6F6, #F6F6F6);
    background-size: 80% 90%, 50% 90%, 100% 100%;
    background-position: -50vw 10vh, 70vw, 0 0;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-trabalhe-conosco {
    width: 80%;
    padding-top: 80px;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
}

.content-trabalhe-conosco h2 {
    font-family: altoneTrialBold;
    margin-bottom: 10px;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: rgb(255, 115, 20);
}

.content-trabalhe-conosco p {
    color: rgb(100, 50, 0);
    font-size: clamp(0.8rem, 1vw, 2rem);
    margin-bottom: 10px;
}

.row1-trabalhe-conosco {
    display: flex;
    justify-content: space-between;
    height: 90%;
    width: 100%;
}

.col1-trabalhe-conosco {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
}

.col1-trabalhe-conosco img {
    width: 80%;
    min-width: 500px;
}

.formCurriculo {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 40%;
    overflow-y: scroll;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
}

.formCurriculo h3 {
    font-family: altoneTrialBold;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    color: rgb(100, 50, 0);
    margin-bottom: 15px;
}

.formCurriculo span {
    color: red;
}

.formCurriculo div {
    margin-bottom: 20px;
}

.formCurriculo select {
    padding: 1%;
    font-size: clamp(0.8rem, 0.8vw, 2rem);
    color: rgb(100, 50, 0);
    border-radius: 10px;
    outline: none;
}

.formCurriculo input[type=text] {
    padding: 1%;
    font-size: clamp(0.8rem, 0.8vw, 2rem);
    color: rgb(100, 50, 0);
    border: 0;
    border-bottom: 2px solid rgb(100, 50, 0);
    margin-right: 10px;
    width: 80%;
    outline: none;
}

#botao-enviar {
    cursor: pointer;
    width: 80%;
    background-color: rgb(255, 115, 20);
    color: white;
    border: 0;
    border-radius: 10px;
    padding: 15px;
    font-size: 22px;
    text-align: center;
    box-shadow: 4px 4px 6px rgb(100, 50, 0, 0.10);
    transition: all 0.2s;
}

/*FOOTER*/
footer {
    background-color: rgb(100, 50, 0);
    color: white;
    height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer a {
    color: white;
}

.row1-footer {
    height: 80%;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.row2-footer {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 115, 20);
    height: 20%;
    width: 100%;
}

.col-footer {
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.col-footer a,
.col-footer img {
    height: 100%;
    max-height: 200px;
}

/* POLICHAT WIDGETS*/
.plcht_btns_channels header div {
    background-color: rgb(255, 115, 20) !important;
}

.close {
    background-color: rgb(255, 115, 20) !important;
}

.plcht-wdgt-header {
    background: rgb(255, 115, 20) !important;
}

#plcht-container * {
    margin-right: 10% !important;
    margin-bottom: 2% !important;
}

.plcht_btns_channels header {
    background-color: transparent;
}

@media (max-width: 1400px) {

    /*REMOVE COLOR HIGHLIGHT ON CLICK*/
    input,
    textarea,
    button,
    select,
    a {
        -webkit-tap-highlight-color: transparent;
    }

    /*HEADER*/

    header {
        background-color: white;
        height: 80px;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .mobile-menu {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        height: 35%;
        width: 35px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        justify-self: flex-start;
    }

    .rectangle {
        transition: all 0.2s;
        height: 20%;
        width: 100%;
        border-radius: 10px;
        background-color: white;

        border: solid 1px rgb(197, 197, 197);
    }

    header nav {
        display: none;
    }

    .menu-opts-mobile {
        background-color: white;
        position: fixed;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        right: -100vw;
        top: 80px;
        z-index: 100;
        width: 100%;
        height: calc(100vh - 80px);
        transition: all 0.2s;

    }

    .menu-opts-mobile nav {
        width: 80%;
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .menu-opts-mobile ul {
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .menu-opts-mobile a {
        display: block;
    }

    .menu-opts-mobile a:hover {
        text-decoration: none;
    }

    /*TRABALHE CONOSCO*/
    .row1-trabalhe-conosco {
        flex-direction: column;
        width: 100%;
    }

    .col1-trabalhe-conosco {
        width: 100%;
    }

    .col1-trabalhe-conosco img {
        display: none;
    }

    .formCurriculo {
        width: calc(100% - 40px);
        max-height: 70vh;
    }

}

@media (max-width: 1060px) {
    .col3-footer {
        display: none;
    }
}

/* RESPONSIVO */
@media (orientation: portrait) {

    * {
        -webkit-tap-highlight-color: transparent;
    }

    html.touch *:hover {
        all: unset !important;
    }

    body {
        overflow-x: hidden;
    }

    section {
        min-height: calc(100vh - 80px);
        height: auto !important;
        width: 100vw;
    }

    /*POLICHAT*/

    #plcht-container {
        display: none;
    }

    .botao-popup-whats {
        display: none;
    }

    /*BANNERS*/

    .banners {
        min-height: 50vh !important;
    }

    .content-banners {
        height: auto;
    }

    #seta-dir-banners,
    #seta-esq-banners {
        top: 50%;
        width: 8%;
    }

    .container-aprovados {
        width: 80%;
    }

    #banners-1 {
        background-image: url("imgs/banners/mobile/aprovados-6.jpg");
    }

    #banners-2 {
        background-image: url("imgs/banners/mobile/aprovados-7.jpg");
    }

    #banners-3 {
        background-image: url("imgs/banners/mobile/aprovados-8.jpg");
    }

    #banners-4 {
        background-image: url("imgs/banners/mobile/aprovados-9.jpg");
    }

    #banners-5 {
        background-image: url("imgs/banners/mobile/aprovados-10.jpg");
    }

    /*HOME*/

    .home {
        background-size: 100% 50%, 100% 50%, 100% 100%;
        background-position: -10vw 0vh, 50vw 50vh, 0 0;
        padding-top: 80px;
    }

    .row1-home,
    .row2-home {
        min-height: 420px;
        width: 100%;
        flex-direction: column;
        justify-content: space-around;
    }

    .col1-home {
        width: 100%;
    }

    .col2-home {
        width: 100%;
    }

    .col2-home video {
        height: 100%;
    }

    .title-home {
        text-shadow: 0px 0px 1px rgb(100, 50, 0);
    }

    .subtitle-home {
        color: rgb(100, 50, 0);
    }

    .widgets-home {
        height: 20%;
        width: calc(100% - 40px);
        display: flex;
        margin-bottom: 10px;
    }

    .widgets-home:hover {
        scale: 1;
    }

    .widgets-home img {
        width: 50%;
        height: auto;
    }

    .widgets-home p,
    .widgets-home a {
        display: none;
    }

    .header-widgets-home {
        height: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        align-items: center;
    }

    /*CURSOS*/

    .ensino {
        background-size: 100% 50%, 100% 50%, 100% 100%;
        background-position: -50vw 5vh, 40vw 50vh, 0 0;
    }

    .cursos-ensino {
        width: 100%;
        height: auto;
        box-shadow: rgba(100, 50, 0, 0.1) 4px 4px 6px 0px;
        margin-bottom: 10px;
    }

    .cursos-ensino:hover {
        scale: 1;
    }

    .row1-cursos {
        margin-bottom: 10px;
    }

    .lista-cursos:hover {
        scale: 1;
    }

    /*CURSO OVERLAY*/
    .curso-overlay {
        width: calc(80% - 30px);
        overflow-y: scroll;
    }

    .curso-overlay h3 {
        text-align: center;
    }

    .row2-overlay {
        flex-direction: column;
    }

    .col1-overlay,
    .col2-overlay {
        width: 100%;
        align-items: center;
    }

    /*CLUBES*/
    .clubes {
        background-size: 100% 50%, 100% 50%, 100% 100%;
        background-position: -50vw 5vh, 40vw 50vh, 0 0;
    }

    .lista-dias-clubes {
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }

    .lista-dias-clubes li {
        min-width: 100%;
        margin-right: 10px;
    }

    .filtro-clubes {
        padding: 5px;
        margin-bottom: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .filtro-button {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .mobile-menu-filtros {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        width: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        justify-self: flex-start;
    }

    .rectangle-filtros {
        transition: all 0.2s;
        height: 15%;
        width: 100%;
        border-radius: 10px;
        background-color: rgb(100, 50, 0);
    }

    .filtro-clubes select {
        display: none;
        position: relative;
        top: -120px;
        margin-bottom: 10px;
    }

    /*INTEGRAL*/
    .integral {
        background-image: url(imgs/gradients-blobs/gb-6.png), linear-gradient(to right, #F6F6F6, #F6F6F6);
        background-size: 150vw 80vh, 100% 100%;
        background-position: -20vw 0vh, 0 0;
        background-repeat: no-repeat;
        padding-top: 80px;
        justify-content: space-between;
    }

    .content-integral {
        flex-direction: column;
    }

    .col1-integral {
        min-height: 40vh;
        height: 50%;
        width: 100%;
        padding: 0;
    }

    .col1-integral h3 {
        margin-bottom: 0;
    }

    .col2-integral {
        display: flex;
        align-items: center;
        min-height: 50vh;
        height: 50%;
        width: 100%;
        justify-content: flex-end;
    }

    /* OLIMPIADAS */
    .olimpiadas {
        height: calc(100vh) !important;
    }

    .content-olimpiadas {
        flex-direction: column;
        height: 100%;
        justify-content: space-around;
    }

    .col1-olimpiadas {
        width: 100%;
        height: 50%;
    }

    .col1-olimpiadas img{
        height: auto;
        width: 30%;
    }

    .col2-olimpiadas {
        flex-direction: column;
        width: 100%;
        height: 40%;
    }

    .posts-olimpiadas {
        width: calc(100% - 20px);
        height: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .posts-olimpiadas a{
        margin: 10px;
        width: 80%;
    }

    .posts-olimpiadas a:hover{
        width: 100%;
    }

    /* ONU */
    .onu {
        height: calc(100vh - 80px) !important;
    }

    .content-onu {
        flex-direction: column;
        height: 100%;
        justify-content: space-around;
    }

    .col1-onu {
        width: 100%;
        height: 50%;
    }

    .col1-onu img{
        height: auto;
        width: 30%;
    }

    .col2-onu {
        flex-direction: column;
        width: 100%;
        height: 40%;
    }

    .posts-onu {
        width: calc(100% - 20px);
        height: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .posts-onu a{
        margin: 10px;
        width: 80%;
    }

    .posts-onu a:hover{
        width: 100%;
    }

    .col1-onu img {
        height: auto !important;
        width: 100%;
    }

    /*INFRAESTRUTURA*/
    .row1-infraestrutura,
    .row2-infraestrutura {
        flex-direction: column;
    }

    .col1-infraestrutura,
    .col2-infraestrutura {
        width: 100%;
        margin-bottom: 10px;
    }

    /*FOTOS*/
    .content-fotos {
        min-height: calc(100vh - 80px);
    }

    .row1-fotos {
        flex-direction: column;
        justify-content: space-around;
    }

    .col1-fotos,
    .col2-fotos {
        width: 100%;
    }

    .col1-fotos img {
        display: none;
    }

    /*UNIFORMES*/
    .uniformes {
        background-size: 80vw 80%, 100% 100%;
        background-position: center, 0 0;
        background-repeat: no-repeat;
        min-height: auto !important;
    }

    .content-uniformes {
        min-height: auto !important;
    }

    .row1-uniformes {
        flex-direction: column;
        width: 100%;
    }

    .col1-uniformes {
        width: 100%;
    }

    /*FOOTER*/

    footer {
        min-height: 500px;
    }

    .row1-footer {
        justify-content: center;
    }

    .col-footer {
        height: 50%;
    }

    .col4-footer {
        display: none;
    }

    .col2-footer h3 {
        display: none;
    }

    .col2-footer {
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: space-between;
    }

}