/**
*
*  Roots & Vars
*
*/

:root {
  --mak-body:255,255,255;
   
  --mak-color-hover:#5b7428;
  --mak-color:#000;
  --mak-colortwo:#fff;
  --mak-rgb-dark:0,0,0;
  --mak-rgb-light:244,246,249;
  --mak-01-icon:#ad962f;
  --mak-footercl:#000;

  --mak-wrap:1480px;
  --mak-nav:100px;
  --mak-subnav:50px;
  --mak-4:4px;
  --mak-6:6px;
  --mak-150:150px;
  --makF: 'Poppins', sans-serif;
  --makF2: 'Comfortaa', sans-serif;
  --makF3: 'Kanit', sans-serif;
  --makF4: 'Rajdhani', sans-serif;
  --mak-icon:40px;
}

/**
*
*  Body
*
*/

body {
    background-color:rgba(var(--mak-body));
    color:var(--mak-color);
    font-family:var(--makF3);
}

strong, b, p, h1, h2, h3, h4, h5, h6, a {
    color:var(--mak-color);
}

a:focus, a:hover {
    color:var(--mak-color-hover);
}

.wrap {
    max-width:var(--mak-wrap);
    margin: 0 auto;
    left: 0;
    right: 0;
    position: relative;
    padding: 0 25px;
}


ol, ul {
    padding:20px !important;
    margin:0 !important;
}

/**
*
*  Header
*
*/

header {
    position:relative;
    background:rgba(var(--mak-rgb-light));
}

header:before, #s-02:before, #s-04:before {
    content: '';
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    height: 1px;
    left: 0;
    right: 0;
    background: linear-gradient(45deg, transparent, rgba(var(--mak-rgb-dark), 0.08), transparent);
}

#s-04:after {
    content: '';
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    height: 1px;
    left: 0;
    right: 0;
    background: linear-gradient(45deg, transparent, rgba(var(--mak-rgb-dark), 0.08), transparent);
}

#mak-nav {
   display:flex;
   justify-content: space-between;
   align-items: center;
   min-height:var(--mak-nav);
   position:relative;
}

.mak-nav-info-box  {
   display:inline-block;
}

.mak-info-container {
    display: flex;
    align-items: center;
    margin:0 35px 0 0;
    gap:0 15px;
}

.mak-info-icon {
    width: var(--mak-icon);
    height: var(--mak-icon);
    line-height:var(--mak-icon);
    text-align:center;
    border-radius:var(--mak-4);
    background-image: linear-gradient(135deg, rgba(255,255,255,.14) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,.08) 75%);
    background-image: linear-gradient(135deg, rgba(255,255,255,.1) 50%, rgba(0,0,0,0) 50%);
    background-color:var(--mak-color-hover);
    color:var(--mak-colortwo);
}

.mak-info-normal, .mak-info-bold, .mak-logo-bold, .mak-logo-normal, .mak-01-normal, .mak-01-bold {
   display:block;
   line-height:1.1;
}

.mak-info-normal, .mak-01-normal {
  font-weight:normal;
}

.mak-info-bold, .mak-01-bold {
   font-weight:700;
}

.mak-logo-container {
    display: flex;
    align-items: center;
    margin:0 15px 0 0;
    gap:0;
}

.mak-logo-bold {
    font-size: 22px;
    font-weight: 900;
    font-family: var(--makF1);
}

.mak-logo-normal {
    font-weight:700;
    opacity:0.6;
    font-size:14px;
}

/**
*
*  Section 01
*
*/

#s-01 {
   background-color:var(--mak-color-hover);
   position:relative;
   overflow:hidden;
}

.wrap-01 {
   position:relative;
}

.wrap-01:before {
    content:'';
    background-image:url(./imagini/maklogowhite.svg);
    width:120em;
    height:120em;
    top:-35em;
    left:-40em;
    background-size:100%;
    position:absolute;
    opacity:0.05;
    transform:rotate(-10deg);
    z-index:0;
}

.s-01-container {
    min-height:40em;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:0 10em;
    position:relative;
    z-index:1;
}

.s-01-left {
    width:60%;
}

.s-01-right {
    width:40%;
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.s-01-bold, .s-01-normal {
    display:block;
    line-height:1.2;
    color:var(--mak-colortwo);
}

.mak-01-normal, .mak-01-bold {
    color:var(--mak-colortwo);
}

.mak-01-bold {
    font-size:20px;
}

.mak-01-normal {
    opacity:0.8;
}

.s-01-bold {
    font-size:44px;
    font-family:var(--makF3);
    font-weight:800;
}

.s-01-normal {
    font-size:18px;
    margin-top:12px;
}

.mak-01-box  {
    display:inline-block;
    width:50%;
    margin:20px 0;
 }
 
 .mak-01-icon {
     width: var(--mak-icon);
     height: var(--mak-icon);
     line-height:var(--mak-icon);
     text-align:center;
     border-radius:var(--mak-4);
     background-image: linear-gradient(135deg, rgba(255,255,255,.14) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,.08) 75%);
     background-image: linear-gradient(135deg, rgba(255,255,255,.1) 50%, rgba(0,0,0,0) 50%);
     background-color:var(--mak-01-icon);
     color:var(--mak-colortwo);
 }

 .mak-01-spans {
    margin:10px 35px 0 0;
 }

 /**
*
*  Section 02
*
*/

#s-02 {
    background-color:rgba(var(--mak-rgb-light));
    position:relative;
    overflow:hidden; 
    padding:4em;
}

.s-section-title-center {
    display:flex;
    justify-content: center;
    align-items:center;
    margin:2em 0;
}

.s-section-title-center h2, .s-03-right-title, .s-03-left-title, .s-04-title {
    font-family:var(--makF3);
    font-weight:bold;
    margin:0;
}

.s-02-container .box {
    text-align:center;
    font-size:20px;
}

.s-02-bb {
    font-weight:bold;
}

 /**
*
*  Section 03
*
*/

#s-03 {
    background:rgba(var(--mak-body));
    padding:8em 0;
}

.s-03-container {
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.s-03-left, .s-03-right {
    width:50%;
}

.s-03-left {
    padding: 0 16em 0 0;
}

.s-03-aco {
    background:rgba(var(--mak-rgb-light));
    border-radius:var(--mak-6);
}

details div {
    padding: 1.5em;
}

details div > * + * {
    margin-top: 1.5em;
}

details + details {
    margin-top: .5rem;
}

summary {
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary {
    padding: .75em 1em;
    cursor: pointer;
    position: relative;
    padding-left: calc(1.75rem + .75rem + .75rem);
}

summary:after {
    content: '';
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    height: 1px;
    left: 0;
    right: 0;
    background: linear-gradient(45deg, transparent, rgba(var(--mak-rgb-dark), 0.08), transparent);
}

summary:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .75rem;
    content: "\f078";
    width: 1.75rem;
    height: 1.75rem;
    background-color: #000;
    color: #FFF;
    font-family:'Font Awesome 6 Pro';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    line-height: var(--mak-icon);
    text-align: center;
    border-radius: var(--mak-4);
    background-image: linear-gradient(135deg, rgba(255,255,255,.14) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,.08) 75%);
    background-image: linear-gradient(135deg, rgba(255,255,255,.1) 50%, rgba(0,0,0,0) 50%);
    background-color: var(--mak-color-hover);
    color: var(--mak-colortwo);
}

details[open] summary:before {
    content: "\f078";
}

 /**
*
*  Section 04
*
*/

#s-04 {
    background-color: rgba(var(--mak-rgb-light));
    position: relative;
    overflow: hidden;
    padding: 4em;
}

.s-04-title {
    display:flex;
    width:100%;
    align-items:center;
    padding:0 0 1em 0;
    justify-content: center;
}

.mak-in-icon {
    margin:0 auto;
    background:transparent;
    color:var(--mak-color);
}

#s-04 .box {
    text-align:center;
    font-size:20px;
    font-weight:700;
}

#s-04 .row {
    gap:12px 0;
}

#s-04 .col-xs-12 {
   font-size:22px;
}

.b-box {
    background: rgba(var(--mak-body));
    padding: 20px;
    border-radius: var(--mak-6);
}

 /**
*
*  Section 05
*
*/

#s-05 {
    background: rgba(var(--mak-body));
    padding: 8em 0;
}

.s-05-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-05-container img {
    margin:10px 0;
    border-radius:var(--mak-4);
}

.s-05-center {
   text-align:center;
}

.s-05-left-title {
    font-family: var(--makF3);
    font-weight: bold;
    margin: 0;
    text-align:center;
}


 /**
*
*  Footer
*
*/

.g-slogan {
    font-size: 56px;
    font-family: var(--makF3);
    color: var(--mak-colortwo);
    margin-bottom: 33px;
    max-width: 100%;
}
.g-span-slogan {
    font-family: var(--makF3);
    letter-spacing: 0;
    font-weight: 900;
    text-transform:uppercase;
}
.g-special {
    color:var(--mak-color-hover);
}
.g-footer {
    margin-top:2em;
    background:var(--mak-footercl);
    color:var(--mak-colortwo);
}
.g-footer a, .g-footer a:hover, .g-footer span, .g-footer p, .g-footer bold, .g-footer ul, .g-footer li {
    color:var(--mak-colortwo);
}

.g-footermenu {
    display:flex;
}
.g-wrapfooter {
    padding:4em 1em 4em 1em;
    position:relative;
    overflow:hidden;
}
.g-footer a {
    text-decoration: none !important;
}
.g-socials {
    flex-shrink: 0;
    margin-right: 120px;
    position: relative;
    max-width: 500px;
    z-index: 2;
}
.g-menu-box {
    flex-grow: 1;
    column-count: 2;
    padding-top: 6px;
    position:relative;
    z-index:2;
    list-style:none;
}
.g-menu-box li {
    position: relative;
    font-size: 18px;
    font-family: var(--makF3);
    font-weight: 900;
}
.g-menu-box li:before {
    content: '';
    width: 6px;
    position: relative;
    left: 0;
    height: 6px;
    background:var(--mak-color-hover);
    display: inline-block;
    margin: 2px 15px;
}
.g-menu-box a {
    position:relative;
    transition:all 0.3s ease-in-out;
    z-index:2;
    font-weight:700;
}
.g-menu-box a:after {
    content: '';
    background: var(--mak-color-hover);
    display: inline-block;
    width: 100%;
    position: absolute;
    height: 0px;
    left: 0;
    bottom:0;
    transition:all 0.3s ease-in-out;
    z-index:0;
}
.g-menu-box a:hover:after {
    height:4px;
    transition:all 0.3s ease-in-out;
}

.special-text {
    color:var(--mak-color-hover) !important;
}

.special-background {
    background-color:var(--mak-color);
}

.g-footer ul {
    padding:0 !important;
}

 /**
*
*  Responsive
*
*/

@media screen and (max-width: 979px) {

    #mak-nav, .s-01-container, .s-03-container {
        align-items:flex-start;
        flex-direction:column;
    }

    .s-01-left, .mak-01-box, .s-03-left, .s-03-right {
        width:100%;
    }

    .s-03-left {
        padding:0;
    }

    #s-04 {
        padding:0;
    }

    #mak-nav {
        padding:0 0 4em 0;
    }

    .mak-nav-info-box {
       margin:8px 0;
    }

    .s-01-bold {
        margin-top:1.5em;
    }

    .s-02-container .box {
       text-align:center;
    }

    #mak-nav {
        align-items: center !important;
    }

    .mak-logo-container {
        display:block;
        text-align:center;
    }

    .mak-logo {
        padding: 0 0 2em 0;
    }

    .mak-nav-info-box {
        display: block !important;
        padding: 8px;
    }

    .g-footermenu {
        flex-direction:column;
    }

    .g-menu-box {
        column-count:1;
    }

    .ul {
        padding:0;
    }

}