@font-face {
    font-family: "helveticaregular";
  
    src: url("../fonts/helvetica-webfont.woff2") format("woff2"),
      url("../fonts/helvetica-webfont.woff") format("woff");
  
    font-weight: normal;
  
    font-style: normal;
}
  
 @font-face {
    font-family: "galanoregular";
    src: url("../fonts/galano_grotesque-webfont.woff2") format("woff2"),
      url("../fonts/galano_grotesque-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
 }
  
@font-face {
    font-family: "galanogrotesque-bold";
  
    src: url("../fonts/galano_grotesque_bold-webfont.woff2") format("woff2"),
      url("../fonts/galano_grotesque_bold-webfont.woff") format("woff");
  
    font-weight: normal;
  
    font-style: normal;
}
  
@font-face {
    font-family: "galano-alt";
    src: url("../fonts/galano_grotesque_alt-webfont.woff2") format("woff2"),
      url("../fonts/galano_grotesque_alt-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary-color: #004269;
    --secondary-color: #009da5;
    --light-color: #fff;
    --medium-color: #d9d9d9;
    --dark-color: #000;
    --success-color: #00a531;
    --danger-color: #bf111f;
    --mature-color: #3e6267;
    --max-width: 100%;
    --primary-font: "galanoregular", sans-serif;
    --secondary-font: "helveticaregular", sans-serif;
}

*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--primary-font);
}

html,body{
    font-family: var(--primary-font);
    background-color: var(--light-color);
}

.gr{
    font-family: var(--primary-font);
}

.gb{
    font-family: 'galanogrotesque-bold';
}

.evenly{
    justify-content: space-evenly !important;
}

.biru-bg{
    background: var(--primary-color);
}

.biru-tx{
    color: var(--primary-color);
}

.hijau-bg{
    background: var(--secondary-color);
}

.hijau-tx{
    color: var(--secondary-color);
}

/* ATASNYA */
.navbar{
    background-color: var(--primary-color) !important;
}

.insta:hover{
    transform: scale(1.05);
}

.btn-hubungi{
    background: #F15B67;
    color: #fff;
    font-family: var(--primary-font);
    font-size: 1rem;
}

.btn-hubungi:hover{
    transform: scale(1.05);
    background: #f7626e;
    color: #fff;
    font-family: var(--primary-font);
    font-size: 1rem;
}

/* SECTION HERO */
.hero{
    position: relative;
    height: 121%;
    width: 100%;
    background: url('../img/hero-text.avif') no-repeat;
    background-size: 100%;
}

/* .text-hero{
    color: var(--light-color);
    padding: 10% 5%;
    font-size: 20pt;
} */

/* FORM SECTION */
.form-section{
    position: relative;
    height: 130dvh;
    width: 100%;
    /* background: rgb(255, 255, 255); */
    /* background: linear-gradient(45deg, rgba(0,66,105,0.8) 0%, rgba(0,157,165,0.8) 50%, rgba(241,91,103,0.8) 100%); */
}

.tform{
    height: 100%;
}

.form-box{
    height: 80svh;
    width: 100%;
    background-color: rgba(255,255,255,0.6);
    border-radius: 3%;
    padding: 10%;
    margin-bottom: 10%;
}

.form-control-lg, .form-select-lg{
    font-size: 1.2rem !important;
}

.btn-submit{
    background-color: var(--secondary-color);
    font-size: 1.2rem;
    color: var(--light-color);
}

.btn-submit:hover{
    background-color: #009da5;
    color: var(--light-color);
    transform: scale(1.02);
    border: .5px solid #bae7ff;
}

/* JURI SECTION */
#juri{
    background-color: #fff;
    background: url("../img/ev-02.avif") no-repeat;
    background-size: 100%;
    background-position: center;
    height: 120svh;
}

/* TAHAP SECTION */
.tahap{
    padding: 3.5rem;
}

.kotak{
    width: 90%;
    height: auto;
    border-radius: 20px;
    padding: 2rem;
    text-align: justify;
}

.judul-kotak{
    font-size: 2.7rem;
    font-weight: bolder;
}

.text-kotak{
    font-size: 19pt;
}

.kotak-besar{
    width: 100%;
    height: auto;
    border: 3px solid var(--primary-color);
    border-radius: 20px;
    padding: 2rem;
}

.border-end{
    border-right: 3px solid var(--dark-color) !important; 
}
.border-start{
    border-left: 3px solid var(--dark-color) !important;
}

/* TEKNIS SECTION */
.teknis{
    padding: 0 3.5rem 3.5rem 3.5rem;
}

.text-teknis{
    font-size: 40pt;
    font-weight: bolder;
    font-family: "galanogrotesque-bold";
    margin-bottom: 2rem;
}

.kotak-angka{
    width: 100%;
    height: auto;
    border-radius: 20px;
    padding: 3.5rem;
    /* text-align: justify; */
    position: relative;
}

.bola-angka{
    position: absolute;
    right: 35;
    top: 20;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--light-color);
    font-size: 30pt;
    font-weight: 900;
    font-family: "galanogrotesque-bold";
    text-align: center;
    line-height: 70px;
}

/* FOOTER SECTION */
.footer{
    padding: 2rem 7rem 1rem 7rem;
    background-color: var(--primary-color);
}

.text-link{
    text-decoration: none;
    color: var(--light-color);
}

.footer-mobile{
    padding: 1rem;
    background-color: var(--primary-color);
}


@media only screen and (min-width: 1520px) {
    #form-section-mobile{
        display: none;
    }

    #format-mobile{
        display: none;
    }

    #mobile-3{
        display: none !important;
    }

    #mobile-4{
        display: none !important;
    }

    .footer-mobile{
        display: none !important;
    }
}

@media only screen and (max-width: 1440px) and (min-width: 900px){
    #form-section-mobile{
        display: none;
    }

    #format-mobile{
        display: none;
    }

    #mobile-3{
        display: none !important;
    }

    #mobile-4{
        display: none !important;
    }

    .footer-mobile{
        display: none !important;
    }
    .form-section{
        position: relative;
        height: 130dvh;
        width: 100%;
        /* background: rgb(255, 255, 255); */
        /* background: linear-gradient(45deg, rgba(0,66,105,0.8) 0%, rgba(0,157,165,0.8) 50%, rgba(241,91,103,0.8) 100%); */
    }
    
    .tform{
        height: 100%;
    }
    
    .form-box{
        height: 85svh;
        width: 100%;
        background-color: rgba(255,255,255,0.6);
        border-radius: 3%;
        padding: 10%;
        margin-bottom: 10%;
    }
    
    .form-control-lg, .form-select-lg{
        font-size: 1.2rem !important;
    }
    
    .btn-submit{
        background-color: var(--secondary-color);
        font-size: 1.2rem;
        color: var(--light-color);
    }
    
    .btn-submit:hover{
        background-color: #009da5;
        color: var(--light-color);
        transform: scale(1.02);
        border: .5px solid #bae7ff;
    }
}

@media only screen and (max-width: 600px) and (min-width: 350px){
    .hero{
        position: relative;
        height: 55%;
        width: 100%;
        background: url('../img/hero-mobile.avif') no-repeat;
        background-size: 100%;
    }
    #form-section{
        display: none;
    }

    .form-box-mobile{
        height: 80svh;
        width: 90%;
        background-color: rgba(0, 157, 165, .5);
        border-radius: 3%;
        padding: 10%;
        margin-bottom: 10%;
    }

    #juri{
        background-color: #fff;
        background: url("../img/ev-02-mobile.avif") no-repeat;
        background-size: 100%;
        background-position: center;
        height: 50%;
    }

    .tahap{
        padding: 1rem;
    }

    .judul-kotak{
        font-size: 1.5rem;
        font-weight: bolder;
    }
    
    .text-kotak{
        font-size: 12pt;
    }

    #format{
        display: none;
    }

    #web-3{
        display: none !important;
    }

    #web-4{
        display: none !important;
    }

    .teknis{
        padding: 1rem;
    }

    .text-teknis{
        font-size: 18pt;
        font-weight: bolder;
        font-family: "galanogrotesque-bold";
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .kotak-angka{
        width: 100%;
        height: auto;
        border-radius: 20px;
        padding: 2.5rem;
        /* text-align: justify; */
        position: relative;
    }
    
    .bola-angka{
        position: absolute;
        right: 20;
        top: 10;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: var(--light-color);
        font-size: 30pt;
        font-weight: 900;
        font-family: "galanogrotesque-bold";
        text-align: center;
        line-height: 50px;
    }

    .footer{
        display: none !important;
    }
}