/*
Theme Name: GET First
Theme URI: https://www.getenergie.co.id
Author: PT. Gemilang Energie Teknologi
Author URI: https://www.getenergie.co.id
Description: Tema khusus website PT. Gemilang Energie Teknologie
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.0.1
Text Domain: GETFirst
*/

/* CSS Resetter
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{text-decoration:none;color:var(--c5)}
sup{vertical-align: super;
  font-size: 10px;}
html{width:100%;overflow-x:hidden;}
/*=== root ===*/
:root{
    /*=== Color ===*/
    --c1:#1a4718;
    --c2:white;
    --c3:#e6e6e6;
    --c4:#2d2c2c;
    --c5:#60b33b;
    --c6:#d7d7d7;
    --c7:#aadff9;
    --c8:orangered;
    --c9:#eeeee4;
    --main-font:'manrope',system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body.normaltheme {
    --body-text-color: var(--c4);
    --body-background: var(--c2);
    --header-background: var(--c2);
    --header-text-color: var(--c4);
    --nav-background: var(--c2);
    --nav-text-color: var(--c1);
    --footer-background: var(--c9);
    --footer-text-color: var(--c4);
}
/*=== headings, paragraphs ===*/
h1,h2,h3,h4,h5,h6,b,strong{font-weight:bold;}
i,em{font-style:italic;}
h1 {
    font-size: 2.5em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

h2 {
    font-size: 2em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

h3 {
    font-size: 1.75em;
    line-height: calc(1ex / 0.38);
    margin: calc(1ex / 0.38) 0;
}

h4 {
    font-size: 1.5em;
    line-height: calc(1ex / 0.37);
    margin: calc(1ex / 0.37) 0;
}

h5,h6,article p,article ul,article ol,.in-post-catalog p {
    font-size: 1em;
    margin: calc(1ex / 0.32) 0;
}
article p:nth-child(1){
    margin-top:0;
}
/* === Body ===*/
.under-c{height:100vh;column-gap:3em;display:flex;justify-content:center;align-items:center;}
.under-c-separator{height:140px;background:black;width:3px;}
.get-logo-under-c{width:125px;height:auto;}
body{font-family:var(--main-font);font-size:12pt;background:var(--body-background);color:var(--body-text-color);scroll-behavior: smooth;overflow-x:hidden;line-height: calc(1ex / 0.32);}
header{background: var(--header-background);
    color: var(--header-text-color);
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 290px;
    padding: 0 2em;
    box-sizing: border-box;
    box-shadow: 0px -7px 10px 3px #000;
}
img.toplogo {
    height: auto;
    width: 140px;
    display:block;
}
nav#topnav{
    display: flex;
    font-size: 13pt;
    background: var(--nav-background);
    color: var(--nav-text-color);    align-items: center;
    justify-content: center;
    height: 3em;
    position: relative;
    top: 39px;
}
#topnav a{color: var(--nav-text-color);
    height: 100%;
    transition: 0.5s ease-in-out;
    padding: 1.2em 1em;
    box-sizing: border-box;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;}
#topnav a:hover{box-shadow: inset 0 -4px 0 0 var(--nav-text-color);}
.jumpto{margin-top:-300px;padding-bottom:300px;display:block;position:absolute;z-index:-2}
.first-level-topmenu{
    display:flex;align-items: center;justify-content: center;gap:1em;
}
.top-submenu{display:none;position:absolute;}
.topmenu:hover > .top-submenu{
    display:flex;
}
.container{min-height:80vh;}
article ul {
    list-style-type: square;
    
}
article ul,article ol{margin-left: 2em;}
article ol{
    list-style-type:decimal;
}
/*==== FORM ====*/
.container form{margin-top:2em;}
.form-type-1 {
    font-size: 14px;
    /*background: hsla(189, 100%, 35%, 1);
    background: linear-gradient(90deg, hsla(189, 100%, 35%, 1) 0%, hsla(102, 63%, 60%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(189, 100%, 35%, 1) 0%, hsla(102, 63%, 60%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(189, 100%, 35%, 1) 0%, hsla(102, 63%, 60%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#0097B2", endColorstr="#7ED957", GradientType=1 );*/
    background-color: var(--c7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    min-width:50vw;
}
.form-type-1 .form-row {margin-bottom: 12px;}
.form-type-1 input, .form-type-1 textarea,.form-type-1 select {
    padding: 8px;
    box-sizing: border-box;
    border: none;
    border-radius: 5px;
    font-family: var(--main-font);
}
.form-type-1 input:focus, .form-type-1 textarea:focus,.form-type-1 select:focus{
    outline:none;
}
.form-type-1 .wpcf7-response-output {
    background: #fbfbad;
    border: none;
    border-radius: 5px;
}
/* === FOOTER === */
footer{background: var(--footer-background);
    color: var(--footer-text-color);
    height: 400px;
    display: flex;
    font-size: 13px;
    padding: 6em 4em;
    box-sizing: border-box;
    column-gap: 7em;}
footer a{color:var(--footer-text-color)}
.footer-section {
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.footer-headings{font-weight:bold;margin:1em 0 0.5em;}
.footer-company-name{font-size:13pt;font-weight:bold;margin-bottom:0.5em;}
.footer-logo{}
img.bottom-logo {
    width: 130px;
    height: auto;
}
footer .fa-solid{
    font-size: 11pt;
}
.company-detail {
    display: flex;
    align-items: baseline;
    column-gap: 0.5em;
}
.bottom-nav {
    display: flex;
    flex-direction: column;
    row-gap: 1em;
}
.bottom-menu-hdg{color:grey;font-weight:bold;font-size:13pt;}
.fa-brands{font-size:18pt;}
.social-list {
    display: flex;
    column-gap: 1.2em;
}
.copyright {
    font-size: 10pt;
    color: #999;
    margin-top: 3em;
}
a.bottom-menu {
    transition: all 0.1s;
}
a.bottom-menu:hover {
    color:var(--c5);
}
@media(min-width:950px) {
    .menu-button{display:none;}
}
@media(max-width:1150px){
    #topnav a{padding: 0.9em 0.2em;}
}
@media(max-width:1000px){
    header{
        gap:200px;
    }
    .form-type-1 {
        width: 90vw;
    }
}
@media(max-width:949px){
     header{
        /* justify-content: normal; */
        gap:0;
        height: 70px;
        position:fixed;
        z-index:999;
        width:100%;
        box-shadow: 0px 1px 6px #888;
    }
    img.toplogo {
        width: 80px;
    }
    nav#topnav{
        overflow-x: hidden;
        display:flex;
        position: absolute;
        height:unset;
        z-index: 7;
        width:100%;
        padding: 1em 0;
        box-sizing: border-box;
        top: 70px;
        left: 100vw;
        transition: .6s ease-in-out;
        background-color: var(--nav-text-color);
    }
    .menu-button {
        width: 25px;
        height: 25px;
        position: absolute;
        left: 25px;
        margin: 25px 0;
        -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;
    }
    .menu-button-inner{
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: var(--c1);
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -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;
    }
    .menu-button-inner:nth-child(1) {
        top: 2px;
    }
    
    .menu-button-inner:nth-child(2) {
        top: 11px;
    }
    
    .menu-button-inner:nth-child(3) {
        top: 20px;
    }
    
    .menu-button.open .menu-button-inner:nth-child(1) {
        top: 14px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    
    .menu-button.open .menu-button-inner:nth-child(2) {
        opacity: 0;
        left: -60px;
    }
    
    .menu-button.open .menu-button-inner:nth-child(3) {
        top: 14px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
    nav#topnav.openmenu{
        /* display:flex; */
        left:0vh;
    }
    #topnav a{
        padding:0.9em 1em;
        color:var(--nav-background);
    }
    .first-level-topmenu{
        flex-direction: column;
        gap:2em;
    }
}
@media(min-width:950px) and (max-width:1200px){
    .first-level-topmenu {
        gap: 0.8em;
        font-size: 16px;
    }
}
@media only screen and (max-width:800px){
    footer{
        height:max-content;
        flex-direction: column;
        row-gap:2em;
        font-size:10pt;
        padding: 3em 2em;
    }
}

.website-note{color:red;}