html, body{ overflow-x: hidden; font-family: 'Montserrat', sans-serif!important; scroll-behavior: smooth; width: 100%;height: 100%;margin: 0px;padding: 0px;overflow-x: hidden;}
ul{ margin: 0!important; padding: 0!important; }
li{ list-style: none; }
p{ margin: 0!important; }
.top{ display: flex; justify-content: center; background-color: #1e1e1e; padding: 10px 0;}
.overflow-hidden{ overflow: hidden!important; }
.background-image{ position: absolute; top: -135rem; right: -80rem; }
.header{ background-color: #fff; }
.hero-text{ margin: 1rem 0 2rem;  display: flex; justify-content: center; align-items: center;}
.hero-text h2{ font-size: 3rem; font-weight: 600;}
.page-hero-text{ margin: 3rem 0 2rem;  display: flex; justify-content: center; align-items: center;}
.page-hero-text h2{ font-size: 3rem; font-weight: 600; text-align: center;}
#category{ position: relative; }

.col-lg-c{ width: 27%; }
.header-text{ font-size: 14px; color: #fff; display: flex; justify-content: center; font-weight: 500; }
.header-phone{display: flex; justify-content: flex-end; align-items: center;}
.header-phone a{ color: #000; text-decoration: none; font-size: 14px;}
.header-phone i{ margin-right: 5px; }
.top-header{  display: flex; flex-direction: row; align-items: center;  padding: 0.5rem 0 0; border-bottom: 1px solid #111; position: relative;}
.logo{ display: flex; justify-content: center; margin: 8px 0 15px}
.logo img{ width: 160px;}
.menu{ display: flex!important; flex-direction: row; align-items: center; justify-content: space-between!important; }
.category{  display: flex; flex-direction: row;justify-content: center; align-items: center; border-top: 1px solid #000; }
.category-ul{ display: flex; align-items: center; margin: 0;  transition: all 0.2s linear;}
.category-ul li{ margin: 0 35px; transition: all 0.2s linear; display: flex; align-items: center; position: static;}
.category-ul>li>a {position: relative;padding: 0.8rem 0}
.category-ul>li>a::after {content: '';display: block;width: 100%;height: 1.3px;transform-origin: right center;transform: scale(0,1);transition: transform .3s ease;background: #000}
.category-ul>li>a:hover::after {transform-origin: left center;transform: scale(1,1)}
.category-ul li a{ color: #000; text-decoration: none; font-size: 13px; font-weight: 600; }
.dropdown-icon::after{ content: "\f107"; font-family: "Font Awesome 6 Free"; color: #000; font-weight: 900; margin-left: 5px; height: 27px;}
.dropdown-ul{ opacity: 0; position: absolute; visibility: hidden;}
.dropdown:hover .dropdown-ul{  min-width: 200px;width: 100%;z-index: 1001;border-top: none;left: 0;padding: 15px 30px!important;display: block;visibility: visible;opacity: 1;background: #fff;position: absolute;top: 100%; box-shadow: 1px 5px 10px -7px #111;}
.dropdown-ul li { margin: 10px -3px; display: inline-flex; flex-wrap: wrap;}
.dropdown-ul li a {color: #000!important; }
.dropdown-ul li a::after{ content: '';display: block;width: 100%;height: 1.3px;transform-origin: right center;transform: scale(0,1);transition: transform .3s ease;background: #000 }
.dropdown-ul li a:hover::after{ transform-origin: left center;transform: scale(1,1) }


.bottom-header{  background-color:#fff}
.header-bottom-container{ display: flex; justify-content: space-between; align-items: center; flex-direction: row; text-align: center; color: #111;height: 40rem;}
.header-bottom-container h1{ font-size: 3.3rem; font-weight: 600; margin: 10px 0; color: #ff3230; text-align: left; letter-spacing: 0.2rem;}
.header-bottom-text span{ color: #222; }
.header-bottom-container p{ font-size: 14px; font-weight: 400; margin: 20px 0; color: #111; text-align: left;}
.header-bottom-image { display: flex; justify-content: flex-end; width: 45.666667%!important; position: relative;}
.header-bottom-image img{ max-width: 100%; border-radius: 10px; box-shadow: 1px 1px 20px -4px #222;  }


.box{ margin: 2rem 0 8rem; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: center;}
.box-text{ text-align: right; margin-top: -2rem;}
.text-left{ text-align: left!important; }
.box-text h3{ text-align: right; font-size: 35px; font-weight: 600;}
.box-text p{ text-align: right;font-size: 22px;font-weight: 500;}
.box-image img{ width: 97% ; border-radius: 10px; box-shadow: 1px 1px 20px -4px #222;}  
.box-image-reverse img{ width: 97% ; border-radius: 10px; box-shadow: 1px 1px 20px -4px #222;}      
.box-image-reverse{ display: flex; justify-content: right; }

.service{ padding: 0px 0 2rem; }
.service-container{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 0 2rem!important;}
.service-box{ display: flex;  justify-content: center; align-items: center; flex-direction: column; background-color: #fff; box-shadow: 1px 1px 20px -7px #111; border-radius: 10px; margin: 0 20px; padding: 3rem 3rem; margin: 20px;}
.box-icon{ margin: -2rem 0 0; padding: 20px; object-fit: cover}
.box-icon img{ width: 152px; height: 150px; border-radius: 50%; object-fit: cover;}
.service-box-text{ text-align: center; height: 100%;}
.service-box-text h2 { font-size: 33px; font-weight: 500; margin: 1rem 0 2rem;}
.service-box-text ul li { list-style-type: disc; line-height: 32px; font-size: 18px; font-weight: 420; text-align: left; color: #111;}


.footer{ background-color: #222222; padding: 40px 0 0px; }
.footer-row{ display: flex!important; justify-content: center; }
/* .footer-list:last-child{ width: 21%!important; } */

.footer-container{ display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 0 0 1rem 0;}
.footer-ul{ display: flex; flex-direction: column; margin: 10px 0!important;}
.footer-ul li{ padding: 4px 0;  }
.footer-header{ font-weight: 600; font-size: 20px; color: #fff; letter-spacing: 0.05rem;}
.footer-header li{ font-size: 15px; letter-spacing: normal; font-weight: 450;color: #c7c7c7; transition: all 0.2s linear;text-decoration: none; }

.footer-logo{ display: flex; flex-direction: column; margin: 0rem 0 1.3rem 0; }
.footer-logo img{ width: 30%;margin: 0rem 0 0rem 0;  }
.footer-text{ font-size: 15px; font-weight: 450; text-align: left; color: #999; width: 100%;}
.footer-bottom{ display: flex; justify-content: center; align-items: center; padding: 15px 0; border-top: 1px solid #999; }
.footer-logo{ display: flex;  flex-direction: column; width: 100%; }
.footer-copyright{ color: #fff; display: flex; justify-content: center; font-size: 13px; text-align: center;}


.call-button{ display: flex; justify-content: center; margin: 0 0 4rem 0; align-items: center;} 

.content-div {
  padding: 3px;
}
.single-contact {border: 1px solid #c3c3c3;border-radius: 5px;box-shadow: 1px 1px 10px -8px #333;padding: 20px;}

.contact-area{
  padding: 20px 0;
}

.single-contact li a{ color: #111; text-decoration: none; font-size: 17px; letter-spacing: 0.02rem;}
.ul-background{ transition: all 0.2s linear; display: block; opacity: 0; visibility: hidden; width: 1000px;left: -1rem;overflow-y: auto; overflow-x: hidden; height: 52rem;background-color: rgba(0, 0, 0, 0.4);position: absolute;top: -4rem; }
.close{ display: none!important; }
.mobile-category{ display: none; }
#menuToggle{display: inline-block!important;position: relative;display: block;position: relative;top: 4.3rem;left: 14px;z-index: 1;-webkit-user-select: none;user-select: none;}

#menuToggle input:checked ~ #menuToggle{ background: #232323; position: fixed; }

#menuToggle a{text-decoration: none;color: #232323;transition: color 0.3s ease;}

#menuToggle a:hover{color: tomato;}

#menuToggle input{display: block;width: 40px;height: 32px;position: absolute;top: -7px;left: -5px;cursor: pointer;opacity: 0; z-index: 2; -webkit-touch-callout: none;}


#menuToggle span{display: block;width: 24px;height: 1px;margin-bottom: 5px;position: relative;background: #000;border-radius: 3px;z-index: 1;transform-origin: 4px 0px;transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease;}

#menuToggle span:first-child{transform-origin: 0% 0%;}

#menuToggle span:nth-last-child(2){transform-origin: 0% 100%;}


#menuToggle input:checked ~ span{opacity: 1;transform: rotate(45deg) translate(-2px, -1px);background: #232323;}
#menuToggle input:checked ~ span:nth-last-child(3){opacity: 0;transform: rotate(0deg) scale(0.2, 0.2);}


#menuToggle input:checked ~ span:nth-last-child(2){transform: rotate(-45deg) translate(0, -1px);}

#menu{position: absolute;height: 3000px;top: 0rem;opacity: 0;width: 28rem;padding: 5rem 3rem!important;left: -3rem;margin: -100px 0 0 -50px;background: #f3f3f3;list-style-type: none;-webkit-font-smoothing: antialiased;transform-origin: 0% 0%;transform: translate(-200%, 0);transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}

#menu li{padding: 10px 20px;font-size: 17px;border-top: 1px solid #dadada;border-bottom: 1px solid #dadada;margin: 15px 0!important;}

#menu li:first-child{margin: 0px;}
#menuToggle input:checked ~ .ul-background{opacity: 1; visibility: visible;}
#menuToggle input:checked ~ .ul-background>ul{transform: none;opacity: 1;}

.list-box-icon img{ width: 100%; border-radius: 7px; }
.list-box{ display: flex;  justify-content: center; align-items: center; flex-direction: column; background-color: #fff; box-shadow: 1px 1px 20px -7px #111; border-radius: 10px; margin: 0 20px; padding: 1.4rem 2rem; margin: 20px 10px;}
.box-icon{ margin: -2rem 0 0; padding: 20px; object-fit: cover}
.box-icon img{ width: 152px; height: 150px; border-radius: 50%; object-fit: cover;}
.list-box-text{ text-align: center; height: 100%;}
.list-box-text h2 { font-size: 33px; font-weight: 500; margin: 1rem 0 1rem;}
.list-box-text h4{ line-height: 32px; font-size: 18px; font-weight: 420; text-align: left; color: #111;}
.col-lg-box{ width: 30%; }
.urun-list-container{ display: flex; flex-wrap: wrap; justify-content: center; }
.list-box-button{ margin: 10px 0 0 0; display: flex;}
.list-box-button button{ background: #3cd957; color: #fff; border: 1px solid #111; border-radius: 5px; padding: 4px 15px;  font-weight: 500; transition: all 0.1s linear; ;}

.list-box-button i{ font-size: 17px; margin-right: 2px;}

.box-button{ display: flex;justify-content: flex-end;width: 100%;top: -12rem; position: relative; }
.box-button button i{ margin-left: 7px; margin-top: 3px; font-size: 16px; transform: scaleX(-1);}
#box-button-bottom{ justify-content: flex-start; position: relative; top: 2.3rem; }
#box-button-bottom button i { transform: scalex(1)!important; }
.box-button button{ background: #ff3330; color: #fff; border: 1px solid #222; font-weight: 500; border-radius: 3px; padding: 7px 30px; transition: all 0.1s linear;}
.text-header{ font-weight: 600; }

.whatsapp{ position: fixed; bottom: 5rem; right: 2.1rem; }
.phone{ position: fixed; bottom: 8.5rem; right: 2.24rem; background-color: #ff3330; padding: 8.1px; border-radius: 50%;}