@import url(https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css);

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Vazirmatn, sans-serif;
}

:root {
   --primary-color: #d0e7d8;
   --secondary-color: #37a847;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   transition: 0.4s ease;
   line-height: 1.3;
   color: 333;
}

p,
li,
a {
   font-size: 16px;
   color: #333;
   text-decoration: none;
   list-style: none;
}

img {
   max-width: 100%;
   transition: 0.4s;
}

ul,
ol {
   margin: 0;
   padding: 0;
}

/* top header */
.top-header {
   background-color: var(--secondary-color);
   padding: 10px 0;
}

.top-content {
   display: flex;
   align-items: center;
   gap: 20px;
   justify-content: space-between;
}

.top-flex li {
   display: flex;
   align-items: center;
   gap: 10px;
}

.top-flex li a i {
   width: 30px;
   height: 30px;
   display: grid;
   place-content: center;
   background-color: white;
   color: var(--secondary-color);
   border-radius: 100%;
   margin-right: 8px;
}

.top-flex li a {
   color: #fff;
   display: flex;
   gap: 7px;
}

.top-social ul {
   display: flex;
   align-items: center;
}

.top-social ul li a {
   width: 35px;
   height: 35px;
   display: grid;
   place-content: center;
   background-color: #fff;
   color: var(--secondary-color);
   border-radius: 50%;
   margin-right: 8px;
   font-size: 14px;
}

@media (max-width:768px) {
   .top-content {
      flex-direction: column;
      justify-content: center;
   }
}

.header-main .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
}

.logo img {
   width: 230px;
   height: auto;
}

.head-search form {
   width: 360px;
   position: relative;
}

.head-search form input {
   width: 100%;
   padding: 13px 17px;
   border-radius: 30px;
   color: #333;
   position: relative;
   border: none;
   outline: none;
   background-color: var(--primary-color);
}

.head-search form i {
   position: absolute;
   top: 7px;
   left: 10px;
   width: 35px;
   height: 35px;
   display: grid;
   place-content: center;
   border-radius: 50%;
   background-color: #fff;
}

.header-icon ul {
   display: flex;
   align-items: center;
}

.header-icon ul li a {
   width: 35px;
   height: 35px;
   display: grid;
   place-content: center;
   background-color: var(--secondary-color);
   color: #fff;
   border-radius: 50%;
   margin-right: 8px;
   font-size: 14px;
}

.navbar .container ul {
   text-align: center;
   width: 100%;
}

.navbar li a {
   display: inline-block;
   padding: 13px 18px;
   font-size: 18px;
}

/* banner */
section {
   position: relative;
}

.banner-sec {
   background-size: cover;
   background-position: center;
   padding: 100px 0;
   height: auto;
}

.header-main-text {
   width: 55%;
   padding: 50px;
}

.header-main-text h1 {
   font-size: 3.6rem;
   font-weight: bold;
   color: var(--secondary-color);
   margin: 10px 0;
}

.nav-btn a {
   display: inline-block;
   padding: 8px 25px;
   background-color: var(--secondary-color);
   color: #fff;
}

/* slider cat */
.item-header img {
   width: 125px;
   height: 125px;
   border-radius: 50%;
   margin: 0 auto 10px;
}

.item-header h4 {
   font-size: 18px;
   align-items: center;
   margin-top: 15px;
   text-align: center;
}

/* footer */
footer {
   background-color: var(--secondary-color);
   padding: 60px 0 0;
}

.footer img {
   width: 200px;
   height: 150px;
   object-fit: contain;
   margin-bottom: 20px;
}

footer p,
footer a {
   color: #fff;
}

footer h4 {
   font-size: 32px;
   font-weight: 600;
   color: #fff;
   margin: 0 0 15px;
}

.footer-links ul li a {
   display: flex;
   align-items: center;
   gap: 5px;
   margin-bottom: 9px;
}

.footer-flex li {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 20px;
   color: #fff;
}

.footer-flex a {
   /* width: 35px;
   height: 35px; */
   display: grid;
   place-content: center;
   /* background-color: #fff; */
   color: var(--secondary-color);
   border-radius: 50%;
   color: #fff;
   font-size: 14px;
}