body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;
    /* text-align: center; */
    user-select: none;
    background-color: #fff;
}

header{
    width: 100%;
    position: absolute;
    z-index: 21;
}
nav{
    width: 100%;
}

::-webkit-scrollbar {
    width: 6px;
    height: 3px;
    display: block;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #128C37;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: none;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #cadbe5;
}
.headers{
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;
    height: 62px;
}
.header-container{
    width: 70%;
    max-width: 1300px;
    padding: 30px 60px;

}
@media only screen and (max-width: 890px) {
    .header-container {
        width: 100%;
        padding: 16px 2px;
    }
}

.menu-dropdown {
    position: relative;
    display: inline-block;
}

.menu-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    /* min-width: 160px; */
    min-width: 280px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.menu-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    height: 36px !important;
}

.menu-dropdown-content a:hover {background-color: #ddd;}

.menu-dropdown:hover .menu-dropdown-content {display: block;}
  
/* @media only screen and (max-width: 920px) {
    .header-container {
        padding: 30px 30px;
    }
}

@media only screen and (max-width: 480px) {
    .header-container {
        padding: 30px 20px;
    }
} */

.contact-container{
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #0D4F21;
    z-index: 30;
    position: relative;
}
.contact-main-container{
    width: 70%;
    max-width: 1300px;
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    margin-bottom: 8px;
    padding-top: 10px;
}
@media only screen and (max-width: 725px) {
    .contact-main-container {
        width: 100%;
        justify-content: flex-start;
        padding-left: 12px;
    }
}
@media only screen and (max-width: 535px) {
    .contact-main-container {
        width: 100%;
        display: grid;
        justify-content: flex-start;
        padding-left: 12px;
    }
    .divider-container{
        display: none;
    }
}
.header-main-container{
    height: 28px;
    /* box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 0px 20px; */
    border-radius: 36px;
    /* background-color: #128C37; */
    position: relative;
    z-index: 2;
}
.logo-container{
    /* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */
    margin-left: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}
.menu-container{
    display: flex;
}
.menu-container ul{
    display: flex;
    gap: 12px;
    list-style-type: none;
}
@media only screen and (max-width: 920px) {
    .menu-container ul {
        display: none;
    }
}
.menu-container ul li a{
    color: black;
    text-decoration: none;
}
.menu-container ul li a{
    height: 52px;
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 0px 8px;
    font-weight: 400;
    &:hover{
        color: #fff;
        background-color: #128C37;
    }
}

  
.sr-only {
    position: absolute;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: transparent;
}
  
input {
    position: absolute;  
    opacity: 0;
    margin-top: 72vh;
    cursor: pointer;
}
  
label {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: solid 2px #128C37;
    border-radius: 999px;
    background-color: transparent;
    margin: 72vh 6px 0 6px;
    z-index: 2;
    cursor: pointer;
    transition-duration: .4s;
    box-shadow: 0 0 20px 0 #000;
}

input:checked + label{
    background-color: white;
}

/* input + label::after{
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' width='100' style='fill:white'%3E%3Cpath d='M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center 55%;
    background-size: 80px 80px;
    line-height: 100vh;
    transition: background-size 200ms;
    position: absolute;
    color: white;
    height: calc(100vh - 12px);
    width: 80px;
    top: 0;
    left: 0;
    right: 20;
    z-index: 20;
} */

input + label:hover::after {
    background-size: 90px 90px;
}

input:checked + label::after {
    background-image: none;
    width: 100vw;
    left: 0;
    z-index: 10;
}

input:checked + label + .slide ~ input + label::after {
    display: none;
}

input:checked + label + .slide + input + label::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' width='100' fill='white'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z' /%3E%3C/svg%3E");
    display: block;
    width: 80px;
    right: 0;
    left: auto;
}

input:focus + label{
    box-shadow: 0 0 0 2px teal, 0 0 18px white;
}

.slide {
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translateX(-100%);
    transition-duration: .4s;
    opacity: 1;
}

input:checked ~ .slide {
    /* transform: translateX(100%); */
}

input:checked + label + .slide {
    transform: translateX(0);
    opacity: 1;
}

.bg1{
    height: 640px;
    margin-top: 120px;
    background-image: url(./images/slide/slide1.jpg);
}
.bg2{
    height: 640px;
    margin-top: 120px;
    background-image: url(./images/slide/slide2.jpg);
}
.bg3{
    height: 640px;
    margin-top: 120px;
    background-image: url(./images/slide/slide3.jpg);
}
.bg4{
    height: 640px;
    margin-top: 120px;
    background-image: url(./images/slide/slide4.jpg);
}

.slide-container{
    animation: slide 12300ms infinite;	
}
/* .bg5{
    height: 640px;
    margin-top: 120px;
    background-image: url(https://images.unsplash.com/reserve/wPCyys8TPCHY3GXm2N2D_ssp_inthewoods_1.jpg?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=654d988a19f43ca9ac27f2eacbe2a554);
} */
@media only screen and (max-width: 890px) {
    .bg1{
        margin-top: 56px;
    }
    .bg2{
        margin-top: 56px;
    }
    .bg3{
        margin-top: 56px;
    }
    .bg4{
        margin-top: 56px;
    }
    .bg5{
        margin-top: 56px;
    }
}

.top-container{
    width: 100%;
    height: 100%;
    /* background-color: red; */
    padding-top: 84px;
}

.menu-links-cont{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(114, 114, 117, 0.8);
    margin-top: -36px;
    position: relative;
    padding: 6px 0px;
}

.menu-links-main-cont{
    width: 70%;
    height: 100%;
    position: relative;
    max-width: 1300px;
    color: #fff;
    display: flex;
    align-items: center;
    text-align: center;
    gap: 4px;
    font-weight: 400;
}
@media only screen and (max-width: 580px) {
    .menu-links-main-cont {
        display: flex;
        width: 100%;
        padding: 0px 12px;
    }
}
.menu-links-main-cont a{
    text-decoration: none;
    color: #fff;
    font-size: 12px;
}

.section-container{
    width: 100%;
    height: 100%;
}

.card-container{
    /* padding: 30px 0px; */
    /* margin-top: -4px; */
    width: 100%;
    display: flex;
    justify-content: center;
}
/* @media only screen and (max-width: 920px) {
    .card-container {
        padding: 30px 30px;
    }
}
@media only screen and (max-width: 480px) {
    .card-container {
        padding: 30px 20px;
    }
} */
.card-main-container{
    width: 70%;
    height: 100%;
    border-radius: 8px;
    position: relative;
    max-width: 1300px;
}
.card-product-container{
    display: flex;
    width: 100%;
    justify-content: center;
}
.card-product-main-container{
    display: flex;
    gap: 48px;
    width: 70%;
    max-width: 1300px;
}
@media only screen and (max-width: 580px) {
    .card-product-main-container {
        display: grid;
        width: 100%;
        padding: 0px 12px;
    }
}
.left-menu-container{
    width: 420px;
    /* border: 1px solid #128C37; */
}
@media only screen and (max-width: 580px) {
    .left-menu-container {
        width: 100%;
    }
}
.menu-title-container{
    background-color: #0d6929;
    padding: 12px;
}
.menu-item-container{
    padding-left: 12px;
    border-bottom: 1px solid #0d6929;
    border-right: 1px solid #0d6929;
    &:hover{
        background-color: rgba(18, 140, 55, 0.2) !important;
    }
}
.right-content-container{
    width: 100%;
}
@media only screen and (max-width: 580px) {
    .right-content-container {
        width: 100%;
    }
}

/* .card-main-container:hover .title-container{
    box-shadow: rgba(18, 140, 55, 0.24) 0px 2px 4px 0px, rgba(18, 140, 55, 0.64) 0px 2px 16px 0px;
    transition: .4s;
}

.card-main-container:hover .card-content-container{
    margin-top: -6px;
    box-shadow: rgba(18, 140, 55, 0.24) 0px 2px 4px 0px, rgba(18, 140, 55, 0.64) 0px 2px 16px 0px;
    transition: .4s;
}

.card-main-container:hover .footer-container{
    box-shadow: rgba(18, 140, 55, 0.24) 0px 2px 4px 0px, rgba(18, 140, 55, 0.64) 0px 2px 16px 0px;
    transition: .4s;
} */

.groups-container{
    display: flex;
    gap: 24px;
}
@media only screen and (max-width: 1080px) {
    .groups-container {
        display: grid;
    }
}
.group-container{
    width: 100%;
    margin-top: 60px;
}
.group-title{
    display: flex;
    justify-content: center;
    align-items: center;
}
.group-title span{
    font-size: 22px;
    font-weight: 600;
    margin-top: 10px;
}
.title-container{
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    /* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */
    border-radius: 36px;
    margin-top: -20px;
    /* margin-left: 8px; */
    background-color: #fff;
}

.card-content-container{
    height: 100%;
    padding: 24px;
    background-color: #fff;
    border-radius: 8px;
    /* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */
}

footer{
    width: 100%;
    height: 100%;
}

.footer-container{
    width: 100%;
    padding: 30px 0px 0px 0px;
    background-color: #0d4f21;
    display: flex;
    justify-content: center;
}
/* @media only screen and (max-width: 920px) {
    .footer-container {
        padding: 30px 30px 0px 30px;
    }
}
@media only screen and (max-width: 480px) {
    .footer-container {
        padding: 30px 20px 0px 20px;
    }
} */

.footer-main-container{
    width: 70%;
    max-width: 1300px;
    height: 100%;
    /* border-top-left-radius: 6px;
    border-top-right-radius: 6px; */
    position: relative;
    background-color: #0d4f21;
    display: flex;
    /* justify-content: space-between; */
    /* gap: 120px; */
    padding-top: 24px;
    /* box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; */
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
}
@media only screen and (max-width: 1660px) {
    .footer-main-container {
        gap: 60px;
    }
}

@media only screen and (max-width: 1470px) {
    .footer-main-container {
        gap: 20px;
    }
}

@media only screen and (max-width: 870px) {
    .footer-main-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 580px) {
    .footer-main-container {
        width: 100%;
        padding: 0px 12px;
    }
}
@media only screen and (max-width: 480px) {
    .footer-main-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.footer-main-container ul {
    margin-top: 10px;
    /* min-width: 300px; */
    width: 100%;
    max-width: 100%;
    padding: 0px;
}

.footer-main-container ul li {
    display: flex;
    align-items: center;
    text-align: start;
    cursor: pointer;
    padding: 8px;
    font-weight: 600;
    font-size: 12px;
}
    
.footer-main-container ul li a{
    color: #fff;
    text-decoration: none;
    &:hover{
        color: #3dce69;
    }
}

.footer-main-container ul .title {
    margin-bottom: 10px;
    font-size: 14px;
    color: #fff;
}

.footer-bottom-container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0px;
    background-color: #0D4F21;
    width: 100%;
    border-top: 1px solid #121212;
}
.footer-bottom-main-container{
    display: flex;
    justify-content: space-between;
    max-width: 1300px;
    width: 70%;
}
@media only screen and (max-width: 580px) {
    .footer-bottom-main-container {
        width: 100%;
        padding: 0px 12px;
    }
}
/* @media only screen and (max-width: 530px) {
    .footer-bottom-container {
        padding: 16px 8px;
    }
} */

.footer-bottom-container .left-title{
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.footer-bottom-container .right-title{
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.footer-bottom-container .right-title a{
    text-decoration: none;
    color: #fff;
    &:hover{
        color: #3dce69;
    }
}

.dropbtn {
    background-color: transparent;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
  
  /* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: none;
}
@media only screen and (max-width: 920px) {
    .dropdown {
        display: inline-block;
    }
}
  
  /* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    margin-left: -115px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
  
  /* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
  
  /* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
  
  /* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

h4{
    font-weight: 400;
}

.whatsapp-btn{
    position: fixed;
    right: 60px;
    bottom: 60px;
    width: 72px;
    height: 72px;
    background-color: #3dce69;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

@media only screen and (max-width: 960px) {
    .whatsapp-btn {
        right: 20px;
        bottom: 20px;
    }
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /* background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); */
}
  
  /* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

@media only screen and (max-width: 960px) {
    .modal-content {
        margin: 15% auto;
    }
}
  
  /* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}   
  
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.input-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    input{
        position: relative;
        width: 100% !important;
        height: 16px;
        opacity: 1 !important;
        margin-top: 0px !important;
        padding: 12px;
        cursor: text !important;
        border: 1px solid black;
    }
}

.inputs-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 32px;
    margin-top: 24px;
}
.inputs-main-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    input{
        position: relative;
        width: 100% !important;
        height: 16px;
        opacity: 1 !important;
        margin-top: 0px !important;
        padding: 12px;
        cursor: text !important;
        border: 1px solid black;
    }
}

.text-area-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 24px;
}

.gonter-btn{
    width: 320px;
    height: 48px;
    background-color: #0D4F21;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    border: none;
    margin-top: 24px;
    border-radius: 24px;
    &:hover{
        background-color: #00A950;
    }
}

@media only screen and (max-width: 920px) {
    .gonter-btn {
        width: 160px;
    }
    .inputs-container{
        gap: 8px;
    }
}

.teklif-btn{
    border: none;
    background-color: #FF4D00;
    color: #fff;
    padding: 6px 8px;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 12px;
    &:hover{
        background-color: #FF0000;
    }
}