@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
@font-face {
    font-family: 'quendamedium';
    src: url('fonts/quenda-medium-webfont.woff2') format('woff2'),
         url('fonts/quenda-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
:root {
    --f-que: 'quendamedium';
    --f-reg: 400;
    --f-med: 500;
    --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-purple: #7B2B83;
    --c-black: #646665;
    --c-red: #c02b0a;
    --c-orange: #FAB574;
    --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: "Roboto", sans-serif;
    font-size: var(--f-16);
    font-weight: var(--f-med);
    color: var(--c-black);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    background: #F3F2ED;
}
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;}

/*FONT*/
.f-que{font-family: var(--f-que);}
.f-reg{font-weight: var(--f-reg);}
.f-med{font-weight: var(--f-med);}

/*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-purple{color: var(--c-purple);}
.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-orange{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-orange); color: var(--c-purple);}
.btn-solid-orange:hover{background: var(--c-purple); color: var(--c-orange);}
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: #64666583;}
.navbar-collapse .active .nav-link{color: var(--c-purple);}
.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link{padding: var(--space-1) var(--space-2); 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-purple);}
.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%;}


/*FOOTER*/
footer{width: 100%; background: url(../img/footer-1.jpg) no-repeat; background-size: cover; padding: var(--space-10) 0 var(--space-4) 0;}
footer .content{width: 80%; margin: auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; color: #fff;}
footer .location a{padding: var(--space-2); transition: all .4s; border: 2px solid transparent; border-radius: var(--space-3); margin-right: var(--space-2); font-size: var(--f-16);}
footer .location a:hover{border-color: #fff; transform: translateY(-2px);}
footer .menu{display: flex;}
footer .menu a{display: block; padding: 0 var(--space-1); padding-top: var(--space-0); font-weight: 400; transition: all .4s;}
footer .menu a:hover{color: #ffffff83;}
footer .socket{font-size: var(--f-13); line-height: var(--lh-13); font-weight: 400; padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid #fff; display: flex; flex-wrap: wrap; align-items: center;}
footer .socket a{ transition: all .4s;}
footer .socket a:hover{color: #ffffff83;}
footer .sosmed a{margin-left: var(--space-1); padding: var(--space-0); transition: all .4s;}
footer .sosmed a:hover{color: #ffffff83;}

/*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%;}
    .navbar-brand img, footer .logo img{max-height: 66px;}
    footer{padding-top: var(--space-6);}
    footer{padding-top: var(--space-6);}
    footer .menu{display: none;}
    footer .location a{padding: var(--space-1); margin-right: var(--space-1); font-size: var(--f-13);}
    footer .socket{padding-top: var(--space-2); margin-top: var(--space-1);}
}

@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%;}
    .navbar-brand img, footer .logo img{max-height: 76px;}
}