@import url('https://fonts.googleapis.com/css2?family=Jost:ital@0;1&display=swap');
:root {
    --f-13 : 13px;
    --f-16 : 16px;
    --f-22 : 22px;
    --f-40 : 40px;
    --f-58 : 58px;
    --lh-13 : 23px;
    --lh-16 : 26px;
    --lh-22 : 32px;
    --lh-40 : 50px;
    --lh-58 : 68px;
    --c-blue: #07AFD6;
    --c-black: #7C7C7C;
    --c-red: #c02b0a;
    --c-orange: #F9815C;
    --space-1 : 10px;
	--space-0 : calc(var(--space-1)/2);
	--space-2 : calc(var(--space-1)*2);
	--space-3 : calc(var(--space-1)*3);
	--space-4 : calc(var(--space-1)*4);
	--space-5 : calc(var(--space-1)*5);
	--space-6 : calc(var(--space-1)*6);
	--space-7 : calc(var(--space-1)*7);
	--space-8 : calc(var(--space-1)*8);
	--space-9 : calc(var(--space-1)*9);
	--space-10 : calc(var(--space-1)*10);
}
body {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: var(--f-16);
    color: var(--c-black);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    background: #F2F2F2;
}
img{max-width: 100%;}
h1,h2,h3{font-family: inherit; font-size: inherit; line-height: inherit; font-weight: normal;}
ul, ul li{list-style: none; margin: 0; padding: 0;}
a, a:hover{color: inherit; border: none; text-decoration: none;}
main{position: relative; width: 1100px; margin: auto; padding: var(--space-5) 0;}

/*SIZE*/
.f-13{font-size: var(--f-13); line-height: var(--lh-13);}
.f-16{font-size: var(--f-16); line-height: var(--lh-16);}
.f-22{font-size: var(--f-22); line-height: var(--lh-22);}
.f-40{font-size: var(--f-40); line-height: var(--lh-40);}
.f-58{font-size: var(--f-58); line-height: var(--lh-58);}

/*COLOR*/
.c-blue{color: var(--c-blue);}
.c-black{color: var(--c-black);}
.c-red{color: var(--c-red);}
.c-orange{color: var(--c-orange);}

/*SPACE*/
.space-0{margin-top: calc(var(--space-1)/2);}
.space-1{margin-top: calc(var(--space-1)*1);}
.space-2{margin-top: calc(var(--space-1)*2);}
.space-3{margin-top: calc(var(--space-1)*3);}
.space-4{margin-top: calc(var(--space-1)*4);}
.space-5{margin-top: calc(var(--space-1)*5);}
.space-6{margin-top: calc(var(--space-1)*6);}
.space-7{margin-top: calc(var(--space-1)*7);}
.space-8{margin-top: calc(var(--space-1)*8);}
.space-9{margin-top: calc(var(--space-1)*9);}
.space-10{margin-top: calc(var(--space-1)*10);}

/*BUTTON*/
.btn-solid-blue{display: inline-flex; justify-content: center; align-items: center; width: 160px; height: var(--space-5); font-family: var(--f-que); font-size: var(--f-22); line-height: normal; border: none; transition: all .3s; cursor: pointer; background: var(--c-blue); color: #FFF;}
.btn-solid-blue:hover{background: var(--c-blue); color: #F2F2F2;}
input.form-control, input.form-control:focus, select.form-select, select.form-select:focus, textarea.form-control, textarea.form-control:focus{position: relative; width: 100%; outline: none; border: none; border-bottom: 1px solid #02010133; border-radius: 0; box-shadow: none; font-size: var(--f-16);}
input[type="checkbox"]:focus{box-shadow: none;}
::-webkit-calendar-picker-indicator {background: transparent;}
input[type="date"]::-webkit-calendar-picker-indicator {
    background: url(icon-date.webp) no-repeat right;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/*HEADER*/
header {
    margin: auto;
    display: block;
    width: 100%;
    color : #fff;
    background: #fff;
    font-weight: 400;
    font-size: var(--f-16);
}
.navbar{width:80%; margin: auto; padding: 0; display: flex; justify-content: space-between; align-items: center;}
.navbar-collapse .nav-link{transition: all .3s; color: var(--c-black);}
.navbar-collapse .nav-link:hover{color: var(--c-orange);}
.navbar-collapse .active .nav-link{color: var(--c-orange);}
.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link{padding: var(--space-1); margin-right: var(--space-0);}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {border: none; outline: none; box-shadow: none;}
.animated-icon{
    width: 24px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}
.animated-icon span{
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.animated-icon span {background: var(--c-black);}
.animated-icon span:nth-child(1) {top: 0px;}
.animated-icon span:nth-child(2), .animated-icon span:nth-child(3) {top: 7px;}
.animated-icon span:nth-child(4) {top: 14px;}
.animated-icon.open span{background: var(--c-blue);}
.animated-icon.open span:nth-child(1) {top: 7px; width: 0%; left: 50%;}
.animated-icon.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.animated-icon.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.animated-icon.open span:nth-child(4) {top: 7px; width: 0%; left: 50%;}

img.logo-1, img.logo-2{height: auto;}
img.logo-1{width: 100px;}
img.logo-2{width: 288px; padding-left: var(--space-2);}

#referal, #others {display: none;}

/*FOOTER*/
footer{width: 100%; padding: var(--space-4) 0 var(--space-4) 0; background: #ffffff;}
footer .content{width: 80%; margin: auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; color: #fff;}
footer .menu{display: flex;}
footer .menu a{display: block; margin-left: 0; padding: var(--space-0); padding-left: 0; padding-right: 0; transition: all .4s; color: var(--c-black);}
footer .menu a:hover{color: var(--c-orange);}
footer .sosmed a{ transition: all .4s;}
footer .sosmed a:hover{color: #ffffff83;}
footer .logo-1 img{width: 105px; height: auto;}
footer .logo-2 img{width: 288px; height: auto;}

/*MOBILE*/
@media only screen and (max-width:991px) {
    :root {
        --f-13 : calc(13px * .8);
        --f-16 : calc(16px * .8);
        --f-22 : calc(22px * .8);
        --f-40 : calc(40px * .8);
        --f-58 : calc(58px * .8);
        --lh-13 : calc(23px * .8);
        --lh-16 : calc(26px * .8);
        --lh-22 : calc(32px * .8);
        --lh-40 : calc(50px * .8);
        --lh-58 : calc(68px * .8);
        --space-1 : calc(10px * .8);
    }
    main, .navbar, footer .content{width: 90%;}
    img.logo-1{width: 80px;}
    img.logo-2{display: none;}
    footer .menu{padding-top: var(--space-4);}
}

@media only screen and (max-width:1200px) {
    :root {
        --f-13 : calc(13px * .9);
        --f-16 : calc(16px * .9);
        --f-22 : calc(22px * .9);
        --f-40 : calc(40px * .9);
        --f-58 : calc(58px * .9);
        --lh-13 : calc(23px * .9);
        --lh-16 : calc(26px * .9);
        --lh-22 : calc(32px * .9);
        --lh-40 : calc(50px * .9);
        --lh-58 : calc(68px * .9);
        --space-1 : calc(10px * .9);
    }
    main, .navbar, footer .content{width: 90%;}
}