* {
    font-family: 'Montserrat';
    margin: 0;
    padding: 0;
}

.section1 {
    background: url('/img/bannerC.png') no-repeat center center;
    background-size: cover;
    width: 100%;
    text-align: center;
    padding-top: 10em;
    height: 380px;
}

.section1 div h1 {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
    color: #FDFBD6;
    font-size: 44px;
    line-height: 1.3;
    font-weight: 700;
    margin-top: 50px;
    text-align: center;
    text-shadow: 1px 2px 2px black;
}

.section2 h2 {
    text-align: center;
    font-size: 34px;
    margin-top: 60px;
    margin-top: 30px;
}

section h2,
section h3 {
    color: #1535B5;
}

/* cards section2 */
.container {
    width: 90%;
    position: relative;
    right: 5%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 30px 10%;
}

.container .card p {
    text-align: justify;
    font-size: 17px;
}

.quadrado {
    width: 320px;
    height: 180px;
    transition: 0.5s;
    margin: 0 45px;
}

.q1 {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-radius: 6PX;
    position: relative;
    height: 230px;
    background: #34476d;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(90px);
    transition: all 0.5s;
}

.card:hover .q1 {
    background: #1535B5;
    transform: translateY(0);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.q2 {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.511);
    transform: translateY(-90px);
}

.card:hover .q2 {
    transform: translateY(0);
}

.fa-solid {
    font-size: 60px;
    text-align: center;
}

.card {
    text-align: center;
}

span.material-symbols-outlined {
    font-size: 65px;
}

.content {
    color: white;
}

.content h4 {
    margin-top: 20px;
    font-size: 24px;
}

/* fim cards */
#quebraCabeca {
    margin: 40px auto;
    width: 100%;
}

.section3 {
    overflow: hidden;
}

.graus {
    margin: 50px;
}

.section3 .graus h2 {
    color: #1535B5;
    font-size: 40px;
    text-align: left;
    margin-bottom: 20px;
}

.section3 .graus img {
    width: 630px;
    height: 422px;
    margin-top: 0px;
    float: right;
    border-radius: 6px;
}

.section3 .graus #definicao-graus {
    margin: 35px 0;
}

.section3 .graus #definicao-graus p {
    margin: 25px 0;
}

.section3 .graus p {
    font-size: 19px;
    width: 46%;
    text-align: justify;
        margin-bottom: 38px;
    margin-top: 15px;
}

.section3 .graus h3 {
    font-size: 28px;
    margin-bottom: 20px;
}

.section3 .grausCom{
    margin: 0 10px;
}

.section3 .niveis {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section3 #celular{
    display: none;
}

.n3{
    margin-top: 15px;
    margin-right: 370px;
}

.section4 #flechas {
    padding: 8rem;
    display: flex;
    justify-content: center;

}

.olcards,
.olcards * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.olcards {
    list-style: none;
    counter-reset: cardCount;
    display: flex;
    flex-direction: column;
    --cardsGap: 1rem;
    gap: var(--cardsGap);
    width: 100%;
    max-width: 877px;
}

.olcards li {
    counter-increment: cardCount;
    display: flex;
    color: white;
    --labelOffset: 1rem;
    --arrowClipSize: 5rem;
    margin-top: var(--labelOffset);
}

.olcards li::before {
    content: counter(cardCount, decimal-leading-zero);
    background: #f6f6f6;
    color: #1535b5af;
    font-size: 3em;
    font-weight: 800;
    transform: translateY(calc(-1 * var(--labelOffset)));
    margin-right: calc(-1 * var(--labelOffset));
    z-index: 1;
    text-align: left;
    padding: 0.4em;
}

.olcards li .content {
    background-color: #D9D9D9;
    --inlinePadding: 1em;
    --boxPadding: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize)) var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
    gap: 0.5rem;
    text-align: left;
    clip-path: polygon(0 0,
            calc(100% - var(--arrowClipSize)) 0,
            100% 50%,
            calc(100% - var(--arrowClipSize)) 100%,
            calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
            0 calc(100% + var(--cardsGap)));
    position: relative;
    width: 100%;
}

.olcards li .content::before {
    content: "";
    position: absolute;
    width: var(--labelOffset);
    height: var(--labelOffset);
    background: #1535b5af;
    left: 0;
    bottom: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    filter: brightness(0.75);
}

.olcards li .content::after {
    content: "";
    position: absolute;
    height: var(--cardsGap);
    width: var(--cardsGap);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
    left: 0;
    top: 100%;
}

.olcards li .content .title {
    grid-area: title;
    font-size: 1.6em;
    text-align: left;
    font-weight: 600;
    align-self: flex-start;
    color: #1535b5af;
}

.olcards li .content .text {
    text-align: left;
    align-self: flex-start;
    grid-area: text;
    color: black;
    font-size: 1.2em;
    line-height: 1.1em;
}


.section4 h2 {
    font-size: 34px;
    text-align: center;
}

.section4 h4 {
    margin-top: 50px;
    color: #333;
    font-size: 20px;
    text-align: center;
}

.section4 img {
    width: 860px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.section4 #barra-video {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.section4 #video-passos{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 35vh;
    border-radius: 6px;
}

.section4 #barra4 {
    width: 5px;
    height: 420px;
    background-color: #0033cc;
    color: #0033cc;
    border-radius: 4px;
    margin-top: 26px;
    margin-left: 20vh;
    margin-right: 0;
}

.section5 #info5 {
    display: flex;
}

.section5 #alone {
    background-color: #D9D9D9;
    width: 50%;
    box-sizing: border-box;
    height: auto;
}

.section5 #imgAlone {
    width: 50%;
    box-sizing: border-box;
}

.section5 #imgAlone img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.section5 #alone h2 {
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.274);
    font-size: 38px;
    margin: 40px 0 15px 85px;
}

.section5 #barra2 {
    width: 550px;
    height: 6px;
    background-color: #0033cc;
    border-radius: 0 4px 4px 0;
    padding: 0;
    margin-bottom: 30px;
}

.section5 #alone a {
    background-color: #0033cc;
    text-decoration: none;
    color: white;
    font-weight: 700;
    padding: 13px;
    font-size: 18px;
    border-radius: 7px;
    margin: 60px 0 15px 85px;
}

.section5 #alone p {
    margin: 0 10px 25px 85px;
    font-size: 19.5px;
    text-align: justify;
    width: 76%;
}

.section5 .juntos h2 {
    text-align: center;
    font-size: 34px;
    margin-top: 120px;
}

.section5 .juntos img {
    width: 100%;
    height: auto;
    border-radius: 7px;
    display: block;
}

.section5 #imgs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.section5 .card {
    position: relative;
    text-align: center;
    margin-bottom: 50px;
}

.section5 .card a {
    position: absolute;
    bottom: 1px;
    width: 356px;
    height: 90px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1535b5be;
    color: white;
    padding: 5px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    font-size: 26px;
    color: #fff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  background-color: #1535B5;
  border-radius: 100px;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn::after {
  content: "↑";
  font-size: 25px;
  font-weight: bold;
  color: aliceblue;
}

.btn:hover {
  background-color: #142e96;
}

.btn.show {
  opacity: 1;
}

@media (max-width: 768px) {
    .section1 {
        height: 250px;
        padding-top: 4em;
    }

    .section1 div h1 {
        font-size: 24px;
    }

    .section2 h2 {
        font-size: 22px;
        margin-bottom: 0;
    }

    .container{
        flex-wrap: wrap;
    }

    .quadrado {
        flex-direction: column;
        width: 70%;
        margin: 0 50px;
    }

    .q1 {
        height: 180px;
    }


    .q2 {
        padding: 10px;
    }

    span.material-symbols-outlined,
    .fa-solid {
        font-size: 40px;
    }

    .content h4 {
        font-size: 18px;
    }

    .container .card p {
        font-size: 14px;
    }

    .section3 .graus img,
    .section4 #barra4,
    .section5 #imgAlone, 
    .section3 #computador{
        display: none;
    }

    .section3 #celular{
        display: block;
    }

    .section3 #celular #n3{
        position: absolute;
        top: 2390px;
    }

    .section3 .graus p {
        font-size: 16px;
        width: 100%;
    }

    .section3 .grausCom h3{
    text-align: center;
}

    .section4 #video-passos{
        width: 300px;
        height: 165px;
        margin-left: auto;
        margin-right: auto;
    }


    .section4 #flechas {
        padding: 1rem;
        width: 92.9%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: auto;
        margin-left: auto;
    }

    .olcards {
        max-width: 100%;
        padding: 0 1rem;
        --cardsGap: 0;
    }

    .olcards li::before {
        font-size: 6em;
        right: 0;
        margin-right: 0;
        position: static;
        transform: none;
        padding: 0.7em 0.4em;
        align-self: flex-start;
    }

    .olcards li .content {
        padding: 1rem;
        width: 90%;
        right: 0;
        clip-path: none;
    }

    .olcards li .content::before,
    .olcards li .content::after {
        display: none;
    }

    .olcards li .content .title {
        font-size: 80px;
    }

    .olcards li .content .text {
        font-size: 0.95em;
        line-height: 1.4em;
    }

    #info5 {
        padding: 0;
    }


    .section5 #alone {
        background-color: #1535B5;
        width: 100%;
        height: 300px;
        margin-bottom: 50px;
        padding: 0;
    }
    
    
    .section5 #alone h2 {
        color: #f6f6f6;
        font-size: 26px;
        margin: 30px 20px;
        text-align: center;
    }
    
    .section5 #barra2 {
        display: none;
    }
    
    .section5 #alone a {
        background-color: #ffffff;
        color: #34476d;
        margin-top: 30px;
        padding: 10px;
        position: relative;
        top: 10%;
        margin: 0 27px;

    }
    
    .section5 #alone p {
        color: #f6f6f6;
        margin: 10px 25px;
        font-size: 16px;
        width: 90%;
    }

    .section5 .card a{
        width: 96%;
    }
    
    .juntos #imgs {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 90%;
    }
}

@media (max-width: 480px) {
    .section1 div h1 {
        font-size: 20px;
    }
    
    .section2 h2 {
        font-size: 18px;
    }
    
    .content h4 {
        font-size: 16px;
    }

    .container .card p {
        font-size: 14px;
    }

    #quebraCabeca {
        display: none;
    }

    .section3 .graus img {
        display: none;
    }

    .section3 .graus h2 {
        font-size: 26px;
        margin: 5px 10px;
    }

    .section3 .graus h3 {
        font-size: 20px;
        margin: 5px 10px;
    }

    .section3 .graus p {
        font-size: 15px;
    }

    .section3 .graus .niveis {
        display: flex;
        flex-direction: column;
    }

    .section3 .niveis #n3 {
        margin-top: 10px;
        margin-left: 10px;
    }

    .section4 h2 , .section5 .juntos h2{
        font-size: 24px;
        margin: 0 10px 20px 10px;
    }

    .section4 h4 {
        margin: 10px;
        font-size: 16px;
    }

    .olcards li::before {
        font-size: 1.2em;
    }

    .olcards li .content .title {
        font-size: 0.9em;
    }
}