/* :root{
    --light-blue:#00BAC7;
} */

body{
    padding: 0px 9% 0px 9%;
    font-family: DM Sans;
    overflow-x: hidden;
}
h1{
    line-height: 62.5px;
    font-size: 3.5vw;
    font-weight: 500;
}
h2{
    font-size: 32px;
    font-weight: 500;
}
li{
    font-size: 16px;
}
p{
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
}
button{
    font-family: inherit;
    font-weight: 700;
    padding: 25px 45px;
    border-radius: 100px;
    cursor: pointer;
}
.background{
    background: linear-gradient(180deg, #2F364B 0%, #262B3D 85.25%);;
    width: 100vw;
    height: 200vh;
    position: absolute;
    border-bottom-right-radius:40px ;
    z-index: -1;
    top: -50vh;
    right: 0;
    transform: skewY(-10deg);
}
div .circle-bg{
    width: 35vw;
    height: 35vw;
    background: linear-gradient(47.74deg, rgba(255, 255, 255, 0.02) 18.93%, rgba(255, 255, 255, 0) 68.74%);
    border-radius: 50%;
    position: absolute;
    top: -80;
    right: -140;
    z-index: -1;
}
div .box1,.box2{
    width: 20vw;
    height: 40vw;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    position: absolute;
    transform: skewY(5deg);
}
div .box1{
    left:-50;
    top: 265;
}
div .box2{
    top:163;
    left: 32;
}


h4.line-{
    display:flex;
    color: #00BAC7;
    flex-direction: row;
    width: fit-content;
}
h4.line-:before {
    content: "";
    width: 20px;
    border-bottom: 2px solid #00BAC7;
    margin: auto;
}
h4.line-.white{
    color: white;
}
h4.line-.white:before{
    border-bottom: 2px solid white;
}

h4.line-.grey{
    color: rgba(255, 255, 255, 0.4);
    margin: auto;
}
h4.line-.grey:before{
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}


/* Start */
.logo{
    display: flex;
    align-items: center;
}
.logo h3:first-child{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: mediumaquamarine;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    
}
.logo *{
    margin: 10px;
}

.navbar{
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin-top: 4vw;
    color: white;
    position: sticky;
    width: 100%;
    top: 0;
}
.navbar .nav ul li{
    display: inline;
    list-style: none;
    margin: 20px;
    cursor: pointer;
}
.navbar .logo{
    text-align: center;
}
.nav{
    width: 50%;
}
.dark-bg{
    background: black;
}

.navbar.scrolled{
    color: rgba(255, 255, 255, 0.8);
    z-index: 1;
    background: #262b3d63;
}

.button button{
    
    border: none;
    height: fit-content;
    padding: 15px 30px;
}
.button {
    width: 25%;
    display: flex;
    justify-content: right;
}

/* Body */
.container-1st{
    margin-top: 6vw;
    height: 120vh;
    display: flex;
}
.container-1st .description{
    color: white;
    width: 70%;
}

.description p{
    width: 85%;
    padding-left: 3vw;
}

.desc-content{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 15px;
}

.desc-content button{
    width: 40%;
    min-width: 200px;
    border:none;
    color: white;
    background: #00BAC7;
    box-shadow: 0px 15px 30px rgba(0, 186, 199, 0.33);
}

.description .icon{
    padding-top: 5vw;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.description div img{
    width: fit-content;
    height: fit-content;
    padding: 7px;
}

.container-1st .img img{
    width: 150%;
    margin-top: -50px;
    margin-left: -100px;
}

.container-2nd{
    margin-bottom: 10vw;
    padding-top: 200px;
}

.container-2nd .content{
    display: flex;
    justify-content: space-between;
}
.content *{
    width: 85%;
}

.container-2nd .card-list{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.card-list .card{
    width: 30%;
}
.card-head img{
    width: 100%;
}
.container-3rd{
    display: flex;
    position: relative;
    width: 100%;
    justify-content: space-between;
    padding: 130px 0px;
    height: fit-content;
    color: white;

}
.container-3rd > *:not(.bg){
    width: 100%;
}
.container-3rd .content-section:first-child h2{
    width: 70%;
}

.container-3rd .content-section:first-child div{
    display: flex;
    align-items: center;
    column-gap: 21px;
    width: 100%;
    border-top: 2px solid rgba(255, 255, 255, 0.315);
}
.container-3rd .content-section:first-child div img{
    width: 50px;
    height: 50px;
    
}


.bg{
    left: -200;
    top: -100;
    right: -200;
    bottom: 0;
    background: #00BAC7;
    position: absolute;
    z-index: -1;
}


.container-4th .content-section{
    width: 100%;
    padding: 200px 0;
}
.container-4th .content-section ul{
    list-style-image: url(/src/foto/check.png);
    padding-left:2em;
}
.container-4th li{
    width: 100%;
}
.container-4th .content-section:nth-child(2){
    position: relative;
}

.container-4th .content-section:nth-child(2) div{
    background: #00BAC7;
    display: flex;
    justify-content: space-around;
    padding: 20px;
    border-radius: 20px;
    bottom: 200;
    width: 100%;
    position: absolute;
    line-height: 0px;
}

.bg2{
    position: absolute;
    left: 0;
    right: 0;
    background: #EDFCFD;
    height: 200vh;
    z-index: -1;
}

.container-5th{
    height: 100vh;
    display: flex;
    
}
.container-5th .content-section{
    width: 100%;
}
.container-5th .content-section:nth-child(1) img{
    width: 100%;
}
.sub-content{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;
    margin-bottom: 10px;
}
.sub-content #circle{
    background: rgba(0, 186, 199, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container-6th{
    position: relative;
    padding:200px 0;
    height: fit-content;
}
.container-6th .content-section{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}
.container-6th .content-section h4{
    background: rgba(198, 244, 248, 0.1);
    color: #00BAC7;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.1em;
    border-radius: 100px;
    padding: 10px 20px;
}
.container-6th .content-section > h2{
    color: white;
    width: 70%;
    margin: 20px;
}
.container-6th .content-section > p{
    color: rgba(255, 255, 255, 0.8);
    width: 45%;
    margin: 0;
}
.container-6th .content-section{
    padding-top: 10%;
}
.container-6th .card-list{
    display: flex;
    text-align: left;
    column-gap: 30px;
    width: 100%;
    margin: 80px 0;
}
.container-6th .card{
    background: white;
    width: 33%;
    padding: 60px 0 60px 60px;
    border-radius: 10px;
}
.container-6th .card h6{
    color: #00BAC7;
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    margin: 0;
}

.container-6th .card h2{
    
    line-height: 42px;
    margin: 0;
}
.container-6th ul li{
    line-height: 40px;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    
}
.container-6th ul li:not( .none){
    list-style-image: url(/src/foto/checktiny.png);
}
.container-6th ul .none{
    list-style-image: url(/src/foto/danger.png);
}
.container-6th button{
    background: #00BAC7;
    box-shadow: 0px 30px 60px rgba(74, 114, 255, 0.25);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 15px 25px;
    width: 80%;
}

.bg3{
    left: -200;
    right: -200;
    top: 0;
    bottom: 0;
    background: #272D3E;
    position: absolute;
    transform: skewY(-4deg);
    z-index: -1;
}
.container-7th{
    padding :200px 0;
}
.container-7th .content-section:first-child{
    float: left;
    height: fit-content;
}
.container-7th .content-section div{
    bottom:0;
}

.container-7th .content-section div *{
    margin: 0;
    line-height: 26px;
}
.container-7th img{
    width: 100%;
    
}
.container-7th .content-section{
    position: relative;
    width: 50%
}
.container-7th .content-section img:nth-child(2){
    position: absolute;
    left: -10;
    top: -10;
    z-index: -1;
}
.container-7th .content-section div{
    background: #00BAC7;
    padding: 1vw 1.5vw;
    width: fit-content;
    color: white;
    position: absolute;
    bottom: 120;
    left: 100;
    z-index: 1;
}
.container-8th{
    background-color: #EDFCFD;
    padding: 100px;
    height: 100vh;
}
.container-8th .content-section:first-child{
    display: flex;
    column-gap: 21px;
}
.container-8th .content-section:first-child>*{
    width: 50%;
}
.container-8th .content-section:nth-child(2){
    
    width: 100%;
    position: relative;
    max-height: 50vh;
}
.container-8th .content-section:nth-child(2)> div{
    display: flex;
    column-gap: 15px;
    position: absolute;
    top: 40;
    left: -120;
    right: -120;
}
.testimoni{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    row-gap: 21px;
    padding-top: 21px;
    background:white;
    padding: 30px;
}
.testimoni div{
    display: flex;
    column-gap: 17px;
}
.testimoni *{
    margin: 0;
}
.testimoni div img{
    width: 50px;
    height: 50px;
}

.container-9th{
    padding: 150px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    row-gap: 20px;
}
.container-9th *{
    margin: 0;
}
.container-9th div{
    display: flex;
    column-gap: 30px;
}
.container-9th>h4{
    padding: 10px 20px;
    background: #EDFCFD;
    color: #00BAC7;
    border-radius: 100px;
}
.container-9th h2{
    font-weight: 500;
    line-height: 44px;
    color: #272D3E;
}
.container-9th p{
    width: 30%;
    text-align: center;
}
.container-9th div img{
    width: 24px;
    height: 24px;
}
.container-9th div button{
    background: #00BAC7;
    box-shadow: 0px 15px 30px rgba(0, 186, 199, 0.33);
    border-radius: 100px;
    color: white;
    border:none;
    padding: 25px 45px;
    display: flex;
    column-gap: 15px;
}
.container-9th div button span{
    border: 1px solid white;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.footer{
    position: relative;
    color: white;
}
.footer .content-section:first-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 0;
    column-gap: 10px;
}
.footer .content-section:first-child span:first-child{
    width: 40%;
}
.footer .content-section:first-child span:last-child{
    display: flex;
    column-gap: 15px;
}
.footer .content-section:first-child button{
    border-radius: 10px;
    color: white;
    border:none;
    
}
.footer .content-section:first-child button:first-child{
    background: rgba(255, 255, 255, 0.05);
}
.footer .content-section:first-child button:last-child{
    background: #00BAC7;
    box-shadow: 0px 15px 30px rgba(0, 186, 199, 0.33);
}
.footer .content-section:nth-child(2){
    display: flex;
    column-gap: 31px;
    padding: 50px 0px;
}
.footer .content-section:nth-child(2)>*{
    width: 50%;
}
.footer .content-section:nth-child(2) div{
    display: flex;
    justify-content: flex-end;
    gap: 30px;
}
.footer .content-section:nth-child(2) div>*{
    width: 30%;
}
.footer .content-section:nth-child(2) h3{
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #00BAC7;
}
.footer .content-section:nth-child(2) p{
    color: rgba(255, 255, 255, 0.8);
    font-size: 1em;
}
.footer > p{
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    font-size: 12px;
    padding: 50px 0;
}
.bg4{
    position: absolute;
    left: -200;
    right: -200;
    bottom: -50;
    top: 0;
    z-index: -1;
    background: #272D3E;
}