@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 {
  --color-primary: #e48348;
  --color-secondary: #001070;
  --card-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  --card-radius: 20px;
}
*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

html,
body {
  position: relative;
  height: 100%;
}

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
button:hover {
  cursor: pointer;
}

a {
  color: black;
  text-decoration: none;
}

body {
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  width: 100%;
  /* overflow: hidden; */
}

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1320px;
}

@media screen and (max-width: 576px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
  .container {
    max-width: 540px;
  }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
  .container {
    max-width: 720px;
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

@media screen and (min-width: 1201px) and (max-width: 1400px) {
  .container {
    max-width: 1140px;
  }
}

@media screen and (min-width: 1401px) {
  .container {
    max-width: 1320px;
  }
}

/* ///////////////////////////////// Tap Bar \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
.tap-bar-x {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.whatsapp-icon {
  width: 50px;
  height: 50px;
  background: #67c15e;
}

.whatsapp-text {
  background: var(--color-secondary);
  padding: 0 15px;
}

.brand-icon {
  background: #f4ff69;
  padding: 0 10px;
}

.brand-icon:hover,
.whatsapp-text:hover,
.whatsapp-icon:hover {
  background: #67c15e;
}

/* ///////////////////////////////// Header \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

header {
  padding: 20px 0;
}

header ul li {
  list-style: none;
  margin-inline: 10px;
}

header ul li a {
  display: inline-block;
  padding: 5px 10px;
  position: relative;
  font-size: 16px;
}

header ul li a.active {
  color: var(--color-primary);
}

header ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

header ul li a.active::before {
  animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  border: 1px solid var(--color-primary);
}

@keyframes slide-right {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

header ul li form input[type="search"] {
  padding: 10px;
  border-radius: 10px;
  background-color: #f8f8f8;
  border: 1px solid #f8f8f8;
  height: 45px;
  width: 245px;
}

header ul li form input[type="search"]:focus {
  border-bottom: 2px solid var(--color-primary);
  border-radius: 0px;
  transition: all 300ms;
}

header ul li form .search-icon {
  position: absolute;
  right: 5px;
  background-color: #f8f8f8;
}

header ul li .phone a {
  font-weight: bold;
  font-size: 18px;
  color: var(--color-primary);
  transition: all 300ms;
}

header ul li .phone a:hover {
  color: black;
  transition: all 300ms;
}

/* ///////////////////////////////// Main Slider \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.mainSwiper {
  width: 100%;
  position: relative;
}

.mainSwiper .swiper-slide img {
  display: inline-block;
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: 1;
}

.mainSwiper .swiper-slide .content {
  position: absolute;
  left: calc((100% - (1320px)) / 2);
  width: 30%;
}

.mainSwiper .swiper-slide .content h4 {
  font-weight: 300;
  margin: 20px 0;
}

.mainSwiper .swiper-slide .content button {
  padding: 10px 20px;
  border-radius: 5px;
  border: 1px solid white;
  background-color: transparent;
  color: white;
}

.mainSwiper .swiper-slide .content button:hover {
  background-color: var(--color-primary);
  transition: all 300ms;
}

.mainSwiper .swiper-horizontal > .swiper-pagination-bullets,
.mainSwiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.mainSwiper .swiper-pagination-custom,
.mainSwiper .swiper-pagination-fraction {
  top: 75%;
  height: fit-content;
  left: calc((100% - (1320px)) / 2);
  max-width: 1320px;
  display: flex;
  justify-content: start;
  margin: 0 auto;
}
.mainSwiper .swiper-pagination-bullet {
  background: #f8f8f8;
}
.mainSwiper .swiper-pagination-bullet-active {
  background: var(--color-primary);
}

.mainSwiper .scroll-down {
  position: absolute;
  z-index: 19;
  bottom: -10px;
  cursor: pointer;
}

.mainSwiper .scroll-down .down-icon {
  position: absolute;
  z-index: 19;
}

.mainSwiper .scroll-down .back:hover ~ .down-icon {
  animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

@keyframes slide-bottom {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(20px);
  }
}

/* ///////////////////////////////// Category Bar \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.category-bar {
  margin: 4rem 0;
}
.category-bar h1 {
  color: var(--color-secondary);
  font-weight: bold;
  text-align: center;
}
.category-bar .content {
  margin-top: 2rem;
}

.category-bar .content .card {
  box-shadow: var(--card-shadow);
  border-radius: var(--card-radius);
  padding: 20px 30px;
  width: 22%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  color: var(--color-secondary);
  transition: all 300ms;
}

.category-bar .content .card:hover {
  background: rgba(128, 128, 128, 0.212);
  transition: all 300ms;
}

/* ///////////////////////////////// Category Bar \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.product-slider {
  padding: 6rem 0;
}
.product-slider .tap-bar {
  margin-bottom: 2rem;
}
.product-slider .tap-bar h2 {
  color: #333333;
}

.product-slider .tap-bar h3 {
  color: #787878;
  font-weight: 400;
  font-size: large;
}

.product-slider .swiper {
  width: 100%;
  height: 100%;
}
.product-slider .swiper-slide {
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 5px;
}

.product-slider .swiper-slide .card {
  background-color: white;
  box-shadow: var(--card-shadow);
  border-radius: var(--card-radius);
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
}

.product-slider .swiper-slide .card img {
  width: 118px;
  height: 118px;
}

.product-slider .swiper-slide .card .content {
  padding: 10px;
  width: 100%;
}
.product-slider .swiper-button-next,
.product-slider .swiper-button-prev {
  position: static;
  background: #f1f1f1;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  top: 0;
  margin: 0;
  margin-left: 10px;
}

.product-slider .swiper-button-next:after,
.product-slider .swiper-button-prev:after {
  font-size: 14px;
  color: black;
}

.product-slider .swiper-slide .card h4 {
  font-size: 16px;
  color: var(--color-secondary);
}
.product-slider .swiper-slide .card p {
  font-size: 12px;
  margin-bottom: 5px;
}

.product-slider .swiper-slide .card button {
  background: var(--color-primary);
  color: white;
  border: 1px solid var(--color-primary);
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 300ms;
}

.product-slider .swiper-slide .card button:hover {
  background: white;
  color: var(--color-primary);
  transition: all 300ms;
}

/* ///////////////////////////////// Category Bar \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.costum-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4rem auto;
}

.costum-card .card {
  width: 49%;
  height: 250px;
  overflow: hidden;
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
  display: flex;
  align-items: center;
  justify-content: end;
  box-shadow: var(--card-shadow);
}

.costum-card .card img {
  width: auto;
  height: 100%;
  position: absolute;
  z-index: 2;
}

.costum-card .card .content {
  z-index: 4;
  width: 100%;
  height: 100%;
  padding: 25px;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  flex-direction: column;
}

.costum-card .card:nth-child(1) {
  background: rgb(238, 245, 229);
  background-color: #edf6e5;
}

.costum-card .card:nth-child(2) {
  background-color: #f9ebe8;
}

.costum-card .card .content h2 {
  width: 50%;
}

.costum-card .card .content p {
  width: 50%;
  /* margin: 1rem 0; */
  font-size: 14px;
}

.costum-card .card .content button {
  border: 1px solid black;
  background-color: transparent;
  padding: 10px;
  border-radius: 5px;
  transition: all 300ms;
}

.costum-card .card .content button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transition: all 300ms;
}

/* ///////////////////////////////// Nav Taps List \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.nav-taps-list {
  margin: 6rem auto;
}

.nav-taps-list .tap-bar {
  border-bottom: 1px solid #333333;
  margin-bottom: 10px;
}

.nav-taps-list .tabs {
  display: flex;
  cursor: pointer;
}
.nav-taps-list .tab {
  padding: 10px 20px;
  color: #333333;
}
.nav-taps-list .tab.active {
  background-color: var(--color-primary);
  color: white;
}
.nav-taps-list .tab-content {
  display: none;
  width: 100%;
  /* padding: 20px; */
  height: fit-content;
}
.nav-taps-list .tab-content.active {
  display: block;
  height: fit-content;
}
.product-list .card,
.nav-taps-list .card {
  box-shadow: var(--card-shadow);
  border-radius: 10px;
  padding: 5% 0 0 0;
  position: relative;
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  transition: all 300ms;
  text-align: left;
}

.product-list .card .img,
.nav-taps-list .card .img {
  width: 90%;
  height: 215px;
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 300ms;
}
.product-list .card .img img,
.nav-taps-list .card .img img {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: all 300ms;
}
.product-list .card h4,
.nav-taps-list .card h4 {
  font-size: 14px;
  width: 100%;
  padding: 0 10px;
}
.product-list .card p,
.nav-taps-list .card p {
  font-size: 12px;
  /* margin-bottom: 2.5rem; */
  margin-top: 5px;
  width: 100%;
  padding: 0 10px;
}
.product-list .card button,
.nav-taps-list .card button {
  /* position: absolute; */
  /* bottom: 0; */
  /* left: 0; */
  width: 100%;
  padding: 14px;
  background: transparent;
  border: none;
  border-top: 1px solid #cccccc;
  color: #333333;
  text-align: left;
  font-size: 14px;
  margin-top: 10px;
}

.product-list .card button:hover,
.nav-taps-list .card button:hover {
  background-color: var(--color-primary);
  color: white;
  transition: all 300ms;
}
.product-list .card:hover img,
.nav-taps-list .card:hover img {
  transform: scale(1.4);
  transition: all 300ms;
}

.nav-taps-list,
.tab-contents,
.tab-content {
  position: relative;
  /* height: 100%; */
  height: fit-content;
}
.nav-taps-list .swiper {
  width: 100%;
  height: 70%;
  margin-left: auto;
  margin-right: auto;
}
.nav-taps-list .swiper-slide {
  font-size: 18px;
  background: #fff;
  height: fit-content !important;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
}
.nav-taps-list .swiper-grid-column > .swiper-wrapper {
  width: 100% !important;
  flex-direction: row;
}

/* ///////////////////////////////// Newsletter \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.newsletter {
  background-color: #e6f3fb;
  padding: 4rem 0;
}
.newsletter .text-content {
  width: 40%;
}
.newsletter h3 {
  font-size: xx-large;
}

.newsletter p {
  font-size: x-large;
}

.newsletter .content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter form {
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}
.newsletter form .input {
  width: 500px;
  height: 45px;
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid lightgrey;
  outline: none;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0px 0px 20px -18px;
  margin-bottom: 1rem;
}
.newsletter form .input:hover {
  border: 2px solid lightgrey;
  box-shadow: 0px 0px 20px -17px;
}
.newsletter form .input:active {
  transform: scale(0.95);
}
.newsletter form .input:focus {
  border: 2px solid grey;
}

/* From Uiverse.io by vishnupprajapat */
.checkbox-wrapper-46 input[type="checkbox"] {
  display: none;
  visibility: hidden;
}

.checkbox-wrapper-46 .cbx {
  margin: auto;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.checkbox-wrapper-46 .cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
  font-size: small;
}
.checkbox-wrapper-46 .cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid #9098a9;
  transition: all 0.2s ease;
  background-color: white;
}
.checkbox-wrapper-46 .cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-46 .cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #506eec;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}
.checkbox-wrapper-46 .cbx span:last-child {
  padding-left: 8px;
}
.checkbox-wrapper-46 .cbx:hover span:first-child {
  border-color: #506eec;
}

.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
  background: #506eec;
  border-color: #506eec;
  animation: wave-46 0.4s ease;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}

@keyframes wave-46 {
  50% {
    transform: scale(0.9);
  }
}

.newsletter form button {
  border: 1px solid black;
  background-color: black;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

/* ///////////////////////////////// Opportunity \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.opportunity {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 4rem auto;
}

.opportunity .card {
  width: 20%;
  padding: 5px;
}

.opportunity .card h4 {
  font-size: larger;
  margin-bottom: 10px;
}

.opportunity .card p {
  font-size: small;
}
.opportunity .card .box {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
}

/* ///////////////////////////////// Footer \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* Genel Stil */
.footer {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  padding: 0;
  /* border-top: 1px solid #ddd; */
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}

/* Logo Alanı */
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo {
  width: 200px;
  margin-bottom: 10px;
}

.logo-small {
  width: 200px;
  margin: 10px 0;
}

/* Sosyal Medya İkonları */
.social-icons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.social-icons img {
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  border: 1px solid #9f9f9f;
  padding: 5px;
  border-radius: 5px;
}

.social-icons img:hover {
  transform: scale(1.1);
}

/* Linkler */
.footer-links h3 {
  font-weight: bold;
  margin-bottom: 10px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li {
  margin-bottom: 5px;
}

.footer-links ul li a {
  text-decoration: none;
  color: #333;
  transition: color 0.3s;
}

.footer-links ul li a:hover {
  color: #000;
  text-decoration: underline;
}

.whatsapp-button {
  display: flex;
  align-items: center;
  background-color: #25D366;
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}
.whatsapp-button img {
  width: 20px;
  margin-right: 5px;
}

/* WhatsApp Butonu */
.footer-contact {
  text-align: center;
  margin-top: 30px;
}

.whatsapp-button {
  display: flex;
  align-items: center;
  background-color: #25d366;
  color: white;
  padding: 5px;
  border-radius: 5px;
  text-decoration: none;
  /* font-weight: bold; */
  margin-top: 10px;
  transition: background 0.3s;
  font-size: 12px;
}

.whatsapp-button:hover {
  background-color: #1ebe5d;
}

/* Telif Hakkı */
.footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin: 30px 0 30px 0; */
  /* margin-bottom: 30px; */
  padding: 10px 0;
  border-top: 1px solid #333333;
}

.agency {
  font-size: 14px;
  font-weight: bold;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-logo,
  .footer-links {
    align-items: center;
  }

  .footer-contact {
    margin-top: 20px;
  }
}

/* ///////////////////////////////// banner \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 350px;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: auto;
}

.banner .scroll-down {
  position: absolute;
  z-index: 9;
  bottom: -10px;
  cursor: pointer;
}

.banner .scroll-down .down-icon {
  position: absolute;
  z-index: 19;
}

.banner .scroll-down .back:hover ~ .down-icon {
  animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.banner .content {
  position: absolute;
  text-align: center;
  color: white;
}
.banner .content h3 {
  font-size: xx-large;
}

.banner .content a {
  color: white;
}

/* ///////////////////////////////// Contact Form \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6rem auto;
}
.contact .box {
  width: 45%;
}
.contact .form {
  width: 50%;
}

.contact .box ul li {
  list-style: none;
  margin-bottom: 20px;
}

.contact .box ul li a {
  display: flex;
  align-items: start;
}

.contact .box ul li a .img {
  margin-right: 10px;
  border: 1px solid var(--color-secondary);
  background-color: var(--color-secondary);
  border-radius: 50%;
  padding: 6.5px;
  width: 45px;
  height: 45px;
}

.contact .box ul li a h6 {
  font-weight: bold;
  font-size: 18px;
  color: var(--color-secondary);
}

.contact .box ul li a span {
  font-size: 16px;
}

.contact .form {
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 10px;
}

.contact .form h4 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 5px;
}

.contact .form form {
  margin-top: 1rem;
  overflow: hidden;
}
.contact .form form .inputGroup {
  margin: 7px 0;
  position: relative;
  width: 100%;
}
.contact .form form .inputGroup textarea,
.contact .form form .inputGroup input {
  font-size: 100%;
  padding: 0.8em;
  outline: none;
  border: 2px solid rgb(200, 200, 200);
  background-color: transparent;
  border-radius: 10px;
  width: 100% !important;
}
.contact .form form .inputGroup label {
  font-size: 100%;
  position: absolute;
  left: 0;
  padding: 0.8em;
  margin-left: 0.5em;
  pointer-events: none;
  transition: all 0.3s ease;
  color: rgb(100, 100, 100);
}
.contact .form form .inputGroup :is(textarea:focus, textarea:valid) ~ label,
.contact .form form .inputGroup :is(input:focus, input:valid) ~ label {
  transform: translateY(-50%) scale(0.9);
  margin: 0em;
  margin-left: 5px;
  padding: 0.4em;
  background-color: #f8f8f8;
}
.contact .form form .inputGroup :is(input:focus, input:valid) {
  border-color: rgb(150, 150, 200);
}
.contact .form form .parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
}
.contact .form form .div4 {
  grid-column: span 3 / span 3;
}
.contact .form form .div5 {
  grid-column: span 3 / span 3;
  grid-row: span 2 / span 2;
  grid-row-start: 3;
}

.contact .form form button {
  width: 100%;
  border: 1px solid var(--color-primary);
  padding: 10px;
  color: white;
  background-color: var(--color-primary);
  border-radius: 10px;
}
.product-details .whatsapp span,
.contact .whatsapp p {
  background-color: #0c8921;
}

/* ///////////////////////////////// Institutional \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.institutional {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin: 6rem auto;
}
.institutional .content {
  width: 49%;
}
.institutional .costum-card {
  margin: 0;
  flex-wrap: wrap;
  align-items: start;
}

.institutional .costum-card .card {
  width: 100%;
  margin: 10px 0;
}

.institutional .text-content {
  margin: 10px 0;
}
.institutional .text-content h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.institutional .text-content p {
  font-size: 14px;
}

/* ///////////////////////////////// Product List \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.product-list {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin: 6rem auto;
  position: relative;
}
.product-details .search-bar,
.product-list .search-bar {
  width: 15%;
  display: flex;
  flex-direction: column;
  align-items: start;
  border-radius: 5px;
  overflow: hidden;
  background: white;
}
.product-details .search-bar h4,
.product-list .search-bar h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffcc01;
  width: 100%;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  padding: 5px 10px;
}

.product-details h1,
.product-list h1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-details .search-bar h4 button,
.product-list .search-bar h4 button,
.product-details h1 button,
.product-list h1 button {
  background: transparent;
  border: none;
  display: none;
}

.product-details .search-bar h5,
.product-list .search-bar h5 {

  background-color: #fff4c8;
  width: 100%;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 500;
}
.product-details .search-bar #myUL,
.product-list .search-bar #myUL {
  width: 100%;
  padding: 10px;
  background-color: #fafafa;
  font-size: 14px;
}
.product-details .search-bar ul li,
.product-list .search-bar ul li {
  list-style: none;
}
.product-details .search-bar .nested,
.product-list .search-bar .nested {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding-left: 5px;
}
.product-details .search-bar .nested li span,
.product-list .search-bar .nested li span {
  margin-right: 5px;
}

.product-details .search-bar .nested li a,
.product-list .search-bar .nested li a {
  font-size: 14px;
}
.product-details .search-bar .nested.active,
.product-list .search-bar .nested.active {
  max-height: 500px;
}
.product-list .search-bar .caret::before {
  content: "-";
  cursor: pointer;
  margin-right: 5px;
  transition: transform 0.3s ease;
}
.product-list .search-bar .caret-down::before {
  transform: rotate(90deg);
}
.product-details .list,
.product-list .list {
  width: 82%;
}
.product-details .list h1,
.product-list .list h1 {
  background-color: #ffcc01;
  width: 100%;
  margin-bottom: 10px;
  /* font-size: 18px; */
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 18px;
}

.product-list .list .parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 15px;
  margin: 1rem 0;
}

.new-show {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.new-show .icon {
  background: #ffcc01;
  border: 1px solid #ffcc01;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  padding: 2px;
  cursor: pointer;
  transition: all 300ms;
}

.new-show .icon:hover {
  background: white;
  transition: all 300ms;
}

/* ///////////////////////////////// Product Details \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.product-details {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin: 6rem auto;
}
.product-details .swiper {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}
.product-details .swiper-slide {
  background-size: cover;
  background-position: center;
}
.product-details .mySwiper2 {
  height: 80%;
  width: 100%;
}
.product-details .mySwiper {
  /* height: 20%;*/
  box-sizing: border-box;
  /* padding: 10px 0; */
  width: 25%;
  max-height:420px;
  height:420px;
  /* margin-right: 5px; */
}
.product-details .mySwiper .swiper-slide {
  width: 100% !important;
  height: 100%;
  opacity: 0.4;
  margin: 0 !important;
}
.product-details .mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}
.product-details .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 1px;
}
.product-details .details {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.product-details .slider,
.product-details .box {
  width: 49%;
}

.product-details .slider {
  display: flex;
  flex-direction: row-reverse;
}

.product-details .swiper-free-mode > .swiper-wrapper {
  display: flex;
  flex-direction: column;
}

.product-details .box h4 {
  margin-bottom: 10px;
}

.product-details .box p {
  font-size: 14px;
  margin-bottom: 10px;
}

.product-details .box .option {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.product-details .box .option span {
  border: 1px solid #666666;
  color: #666666;
  padding: 2px 10px;
  border-radius: 10px;
  margin-inline-end: 10px;
  font-size: 14px;
}

.mobil-menu {
  position: relative;
  background: #ffffff;
  width: 20%;
  color: #000000;
  overflow-y: auto;
  position: fixed;
  top: 0;
  z-index: 12;
  transition: 250ms ease-in-out;
  left: -100%;
  padding: 10px;
}

.mobil-menu .top-submenu .submenu-content li,
.mobil-menu ul li {
  margin: 0 0 15px 0;
  list-style: none;
}

.mobil-menu a {
  color: #000000;
  /* width: 100%; */
  width: 100%;
  display: inline-block;
}

.mobil-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #00000030;
  transition: 300ms ease-in-out;
  width: 100%;
  height: 100%;
  left: -100%;
}

.mobil-menu-overlay.active,
.mobil-menu.active {
  left: 0;
}

.mobil-menu .top-submenu .submenu {
  position: relative;
  width: 100%;
  display: inline-block;
}

.mobil-menu .top-submenu .submenu::before {
  content: "";
  position: absolute;
  right: 0;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg width='64px' height='64px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000' stroke='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z' fill='%23E7F6F2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: 300ms ease-in-out;
}
.mobil-menu .top-submenu .submenu-content label:hover,
.mobil-menu .top-submenu .submenu:hover {
  color: var(--color-primary);
  transition: 300ms ease-in-out;
}
.mobil-menu .top-submenu .submenu-content label:hover::before,
.mobil-menu .top-submenu .submenu:hover::before {
  transform: rotate(180deg);
  transition: 300ms ease-in-out;
}

.mobil-menu .top-submenu .submenu-content {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transition: 300ms ease-in-out;
  padding: 20px;
  z-index: 99;
}

.mobil-menu .top-submenu .submenu-content.active {
  left: 0%;
}

.mobil-menu .top-submenu .submenu-content label {
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid white;
  padding: 10px;
  text-align: center;
  position: relative;
}

.mobil-menu .top-submenu .submenu-content label::before {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg width='64px' height='64px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L9.41421 12L15.7071 18.2929C16.0976 18.6834 16.0976 19.3166 15.7071 19.7071C15.3166 20.0976 14.6834 20.0976 14.2929 19.7071L7.29289 12.7071C7.10536 12.5196 7 12.2652 7 12C7 11.7348 7.10536 11.4804 7.29289 11.2929L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289Z' fill='%23E7F6F2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: 300ms ease-in-out;
}

.btn-open {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
}

.btn-open .line {
  fill: none;
  stroke: black;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-open .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.btn-open .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

.btn-open .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.btn-open.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.btn-open.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

.btn-open.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

@media screen and (max-width: 1199px) {
  .mobil-menu {
    width: 75%;
  }
}

.m-header {
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: fit-content;
  padding: 5px;
  display: none;
}

.m-header .logo {
  width: 150px;
  margin: 0;
}

.m-header .logo img {
  width: 100%;
  height: auto;
}