@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --green: #5B8C51 
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: Poppins, sans-serif;
}
.nav-link:hover{
    color: darkgreen !important;
}
#user:hover, #earth:hover,#search:hover{
    color: darkgreen !important;
}
nav{
    position: absolute !important;
    width: 100%;
    top: 15px;
    left: 0;
    z-index:99;
}
.relative-home{
    position:relative;
}
.navbar {
    transition: all 0.6s ease-in-out; 
    padding: 15px 0;
}
.navbar.sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;
    backdrop-filter:blur(10px);
    box-shadow: 0 0 10px #dbdbe2;
    opacity: 1;
    .nav-link,#user, #earth,#search,#togglerButton{
        color: var(--green) !important;
        
    }
    #onlineshopdesktop,#suggestiondesktop{
        background-color: var(--green);
        color: white;
    }
    #onlineshopdesktop::after, #suggestiondesktop::after {
        content: '';
        width: 0; 
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1; 
        background: darkgreen; 
        transition: width 0.7s ease-in-out; 
    }
    #togglerButton{color: var(--green) !important;}
    #onlineshopdesktop:hover::after, #suggestiondesktop:hover::after {
        width: 100%; 
    }
    
    #onlineshopdesktop:hover, #suggestiondesktop:hover {
        color: #fff; 
    }
    .nav-link:hover,.nav-link:active{
        color: darkgreen !important;
    }
    #user:hover, #earth:hover,#search:hover{
        color: darkgreen !important;
    }
    #togglerButton i{color: var(--green);}
}
#earth{
    white-space: nowrap;
}
#carouselExampleFade{
    position: relative;
    margin: 15px 10px;
    border-radius: 40px;
    overflow: hidden;
    z-index: -10;
}
}
.speedbar{
    display:flex;
    gap:10px;
    align-items:center;
    background:#eee;
    margin-bottom:3rem;
    padding:1rem;
}
.navbar.sticky .logo img.d-none {
    display: block !important; 
  }
  
  .navbar.sticky .logo img:first-child {
    display: none; 
}
.logo{
    width: 100%;
    height: 100%;
    display: block;
}
.logo img{
    max-width: 150px;
    min-width: 80px;
    object-fit: contain;
    height: 45px;
    width: 100%;
}
.navbar .container{flex-wrap: unset;}
.nav-item a{color: #fff;}
#onlineshopdesktop, #suggestiondesktop {
    position: relative;
    display: inline-block;
    background-color: white;
    border-radius: 5px;
    padding: 10px 25px;
    color: var(--green); 
    border: none;
    font-size: 16px;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    transition: .3s all ease-in-out;
}

#offcanvasul{
    display: none;
}
#onlineshopdesktop::after, #suggestiondesktop::after {
    content: '';
    width: 0; 
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 
    background: var(--green); 
    transition: width 0.7s ease-in-out; 
}

#onlineshopdesktop:hover::after, #suggestiondesktop:hover::after {
    width: 100%; 
}

#onlineshopdesktop:hover, #suggestiondesktop:hover {
    color: #fff; 
}
.indicators{
    position: absolute;
    right: 20px;
    bottom: 50%;
    transform: translate(0,50%);
    color: #BEBDBC;
    z-index: 2;
}
.offnav{color: #000;}
.indicators button{
    border-radius: 50%;
    border: none;
    width: 10px !important;
    height: 10px !important;
    margin: 10px;
    background-color: #bebdbcd8;
}
.filtersection{gap: 10px;}

.indicators button:active{background-color:#666666 ;}
.hero img {
    top: 0;
    left: 0;
    width: 110%;
    height: 100vh;
    object-fit: cover;
    filter: brightness(0.6); 
    z-index: -1; 
    overflow: hidden;
}
.text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    padding: 0 30px;
}
.text h1{
    font-size: 30px ;
    font-weight: bold ;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #fff;
    text-align: left !important;
    width: 100%;
}
.text p{
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    width: 100%;
    text-align: left;
}
.row{
    row-gap: 10px;
}
.categories{
    display: flex;
    row-gap: 20px;
    flex-wrap: wrap;
}
.category{
    width: 100%;
    height: 245px;
    border-radius: 4px;
    overflow: hidden;
}
.category a{
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}
a{
    text-decoration: none;
}
.category a::after{
    content: '';
    position: absolute;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #78b187);
    width: 100%;
    height: 160px;
    bottom: 0;
    left: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.category a:hover::after{
    opacity: .5;
}
.category-logo{
    inset: unset !important;
    width: 90px !important;
    height: auto !important;
    left: 10px !important;
    top: 0px !important;
    z-index: 3;
}
.category a img{
    position: absolute;
    object-fit: contain;
    width: 100%;
    height: 100%;
    inset: 0;
}
.category a h5{
    font-weight: bold;
    position: relative;
    z-index: 2;
    bottom: 20px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #fff;
    transition: .3s all ease;
    font-size: 1em;
}
.section-title .banner{
    margin-bottom: 15px;
    padding: 10px 23px 10px 44px;
    border-radius: 30px;
    width: fit-content;
    position: relative;
    background: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    letter-spacing: .5px;
    color: #404a3d;
    text-transform: capitalize;
}
.banner::before{
    content: '🍀';
    position: absolute;
    left: 10px;
    top: 50%;
    font-size: 28px;
    color: #5b8c51;
    transform: translateX(0%) translateY(-50%);
}
.category-filter{
    position: relative;
}
.filter{
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: 10px 30px;
    background: var(--green);
    color: #fff;
    border: none;
    cursor: pointer;
}
.category-filter ul{
    position: absolute;
    display: none;
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    max-height: 300px;
    overflow-y: auto;
    border-radius: 10px;
    z-index: 3;
    box-shadow: rgba(100,100,111,0.2) 0px 7px 29px 0px;
}
.category-filter ul::-webkit-scrollbar-button {
    display: none;
}

.category-filter ul::-webkit-scrollbar {
    width: 3px;
    height: 3px;  
}
.category-2{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:15px;
}
.category-2 .subcat_card {
    height:350px;
    overflow:hidden;
    transition:.3s all ease-in-out;
    width:380px;
    position:relative;
    filter: brightness(0.75);
    background:rgba(0, 0, 0, 0.25);
    border-radius:4px;
    
}
.subcat_text{
    position:absolute;
    top:50%;
    left:50%;
    z-index:10;
    filter: brightness(1);
    color:#fff;
    transform:translate(-50%,-50%);
}
.category-2 .subcat_card img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.category-2 h4{
    position:absolute;
    z-index:10;
}
.category-filter ul::-webkit-scrollbar-track {
    background: #D0F0C5;  
}

.category-filter ul::-webkit-scrollbar-thumb {
    background: var(--green);  
    border-radius: 10px;
}
.swiper-container {
    position: relative; 
    width: 100%;
    height: 380px;
}
.swiper-container2 { 
    width: 100%;
    height: 150px;
    overflow: hidden;
}
.swiper-container4 { 
    overflow: hidden;
}
.maincontainer{
    display: flex;
}
.category-6{
    display:flex;
}
.category-4,.category-6{
    flex-wrap:wrap;
}
.category-5,.category-9{
    display:flex;
    flex-direction:column;
}
.category-9 ul{z-index:2;}
.category-9 div{
    padding:15px;
}
.category-5 .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 15px;
    overflow: hidden;
    transition:0.3s ease-in-out;
}
.category-5 .swiper-slide:hover a{
    color: var(--green);
    background:transparent;
}
.category-5 .swiper-slide:hover #arrow{
    background-color: var(--green)!important;
    color: #fff;
}
.category-5 .swiper-slide a{
    font-weight: bold;
    background:transparent;
    font-size: 22px;
    text-align: left;
    color: #666;
    margin: 0;
    padding: 0;
}
.category-5 #arrow{
    background-color: #eddd5e !important;
}
.category-5 .swiper-slide span{
    display: flex;
    justify-content:start;
    padding: 15px 0 ;
    color: var(--green);
    font-size: 16px;
}
.category-5 .swiper-slide{
    width:100%;
    padding:0 15px;
    border-radius: 15px; 
    background-color:transparent;
    text-align:left;
}
#blogs .swiper-slide {
    border-radius: 15px; 
    padding: 0;
    background-color:transparent;
    text-align:left;
}
#blogs .swiper-slide a{
    font-weight: bold;
    background:transparent;
    font-size: 22px;
    text-align: left;
    color: #666;
    margin: 0;
    padding: 0;
}
#blogs .swiper-slide:hover a{
    color: var(--green);
}
#blogs .swiper-slide:hover #arrow{
    background-color: var(--green);
    color: #fff;
}
#blogs .swiper-slide:hover img{scale: 1.1;}
.category-5 .swiper-slide:hover img{scale: 1.1;}

.imghome{
    width: 100%;
    position:relative;
    height: 300px;
    border-radius: 20px;
    overflow:hidden;
}
.w-80{width: 80%;}
.w-300{width:300px;}
#mehsullar .swiper-slide{
    background-color:#f1f1f1;
}
#blogs .swiper-slide span{
    display: flex;
    justify-content:start;
    padding: 15px 0 ;
    color: var(--green);
    font-size: 16px;
}
#arrow{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eddd5e !important;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: .4s ease-in-out;
}
#blogs .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 15px;
    transition: .3s ease-in-out;
}
.offcanvas{
    height: 100vh;
}
.offcanvas li{
    border-top: 1px solid #83838390;
}
.offcanvas li a{
    font-weight: bold;
    display: inline-block;
    color: #000;
    padding: 8px 0;
}
.offcanvas #offcanvasonline{
    background-color: var(--green);
    color: #fff;
    width: 100%;
    text-align: center;
    border-radius: 10px;
}
.offcanvas #border{border: none;}
.offcanvas #offcanvassuggestion{
    background-color: black;
    color: #fff;
    width: 100%;
    text-align: center;
    border-radius: 10px;
    padding: 17px 0;
    margin-top: 15px;
}
.image-container-cat img{
    width:100%;
    height:100%;
    object-fit: contain;
}
.image-container-cat{
    height:300px;
}
.category-10{
    display:flex;
    gap:40px;
    flex-wrap:wrap;
    justify-content:center;
}
.certif{
    height:300px;
    width:300px;
    box-shadow: 0 0 10px #666;
    border: 10px solid #e1e1e1;
}
.certif img{
    width:100%;
    height:100%;
    object-fit:cover
}



.swiper-slide{
    text-align:center;
    align-items: center;
    border-radius: 10px;
    padding: 10px;
}
.swiper-slide h5{
    padding: 0 20px;
    font-size: 18px;
}
.swiper-slide a{
    display: inline-block;
    text-align: center;
    color: #fff;
    background-color: var(--green);
    border-radius: 20px;
    width: 90%;
    border: none;
    margin: 10px 0;
    padding: 10px 0;
    font-size: 1rem;
}

.swiper-slide:hover a{
    background-color: #EDDD5E;
}
.swiper-button-prev, .swiper-button-next {
    
    color: var(--green);  
    background-color: #fff; 
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    
}
.swiper-button-prev::after,  .swiper-button-next::after {
    font-size: 15px !important;
}
#swiperslide2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    height: 150px;
    align-items: center;
    border: 2px solid #e0e0e0; 
    width: 100%;
    overflow: hidden;
    padding: 20px;
    transition: .3s;
}
#swiperslide2 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: hidden;
}

.swiper-button-prev, .swiper-button-next {
    
    color: var(--green);  
    background-color: #fff; 
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    
}
.swiper-button-prev::after,  .swiper-button-next::after {
    font-size: 15px !important;
}
#discover-us{
    position: relative;
    padding: 70px 0;
    overflow: hidden;
}
.discover-us .container{
    position: relative;
    z-index: 2;
}
.discover-us .row{
    row-gap: 20px;
    align-items: center;
}
.advantages-area{
    margin-top: 20px;
}
.advantages-area .row{
    align-items: unset;
}
.discover-us-bg{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform:translateX(-50%);
    border-radius: 10px;
    height: 100%;
    background: var(--green);
    width: 100%;
    z-index: 1;
}
.aboutAdvantagesNavigation li{
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-wrap: wrap;
    justify-content: center;
    background-color: transparent;
    row-gap: 20px;
    margin-bottom: 10px;
    padding: 20px;
    transition: 0.4s ease-in-out;
    border-bottom: 1px solid rgba(255, 255, 255, 0.491);
}
.aboutAdvantagesFigure{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
.aboutImagesGallery figure{
    width: 100%;
    height: 300px;
    
}
.aboutAdvantagesFigure i{
    color: #fff;
    margin-right: 10px;
    transition: 0.3s ease-in-out;
    font-size: 20px;
}
.aboutAdvantagesArticle{
    width: 100%;
}
.aboutImagesGallery img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.advantages-icons-slide{
    display: none;
}
.aboutAdvantagesArticle p{
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    width: 100%;
    color: #ffffffa4;
    text-transform: capitalize;
    overflow: hidden;
    opacity: 0.7s;
    transition: 0.3s ease-in-out;
}
.aboutAdvantagesNavigation li.active {
    background-color: white;
    border-radius: 20px;
    
    
}
.aboutAdvantagesNavigation li.active h5,.aboutAdvantagesNavigation li.active p, .aboutAdvantagesNavigation li.active i{color: var(--green);}
.aboutAdvantagesNavigation li:last-child{border: none;}
.aboutAdvantagesFigure h5{
    font-weight: bold;
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    text-transform: capitalize;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    margin-bottom: 0;
}
.section-padding{padding:30px 0}
.section-description p{
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
    padding: 0 20px;
}
.services-card {
    position: relative;
    height: 350px;
    color: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
  }
  
  .services-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
  }
  
  .services-card h4 {
    position: absolute;
    z-index: 2;
    font-size: 35px;
    margin: 0 0 20px;
    transition: 0.3s ease-out;
    font-weight: bold;
  }
  
  .services-card p {
    position: relative;
    z-index: 2;
    font-size: 18px;
    text-align: center;
    margin: 0;
    padding: 0 35px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    opacity: 0;
    transform: translateY(50%);
    transition: transform 0.6s ;
  }
  
  .services-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    transition: background 0.3s ease-in-out;
  }
  
  .services-card:hover img {
    transform: scale(1.1);
  }
  
  .services-card:hover h4 {
    transform: translateY(-500%);
    opacity: 0;
  }
  
  .services-card:hover p {
    transform: translateY(0);
    opacity: 1;
  }
  
  .services-card:hover::after {
    background: rgba(0, 0, 0, 0.5);
  }
.filter-list li img{
    object-fit: contain;
}
.brends img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 10;
    
}
#swiperslide2:hover{
    border-color: var(--green);
}
.brends:hover{
    background-color: #e1e1e1;
}
.brends{
    background-color: #fafbfd;
    border-radius: 15px;
    height: 120px;
    padding: 15px;
    transition: .3s;
}
.contact-action{
    padding: 40px 0 ;
    width: 98%;
    border-radius: 20px;
    position: relative;
    margin: 15px auto;
    background: url('/img/banner.webp') center/cover;
}
.contact-action::after{
    content: '';
    position: absolute;
    top: 0;
    inset: 0;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);

}
.padding{
    padding: 0 0 0 20px;
}
.contact-action .row{
    z-index: 2;
    padding: 0 10px;
}

.contact-action-title h3{
    color: #fff;
    line-height: 1.2;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.contact-action-title p{
    font-size: 1em;
    line-height: 1.2;
    color: #fff;
}
.contact-action .row{
    row-gap: 20px;
    position: relative;
    justify-content: space-between;
}
#sendmail input{
    border-radius: 1.2rem;
    display: block;
    margin: 10px 0;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    outline: none;
    color: #212529;
    background-color: #fff;
    border: none;
    height: 60px;
    transition: border-color .15s ease-in-out box-shadow .15s ease-in-out;
}
.contactus{
    border-radius:20px;
    background-color: var(--green);
    gap:5%;
    width:100%;
    overflow:hidden;
}
.form{
    border:1px solid var(--green);
    border-radius:20px;
    margin-top:15px;
    overflow:hidden;
}
#sendmail button{
    background-color: #eddd5e;
    padding: 13px 27px;
    color: var(--green);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 400;
    line-height: 1.5;
    border: 1px solid transparent;
    font-size: 1rem;
    transition: color .15s ease-in-out, 
                background-color .15s ease-in-out, 
                border-color .15s ease-in-out, 
                box-shadow .15s ease-in-out;
}
#sendmail button:hover{
    color: #fff;
    background-color: var(--green);
    border-color: var(--green);
}
.slide-bg{
    background: transparent;
}
.footer-head{
    padding: 20px 0;
}
.footer-head .row, .footer-right .row{
    row-gap: 20px;
}
.footer-logo a{
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    align-items: center;
    width: fit-content;
    height: fit-content;
}
ul{
    list-style: none;
}
.footer-logo a img{
    width: 150px;
    height: auto;
}
.footer-left-content{
    margin-top: 20px;
}
.footer-social-list{
    display: flex;
    align-items: center;
    padding: 0;
}
.footer-social-list i{
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    width:  40px;
    height: 40px;
    background-color: #F8F7F0;
    border-radius: 50%;
    transition: .4s ease-in-out;
    margin: 5px;
}
.section-description p{
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
}


.footer-right-content i{
    color: var(--green);
}
.footer-right-links a:hover{color: var(--green);}
.nav-item span{color: #eddd5e; padding: 5px;}
.footer-head a,.footer-head span{
    color: #666;
}
#saat{margin: 0;}


.footer-bottom-wrapper{
    width: 100%;
    padding: 30px 0;
    border-top: 1px solid rgba(64, 74, 61, 0.2);
}
.footer-bottom-wrapper .row{
    row-gap: 20px;
    flex-wrap: wrap-reverse;
    
}
.copyright{
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 16px;
    color: var(--green);
}
.copyright a{
    margin-left: 5px;
    text-decoration: underline;
    font-size: 1em;
    color: #404a3d;
    font-weight: bold;
    transition: .3s ease-in-out;
}
.footer {
    background-image: url('../img/footer-bg-img_cleared.webp');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    background-attachment: scroll;
}
.footer-social-list i:hover{
    color: #F8F7F0;
    background-color: var(--green);
}
@media only screen and (min-width:576px){
    .contact-action-title h3{
        font-size: 35px;
        
    }
    .category-5{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .aboutImagesGallery{
        position: relative;
        border-radius: 20px;
    }
    .aboutImagesGallery figure{
        clip-path: polygon(3.384% 0.182%, 3.384% 0.182%, 3.002% 0.341%, 2.634% 0.546%, 2.282% 0.793%, 1.948% 1.081%, 1.634% 1.408%, 1.341% 1.773%, 1.071% 2.172%, 0.826% 2.604%, 0.608% 3.067%, 0.418% 3.558%, 0.317% 3.841%, 0.317% 3.841%, 0.271% 3.982%, 0.229% 4.125%, 0.192% 4.27%, 0.16% 4.418%, 0.133% 4.567%, 0.111% 4.717%, 0.094% 4.87%, 0.082% 5.023%, 0.074% 5.177%, 0.072% 5.332%, 0.072% 94.749%, 0.072% 94.749%, 0.074% 94.904%, 0.082% 95.058%, 0.094% 95.211%, 0.111% 95.363%, 0.133% 95.514%, 0.16% 95.663%, 0.192% 95.811%, 0.229% 95.956%, 0.271% 96.099%, 0.317% 96.239%, 0.418% 96.529%, 0.418% 96.529%, 0.563% 96.907%, 0.725% 97.271%, 0.903% 97.617%, 1.096% 97.946%, 1.303% 98.257%, 1.524% 98.548%, 1.759% 98.819%, 2.006% 99.069%, 2.264% 99.296%, 2.534% 99.501%, 2.74% 99.642%, 2.74% 99.642%, 2.84% 99.707%, 2.941% 99.765%, 3.044% 99.816%, 3.148% 99.861%, 3.254% 99.899%, 3.361% 99.93%, 3.468% 99.954%, 3.577% 99.972%, 3.686% 99.982%, 3.796% 99.986%, 39.641% 100.047%, 39.641% 100.047%, 50.412% 100.059%, 58.89% 100.066%, 65.358% 100.059%, 70.1% 100.03%, 73.401% 99.968%, 75.545% 99.866%, 76.815% 99.714%, 77.497% 99.504%, 77.874% 99.227%, 78.23% 98.874%, 78.23% 98.874%, 78.354% 98.752%, 78.476% 98.625%, 78.595% 98.493%, 78.71% 98.357%, 78.823% 98.215%, 78.933% 98.069%, 79.039% 97.918%, 79.142% 97.762%, 79.242% 97.603%, 79.339% 97.438%, 79.339% 97.438%, 79.571% 96.966%, 79.76% 96.509%, 79.912% 96.012%, 80.031% 95.421%, 80.122% 94.681%, 80.19% 93.738%, 80.24% 92.537%, 80.277% 91.024%, 80.306% 89.145%, 80.332% 86.844%, 80.332% 86.844%, 80.36% 84.482%, 80.388% 82.593%, 80.425% 81.112%, 80.481% 79.973%, 80.565% 79.11%, 80.685% 78.459%, 80.851% 77.953%, 81.072% 77.527%, 81.357% 77.116%, 81.715% 76.654%, 81.715% 76.654%, 82.045% 76.223%, 82.339% 75.882%, 82.654% 75.619%, 83.049% 75.422%, 83.579% 75.282%, 84.303% 75.185%, 85.278% 75.122%, 86.561% 75.08%, 88.21% 75.048%, 90.282% 75.016%, 96.022% 74.931%, 96.022% 74.931%, 96.241% 74.92%, 96.46% 74.895%, 96.677% 74.856%, 96.892% 74.804%, 97.106% 74.737%, 97.316% 74.657%, 97.525% 74.563%, 97.73% 74.456%, 97.932% 74.335%, 98.13% 74.201%, 98.13% 74.201%, 98.13% 74.201%, 98.334% 74.056%, 98.523% 73.909%, 98.698% 73.761%, 98.861% 73.611%, 99.012% 73.458%, 99.151% 73.302%, 99.28% 73.141%, 99.399% 72.975%, 99.51% 72.803%, 99.613% 72.624%, 99.613% 72.624%, 99.613% 72.624%, 99.698% 72.448%, 99.776% 72.264%, 99.844% 72.075%, 99.904% 71.88%, 99.955% 71.681%, 99.997% 71.477%, 100.03% 71.271%, 100.053% 71.061%, 100.068% 70.849%, 100.072% 70.635%, 100.045% 38.152%, 100.003% 5.328%, 100.003% 5.328%, 100% 5.173%, 99.993% 5.02%, 99.98% 4.867%, 99.963% 4.715%, 99.94% 4.565%, 99.913% 4.416%, 99.881% 4.269%, 99.844% 4.124%, 99.803% 3.982%, 99.757% 3.841%, 99.656% 3.55%, 99.656% 3.55%, 99.51% 3.172%, 99.348% 2.81%, 99.17% 2.464%, 98.977% 2.136%, 98.77% 1.826%, 98.548% 1.536%, 98.314% 1.265%, 98.067% 1.017%, 97.809% 0.79%, 97.539% 0.586%, 97.338% 0.445%, 97.338% 0.445%, 97.238% 0.38%, 97.136% 0.322%, 97.033% 0.27%, 96.928% 0.225%, 96.822% 0.187%, 96.715% 0.156%, 96.606% 0.132%, 96.497% 0.115%, 96.388% 0.104%, 96.278% 0.101%, 50.325% 0.061%, 50.325% 0.061%, 42.799% 0.062%, 35.641% 0.066%, 28.948% 0.072%, 22.818% 0.08%, 17.351% 0.091%, 12.644% 0.104%, 8.795% 0.12%, 5.903% 0.138%, 4.067% 0.159%, 3.384% 0.182%);
        overflow: unset;
        border-radius: unset;
        width: 100%;
        height: 380px;
        
    }
    .advantages-icons-slide{
        position: absolute;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        border-radius: 20px;
        right: 10px;
        bottom: 20px;
        background-color: #EDDD5E !important;
    }
    .aboutAdvantagesArticle p{
        text-align: center;
        font-size: 15px;
        line-height: 1.2;
        width: 100%;
        color: #fff;
        text-transform: capitalize;
        overflow: hidden;
        opacity: 0.7s;
        transition: 0.3s ease-in-out;
    }
    .aboutImagesGallery figure{
        width: 410px;
        height: 300px;
        
    }

} 
@media only screen and (min-width:768px){
    .forminput{
        display: flex;
        gap: 10px;
        margin: -10px 0;
    }
    
    #maintext{font-size: 46px;}
    .footer-bottom-wrapper{
        flex: 0 0 auto;
        width: 100%;
    }
    footer .col-lg-6{
        flex: 0 0 auto;
        width: 50%;
    }
    .category-5 .swiper-slide{
        width:50%;
        border-radius: 15px; 
        background-color:transparent;
        text-align:left;
    }
    .category-9{
        display:flex;
        flex-direction:row;
    }
    .category-9 div{
        width:50%;
        padding:15px;
    }
    .category-6{
        display:flex;
        flex-direction:row;
    }
    #swiperslide2{width:20%;}
    .siteby-content{float: right;}
    .advantages-icons-slide{
        position: absolute;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        border-radius: 20px;
        right: 10px;
        bottom: 20px;
        background-color: #EDDD5E !important;
    }
    .aboutImagesGallery figure{
        width: 500px;
        height: 360px;
        
    }
    .contactus{
        border-radius:20px;
        background-color: var(--green);
        width:100%;
        overflow:hidden;
    }
    .form{
        width:100%;
        border:1px solid var(--green);
        border-radius:20px;
        margin-top:15px;
        overflow:hidden;
        text-align:center;
    }
    .form input{
        text-align:center;
    }
@media only screen and (min-width:992px){
    #maintext{font-size: 60px;}
    .category-filter button {
        display: none;
    }
    .category-filter ul{
        position: unset;
        display: block;
        max-height: 515px;
        margin: 0;
        overflow-y: auto;
        white-space: nowrap;
    }
    .category-5 .swiper-slide{
        width:33%;
        border-radius: 15px; 
        background-color:transparent;
        text-align:left;
    }
    
    .category-filter ul li{
        padding: 10px 5px;
        transition: .3s ease-in-out;
        color: var(--green);
        font-size: 13px;
        overflow: hidden;
        line-height: 1.2;
        text-align: start;
        cursor: pointer;
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .nav-link {
        font-size: 14px;
    }
    #onlineshopdesktop,#suggestiondesktop{
        font-size: 12px;
        text-align: center;
        padding: 5px 8px;
    }
    .aboutAdvantagesNavigation li{
        flex-wrap: unset;
        justify-content: unset;
    }
    .aboutAdvantagesArticle p{
        text-align: unset;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 2;
    }
    .section-title .banner{
        font-size: 28px;
    }
    .aboutAdvantagesFigure h5{
        text-align: left !important;
    }
    .advantages-icons-slide{
        position: absolute;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        border-radius: 20px;
        right: 5px;
        bottom: 10px;
        background-color: #EDDD5E !important;
    }
    .aboutAdvantagesSwiper{
        height: 477px;
        height: auto;
    }
    .aboutImagesGallery figure{
        clip-path: polygon(3.384% 0.182%, 3.384% 0.182%, 3.002% 0.341%, 2.634% 0.546%, 2.282% 0.793%, 1.948% 1.081%, 1.634% 1.408%, 1.341% 1.773%, 1.071% 2.172%, 0.826% 2.604%, 0.608% 3.067%, 0.418% 3.558%, 0.317% 3.841%, 0.317% 3.841%, 0.271% 3.982%, 0.229% 4.125%, 0.192% 4.27%, 0.16% 4.418%, 0.133% 4.567%, 0.111% 4.717%, 0.094% 4.87%, 0.082% 5.023%, 0.074% 5.177%, 0.072% 5.332%, 0.072% 94.749%, 0.072% 94.749%, 0.074% 94.904%, 0.082% 95.058%, 0.094% 95.211%, 0.111% 95.363%, 0.133% 95.514%, 0.16% 95.663%, 0.192% 95.811%, 0.229% 95.956%, 0.271% 96.099%, 0.317% 96.239%, 0.418% 96.529%, 0.418% 96.529%, 0.563% 96.907%, 0.725% 97.271%, 0.903% 97.617%, 1.096% 97.946%, 1.303% 98.257%, 1.524% 98.548%, 1.759% 98.819%, 2.006% 99.069%, 2.264% 99.296%, 2.534% 99.501%, 2.74% 99.642%, 2.74% 99.642%, 2.84% 99.707%, 2.941% 99.765%, 3.044% 99.816%, 3.148% 99.861%, 3.254% 99.899%, 3.361% 99.93%, 3.468% 99.954%, 3.577% 99.972%, 3.686% 99.982%, 3.796% 99.986%, 39.641% 100.047%, 39.641% 100.047%, 50.412% 100.059%, 58.89% 100.066%, 65.358% 100.059%, 70.1% 100.03%, 73.401% 99.968%, 75.545% 99.866%, 76.815% 99.714%, 77.497% 99.504%, 77.874% 99.227%, 78.23% 98.874%, 78.23% 98.874%, 78.354% 98.752%, 78.476% 98.625%, 78.595% 98.493%, 78.71% 98.357%, 78.823% 98.215%, 78.933% 98.069%, 79.039% 97.918%, 79.142% 97.762%, 79.242% 97.603%, 79.339% 97.438%, 79.339% 97.438%, 79.571% 96.966%, 79.76% 96.509%, 79.912% 96.012%, 80.031% 95.421%, 80.122% 94.681%, 80.19% 93.738%, 80.24% 92.537%, 80.277% 91.024%, 80.306% 89.145%, 80.332% 86.844%, 80.332% 86.844%, 80.36% 84.482%, 80.388% 82.593%, 80.425% 81.112%, 80.481% 79.973%, 80.565% 79.11%, 80.685% 78.459%, 80.851% 77.953%, 81.072% 77.527%, 81.357% 77.116%, 81.715% 76.654%, 81.715% 76.654%, 82.045% 76.223%, 82.339% 75.882%, 82.654% 75.619%, 83.049% 75.422%, 83.579% 75.282%, 84.303% 75.185%, 85.278% 75.122%, 86.561% 75.08%, 88.21% 75.048%, 90.282% 75.016%, 96.022% 74.931%, 96.022% 74.931%, 96.241% 74.92%, 96.46% 74.895%, 96.677% 74.856%, 96.892% 74.804%, 97.106% 74.737%, 97.316% 74.657%, 97.525% 74.563%, 97.73% 74.456%, 97.932% 74.335%, 98.13% 74.201%, 98.13% 74.201%, 98.13% 74.201%, 98.334% 74.056%, 98.523% 73.909%, 98.698% 73.761%, 98.861% 73.611%, 99.012% 73.458%, 99.151% 73.302%, 99.28% 73.141%, 99.399% 72.975%, 99.51% 72.803%, 99.613% 72.624%, 99.613% 72.624%, 99.613% 72.624%, 99.698% 72.448%, 99.776% 72.264%, 99.844% 72.075%, 99.904% 71.88%, 99.955% 71.681%, 99.997% 71.477%, 100.03% 71.271%, 100.053% 71.061%, 100.068% 70.849%, 100.072% 70.635%, 100.045% 38.152%, 100.003% 5.328%, 100.003% 5.328%, 100% 5.173%, 99.993% 5.02%, 99.98% 4.867%, 99.963% 4.715%, 99.94% 4.565%, 99.913% 4.416%, 99.881% 4.269%, 99.844% 4.124%, 99.803% 3.982%, 99.757% 3.841%, 99.656% 3.55%, 99.656% 3.55%, 99.51% 3.172%, 99.348% 2.81%, 99.17% 2.464%, 98.977% 2.136%, 98.77% 1.826%, 98.548% 1.536%, 98.314% 1.265%, 98.067% 1.017%, 97.809% 0.79%, 97.539% 0.586%, 97.338% 0.445%, 97.338% 0.445%, 97.238% 0.38%, 97.136% 0.322%, 97.033% 0.27%, 96.928% 0.225%, 96.822% 0.187%, 96.715% 0.156%, 96.606% 0.132%, 96.497% 0.115%, 96.388% 0.104%, 96.278% 0.101%, 50.325% 0.061%, 50.325% 0.061%, 42.799% 0.062%, 35.641% 0.066%, 28.948% 0.072%, 22.818% 0.08%, 17.351% 0.091%, 12.644% 0.104%, 8.795% 0.12%, 5.903% 0.138%, 4.067% 0.159%, 3.384% 0.182%);
        width: 100%;
        height: 380px;
        margin: 0;
    }
    
    
}
@media only screen and (min-width:1200px){
    #onlineshopdesktop, #suggestiondesktop {
        position: relative;
        display: inline-block;
        background-color: white;
        border-radius: 5px;
        padding: 8px 14px;
        color: var(--green); 
        border: none;
        font-size: 16px;
        overflow: hidden;
        cursor: pointer;
        z-index: 1;
        transition: .3s all ease-in-out;
        white-space: nowrap;
    }
    
    #onlineshopdesktop::after, #suggestiondesktop::after {
        content: '';
        width: 0; 
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1; 
        background: var(--green); 
        transition: width 0.7s ease-in-out; 
    }
    
    #onlineshopdesktop:hover::after, #suggestiondesktop:hover::after {
        width: 100%; 
    }
    
    #onlineshopdesktop:hover, #suggestiondesktop:hover {
        color: #fff; 
    }
    .nav-link {
        font-size: 16px;
    }
    .advantages-icons-slide{
        position: absolute;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        border-radius: 20px;
        right: 15px;
        bottom: 10px;
        background-color: #EDDD5E !important;
    }
    .category-2,.category-4{
        gap:30px;
    }
    
}
@media only screen and (min-width:1400px){
    .advantages-icons-slide{
        position: absolute;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        border-radius: 20px;
        right: 120px;
        bottom: 10px;
        background-color: #EDDD5E !important;
    }
    .aboutAdvantagesFigure h5{
        text-align: left !important;
    }
    .aboutImagesGallery figure{
        clip-path: polygon(3.384% 0.182%, 3.384% 0.182%, 3.002% 0.341%, 2.634% 0.546%, 2.282% 0.793%, 1.948% 1.081%, 1.634% 1.408%, 1.341% 1.773%, 1.071% 2.172%, 0.826% 2.604%, 0.608% 3.067%, 0.418% 3.558%, 0.317% 3.841%, 0.317% 3.841%, 0.271% 3.982%, 0.229% 4.125%, 0.192% 4.27%, 0.16% 4.418%, 0.133% 4.567%, 0.111% 4.717%, 0.094% 4.87%, 0.082% 5.023%, 0.074% 5.177%, 0.072% 5.332%, 0.072% 94.749%, 0.072% 94.749%, 0.074% 94.904%, 0.082% 95.058%, 0.094% 95.211%, 0.111% 95.363%, 0.133% 95.514%, 0.16% 95.663%, 0.192% 95.811%, 0.229% 95.956%, 0.271% 96.099%, 0.317% 96.239%, 0.418% 96.529%, 0.418% 96.529%, 0.563% 96.907%, 0.725% 97.271%, 0.903% 97.617%, 1.096% 97.946%, 1.303% 98.257%, 1.524% 98.548%, 1.759% 98.819%, 2.006% 99.069%, 2.264% 99.296%, 2.534% 99.501%, 2.74% 99.642%, 2.74% 99.642%, 2.84% 99.707%, 2.941% 99.765%, 3.044% 99.816%, 3.148% 99.861%, 3.254% 99.899%, 3.361% 99.93%, 3.468% 99.954%, 3.577% 99.972%, 3.686% 99.982%, 3.796% 99.986%, 39.641% 100.047%, 39.641% 100.047%, 50.412% 100.059%, 58.89% 100.066%, 65.358% 100.059%, 70.1% 100.03%, 73.401% 99.968%, 75.545% 99.866%, 76.815% 99.714%, 77.497% 99.504%, 77.874% 99.227%, 78.23% 98.874%, 78.23% 98.874%, 78.354% 98.752%, 78.476% 98.625%, 78.595% 98.493%, 78.71% 98.357%, 78.823% 98.215%, 78.933% 98.069%, 79.039% 97.918%, 79.142% 97.762%, 79.242% 97.603%, 79.339% 97.438%, 79.339% 97.438%, 79.571% 96.966%, 79.76% 96.509%, 79.912% 96.012%, 80.031% 95.421%, 80.122% 94.681%, 80.19% 93.738%, 80.24% 92.537%, 80.277% 91.024%, 80.306% 89.145%, 80.332% 86.844%, 80.332% 86.844%, 80.36% 84.482%, 80.388% 82.593%, 80.425% 81.112%, 80.481% 79.973%, 80.565% 79.11%, 80.685% 78.459%, 80.851% 77.953%, 81.072% 77.527%, 81.357% 77.116%, 81.715% 76.654%, 81.715% 76.654%, 82.045% 76.223%, 82.339% 75.882%, 82.654% 75.619%, 83.049% 75.422%, 83.579% 75.282%, 84.303% 75.185%, 85.278% 75.122%, 86.561% 75.08%, 88.21% 75.048%, 90.282% 75.016%, 96.022% 74.931%, 96.022% 74.931%, 96.241% 74.92%, 96.46% 74.895%, 96.677% 74.856%, 96.892% 74.804%, 97.106% 74.737%, 97.316% 74.657%, 97.525% 74.563%, 97.73% 74.456%, 97.932% 74.335%, 98.13% 74.201%, 98.13% 74.201%, 98.13% 74.201%, 98.334% 74.056%, 98.523% 73.909%, 98.698% 73.761%, 98.861% 73.611%, 99.012% 73.458%, 99.151% 73.302%, 99.28% 73.141%, 99.399% 72.975%, 99.51% 72.803%, 99.613% 72.624%, 99.613% 72.624%, 99.613% 72.624%, 99.698% 72.448%, 99.776% 72.264%, 99.844% 72.075%, 99.904% 71.88%, 99.955% 71.681%, 99.997% 71.477%, 100.03% 71.271%, 100.053% 71.061%, 100.068% 70.849%, 100.072% 70.635%, 100.045% 38.152%, 100.003% 5.328%, 100.003% 5.328%, 100% 5.173%, 99.993% 5.02%, 99.98% 4.867%, 99.963% 4.715%, 99.94% 4.565%, 99.913% 4.416%, 99.881% 4.269%, 99.844% 4.124%, 99.803% 3.982%, 99.757% 3.841%, 99.656% 3.55%, 99.656% 3.55%, 99.51% 3.172%, 99.348% 2.81%, 99.17% 2.464%, 98.977% 2.136%, 98.77% 1.826%, 98.548% 1.536%, 98.314% 1.265%, 98.067% 1.017%, 97.809% 0.79%, 97.539% 0.586%, 97.338% 0.445%, 97.338% 0.445%, 97.238% 0.38%, 97.136% 0.322%, 97.033% 0.27%, 96.928% 0.225%, 96.822% 0.187%, 96.715% 0.156%, 96.606% 0.132%, 96.497% 0.115%, 96.388% 0.104%, 96.278% 0.101%, 50.325% 0.061%, 50.325% 0.061%, 42.799% 0.062%, 35.641% 0.066%, 28.948% 0.072%, 22.818% 0.08%, 17.351% 0.091%, 12.644% 0.104%, 8.795% 0.12%, 5.903% 0.138%, 4.067% 0.159%, 3.384% 0.182%);
        width: 500px;
        height: 380px;
        margin: 0;
    }
     .padding{
        padding: 0 0 0 64px;
    }
}