/**
  1. General
     - Variables
     - Extra-outer

  2. Spacing

  3. Color
     - skin-color, skin-bg-color,
     - dark-color, dark-bg-color
     - white-color, white-bg-color, white-border-color
     - grey-color, grey-bg-color, grey-border-color

  4. Header
     - SiteBrand(logo)
     - SiteNavigation(Menu)
     - side-menu

  5. Footer
     - FirstFooter
 
  6. GoTop BUtton
**/

/* ===============================================
   font-family
------------------------*/

@font-face {
  font-family: "Onest", sans-serif; /* A name you choose for the font */
  src: url('../fonts/Onest/Onest-VariableFont_wght.ttf') format('woff2');
    
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
 
 
/* ===============================================
    General
------------------------*/

/** Variables **/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
a, a:hover, a:focus, a:active { text-decoration: none; outline: none; }
a, button, input {  outline: none; }
ol, ul{   padding: 0; margin: 0; }
b, strong{ font-weight: 500; }
iframe{ width: 100%; border: none; display: block; }
p {  margin: 0 0 15px; }

/** Typography Variable **/
:root {
    --base-bodyfont: "Onest", sans-serif;
    --base-bodyfont-Size: 18px;
    --base-bodyfont-color: #6c6c6c;    
    --base-bodyfont-light-color: #F6F5F2;
    --base-dark: #1E1F20;
    --base-dark-blue: #063633;
    --base-dark-black:#000000;
    --base-grey: #f2f5f1;
    --base-white: #ffffff;
    --base-headingfont: "Onest", sans-serif;
    --base-headingfont-color: #181818;
    --base-border-radius-5: 5px;
    --base-border-radius-8: 8px;
    --base-border-radius-10: 10px;
    --base-border-radius-15: 15px;
    --base-border-radius-20: 20px;
    --base-border-radius-50: 50px;
    --base-border-radius50: 50%;
    --base-border-color-light: #E4E4E4;
    --base-border-color-white: #ffffff;
    --base-shadow: 0 0 8.85px 1.18px rgb(43 52 59 / 10%);
}

/** Background Colors **/
.bg-base-dark { background-color: var(--base-dark);}
.bg-base-black { background-color: var(--base-black);}
.bg-base-grey { background-color: var(--base-grey);}
.bg-base-black { background-color: var(--base-black);}
.bg-dark-blue { background-color: var(--base-dark-blue);}
  
/** Text Colors **/
.text-base-dark { color: var(--base-dark);}
.text-base-white { color: var(--base-white);}

/** Bg-layer Colors **/
.bg-base-dark > .prt-bg-layer{background-color: var(--base-dark);}
.bg-base-black > .prt-bg-layer{background-color: var(--base-darkblack);}
.bg-base-grey > .prt-bg-layer{background-color: var(--base-grey);}
.bg-base-black > .prt-bg-layer{background-color: var(--base-black);}

.bg-base-dark >.prt-bg-layer >.prt-col-wrapper-bg-layer-inner{background-color: var(--base-dark);}
.bg-base-black >.prt-bg-layer >.prt-col-wrapper-bg-layer-inner{background-color: var(--base-darkblack);}
.bg-base-grey >.prt-bg-layer >.prt-col-wrapper-bg-layer-inner{background-color: var(--base-grey);}
.bg-base-black >.prt-bg-layer >.prt-col-wrapper-bg-layer-inner{background-color: var(--base-black);}

.text-base-white h1:not(.text-base-dark),
.text-base-white h2:not(.text-base-dark),
.text-base-white h3:not(.text-base-dark),
.text-base-white h4:not(.text-base-dark),
.text-base-white h5:not(.text-base-dark),
.text-base-white h6:not(.text-base-dark),
.text-base-white a:not(.text-base-dark),
.bg-base-dark h1, .bg-base-dark h2, .bg-base-dark h3,
.bg-base-dark h4, .bg-base-dark h5, .bg-base-dark h6,
.bg-base-black h1, .bg-base-black h2, .bg-base-black h3,
.bg-base-black h4, .bg-base-black h5, .bg-base-black h6,
.bg-dark-blue h1, .bg-dark-blue h2, .bg-dark-blue h3,
.bg-dark-blue h4, .bg-dark-blue h5, .bg-dark-blue h6  {
    color: var(--base-white);
}
.bg-dark-blue p{ color: var(--base-white); }

body { font-family: var(--base-bodyfont);
    font-weight: 400;
    font-size: var(--base-bodyfont-Size);
    line-height: 26px;
    color: var(--base-bodyfont-color);
}
h1, h2, h3, h4, h5, h6 { 
    font-family: var(--base-headingfont); 
    margin-bottom: 15px; 
    font-weight: 400; 
    color : var(--base-headingfont-color);
}
h1 { font-size: 98px; line-height: 108px; }
h2 { font-size: 78px; line-height: 88px; }
h3 { font-size: 18px; line-height: 28px; }
h4 { font-size: 16px; line-height: 26px; }
h5 { font-size: 14px; line-height: 24px; }
h6 { font-size: 12px; line-height: 22px; }

.container-fluid{padding: 0 15px;}
.container {
    max-width: 1330px;
    padding: 0 15px;
}
.row:not(.g-0) {
    margin-left: -15px;
    margin-right: -15px;
}
.row:not(.g-0) > [class*='col-'] {
    padding-left: 15px;
    padding-right: 15px;
}

/** Extra-outer **/
body .page {
    overflow: hidden;
    position: relative;
    z-index: 10;
}
body .site-main {
    position: relative;
    z-index: 1;
}
body .page.sidebar-true .site-main{ 
    padding: 0;
    background-color: var(--base-dark);
}
a { color: var(--base-headingfont-color); }
a:hover { color: var(--base-dark); }
a, img{
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.border-rad_8 { border-radius: var(--base-border-radius-8);}
.border-rad_10 { border-radius: var(--base-border-radius-10);}
.border-rad_15 { border-radius: var(--base-border-radius-15);}
.border-rad_20 { border-radius: var(--base-border-radius-20);}
.border-rad_50 { border-radius: var(--base-border-radius-30);}

/* ===============================================
    Spacing
------------------------*/

/** Padding **/
.spacing-1 { padding: 0 85px; }
.spacing-2 { padding: 0px  70px; }
.spacing-3 { padding-left: 200px; padding-right: 200px; }
.spacing-4 { padding-left: 150px; padding-right: 150px; }


.pt-0{ padding-top: 0px !important ;}
.pt-5{ padding-top: 5px ! important ;}
.pt-10{ padding-top: 10px ! important ; }
.pt-15{ padding-top: 15px ! important ; }
.pt-20{ padding-top: 20px ! important ; }
.pt-23{ padding-top: 23px ! important ; }
.pt-25{ padding-top: 25px ! important ; }
.pt-30{ padding-top: 30px ! important ; }

.pb-0{ padding-bottom: 0px !important ; }
.pb-5{ padding-bottom: 5px ! important ; }
.pb-10{ padding-bottom: 10px ! important ; }
.pb-15{ padding-bottom: 15px ! important ; }
.pb-20{ padding-bottom: 20px ! important ; }
.pb-25{ padding-bottom: 25px ! important ; }
.pb-30{ padding-bottom: 30px ! important ; }

.pr-55{ padding-right: 55px ! important ; }
.pl-55{ padding-left: 55px ! important ; }

/** Margin **/
.mt-0{ margin-top: 0px !important ; }
.mt-5{ margin-top: 5px ! important ; }
.mt-10 { margin-top: 10px ! important ; }
.mt-12 { margin-top: 12px ! important ; }
.mt-15{ margin-top: 15px ! important ; }
.mt-20{ margin-top: 20px ! important ; }
.mt-25{ margin-top: 25px ! important ; }
.mt-30{ margin-top: 30px ! important ; }
.mt-35 { margin-top: 35px ! important ; }
.mt-40{ margin-top: 40px ! important ; }
.mt-50{ margin-top: 50px ! important ; }
.mt-55{ margin-top: 55px ! important ; }
.mt-100{ margin-top: 100px ! important ; }

.mb-0{ margin-bottom: 0px !important ; }
.mb-5{ margin-bottom: 5px ! important ; }
.mb-10{ margin-bottom: 10px ! important ; }
.mb-12{ margin-bottom: 12px ! important ; }
.mb-15{ margin-bottom: 15px ! important ; }
.mb-25{ margin-bottom: 25px ! important ;}
.mb-20{ margin-bottom: 20px ! important ; }
.mb-30{ margin-bottom: 30px ! important ; }
.mb-35{ margin-bottom: 35px ! important ; }


/*  ===============================================
    Header
------------------------*/
/** SiteBrand(logo) **/

.site-branding #logo-img{
    max-width: 128px;
    z-index: 1;
    position: relative;
}

/** SiteNavigation(Menu) **/
.site-navigation {
    position: relative;
    z-index: 2;
}
.header_extra .header-btn{ margin-left: 15px; }


/* ===============================================
    Footer
------------------------*/
.footer {
    position: relative;
    /*min-height: 600px;*/
    padding: 170px 0 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.footer .bg-ovarlay{ top: -50%; }
.footer-content-wrapper h2.footer-title {
    font-size: 84px;
    line-height: 100px;
    color: var(--base-white);
}
ul.footer-list {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 14px;
    row-gap: 10px;
    flex-wrap: wrap;
}
ul.footer-list li.footer-list-item {
    font-size: 20px;
    line-height: 30px;
    color: var(--base-border-color-light);
    font-weight: 300;
}
ul.footer-list li.footer-list-item .separator{
    width: 6px;
    height: 6px;
    background-color: rgb(255 255 255 / 40%);
    border-radius: var(--base-border-radius-20);
    margin: 4px 0 0 0;
}

/* ===============================================
    GoTop BUtton
------------------------*/
#totop{
    font-weight: 900;
    color: #fff;
    display: none;
    position: fixed;
    right: 34px;
    bottom: 50px;
    z-index: 999;
    height: 0;
    width: 0;
    font-size: 0;
    text-align: center;
    padding-top: 3px;
    line-height: 34px;
    border-radius: var(--base-border-radius-50);
    transition: .3s ease-in-out;
}
#totop.top-visible {
    height: 40px;
    width: 40px;
    font-size: 22px;
    display: inline;
    background-color: var(--base-dark);
}
@keyframes jump { 0% { bottom: 20px; } 50% { bottom: 40px; } 100% { bottom: 20px; } }
#totop.top-visible  { animation: jump 4s infinite; }