@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-VariableFont.ttf");
}
body{
    margin: 0px;
    width: 100%;
}
body::-webkit-scrollbar{
    width: 8px;
}
body::-webkit-scrollbar-track{
    background-color: transparent;
}
body::-webkit-scrollbar-thumb{
    background-color: rgb(82, 82, 82);
    border-radius: 8px;
}
.secao{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Inter", sans-serif;
    overflow: hidden;
}
.header{
    width: 100%;
    height: 72px;
    background-color: black;
    display: flex;
    align-items: center;
}
.logo{
    margin-left: 180px;
}
.logo img{
    width: 166px;
    height: 42px;
    object-fit: contain;
}
.btnH{
    margin-left: auto;
    margin-right: 180px;
}
.btnH a{
    text-decoration: none;
    color: #070707;
}
.btnH button{
    width: 166px;
    height: 32px;
    background-color: #00E6D3;
    color: #070707;
    border: 0px;
    border-radius: 24px;
    font-size: 14px;
    cursor: pointer;
}

.infoTop{
    margin-top: 82px;
    width: 348px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #00E6D3;
    border-radius: 8px;
    color: #1D1C1C;
    font-size: 14px;
}
.titleTop{
    margin-top: 24px;
    width: 620px;
    font-size: 46px;
    color: #142032;
    text-align: center;
}
.btnTop{
    margin-top: 64px;
}
.btnTop a{
    text-decoration: none;
    color: #141313;
}
.btnTop button{
    width: 252px;
    height: 48px;
    background-color: #00E6D3;
    border: 0px;
    border-radius: 24px;
    color: #141313;
    font-size: 17px;
}
.imgTop{
    margin-top: 24px;
}
.imgTop img{
    width: 1520px;
    height: 480px;
    object-fit: contain;
}
.textTop{
    margin-top: 8px;
    margin-bottom: 68px;
    color: #303030;
    font-size: 21px;
    text-align: center;
}
.textTop strong{
    display: block;
}

.bgBlack{
    background-color: black;
}
.contentSwipe{
    margin-top: 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rowSwipe{
    width: 100%;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.colSwipe{
    width: 1120px;
    height: 560px;
    position: absolute;
    left: calc(50% - 560px);
    transition: all 0.4s;
}
.colSwipe img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pagesSwipe{
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pageSwipe{
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #C4CCD9;
    margin-left: 4px;
    margin-right: 4px;
    cursor: pointer;
}
.swipeSelected{
    background-color: #060F23;
}

.contentInfo{
    margin-top: 160px;
    width: 70%;
}
.markerInfo{
    width: 72px;
    height: 26px;
    border: 2px solid #00E6D3;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}
.titleInfo{
    margin-top: 18px;
    font-size: 34px;
    color: #00E6D3;
    width: 640px;
}
.textInfo{
    margin-top: 18px;
    width: 640px;
    font-size: 16px;
    color: white;
    line-height: 24px;
}
.rowCheckInfo{
    margin-top: 34px;
    margin-bottom: 90px;
    width: 100%;
    display: flex;
}
.colCheckInfo{
    margin-left: auto;
    margin-right: auto;
}
.imgCheckInfo img{
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.textCheckInfo{
    margin-top: 16px;
    font-size: 19px;
    color: white;
    width: 200px;
}
.rowCheckInfo .colCheckInfo:first-child{
    margin-left: 0px;
}
.rowCheckInfo .colCheckInfo:last-child{
    margin-right: 0px;
}
.rowTopicsInfo{
    margin-top: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.colTopicInfo{
    width: 100%;
    background-color: #F6F7F9;
    height: 312px;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 24px;
    overflow: hidden;
}
.rowTopicsInfo .colTopicInfo:first-child{
    margin-left: 0px;
}
.rowTopicsInfo .colTopicInfo:last-child{
    margin-right: 0px;
}
.imgTopicInfo{
    width: 100%;
}
.imgTopicInfo img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.titleTopicInfo{
    margin-top: 18px;
    margin-left: 18px;
    color: #142032;
    font-weight: 700;
    font-size: 15px;
}
.textTopicInfo{
    margin-top: 7px;
    margin-left: 18px;
    font-size: 13px;
    width: 80%;
    color: #040404;
}

.logoO{
    margin-top: 120px;
}
.logoO img{
    width: 146px;
    height: 42px;
    object-fit: contain;
}
.textO{
    margin-top: 54px;
    width: 910px;
    font-size: 27px;
    color: white;
    text-align: center;
}
.nameO{
    margin-top: 68px;
    color: white;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nameO span{
    display: block;
    color: #00E6D3;
}
.contentInfoB{
    margin-top: 120px;
    width: 70%;
    border-radius: 64px;
    box-sizing: border-box;
    padding: 48px 64px 120px 64px;
    background-image: linear-gradient(to bottom, #00E6D3, #014338);
}
.infoB{
    color: black;
    border-color: black;
}
.markerInfoB{
    width: 98px;
    height: 26px;
    border: 2px solid black;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 12px;
}
.contentTopicsInfo{
    display: flex;
}
.containerTopicsInfo{
    margin-right: 12px;
    margin-left: 12px;
}
.containerTopicsInfo .colTopicInfo{
    background-color: rgba(255, 255, 255, 0.08);
}
.longTopic{
    height: 100%;
}
.longTopic .imgTopicInfo img{
    height: 530px;
}
.containerTopicsInfo .colTopicInfo .titleTopicInfo{
    color: white;
}
.containerTopicsInfo .colTopicInfo .textTopicInfo{
    color: #E9DBDB;
}
.containerTopicsInfo .rowTopicsInfo{
    margin-top: 0px;
    margin-bottom: 12px;
}
.colTopicM{
    margin: 0px;
}

.contentPlans{
    margin-top: 142px;
    width: 80%;
}
.titlePlans{
    font-size: 35px;
    color: #00E6D3;
    width: 540px;
    margin-left: 24px;
}
.textPlans{
    margin-top: 18px;
    margin-left: 24px;
    width: 620px;
    font-size: 25px;
    color: white;
}
.rowPlans{
    margin-top: 68px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.colPlan{
    width: 288px;
    height: 568px;
    border: 3px solid #00E6D3;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 14px;
    margin-right: 14px;
    background-color: #1B1B1B;
}
.rowPlans .colPlan:first-child{
    margin-left: 0px;
}
.rowPlans .colPlan:last-child{
    margin-right: 0px;
}
.titlePlan{
    margin-top: 32px;
    font-size: 45px;
    font-weight: 700;
    color: white;
}
.descPlan{
    margin-top: 8px;
    width: 140px;
    font-size: 10px;
    color: #6F7579;
    text-align: center;
}
.descPlan span{
    color: #00E6D3;
}
.pricePlan{
    margin-top: 16px;
    font-size: 25px;
    color: white;
}
.pricePlan strong{
    font-size: 45px;
}
.infosPlan{
    margin-top: 12px;
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 290px;
}
.infoPlan{
    width: 100%;
    display: flex;
    margin-bottom: 16px;
}
.infoPlan img{
    object-fit: contain;
}
.infoPlan span{
    display: block;
    width: 180px;
    text-align: center;
    margin-left: 20px;
    margin-right: auto;
    color: #C1CDD1;
    font-size: 17px;
}
.btnPlan a{
    text-decoration: none;
}
.btnPlan button{
    width: 200px;
    height: 42px;
    background-color: transparent;
    border: 1px solid #00E6D3;
    border-radius: 15px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s;
}
.btnPlan button:hover{
    background-color: #00E6D3;
    color: black;
}

.containerBanner{
    margin-top: 178px;
    width: 1246px;
    height: 182px;
    background-color: #D1E4FA;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contentBanner{
    width: 1214px;
    height: 150px;
    background-color: white;
    border-radius: 24px;
    display: flex;
    align-items: center;
}
.logoBanner{
    margin-left: 78px;
}
.logoBanner img{
    width: 146px;
    height: 36px;
    object-fit: contain;
}
.textsBanner{
    margin-left: 48px;
    padding-left: 18px;
    border-left: 1px solid #C4CCD9;
}
.titleBanner{
    font-size: 27px;
    color: #00E6D3;
}
.textBanner{
    margin-top: 18px;
    width: 520px;
    font-size: 15px;
    color: #3A4054;
}
.btnBanner{
    margin-left: 98px;
}
.btnBanner a{
    text-decoration: none;
    color: #3A4054;
}
.btnBanner button{
    background-color: transparent;
    border: 0px;
    font-size: 17px;
    color: #3A4054;
    cursor: pointer;
}
.btnBanner button img{
    width: 12px;
    height: 12px;
    object-fit: contain;
    margin-left: 12px;
}

.contentInfoModels{
    margin-top: 148px;
    width: 70%;
    display: flex;
    align-items: center;
}
.titleInfoModels{
    font-size: 35px;
    color: #00E6D3;
    width: 520px;
}
.btnsInfoModels{
    margin-left: auto;
    display: flex;
    align-items: center;
}
.btnInfoModel{
    margin-left: 18px;
    margin-right: 18px;
}
.btnInfoModel img{
    width: 12px;
    height: 12px;
    object-fit: contain;
    cursor: pointer;
}
.leftBtn img{
    transform: rotate(180deg);
}
.rowModels{
    margin-top: 58px;
    margin-bottom: 58px;
    width: 100%;
    height: 502px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.colModel{
    width: 1120px;
    height: 502px;
    position: absolute;
    left: calc(50% - 560px);
    transition: all 0.4s;
}
.colModel img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contentContact{
    margin-top: 120px;
    width: 100%;
    height: 428px;
    background-color: #00E6D3;
    border-radius: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.textContact{
    width: 860px;
    font-size: 57px;
    color: white;
    text-align: center;
}
.btnContact{
    margin-top: 28px;
}
.btnContact a{
    text-decoration: none;
    color: white;
}
.btnContact button{
    width: 252px;
    height: 48px;
    background-color: black;
    border-radius: 24px;
    border: 0px;
    font-size: 17px;
    color: white;
    cursor: pointer;
}

.bgGray{
    background-color: #171717;
}
.contentFooter{
    margin-top: 98px;
    width: 70%;
}
.logoFooter img{
    width: 140px;
    height: 36px;
    object-fit: contain;
}
.botFooter{
    margin-top: 120px;
    width: 100%;
    height: 120px;
    border-top: 1px solid #3A4054;
    display: flex;
    align-items: center;
}
.textBotFooter{
    color: white;
    font-size: 17px;
}
.btnsFooter{
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btnFooter{
    margin-left: 8px;
    margin-right: 8px;
}
.btnFooter img{
    width: 40px;
    height: 40px;
    object-fit: contain;
}