﻿
html { font-size: 62.5%; box-sizing: border-box; }

::selection { background-color: #0658a7; color: #fff; }

*, *:before, *:after { box-sizing: inherit; line-height: 1; }

body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; }
body { font-family :'EKOGrotesk'; }


.center-container { max-width: 1720px; width: 100%; margin: 0 auto; zoom: 1;  }
.full-center-container  {max-width: 1760px; width: 100%; margin: 0 auto; zoom: 1; }
.inner-area { margin: 0 10px; }
.inner-area-two { margin:0;}

.dynamic-content { font-size: 30px; line-height: 35px; color:#162769;}
.dynamic-content p{ font-size: 30px; line-height: 35px;}
.dynamic-content a{ color: #162769; text-decoration: underline; transition: all 0.2s; }
.dynamic-content a:hover{ text-decoration: none; }
.dynamic-content strong{ font-weight: 600; }
.dynamic-content ul { list-style: none;}
.dynamic-content.list { padding-left: 75px; max-width: 1400px;} 
.dynamic-content ul li{ position: relative; padding: 20px 0 20px 40px; font-size: 30px; line-height: 35px;}
.dynamic-content ul li:before { display: block; content:''; position: absolute; left:0; top: 0; width: 25px; margin-top: 22px; height: 25px; border-radius: 50%; background:#162769; }
.dynamic-content ul li:after { display: block; content:''; position: absolute; left:0; top: 0; width: 15px; height: 15px; margin-top: 27px; margin-left: 5px; border-radius: 50%; background:#fff; }


.header { padding: 70px 100px 30px 20px; background-color: #EFE1D6;  text-align: right;  box-sizing: border-box;}
.header .logo img { max-width: 100%; }

.region-area-one { background-color:#EFE1D6;  padding: 40px 0 30px;  }
.region-area-one  .title { font-size: 115px; line-height: 125px; font-weight: 400;  color:#162769;}
.region-area-one  .description { position:relative; padding-top: 5px; max-width: 1000px;  font-size: 35px; line-height: 52px; font-weight: 600;  color:#162769;}
.region-area-one .description:before { content:'';  position: absolute; left:0; bottom:-6px; width: 650px; height: 2px; background-color:#162769;  }


.region-area-two{ background-color:#EFE1D6; padding-top: 80px; padding-bottom: 50px; }
.region-area-two img{ max-width: 100%; }
.region-area-two .image-container { position: relative; }
.region-area-two .moto-logo{ position: absolute; top: -125px; right: 190px;  }

.region-area-three { background-color:#EFE1D6; padding: 10px 0 60px; }

.region-area-four { padding: 80px 0; }
.main-content .descriptive-title {  padding: 15px 35px; color: #fff;  background-color:#162769; border-radius: 20px; box-sizing: border-box; }
.main-content .descriptive-title .title { font-size: 45px; font-weight: 600; line-height: 55px; }
.main-content .dynamic-content{ margin: 50px 0; }

.region-area-five{ padding: 100px 0 80px; background: #162769; }

/*blue container*/
.second-content .descriptive-title {   padding: 15px 35px; color: #162769;  background-color:#EFE1D6; border-radius: 20px; box-sizing: border-box; }
.second-content .descriptive-title .title { font-size: 43px; font-weight: 600; line-height: 55px;}
.second-content .content-container { padding: 30px 0;}
.second-content .content-container .title { padding-top: 50px; display: inline-block; position: relative; padding-left: 80px; font-size: 35px; line-height: 40px; font-weight: 700; color: #fff;  }
.second-content .content-container .title:before { content:'';  content:'';  position: absolute; left:0; bottom:-6px; width: 100%; height: 2px; background-color:#EFE1D6; }
.second-content .content-container .description{ display: inline-block; padding: 20px 0; color: #fff;  }
.second-content .content-container .description a{ color: #fff; padding-top: 0px; display: inline-block; }
.second-content .content-container .description p { padding: 5px 0;}
.image-container img{ max-width: 100%;}
.second-content .image-container { padding: 30px 0; }
.table-title { padding: 90px 0 45px; font-size: 35px; font-weight: 700; color: #fff;}
.table-container { font-size: 0; display: flex; align-items: flex-start; }
.table-container .date-container .row:nth-child(even), .table-container .info-container .row:nth-child(even)  { background-color:#FAF1EA; }
.table-container .date-container .row:nth-child(odd), .table-container .info-container .row:nth-child(odd) { background-color:#EFE1D6; }

.table-container .date-container .row:last-child{ border-radius: 0 0 0 20px;}
.table-container .info-container .column-three .row:last-child{ border-radius: 0 0 20px 0;}

.table-container .date-container { display: inline-block; vertical-align: top; border-right: 1px solid #D6C4B5; width: 20%;  }
.table-container .date-container .title { border-radius: 20px 0 0 0px;}
.table-container .info-container { display: flex; vertical-align: top;  width: 100%; }
.table-container .info-container .column { display: inline-block;   border-right: 1px solid #D6C4B5;}
.table-container .info-container .column-one, .table-container .info-container .column-two{ width: 20%;}
.table-container .info-container .column-three { width: 60%;}

.table-container .row { display: flex; align-items: center; justify-content:flex-start;   font-size:22px; color: #152769; line-height: 25px; padding: 20px 30px 20px 65px; box-sizing: border-box; height: 60px;}
.table-container .title { padding: 45px 30px 25px 65px ; font-size: 24px; font-weight:700; line-height:28px; color:#152769; }
.table-container .info-container .column-three { border-right: none;}
.table-container .info-container .column-three .title { border-radius: 0 20px 0 0;}

.faq-container { padding-top: 80px; }
.faq-container .faq-title{ display: flex; align-items: center; gap: 20px;  font-size: 35px; font-weight: 700; line-height: 40px; color: #fff; }
.faq-container .faq-title img{ max-width: 100%;}
.faq-container .dynamic-content p{ color: #fff; }
.faq-container .faq-list{ display: block; list-style-type: none; padding-top: 50px; }
.faq-item .question { display: inline-block; position: relative; padding: 45px 0 0px 80px; font-size: 35px; line-height: 40px; font-weight: 700; color: #EFE1D6; }
.faq-item .question:before {content:'';  content:'';  position: absolute; left:0; bottom:-6px; width: 100%; height: 2px; background-color:#EFE1D6; }
.faq-item .answer { display: none; padding: 30px 0 50px;}
.faq-item { cursor: pointer;}
.faq-item.expanded  .answer{ display: block;}

@media screen and (max-width: 1599px) {
    .header { padding: 60px 90px 30px 20px;}
    .region-area-one  .title { font-size: 100px; line-height: 110px; }
    .region-area-two .moto-logo { right: 120px; top: -105px; max-width: 250px; }

}
@media screen and (max-width: 1499px) {
    .table-container .date-container {  border-right: none; width: 250px; z-index: 100; box-shadow:13px 6px 8px 0 rgba(0,0,0,.1);  -webkit-box-shadow: 13px 6px 8px 0 rgba(0,0,0,.1);}
    .table-container .info-container {  overflow-x: auto; white-space: nowrap;  width: calc(100% - 250px); padding-bottom: 20px; }
    .table-container .info-container .column-one, .table-container .info-container .column-two{ width: auto;}
    .table-container .info-container .column-three { width: auto;}
    .table-container { margin: 0 -20px;}
    .table-container .date-container .row:last-child{ border-radius: 0 0 0 0;}
    .table-container .info-container .column-three .row:last-child{ border-radius: 0 0 0 0;}
    .table-container .info-container .column-three .title { border-radius: 0 0 0 0;}
    .table-container .date-container .title { border-radius: 0 0 0 0px;}
}

@media screen and (max-width: 1199px) {
    .inner-area{ margin: 0 20px; }
    .dynamic-content { font-size: 26px; line-height: 35px; }
    .dynamic-content p{ font-size: 26px; line-height: 35px;}
    .dynamic-content ul li{ font-size: 26px; line-height: 35px; }
    .dynamic-content.list{ padding-left: 0; }
    .region-area-one  .title { font-size: 85px; line-height:90px;}
    .region-area-one  .description { font-size: 28px; }
    .region-area-two .moto-logo { right: 90px; top: -70px; max-width: 180px; }

    .region-area-four { padding: 60px 0; }
    .main-content .descriptive-title{  max-width: 100%;}
    .main-content .descriptive-title .title { font-size: 38px; line-height: 48px;}

    .second-content .content-container .title{ font-size: 32px; line-height: 40px;}
     .second-content .descriptive-title .title { font-size: 38px; line-height: 48px;}
    .table-title { padding: 80px 0 40px; }
    .faq-container .faq-title{ font-size: 32px; line-height: 40px; }
    .faq-item .question{ font-size: 32px; line-height: 40px; }
}

@media screen and (max-width:959px) {
    .dynamic-content { font-size: 22px; line-height: 30px; }
    .dynamic-content p{ font-size: 22px; line-height: 30px;}
     .dynamic-content ul li{ font-size: 22px; line-height: 30px; }
    .header { padding: 40px 20px 30px 20px; text-align: center;}
    .header .logo{ max-width: 250px; margin: 0 auto; }
    .region-area-one { padding-top: 10px; }
    .region-area-one  .title { font-size: 70px; line-height: 80px; }
    .region-area-one  .description { font-size: 22px; line-height: 30px; }
    .region-area-one  .description:before{ width: 100%;  bottom: -13px;}
    .region-area-two .moto-logo { right: 70px; top: -70px; max-width: 160px; }

    .region-area-four { padding: 40px 0; }
    .main-content .descriptive-title .title{ font-size: 28px; line-height: 35px;}
    .main-content .dynamic-content{ margin: 35px 0; }

    .region-area-five { padding: 50px 0; }
    .second-content .content-container .title{ font-size: 28px; line-height: 40px; padding-left: 50px;}
    .second-content .content-container { padding: 0 0 30px;}
    .second-content .descriptive-title .title { font-size:32px; line-height: 37px;}
    .table-container .info-container { width: calc(100% - 150px);}
    .table-container .date-container { width: 150px;}
    .table-container .row { font-size: 17px; height: 70px; padding: 20px;}
    .table-container .title { font-size: 17px;}
    .table-container { margin: 0 -20px;}
    .table-container .date-container .row:last-child{ border-radius: 0 0 0 0;}
    .table-container .info-container .column-three .row:last-child{ border-radius: 0 0 0 0;}
    .table-container .info-container .column-three .title { border-radius: 0 0 0 0;}
    .table-container .date-container .title { border-radius: 0 0 0 0px;}
    .table-title { padding: 75px 0 30px; font-size: 28px; line-height: 40px; }
    .faq-container .faq-title{ font-size: 28px; line-height: 40px; }
     .faq-item .question{ font-size: 32px; line-height: 40px; padding: 20px 0 0 50px;}
    .faq-container{ padding-top: 70px; }
}

@media screen and (max-width:767px) {
    .inner-area-two{ margin: 0 20px; }
    .region-area-two .moto-logo { right: auto; left: 0px; top: -70px; max-width: 130px; }
    
}

@media screen and (max-width:479px) {
    .main-content .descriptive-title .title{ max-width: 320px; margin: 0 auto;}
    .main-content .descriptive-title { padding: 20px 40px;}
}