/* @import url("https://fonts.googleapis.com/css2?family=Archivo&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&display=swap");



:root {
    /* --primary: #f47d20;
    --primary-rgb: 244, 125, 32;
    --primary-hsl: hsl(26, 91%, 54%);
    --primary-h: 26;
    --primary-s: 91%;
    --primary-l: 54%;
    --primary-hsl: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --secondary: #3a3d43; */
    /* dark colors  */
    /* --dark-body-bg: hsl(var(--primary-h), var(--primary-s), 5%);
    --dark-card-bg: hsl(var(--primary-h), var(--primary-s), 7.5%);
    --dark-secondary-bg: hsl(var(--primary-h), var(--primary-s), 10%);
    --dark-title: rgba(255, 255, 255, 1);
    --dark-description: rgb(174, 174, 174);
    --dark-border: rgba(55, 55, 55, 1); */
    /* hover colors  */
    /* --main-hover-color: hsl(var(--primary-h), var(--primary-s), 45%); */
}

html {
   scroll-behavior: smooth;
}

#header-m-1,
#header-m-2 {
   z-index: 100;
}

ul {
   list-style-type: none;
}
a {
   text-decoration: none;
   cursor: pointer;
}
/* li a {
   cursor: pointer;
} */

button {
   outline: none;
}

li.point-marker {
   position: relative;
}

li.point-marker::before {
   content: "";
   width: 4px;
   height: 4px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: white;
   border-radius: 50%;
   inset-inline-start: -8px;
}

.hide-scrol::-webkit-scrollbar {
   display: none;
}
.main-hover,
.secondary-hover {
   transition: all 0.5s;
}
.main-hover:hover {
   background-color: var(--main-hover-color);
}
.secondary-hover:hover {
   opacity: 0.7;
}

body {
   font-family: "Archivo", sans-serif;
   background-color: var(--primary-dark);
}

html[lang="ar"] body {
    font-family: "Cairo", sans-serif;
}

::-webkit-scrollbar {
   width: 7px;
   height: 7px;
   cursor: pointer;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
   background: #232323;
   border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: var(--primary);
}

.logo-header-1-container {
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}

.popup-overlay {
   position: fixed;
   top: 0;
   left: 0;
   background-color: var(--secondary);
   backdrop-filter: blur(8px);
   width: 100%;
   height: 100%;
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 2000;
   opacity: 0.9;
}

.popup-content {
   width: 100%;
   position: absolute;
   inset-inline-start: 50%;
   transform: translateX(-50%);
   top: 276px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.popup-content form .search-container {
   display: flex;
   padding: 15px 20px;
   justify-content: space-between;
   align-items: center;
   align-self: stretch;
   border-radius: 8px;
   border: 1px solid #dadada;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
   width: 465px;
   height: 54px;
}

.popup-content form .search-container input {
   flex-grow: 1;
   background-color: transparent;
   outline: none;
   border: none;
   color: #aeaeae;
}

.popup-content form .search-container input::placeholder {
   color: #aeaeae;
}

.close-btn {
   position: absolute;
   top: 10px;
   right: 15px;
   font-size: 24px;
   cursor: pointer;
   top: 80px;
   inset-inline-end: 80px;
}

#header-1 .isActive,
#header-3 .isActive {
   position: relative;
   color: var(--primary);
}

#header-1 .isActive::after,
#header-3 .isActive::after {
   content: "";
   background-color: var(--primary);
   position: absolute;
   bottom: -6px;
   width: calc(100% - 4px);
   inset-inline-start: 2px;
   height: 1px;
}

.active-nav-mobile {
   color: var(--primary) !important;
}

#header-1 .isActive,
#header-3 .isActive {
    position: relative;
    color: var(--primary);
}

#header-1 .isActive::after,
#header-3 .isActive::after {
    content: "";
    background-color: var(--primary);
    position: absolute;
    bottom: -6px;
    width: calc(100% - 4px);
    inset-inline-start: 2px;
    height: 1px;
}

.modeActive {
    position: relative;
}

.modeActive::before {
    content: "";
    background-color: white;
    position: absolute;
    bottom: -6px;
    width: calc(100% - 4px);
    inset-inline-start: 2px;
    height: 1px;
}

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

.btn-1 {
   border-radius: 8px;
   border: 1px solid var(--primary);
   background: var(--primary);
   color: white;
   box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
   padding: 12px 20px;
}

.hover-text-effect .btn-1 {
   max-width: 133px;
   height: 33px;
   border-radius: 5px;
   padding: 8px 24px;
   background-color: var(--primary);
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}

.btn-2 {
   max-width: 93px;
   height: 43px;
   border-radius: 8px;
   padding: 10px 16px;
   border: 1px solid var(--primary);
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   color: var(--primary);
}

.navbar-on-active,
.navbar-on-active-2,
.header-5-on-page-active {
   position: relative;
   cursor: pointer;
}

.navbar-on-active::after {
   content: "";
   position: absolute;
   bottom: -4px;
   height: 2px;
   width: 0;
   inset-inline-start: 12.5%;
   background-color: var(--primary);
   transition: all 0.3s;
}

.navbar-on-active:hover::after {
   width: 75%;
}

.navbar-on-active-2:hover,
.header-5-on-page-active {
   color: var(--primary) !important;
}

.navbar-on-active-2::after,
.header-5-on-page-active::after {
   content: "";
   position: absolute;
   bottom: -12px;
   width: 0px;
   aspect-ratio: 1/1;
   inset-inline-start: 50%;
   transform: translateX(-50%);
   background-color: var(--primary);
   transition: all 0.3s;
   border-radius: 50%;
}
.navbar-on-active-2:hover::after,
.header-5-on-page-active::after {
   width: 5px;
}

#header-4 .active {
   color: var(--primary);
}

#header-2 .active {
   color: var(--primary);
}

#header-7 .active {
   color: var(--primary);
}

.switcher-1 {
   width: 74px;
   height: 40px;
   background-color: #fafafa;
   border: 1px solid #f0f0f0;
   padding: 4px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   position: relative;
}

.dark .switcher-1 {
   border-color: var(--dark-border);
}

.switcher-1 button {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   width: 33px;
   position: relative;
   z-index: 2;
}

.switcher-1 button svg path {
   transition: all 0.3s linear;
}

.switch-1 {
   position: absolute;
   top: 4px;
   inset-inline-start: 36px;
   height: 32px;
   width: 33px;
   border-radius: 8px;
   background-color: white;
   box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
   transition: all 0.3s linear;
}

.icon-shap {
   width: 32px;
   height: 48px;
   border-bottom-left-radius: 23px;
   border-bottom-right-radius: 23px;
   background-color: var(--primary);
   display: flex;
   align-items: end;
   justify-content: center;
   padding-bottom: 3px;
   cursor: pointer;
}

.banner-heading {
   max-width: 600px;
   margin-top: 16px;
   color: white;
   /* font-family: "Archivo"; */
   font-size: 40px;
   font-weight: bold;
   line-height: 48px;
   letter-spacing: -0.07px;
}
.banner-description {
   max-width: 500px;
   margin-top: 28px;
   color: #e0e0e0;
   /* font-family: "Archivo"; */
   font-size: 14px;
   font-weight: normal;
   line-height: 30px;
   letter-spacing: -0.036px;
}
@media (min-width: 767px) {
   .banner-heading {
      max-width: 400px;
      font-size: 60px;
      line-height: 72px;
   }
}
@media (min-width: 1024px) {
   .banner-heading {
      max-width: 500px;

      font-size: 70px;
      line-height: 87px;
   }
   .banner-description {
      font-size: 18px;
   }
}

/* .banner-1-bg {
   background: linear-gradient(
         0deg,
         rgba(0, 0, 0, 0.5) 0%,
         rgba(0, 0, 0, 0.5) 100%
      ),
      url("/themes/mytheme/assets/img/banner-1-bg.jpg") lightgray 50% / cover no-repeat;
} */

.banner-3-bg {
   background: url("/themes/mytheme/assets/img/main-section-bg.jpg") top / cover no-repeat;
   background-image: linear-gradient(
      0deg,
      rgba(18, 18, 18, 0.5) 0%,
      rgba(18, 18, 18, 0.5) 100%
   );
}
.banner-3-bg::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: #1f2124;
   z-index: 2;
   mix-blend-mode: multiply;
}

.banner-3-bg::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: url(/themes/mytheme/assets/img/main-section-bg.jpg) lightgray 50% / cover
      no-repeat;
   z-index: 1;
}

.banner-6-bg {
   background: url("/themes/mytheme/assets/img/banner-6-bg.jpg") lightgray 50% / cover
      no-repeat;
}

.banner-8 {
   background: linear-gradient(to bottom, #0000000d, #0000000d);
}
.banner-8 .radial-effect-1,
.banner-8 .radial-effect-2 {
   position: absolute;
}
.banner-8 .radial-effect-1 {
   aspect-ratio: 1/1;
   border-radius: 50%;
   border: 1px solid rgba(0, 0, 0, 0.05);
   background: radial-gradient(
      50% 50% at 50% 50%,
      rgba(244, 125, 32, 0.2) 0%,
      rgba(244, 125, 32, 0) 100%
   );
   top: 0;
   inset-inline-start: 50%;
   transform: translateX(-50%);
}

.banner-8 .radial-effect-2 {
   aspect-ratio: 1/1;
   border-radius: 50%;
   border: 1px solid rgba(0, 0, 0, 0.08);

   top: 50%;
   inset-inline-start: 50%;
   transform: translate(-50%, -50%);
}

.banner-2 .slide-s::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.2;

   background: url(/themes/mytheme/assets/img/banner-2-bg.png) lightgray no-repeat 0px -35.788px /
      100% 108.75%;
   mix-blend-mode: overlay;
   z-index: -1;
}

.bg-gradiant {
   background: linear-gradient(
      90deg,
      rgba(28, 28, 28, 0) 0%,
      #a1a1a1 50%,
      rgba(28, 28, 28, 0) 100%
   );
}

.banner-2 .thumbs-prev-2,
.banner-2 .thumbs-next-2 {
   position: absolute;
   top: 215px;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
}

.banner-2 .thumbs-prev-2 svg,
.banner-2 .thumbs-next-2 svg {
   width: 25px;
   height: 25px;
}

.banner-2 .thumbs-prev-2 {
   inset-inline-end: 22%;
}
.banner-2 .thumbs-next-2 {
   inset-inline-end: calc(22% - 60px);
}

@media (min-width: 767px) {
   .banner-2 .thumbs-prev-2,
   .banner-2 .thumbs-next-2 {
      width: 48px;
      height: 48px;
      top: 200px;
   }

   .banner-2 .thumbs-prev-2 svg,
   .banner-2 .thumbs-next-2 svg {
      width: 34px;
      height: 38px;
   }
   .banner-2 .thumbs-prev-2 {
      inset-inline-end: 22%;
   }
   .banner-2 .thumbs-next-2 {
      inset-inline-end: calc(22% - 70px);
   }
}

.banner-2 .swiper-slide.left-slide img {
   display: block;
   object-fit: cover;
}

.banner-2 .swiper-slide.left-slide::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   inset-block-start: 0;
   background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.2) 100%
   );
}

.banner-2 .swiper-slide {
   background-size: cover;
   background-position: center;
}

.banner-2 .thumb-container {
   width: 320px;
   box-sizing: border-box;
   padding: 8px 12px;
   position: absolute;
   bottom: 35px;
   height: 83px;
   width: 350px;
   inset-inline-start: 50%;
   transform: translateX(-50%);
   z-index: 2;
   border-radius: 38px;
   background: rgba(255, 255, 255, 0.1);
}

.banner-2 .thumb-swiper {
   box-sizing: border-box;
   padding: 8px 0;
   max-width: 40%;
   height: 50px;
   position: absolute;
   height: calc(100% - 16px);
   width: 457px;
   inset-inline-start: 50%;
   transform: translateX(-50%);
   /* z-index: 1; */
}

.banner-2 .swiper-button-prev,
.banner-2 .swiper-button-next {
   color: white;
   position: absolute;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   top: calc(50% + 4px);
   filter: drop-shadow(0px 8px 12px rgba(18, 18, 18, 0.25));
   inset-inline-end: 0;
   background-color: rgba(255, 255, 255, 0.4);
}

.banner-2 .swiper-button-prev:hover,
.banner-2 .swiper-button-next:hover {
   background-color: rgba(255, 255, 255, 0.1);
   transition: all 0.3s;
}

.banner-2 .swiper-button-prev {
   left: 16px;
}
.banner-2 .swiper-button-next {
   right: 16px;
}

.banner-2 .swiper-button-prev::after,
.banner-2 .swiper-button-next::after {
   content: "";
}

.banner-2 .thumb-swiper-slides .swiper-slide-thumb-active {
   opacity: 1;
}

.banner-2 .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.wave-btn {
   position: relative;
   overflow: hidden;
   transition: all 0.6s;
}
.wave-btn:hover {
   background-color: var(--primary);
}

.wave-btn:hover svg:not(:first-child) path {
   stroke: #ffffff33;
}

.banner-2 .wave-btn button {
   position: relative;
   z-index: 25;
}

.wave-btn svg:not(:first-child) {
   position: absolute;
   bottom: 0;
   z-index: 23;
}

.banner-2 .wave-btn svg path {
   transition: all 0.6s;

   stroke: #50505069;
}

.banner-4 .wave-btn svg path {
   stroke: #d6d6d652;
}

.wave-btn svg:nth-child(2) {
   inset-inline-end: 74px;
}
.wave-btn svg:nth-child(3) {
   inset-inline-end: 77px;
}
.wave-btn svg:nth-child(4) {
   inset-inline-end: 80px;
}
.wave-btn svg:nth-child(5) {
   inset-inline-end: 83px;
}
.wave-btn svg:nth-child(6) {
   inset-inline-end: 86px;
}
.wave-btn svg:nth-child(7) {
   inset-inline-end: 89px;
}
.wave-btn svg:nth-child(8) {
   top: 0;
   inset-inline-start: 83px;
}
.wave-btn svg:nth-child(9) {
   top: 0;
   inset-inline-start: 86px;
}
.wave-btn svg:nth-child(10) {
   top: 0;
   inset-inline-start: 89px;
}
.wave-btn svg:nth-child(11) {
   top: 0;
   inset-inline-start: 92px;
}

.banner-2 .thumb-img-container {
   border-radius: 4px;
   margin-inline-end: 20px;
   margin-inline-start: 5px;
   width: 50px !important;
   height: 50px !important;
   border: none;
   outline: none;
}

.banner-2 .thumb-img-container::before {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: linear-gradient(
      0deg,
      rgba(18, 18, 18, 0.7) 0%,
      rgba(18, 18, 18, 0.7) 100%
   );
   border-radius: 4px;
   opacity: 0.9;
}

.banner-2 .thumb-swiper .swiper-slide-thumb-active.thumb-img-container::before {
   opacity: 1;
   background: none;
}

.banner-2 .thumb-img-container img {
   border-radius: 4px;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.banner-2 .line-right-1,
.banner-2 .line-right-2 {
   position: absolute;
   z-index: 2;
}
.banner-2 .line-right-1 {
   top: 270px;
   inset-inline-end: 3px;
}
.banner-2 .line-right-2 {
   top: 290px;
   inset-inline-end: 3px;
}

.banner-2 .line-bottom-1,
.banner-2 .line-bottom-2 {
   /* display: none; */
   position: absolute;
   z-index: 2;
   bottom: 0px;
}

.banner-2 .line-bottom-1 {
   inset-inline-end: 30px;
}
.banner-2 .line-bottom-2 {
   inset-inline-end: 50px;
}

@media (min-width: 500px) {
   .banner-2 .line-bottom-1 {
      inset-inline-end: 100px;
   }
   .banner-2 .line-bottom-2 {
      inset-inline-end: 120px;
   }
}

.btn-rectangle {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   color: white;
   padding-block: 24px;
   padding-inline-start: 40px;
   padding-inline-end: 32px;
   background-color: var(--primary);
   box-shadow: 0px 8px 32px -10px rgba(244, 125, 32, 1);
   width: 214px;
   border-radius: 112px;
   position: relative;
   overflow: hidden;
   text-transform: uppercase;
   font-weight: 600;
}
.btn-rectangle .rectangle-icon {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
}
.banner-3 div:nth-child(2) div {
   flex-grow: 1;
   max-width: fit-content;
}
.banner-3 div:nth-child(2) div svg {
   max-width: 100%;
}

.swiper-prev-b-5,
.swiper-next-b-5 {
   position: absolute;
   width: 48px;
   top: 50%;
   height: 48px;
   background: rgb(255 255 255);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
   cursor: pointer;
   transition: all 0.5s;
}
.swiper-prev-b-5:hover,
.swiper-next-b-5:hover {
   background-color: var(--primary);
}

.swiper-prev-b-5:hover svg path,
.swiper-next-b-5:hover svg path {
   fill: white;
}

.swiper-prev-b-5 {
   left: 0;
}

.swiper-next-b-5 {
   right: 0;
}

.swiper-prev-b-5 svg,
.swiper-next-b-5 svg {
   width: 25px;
   height: 25px;
}

.swiper-prev-b-5 svg path,
.swiper-next-b-5 svg path {
   fill: var(--primary);
}

.slide-b-5 {
   position: relative;
}

.slide-b-5::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: var(--secondary);
   mix-blend-mode: multiply;
   opacity: 0.5;
}

.main-footer-bg {
   background: linear-gradient(
         0deg,
         rgba(255, 255, 255, 0.9) 0%,
         rgba(255, 255, 255, 0.9) 100%
      ),
      url("/themes/mytheme/assets/img/main-section-bg.jpg") lightgray 50% / cover no-repeat;
   position: relative;
}

.dark .main-footer-bg::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: var(--dark-body-bg);
   z-index: 1;
   opacity: 0.9;
   mix-blend-mode: hard-light;
}
.dark .main-footer-bg * {
   position: relative;
   z-index: 2;
}

.hover-text-effect {
   transition: all 0.5s;
}
.hover-text-effect:hover {
   color: var(--primary);
}
.dark .hover-text-effect:hover {
   color: var(--primary);
}

.hover-text-secondary {
   transition: all 0.3s;
}
.hover-text-secondary:hover {
   color: var(--secondary);
}

.banner-7 .right-slide {
   position: relative;
   background-color: var(--secondary);
}

.banner-7 .right-slide::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.3;
   background-image: url("/themes/mytheme/assets/img/banner-7-bg.jpg");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   mix-blend-mode: overlay;
}

.btn-wave-bg {
   position: relative;
   overflow: hidden;
   color: white;
   border-radius: 52px;
   background-color: var(--primary);
   box-shadow: 0px 8px 32px -10px var(--primary);
   display: flex;
   align-items: center;
   gap: 12px;
   width: 178px;
   height: 64px;
   padding-block: 20px;
   padding-inline-start: 32px;
   padding-inline-end: 24px;
   font-weight: 600;
}

.btn-wave-bg::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   inset-inline-start: 0;
   top: 0;
   filter: drop-shadow(0px 2px 32px rgba(0, 0, 0, 0.25));
}

.btn-wave-bg .wave-btn-icon {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
}

.btn-wave-bg .rocket-icon {
   transition: transform 0.3s;
}

.btn-wave-bg:hover .rocket-icon {
   animation: bounce 0.6s ease-in-out 3;
}

@keyframes bounce {
   0%,
   100% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(-4px); /* Moves icon up by 4px */
   }
}

.banner-8-icons-container {
   display: block;
   width: 850px;
   max-width: 100%;
   height: 100%;

   position: absolute;
   top: 0;
   inset-inline-start: 50%;
   transform: translateX(-50%);
   z-index: -1;
}
@media (min-width: 680px) {
   .banner-8-icons-container {
      max-width: 80%;
   }
}

/* @media (min-width: 640px) {
   .banner-8-icons-container {
      display: block;
   }
} */

.banner-8-icon {
   border-radius: 50%;
   background-color: var(--primary);
   display: flex;
   align-items: center;
   justify-content: center;
   filter: drop-shadow(0px 4px 12px rgba(244, 125, 32, 0.15));
   position: absolute;
}
.banner-8-icon div {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background-color: white;
}

.banner-8-icon:nth-child(1) {
   width: 60px;
   height: 60px;
   top: 30px;
   inset-inline-start: 15%;
}

.banner-8-icon:nth-child(2) {
   width: 50px;
   height: 50px;
   top: 180px;
   inset-inline-end: 0;
}

/* @media (min-width:) {

} */

.banner-8-icon:nth-child(3) {
   width: 40px;
   height: 40px;

   bottom: 50px;

   inset-inline-end: 15%;
}

.banner-8-icon:nth-child(4) {
   width: 45px;
   height: 45px;
   inset-inline-start: 0;
   top: 55%;
}

.banner-8-icon:nth-child(1) div {
   width: 38px;
   height: 38px;
}

.banner-8-icon:nth-child(2) div {
   width: 28px;
   height: 28px;
}

.banner-8-icon:nth-child(3) div {
   width: 22px;
   height: 22px;
}

.banner-8-icon:nth-child(4) div {
   width: 23px;
   height: 23px;
}

.banner-8-icon:nth-child(1) div svg {
   width: 38px;
   height: 30px;
}

.banner-8-icon:nth-child(2) div svg {
   width: 28px;
   height: 20px;
}

.banner-8-icon:nth-child(3) div svg {
   width: 22px;
   height: 15px;
}

.banner-8-icon:nth-child(4) div svg {
   width: 23px;
   height: 15px;
}

.banner-9 .thumb-swiper-banner-9 {
   box-sizing: border-box;
   padding: 8px 0;
   width: 100%;
   max-height: 100%;
   position: absolute;
   inset-inline-end: 0%;
   top: 50%;
   transform: translateY(-50%);
}

/* need to change end position  */
.banner-9 .thumb-container {
   position: absolute;
   width: 50px;
   height: 230px;
   max-height: 230px;
   inset-inline-end: 128px;
   top: 290px;
   /* transform: translateY(-50%); */
   z-index: 2;
   margin-inline: 10px;
}

@media (max-width: 1023px) {
   .banner-9 .thumb-container {
      inset-inline-end: 80px;
   }
}

@media (max-width: 766px) {
   .banner-9 .thumb-container {
      bottom: 70px;
      top: auto;
      transform: rotate(90deg) translateX(-50%);
      inset-inline-start: calc(50% - 30px);
      margin-inline: 0;
      height: 220px;
   }
}

.banner-9 .swiper-slide.main-slide::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   inset-block-start: 0;
   background: rgb(58 61 67 / 70%);
   backdrop-filter: blur(2px);
   z-index: 2;
}

.banner-9 .swiper-slide {
   background-size: cover;
   background-position: center;
}

.banner-9 .swiper-button-prev,
.banner-9 .swiper-button-next {
   color: white;
   position: absolute;
   width: 100%;
   height: fit-content;
   border-radius: 50%;
   /* top: 0;
   inset-inline-start: 50%; */
   /* background-color: var(--secondary) 00; */
}
.banner-9 .swiper-button-prev div svg path,
.banner-9 .swiper-button-next div svg path {
   transition: all 0.5s;
}

.banner-9 .swiper-button-prev:hover div svg path,
.banner-9 .swiper-button-next:hover div svg path {
   fill: var(--primary);
}

.banner-9 .swiper-button-prev {
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
}
.banner-9 .swiper-button-next {
   top: 100%;
   right: 50%;
   transform: translate(50%, 50%);
}

.banner-9 .swiper-button-prev::after,
.banner-9 .swiper-button-next::after {
   content: "";
}

.banner-9 .thumb-swiper-slides .swiper-slide-thumb-active {
   opacity: 1;
}
.banner-9 .swiper-slide-thumb-active.thumb-img-container {
   border: 2px solid rgba(255, 255, 255, 0.7);
}

.banner-9 .thumb-swiper .swiper-slide-thumb-active.thumb-img-container {
   border-radius: 4px;
   background-size: cover;
   background-repeat: no-repeat;
}

.banner-9 .thumb-img-container {
   border-radius: 12px;
   width: 50px !important;
   height: 50px !important;
   border: none;
   outline: none;
   position: relative;
   cursor: pointer;
}

@media (max-width: 766px) {
   .banner-9 .thumb-img-container {
      transform: rotate(-90deg);
   }
}

.banner-9 .thumb-img-container::after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   background-color: var(--primary);
   opacity: 0.5;
   top: 0;
   left: 0;
   z-index: 1;
   border-radius: 12px;
}

.banner-9
   .thumb-swiper-banner-9
   .swiper-slide-thumb-active.thumb-img-container::after {
   opacity: 1;
   background-color: transparent;
}

.banner-9-heading {
   position: relative;
   width: fit-content;
}
.banner-9-heading::before {
   content: "";
   width: calc(100% + 40px);
   height: 100%;
   position: absolute;
   inset-inline-start: -20px;
   top: 0;
   background-color: var(--primary);
   z-index: -1;
   border-radius: 120px;
}

@media (max-width: 400px) {
   .banner-9-heading::before {
      width: calc(100% + 20px);
      inset-inline-start: -10px;
      border-radius: 100px;
   }
}

/* .top-svg {
   position: absolute;
   background-image: url("/themes/mytheme/assets/svg/banner-9-icon.svg");
   background-color: red;
   height: 196px;
   background-repeat: no-repeat;
   position: absolute;
   top: 200px;
   z-index: 3333333333;
   width: 100px;
   right: 0;
   opacity: 0.5;
}

.top-svg {
   top: 190px;
   inset-inline-end: 0;
} */

@media (max-width: 600px) {
   .banner-9 .text-container h3 {
      font-size: 40px;
   }
}

@media (max-width: 495px) {
   .banner-9 .text-container h3 {
      font-size: 35px;
   }
}

@media (max-width: 440px) {
   .banner-9 .text-container h3 {
      font-size: 30px;
   }
   .banner-9 .text-container {
      width: calc(100% - 70px);
      inset-inline-start: 35px;
   }
}
.banner-9-service-container div:not(:last-child) {
   padding-inline-start: 24px;
}

.banner-9-service-container div:first-child {
   border-start-start-radius: 32px;
   border-end-start-radius: 32px;
   padding-inline-start: 24px;
}

.banner-9-service-container div:last-child {
   border-start-end-radius: 32px;
   border-end-end-radius: 32px;
   padding-inline-end: 24px;
}

.banner-9-service-container .banner-9-card:hover::before,
.banner-9-service-container .banner-9-card.active::before {
   content: "";
   position: absolute;
   top: -30px;
   inset-inline-start: 0;
   width: calc(100% - 16px);
   height: calc(100% + 60px);
   background: var(--primary);
   z-index: 1;
   border-radius: 32px;
}

.banner-9-service-container .banner-9-card:last-child:hover::before,
.banner-9-service-container .banner-9-card:last-child.active::before {
   inset-inline-start: 16px;
   width: calc(100% - 16px);
}

.banner-10-bg {
   position: relative;
}

.banner-10-bg::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: linear-gradient(
      0deg,
      rgba(58, 61, 67, 0.8),
      rgba(58, 61, 67, 0.8)
   );
   z-index: 5;
   opacity: 0.6;
}

.banner-10-bg::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: url("/themes/mytheme/assets/img/banner-10-bg.png") 50% / cover no-repeat;
   z-index: 4;
}

.swiper-prev-b-10,
.swiper-next-b-10,
.dot-icon {
   position: absolute;
   width: 10px;
   height: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
   transition: all 0.5s;
}

.swiper-prev-b-10 {
   cursor: pointer;

   left: calc(100% - 35px - 10px);
   top: 40%;
}
.dot-icon {
   right: 35px;
   top: calc(40% + 10px + 15px);
}
.swiper-next-b-10 {
   cursor: pointer;

   right: 35px;
   top: calc(40% + 10px + 15px + 10px + 15px);
}

@media (max-width: 640px) {
   .swiper-prev-b-10 {
      top: 85%;
   }
   .dot-icon {
      top: calc(85% + 10px + 15px);
   }
   .swiper-next-b-10 {
      top: calc(85% + 10px + 15px + 10px + 15px);
   }
}

@media (min-width: 767px) {
   .swiper-prev-b-10 {
      left: calc(100% - 80px - 10px);
   }
   .dot-icon {
      right: 80px;
   }
   .swiper-next-b-10 {
      right: 80px;
   }
}

@media (min-width: 1279px) {
   .swiper-prev-b-10 {
      left: calc(100% - 128px - 10px);
   }
   .dot-icon {
      right: 128px;
   }
   .swiper-next-b-10 {
      right: 128px;
   }
}

/* .banner-11-bg-1 {
   background: url("/themes/mytheme/assets/img/banner-11-1.jpg") lightgray 50% / cover
      no-repeat;
}

.banner-11-bg-2 {
   background: url("/themes/mytheme/assets/img/banner-11-2.jpg") lightgray 50% / cover
      no-repeat;
} */

.banner-12-bg {
   background: url("/themes/mytheme/assets/img/banner-12-bg.jpg") lightgray 50% / cover
      no-repeat;
   position: relative;
}
.banner-12-bg::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: white;
   opacity: 0.96;
   background-image: linear-gradient(to bottom, #0000000d, white);
}
.dark .banner-12-bg::before {
   background-color: var(--dark-body-bg);
   background-image: none;
}

.banner-12 .line-left {
   position: absolute;
   height: 8px;
   top: 33px;
   inset-inline-start: 0;
   background-color: var(--primary);
}

.banner-13 .thumb-container {
   position: absolute;
   inset-inline-start: 50%;
   transform: translateX(-50%);
   z-index: 2;
   width: calc(100% - 100px);
   max-width: 780px;
   bottom: 80px;
   border-radius: 16px;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(2px);
   padding: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.banner-13 .thumb-swiper-banner-13 {
   width: 100%;
   max-height: 100%;
   position: relative;
   margin-inline: 55px;
}

.banner-13 .thumb-img-container::after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   background-color: var(--secondary);
   opacity: 0.7;
   top: 0;
   left: 0;
   z-index: 1;
   border-radius: 12px;
}

.banner-13
   .thumb-swiper-banner-13
   .swiper-slide-thumb-active.thumb-img-container::after {
   opacity: 1;
   background-color: transparent;
}

.banner-13
   .thumb-swiper-banner-13
   .swiper-slide-thumb-active.thumb-img-container {
   border: 1px solid var(--primary);
}

.banner-13 .thumb-img-container {
   border-radius: 12px;
   width: 100px !important;
   height: 85px !important;
   border: none;
   outline: none;
   position: relative;
   cursor: pointer;
   background-size: cover;
}

.banner-13 .main-slide {
   background-color: lightgray;

   background-position: 50%;
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
}
.banner-13 .main-slide::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(58, 61, 67, 0.8);
}

.banner-13 .swiper-button-prev,
.banner-13 .swiper-button-next {
   color: white;
   position: absolute;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   top: 50%;
   background-color: var(--secondary);
   transition: all 0.5s;
}

.banner-13 .swiper-button-prev:hover,
.banner-13 .swiper-button-next:hover {
   opacity: 0.5;
}

.banner-13 .swiper-button-prev:hover,
.banner-13 .swiper-button-next:hover {
   background-color: rgba(255, 255, 255, 0.1);
   transition: all 0.3s;
}

.banner-13 .swiper-button-prev {
   left: 15px;
}
.banner-13 .swiper-button-next {
   right: 15px;
}

.banner-13 .swiper-button-prev::after,
.banner-13 .swiper-button-next::after {
   content: "";
}

@media (min-width: 767px) {
   .banner-13 .thumb-img-container {
      width: 150px !important;
      height: 135px !important;
   }
   .banner-13 .thumb-container {
      padding: 32px;
   }
   .banner-13 .thumb-swiper-banner-13 {
      margin-inline: 72px;
   }
   .banner-13 .swiper-button-prev {
      left: 32px;
   }
   .banner-13 .swiper-button-next {
      right: 32px;
   }
}

@media (min-width: 500px) {
   .banner-13 .thumb-img-container {
      width: 135px !important;
      height: 120px !important;
   }
   .banner-13 .thumb-container {
      padding: 25px;
   }
   .banner-13 .thumb-swiper-banner-13 {
      margin-inline: 65px;
   }
   .banner-13 .swiper-button-prev {
      left: 25px;
   }
   .banner-13 .swiper-button-next {
      right: 25px;
   }
}

.banner-13 .icon-1,
.banner-13 .icon-2,
.inner-banner-3 .icon-1,
.inner-banner-3 .icon-2 {
   position: absolute;
   width: 140px;
   height: 140px;
   background: url("/themes/mytheme/assets/img/banner-13-icon-1.png") 50% / cover no-repeat;
   z-index: 1;
}

.banner-13 .icon-1,
.inner-banner-3 .icon-1 {
   bottom: -40px;
   inset-inline-start: 50px;
}

.banner-13 .icon-2,
.inner-banner-3 .icon-2 {
   top: 32px;
   inset-inline-end: 50px;
   display: none;
}

@media (min-width: 500px) {
   .banner-13 .icon-2,
   .inner-banner-3 .icon-2 {
      display: block;
   }
}

@media (min-width: 767px) {
   .banner-13 .icon-1,
   .inner-banner-3 .icon-1 {
      width: 170px;
      height: 170px;
      inset-inline-start: 120px;
   }
   .banner-13 .icon-2,
   .inner-banner-3 .icon-2 {
      width: 170px;
      height: 170px;
      inset-inline-end: 120px;
      top: 56px;
   }
}

.footer-1-bg {
   background: url("/themes/mytheme/assets/img/banner-6-bg.jpg") lightgray 50% / cover
      no-repeat;
}
/*
.language-animation {
   transition: transform 0.3s;
   animation: lang-up-to-down 0.4s ease-in-out 1;
}

@keyframes lang-up-to-down {
   0% {
      transform: translateY(100%);
   }
   100% {
      transform: translateY(0);
   }
} */

/* .footer-3-bg {
   background: url("/themes/mytheme/assets/img/footer-3-bg.jpg") lightgray 50% / cover
      no-repeat;
   position: relative;
} */

.footer-3-bg::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: var(--secondary);
   opacity: 0.7;
   mix-blend-mode: multiply;
}

.footer-5 .pattern-1 {
   position: absolute;
   top: 0;
   inset-inline-end: 0;
   opacity: 0.14;
}
.footer-5 .pattern-1 svg {
   position: absolute;
   top: 0;
   transform: translateX(-100%);
   z-index: 0;
}

.footer-5 .pattern-2 {
   position: absolute;
   bottom: 0;
   inset-inline-start: 0;
   opacity: 0.07;
}
.footer-5 .pattern-2 svg {
   position: absolute;
   top: 0;
   transform: translateY(-100%);
   z-index: 0;
}

/* --------------------------------------------------------------------------- */

.inner-banner-1 {
   position: relative;
}
.inner-banner-1::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.5) 100%
   );
}

.inner-banner-routes-list-1,
.inner-banner-routes-list-2,
.inner-banner-routes-list-3,
.inner-banner-routes-list-4,
.inner-banner-routes-list-5 {
   display: flex;
   align-items: center;
}
.inner-banner-routes-list-1,
.inner-banner-routes-list-3,
.inner-banner-routes-list-4,
.inner-banner-routes-list-5 {
   gap: 33px;
}
.inner-banner-routes-list-2 {
   gap: 38px;
}

.inner-banner-routes-list-1 li:first-child {
   font-weight: 700;
}

.inner-banner-routes-list-2 li:not(:first-child) {
   font-weight: 500;
}

.inner-banner-routes-list-1 li,
.inner-banner-routes-list-2 li,
.inner-banner-routes-list-3 li,
.inner-banner-routes-list-4 li,
.inner-banner-routes-list-5 li {
   position: relative;
   text-transform: capitalize;
   cursor: pointer;
   transition: all 0.4s;
}

.inner-banner-routes-list-4 li,
.inner-banner-routes-list-5 {
   font-size: 18px;
   text-transform: uppercase;

   line-height: 150%; /* 27px */
   letter-spacing: -0.036px;
}

.inner-banner-routes-list-1 li:hover,
.inner-banner-routes-list-2 li:hover,
.inner-banner-routes-list-3 li:hover,
.inner-banner-routes-list-4 li:hover,
.inner-banner-routes-list-5 li:hover {
   color: var(--primary);
}

.inner-banner-routes-list-1 li:not(:last-child)::after,
.inner-banner-routes-list-2 li:not(:last-child)::after,
.inner-banner-routes-list-3 li:not(:last-child)::after,
.inner-banner-routes-list-4 li:not(:last-child)::after,
.inner-banner-routes-list-5 li:not(:last-child)::after,
.project-5 .project-card-5 .detailes li:not(:last-child)::after {
   content: "";
   position: absolute;
}
.inner-banner-routes-list-1 li:not(:last-child)::after,
.inner-banner-routes-list-5 li:not(:last-child)::after,
.project-5 .project-card-5 .detailes li:not(:last-child)::after {
   top: 0;
   transform: translateY(50%);
   inset-inline-end: -16px;
   width: 1px;
   height: 12px;
   background-color: white;
}

.inner-banner-routes-list-2 li:not(:last-child)::after {
   top: 4px;
   transform: translateY(100%);
   inset-inline-end: -22px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background-color: #dadada;
}

.inner-banner-routes-list-3 li:not(:last-child)::after {
   top: 6px;
   inset-inline-end: -23px;
   width: 13px;
   height: 13px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M6.74307 5.38201C7.08486 5.7238 7.08486 6.27888 6.74307 6.62068L2.36807 10.9957C2.02627 11.3375 1.47119 11.3375 1.12939 10.9957C0.787598 10.6539 0.787598 10.0988 1.12939 9.75701L4.88643 5.99998L1.13213 2.24294C0.790332 1.90115 0.790332 1.34607 1.13213 1.00427C1.47393 0.662476 2.029 0.662476 2.3708 1.00427L6.7458 5.37927L6.74307 5.38201Z' fill='white'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: contain;
}

.inner-banner-routes-list-4 li:not(:last-child)::after {
   top: 5px;
   inset-inline-end: -26px;
   width: 12px;
   height: 12px;
   background-color: var(--primary); /* dynamic color */
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='13' viewBox='0 0 7 13' fill='none'%3E%3Cpath d='M0.656854 6.5V0.843146L6.31371 6.5L0.656854 12.1569V6.5Z' fill='%23000'/%3E%3C/svg%3E");
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: contain;
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='13' viewBox='0 0 7 13' fill='none'%3E%3Cpath d='M0.656854 6.5V0.843146L6.31371 6.5L0.656854 12.1569V6.5Z' fill='%23000'/%3E%3C/svg%3E");
   mask-repeat: no-repeat;
   mask-size: contain;
}

.inner-banner-routes-list-2 li:last-child,
.inner-banner-routes-list-3 li:last-child {
   color: var(--primary);
}

.inner-banner-3 {
   position: relative;
   overflow: hidden;
}

.inner-banner-3::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   /* background: var(--secondary); */
   background-color: rgba(58, 61, 67, 0.8);
   mix-blend-mode: multiply;
}

.inner-banner-4::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-image: url("/themes/mytheme/assets/img/banner-10-bg.png");
}

.inner-banner-4 .dots-icon {
   position: absolute;
   width: 115px;
   height: 115px;
   transform: rotate(-45deg);
   inset-inline-end: 140px;
   bottom: 0px;
   /* background: url("/themes/mytheme/assets/img/dots-icon.png") 50% / cover no-repeat; */
}

.inner-banner-5 {
   position: relative;
   background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.5) 100%
   );
}
.inner-banner-5::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: url("/themes/mytheme/assets/img/main-section-bg.jpg") lightgray 50% / cover
      no-repeat;
   z-index: 1;
}
.inner-banner-5::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: #1f2124;
   z-index: 2;
   mix-blend-mode: multiply;
}

.inner-banner-5 .bull-eye-icon-1,
.inner-banner-5 .bull-eye-icon-2 {
   opacity: 0.05;
   background: url("/themes/mytheme/assets/img/bull-eye-icon.png") #00000000 50% / cover
      no-repeat;
   height: 68vh;
   aspect-ratio: 1 / 1;
   position: absolute;
   bottom: 0;
   z-index: 5;
   mix-blend-mode: luminosity;
}

.inner-banner-5 .bull-eye-icon-1 {
   left: 0;
   transform: translateX(-50%);
}
.inner-banner-5 .bull-eye-icon-2 {
   right: 0;
   transform: translateX(50%);
}

.contact-us-1 label,
.quote-request-2 label {
    color: #808080;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: capitalize;
    display: block;
}

.quote-request-2 label {
    color: #aeaeae;
}

.dark .contact-us-1 label,
.quote-request-2 label {
    color: var(--dark-description);
}

.contact-us-1 input,
.contact-us-1 textarea,
.quote-request-1 input,
.quote-request-1 textarea,
.quote-request-2 input,
.quote-request-2 textarea {
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #dadada;
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
    width: 100%;
    outline: none;
    color: #313131;
}

.contact-us-1 input:focus,
.contact-us-1 textarea:focus,
.contact-us-2 input:focus,
.contact-us-2 textarea:focus,
.blog-comment-form input:focus,
.quote-request-1 input:focus,
.quote-request-1 textarea:focus,
.quote-request-2 input:focus,
.quote-request-2 textarea:focus {
    border-color: var(--primary) !important;
}

.dark .contact-us-1 input,
.dark .contact-us-1 textarea,
.dark .contact-us-2 input,
.dark .contact-us-2 textarea,
.dark .blog-comment-form input,
.dark .quote-request-1 input,
.dark .quote-request-1 textarea {
    color: var(--dark-description);
    border-color: var(--dark-border);
    background-color: transparent;
}

.contact-us-1 input::placeholder,
.contact-us-2 input::placeholder,
.contact-us-2 textarea::placeholder,
.blog-comment-form input::placeholder,
.quote-request-1 textarea::placeholder,
.quote-request-2 input::placeholder,
.quote-request-2 textarea::placeholder {
    color: #aeaeae;
    text-transform: capitalize;
}

.contact-us-1 .contact-form-container {
    /* background: url("/themes/mytheme/assets/img/banner-12-bg.jpg") 50% / cover no-repeat; */
    position: relative;
    background-image: url("/themes/mytheme/assets/img/banner-12-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contact-us-1 .contact-form-container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 1;
    opacity: 0.9;
}

.dark .contact-us-1 .contact-form-container::before {
    background-color: var(--dark-card-bg);
}

.contact-us-1 form button {
    display: flex;
    padding: 12px 16px 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 58px;
    background: var(--primary);
    box-shadow: 0px 4px 16px 0px rgba(244, 125, 32, 0.3);
    color: white;
    margin-top: 32px;
}
.contact-us-1 .linear-card {
    position: relative;
}

.contact-us-1 .linear-card *{
    position: relative;
}
.contact-us-1 .linear-card::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background:
    linear-gradient(180deg,
            rgba(var(--primary-rgb), 0.1),
            rgba(var(--primary-rgb), 0.2),
            rgba(var(--primary-rgb), 0.9));
    border-start-start-radius: 32px;border-end-start-radius: 32px;
}
.section-title-1 {
    padding-inline: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.section-title-1 p {
    color: #555;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 5px;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 60px;
}

.dark .section-title-1 p {
    color: var(--dark-description);
}

.section-title-1 p::before {
    content: "";
    position: absolute;
    bottom: -30px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    height: 8px;
    width: 72px;
    background-color: var(--primary);
    border-radius: 8px;
}

.section-title-1 h3 {
    max-width: 430px;
    text-align: center;
    font-size: 28px;
    line-height: 150%;
    font-weight: bold;
    color: #121212;
}

.dark .section-title-1 h3 {
    color: var(--dark-title);
}

.section-title-1 h5 {
    color: #555;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 165%;
    margin-top: 32px;
}

.dark .section-title-1 h5 {
    color: var(--dark-description);
}

@media (min-width: 640px) {
    .section-title-1 {
        margin-bottom: 80px;
    }

    .section-title-1 h3 {
        font-size: 36px;
    }
}

.contact-us-2 form input,
.blog-comment-form input {
    padding: 15px 20px;
    flex: 1 0 0;
    border-bottom: 1px solid #dadada;
    outline: none;
}

.contact-us-2 form textarea {
    height: 134px;
    padding: 18px 20px 55px 20px;
    border-radius: 8px;
    border-bottom: 1px solid #e1e1e1;
    width: 100%;
    outline: none;
}

.contact-us-2 form button {
    display: flex;
    padding: 12px 64px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    background: var(--primary);
    color: white;
    margin-top: 24px;
    margin-inline: auto;
}

.our-service-card-1,
.our-service-card-4 {
    position: relative;
    overflow: hidden;
}

.our-service-card-1 .circle-icon,
.our-service-card-4 .circle-icon {
    background: linear-gradient(to right,
            rgb(99 99 99 / 22%),
            rgb(148 148 148 / 0%),
            rgb(67 67 67 / 25%));

    padding: 0.8px;
    /* This acts as your 'border' width */
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(20deg);
    z-index: 5;
}

.our-service-card-4 .circle-container {
    opacity: 0;
    transition: all 0.2s;
}

.our-service-card-4:hover .circle-container {
    opacity: 1;
}

.our-service-card-1:hover .circle-icon,
.our-service-card-4:hover .circle-icon {
    background: linear-gradient(to right,
            rgb(255 255 255 / 22%),
            rgb(222 222 222 / 0%),
            rgb(173 172 172 / 25%));
}

.our-service-card-4 {
    transition: all 0.5s;
    position: relative;
}

.our-service-card-4::before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    background-color: var(--primary);
    top: 0;
    inset-inline-end: 0;
    z-index: -1;
    transition: all 0.5s;
}

.our-service-card-4:hover::before {
    width: 100%;
}

.our-service-card-1 .circle-icon .inner-circle,
.our-service-card-4 .circle-icon .inner-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.our-service-card-1 .circle-icon-1,
.our-service-card-4 .circle-icon-1 {
    width: 340px;
    height: 340px;
    top: -170px;
    inset-inline-end: -170px;
}

.our-service-card-1 .circle-icon-2,
.our-service-card-4 .circle-icon-2 {
    width: 300px;
    height: 300px;
    top: -150px;
    inset-inline-end: -150px;
}

.our-service-card-1 .circle-icon-3,
.our-service-card-4 .circle-icon-3 {
    width: 260px;
    height: 260px;
    top: -130px;
    inset-inline-end: -130px;
}

.our-service-card-1 .circle-icon-4,
.our-service-card-4 .circle-icon-4 {
    width: 220px;
    height: 220px;
    top: -110px;
    inset-inline-end: -110px;
}

.our-service-card-1 .circle-icon-5,
.our-service-card-4 .circle-icon-5 {
    width: 180px;
    height: 180px;
    top: -90px;
    inset-inline-end: -90px;
}

.our-service-card-1 .circle-icon-6,
.our-service-card-4 .circle-icon-6 {
    width: 140px;
    height: 140px;
    top: -70px;
    inset-inline-end: -70px;
}

.our-service-card-1 .circle-icon-7,
.our-service-card-4 .circle-icon-7 {
    width: 100px;
    height: 100px;
    top: -50px;
    inset-inline-end: -50px;
}

.pagination-1 {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding-top: 80px;
    margin-inline: auto;
}

.pagination-1 .prev,
.pagination-1 .next {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s;
}

.pagination-1 .prev:hover,
.pagination-1 .next:hover {
    opacity: 0.9;
}

.pagination-1 .numbers-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.pagination-1 .numbers-container li .page-num {
    width: 40px;
    height: 40px;
    text-align: center;
    background: #f8f8f8;
    border-radius: 8px;
    color: var(--secondary);
    position: relative;
    transition: all 0.3s;
}

.pagination-1 .numbers-container li .page-num:hover {
    color: white;
    background-color: var(--secondary);
}

.pagination-1 .numbers-container li .page-num::before {
    content: "";
    width: 40px;
    height: 2px;
    background: #aaa;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    transition: all 0s;
    z-index: 0;
}

.pagination-1 .numbers-container li .page-num:hover::before {
    background-color: transparent;
}

.our-service-card-5-icon {
    position: relative;
}

.our-service-card-5-icon,
.our-service-card-5-icon * {
    transition: all 0.8s ease;
}

/*
.our-service-card-2 i {
   backface-visibility: hidden;
} */
.our-service-card-2 {
    transition: all 0.5s;
}

.our-service-card-2:hover {
    background-image: var(--hover-bg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.our-service-card-2:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,
            rgba(18, 18, 18, 0.7) 0%,
            rgba(18, 18, 18, 0.7) 100%);
    border-radius: 8px;
}

.our-service-card-2 * {
    position: relative;
    z-index: 2;
}

.our-service-card-2:hover i,
.our-service-card-3:hover i {
    transform: rotateY(-180deg);
}

.our-service-card-3 {
    background: linear-gradient(0deg,
            rgba(18, 18, 18, 0.7) 0%,
            rgba(18, 18, 18, 0.7) 100%),
        var(--card-bg) lightgray 50% / cover no-repeat;

    transition: all 0.5s;
}

.our-service-card-3:hover {
    background: #f9f9f9;
}

.dark .our-service-card-3:hover {
    background: var(--dark-card-bg);
}

.our-service-card-5-icon::before {
    content: "";
    position: absolute;
    width: 12.5px;
    height: 12.5px;
    border-radius: 50%;
    background-color: #ebebeb;
    bottom: -48px;
    inset-inline-start: 50%;
    transform: translate(-50%, 50%);
    transition: all 0.5s ease;
}

.dark .our-service-card-5-icon::before {
    background-color: var(--dark-border);
}

.our-service-card-5 {
    position: relative;
}

.our-service-card-5:hover {
    transform: rotateY(180deg);
    cursor: pointer;
}

.our-service-card-5:hover h2,
.our-service-card-5:hover p,
.our-service-card-5:hover button {
    transform: rotateY(-180deg);
}

.our-service-card-5:hover~.our-service-card-5-icon div {
    background-color: var(--primary);
}

/* .our-service-card-5:hover~.our-service-card-5-icon div svg {
    fill: var(--primary);
}

.our-service-card-5:hover~.our-service-card-5-icon div svg path {
    fill: white;
} */

.our-service-card-5:hover~.our-service-card-5-icon div i {
    color: white;
}

.our-service-card-5:hover~.our-service-card-5-icon::before {
    background-color: var(--primary);
}

.our-service-card-5::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 96px;
    inset-inline-start: calc(50% - 0.5px);
    top: 0;
    transform: translateY(-100%);
    background-color: #ebebeb;
}

.dark .our-service-card-5::before {
    background-color: var(--dark-border);
}

.our-service-card-5::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 48px;
    inset-inline-start: 0;
    top: 0;
    transform: translateY(-100%);
    border-top: 1px dotted #ebebeb;
}

.dark .our-service-card-5::after {
    border-color: var(--dark-border);
}

.pagination-2 .prev,
.pagination-2 .next {
    background-color: var(--primary) !important;
}

.pagination-2 .numbers-container .page-num {
    color: var(--primary) !important;
}

.pagination-2 .numbers-container .page-num:hover {
    color: white !important;
    background-color: var(--primary) !important;
}

.our-service-card-6 {
    position: relative;
}

.our-service-card-6::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='328' height='373' viewBox='0 0 328 373' fill='none'%3E%3Cpath d='M0.0424805 0H327.501L0.0424805 373V0Z' fill='%23F9F9F9'/%3E%3C/svg%3E");
   */
    z-index: -1;

    background-color: #f9f9f9;

    clip-path: polygon(0 0, 100% 0, 0 100%);
    transition: all 0.5s ease-in-out;
}

/* .our-service-card-6:hover::before {
    clip-path: polygon(0 0, 200% 0, 0 200%);
    background-color: var(--primary);
}

.dark .our-service-card-6::before {
    background-color: var(--dark-card-bg);
    opacity: 0.3;
}

.our-service-card-6:hover>svg {
    transform: rotateY(180deg);
} */

.our-service-card-6:hover::before,
.dark .our-service-card-6:hover::before {
    clip-path: polygon(0 0, 200% 0, 0 200%);
    background-color: var(--primary);
    opacity: 1;
}

.dark .our-service-card-6::before {
    background-color: var(--dark-card-bg);
    opacity: 0.3;
}

.our-service-card-6:hover>i {
    transform: rotateY(180deg);
}


.our-service-card-6:hover>h2,
.our-service-card-6:hover>p {
    transform: rotateX(360deg);
}

.our-service-card-7 .icon-container {
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-image: linear-gradient(to top, #f4f4f4, transparent);
}

.dark .our-service-card-7 .icon-container {
    background-image: linear-gradient(to top, var(--dark-body-bg), transparent);
}

/* Container Layout */
.layout {
    display: flex;
    height: 100vh;
    /* Full viewport height */
    width: 100%;
    overflow: hidden;
    /* Prevent scrolling in layout */
}

/* Main content section */
.main-section {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    /* Allow scrolling only here */
    background-color: #f4f4f4;
}

/* Example content boxes */
.content-box {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Sidebar */
.sidebar {
    width: 250px;
    background-color: #222;
    color: white;
    padding: 20px;
    flex-shrink: 0;
    overflow: hidden;
    /* Prevent scrolling in sidebar */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.title-under-line h3 {
    color: black;
    text-align: center;
    text-transform: capitalize;
    position: relative;
    margin-bottom: 48px;
    font-size: 24px;
    font-weight: 600;
}

.dark .title-under-line h3 {
    color: var(--dark-title);
}

.title-under-line h3::before {
    content: "";
    position: absolute;
    bottom: -24px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    height: 8px;
    width: 72px;
    background-color: var(--primary);
    border-radius: 8px;
}

.title-under-line.on-start h3 {
    text-align: start;
}

.title-under-line.on-start h3::before {
    inset-inline-start: 0;
    transform: translateX(0);
}

.service-detaiels .services-menu {
    background-color: white;
}

.dark .service-detaiels .services-menu {
    background-color: var(--dark-card-bg);
}

.service-detaiels .services-menu li:not(:last-child) {
    border-bottom: 1px solid#E5E5E5;
}

.dark .service-detaiels .services-menu li:not(:last-child) {
    border-color: var(--dark-border);
}

.service-detaiels .services-menu li {
    transition: all 0.4s;
    cursor: pointer;
}

.service-detaiels .services-menu li:hover {
    background-color: var(--secondary);
    color: white;
}

.service-detaiels .services-menu li.active {
    background-color: var(--secondary);
    color: white;
}

.service-detaiels .description {
    color: #555;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 166.667%;
}

.dark .service-detaiels .description {
    color: var(--dark-description);
}

@media (min-width: 680px) {
    .banner-8-icons-service-detaiels .description {
        font-size: 18px;
    }
}

.service-detaiels {
    position: relative;
}

.service-detaiels .services-mobile-menu {
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.service-detaiels .services-mobile-menu button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    padding: 8px 12px;
    background-color: var(--secondary);
    color: white;
    font-size: 12px;
    font-weight: normal;
    border-end-end-radius: 13px;
    border-end-start-radius: 13px;
    width: 100%;
}

.service-detaiels .services-mobile-menu {
    transition: all 0.8s;
}

.video-container {
    position: relative;
}

.video-container.layer::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(0deg,
            rgba(18, 18, 18, 0.7) 0%,
            rgba(18, 18, 18, 0.7) 100%);
}

.play-video-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 67px;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-card-1 {
    position: relative;
    display: flex;
    align-items: end;
    overflow: hidden;
}

.project-card-1 .project-card-1-text,
.project-card-5 .project-card-5-text {
    width: 100%;
    height: 0px;
    transition: all 0.6s;
    padding-block: 0;
}

.project-card-5 .project-card-5-text {
    transition: all 0.4s;
}

.project-card-1:hover .project-card-1-text,
.project-card-5:hover .project-card-5-text {
    height: 88px;
    padding-block: 16px;
}

@media (max-width: 639px) {
    .project-card-5:hover .project-card-5-text {
        height: 60px;
    }
}

.project-card-1 button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 32px;
    inset-inline-end: 32px;
    opacity: 0;
    transition: all 0.5s;
    z-index: 2;
}

.project-card-1:hover button {
    opacity: 1;
}

.project-card-1 button:hover {
    transform: scale(1.1);
}

.project-1 .categories li.active {
    background-color: var(--primary);
}

.project-2 .categories li.active,
.project-4 .categories li.active,
.product-1 .categories li.active,
.landing-3-categories .categories li.active {
    background-color: var(--primary);
    color: white;
    position: relative;
}

.project-2 .categories li.active::before,
.project-3 .categories li.active::before,
.project-4 .categories li.active::before,
.project-4 .project-card-4 .scope::before,
.product-1 .categories li.active::before,
.landing-3-categories .categories li.active::before,
.product-4-tab.active::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 12px;
    bottom: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, 50%);
    background-color: var(--primary);
    /* dynamic color */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12"><path d="M7.5 12L0.571796 0H14.4282L7.5 12Z" fill="black"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12"><path d="M7.5 12L0.571796 0H14.4282L7.5 12Z" fill="black"/></svg>');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    z-index: 2;
}

@media (min-width: 767px) {
    .project-4 .categories li.active::before {
        bottom: -3px;
    }
}

.project-2 .project-card-2 {
    position: relative;
    transition: all 0.7s;
    overflow: hidden;
    /* background-size: 110%; */
    background-size: cover;

    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.5s;
    overflow: hidden;
}

.project-2 .project-card-2 div {
    z-index: 3;
}

.project-2 .project-card-2::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: all 0.5s;
    z-index: -1;
}

.project-2 .project-card-2:hover::after {
    transform: scale(1.1);
    z-index: 2;
}

.project-2 .project-card-2::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 0;
    height: 4px;
    background-color: var(--primary);
    border-radius: 12px;
    transition: all 0.5s;
    z-index: 3;
}

.project-2 .project-card-2:hover:before {
    width: 100%;
}

/* .project-2 .project-card-2 {
    position: relative;
    transition: all 0.7s;
    overflow: hidden;
    background-size: 110%;

    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.5s;
}

.project-2 .project-card-2:hover {
    background-size: 100%;
}

.project-2 .project-card-2::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 0;
    height: 4px;
    background-color: var(--primary);
    border-radius: 12px;
    transition: all 0.5s;
}

.project-2 .project-card-2:hover::before {
    width: 100%;
} */

.project-3 .categories li {
    position: relative;
}

.project-3 .categories li.active {
    background-color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.project-3 .categories li.active svg {
    display: block;
}

.project-3 .project-card-3 .image-container,
.project-detailes-1 .project-card-3 .image-container,
.project-detailes-2 .project-card-3 .image-container,
.project-detailes-3 .project-card-3 .image-container,
.project-detailes-4 .project-card-3 .image-container,
.project-detailes-5 .project-card-3 .image-container {
    position: relative;
}

.project-3 .project-card-3 .image-container::before,
.project-detailes-1 .project-card-3 .image-container::before,
.project-detailes-2 .project-card-3 .image-container::before,
.project-detailes-3 .project-card-3 .image-container::before,
.project-detailes-4 .project-card-3 .image-container::before,
.project-detailes-5 .project-card-3 .image-container::before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    opacity: 0.7;
    top: 0;
    inset-inline-start: 0;
    background: var(--primary);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    transition: all 0.5s;
}

.project-3 .project-card-3:hover .image-container::before,
.project-detailes-1 .project-card-3:hover .image-container::before,
.project-detailes-2 .project-card-3:hover .image-container::before,
.project-detailes-3 .project-card-3:hover .image-container::before,
.project-detailes-4 .project-card-3:hover .image-container::before,
.project-detailes-5 .project-card-3:hover .image-container::before {
    width: 100%;
}

.project-card-3 h3,
.project-card-3 p {
    line-height: 150%;
}

.project-card-3:hover>div:nth-of-type(2)>div:last-of-type {
    transform: rotateY(180deg) translateY(-50%);
}

.project-card-3:hover>div:nth-of-type(2)>div:last-of-type p {
    transform: rotateY(-180deg);
}

.project-4 .categories li {
    position: relative;
}

.primary-opacity-bg,
.secondary-opacity-bg {
    position: relative;
}

.primary-opacity-bg::after,
.secondary-opacity-bg::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.1;
}

.primary-opacity-bg::after {
    background-color: var(--primary);
}

.secondary-opacity-bg::after {
    background-color: white;
}

.project-4 .project-card-4 .scope {
    position: absolute;
    top: 20px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px -8px 120px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(5px);
    font-weight: 500;
}

@media (min-width: 767px) {
    .project-4 .project-card-4 .scope {
        top: 40px;
    }
}

.project-4 .project-card-4 .scope::before {
    opacity: 0;
    transition: all 0.3s;
    background-color: rgba(255, 255, 255, 0.2);
    bottom: -6px;
}

.project-4 .project-card-4 .image-container:hover .scope::before {
    opacity: 1;
}

.project-5 .project-card-5 .detailes li {
    position: relative;
}

.project-5 .project-card-5 .detailes li:not(:last-child)::after {
    background-color: #dadada;
}

@media (max-width: 639px) {
    .project-5 .project-card-5 .detailes li:not(:last-child)::after {
        inset-inline-end: -7px;
        top: -2px;
    }
}

@media (max-width: 435px) {
    .project-5 .project-card-5 .detailes li:nth-child(4) {
        display: none;
    }

    .project-5 .project-card-5 .detailes li:nth-child(3)::after {
        display: none;
    }
}

.pd-navigation-container-1 {
    background: url("/themes/mytheme/assets/img/pd-1-swiper-bg.png") 50% / cover no-repeat;
}

.swiper-prev-project-1,
.swiper-next-project-1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    color: white;
    padding: 0;
    font-size: 18px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    z-index: 2;
}

.swiper-prev-project-1 {
    left: 0;
}

.swiper-next-project-1 {
    right: 0;
}

@media (min-width: 767px) {

    .swiper-prev-project-1,
    .swiper-next-project-1 {
        width: fit-content;
        height: 59px;
        padding-inline: 24px;
        border-radius: 88px;
    }
}

.pd-navigation-container-1 .swiper-slide {
    color: #272727;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    line-height: 150%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark .pd-navigation-container-1 .swiper-slide {
    color: white;
}

@media (min-width: 767px) {
    .pd-navigation-container-1 .swiper-slide {
        font-size: 32px;
    }
}

.project-detailes-1 .title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    text-transform: capitalize;
    color: var(--secondary);
}

.dark .project-detailes-1 .title {
    color: var(--dark-title);
}

.project-detailes-1 .description {
    color: #808080;
    font-size: 15px;
    line-height: 150%;
}

.dark .project-detailes-1 .description {
    color: var(--dark-description);
}

@media (min-width: 650px) {
    .project-detailes-1 .description {
        font-size: 18px;
    }
}

.project-detailes-1 section aside {
    background: url("/themes/mytheme/assets/img/pd-1-side-bg.jpg") var(--secondary) 50% / cover no-repeat;

    position: relative;
}

.project-detailes-1 section aside::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--secondary);
    opacity: 0.9;
    z-index: 3;
}

.project-detailes-1 section aside div {
    position: relative;
    z-index: 4;
}

.project-detailes-2 .pd-title-container {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 22px;
}

.project-detailes-2 .pd-title-container .title {
    color: var(--primary);
    font-size: 26px;
    font-weight: 600;
    line-height: 150%;

    position: relative;
    min-width: fit-content;
}

.project-detailes-2 .description {
    color: #515151;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
    /* 31.5px */
}

.dark .project-detailes-2 .description {
    color: var(--dark-description);
}

@media (min-width: 650px) {
    .project-detailes-2 .pd-title-container {
        margin-bottom: 32px;
    }

    .project-detailes-2 .pd-title-container .title {
        font-size: 40px;
    }

    .project-detailes-2 .description {
        font-size: 18px;
    }
}

.project-detailes-3 .title {
    display: flex;
    align-items: center;
    color: var(--secondary);
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    margin-bottom: 22px;
    width: fit-content;
}

.dark .project-detailes-3 .title {
    color: var(--dark-title);
}

.project-detailes-3 .description {
    color: #515151;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
}

.dark .project-detailes-3 .description {
    color: var(--dark-description);
}

@media (min-width: 650px) {
    .project-detailes-3 .title {
        margin-bottom: 32px;
    }

    .project-detailes-3 .description {
        font-size: 18px;
    }
}

.project-detailes-3 .similar-project-section {
    background: url("/themes/mytheme/assets/img/pd-3-similar-bg.png") lightgray 50% / cover no-repeat;
    position: relative;
}

.project-detailes-3 .similar-project-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--secondary);
    opacity: 0.9;
    z-index: 2;
}

.project-detailes-4 .project-detailes-swiper-4 .swiper-slide {
    color: var(--secondary);
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    line-height: 150%;
}

.dark .project-detailes-4 .project-detailes-swiper-4 .swiper-slide {
    color: var(--dark-title);
}

.project-detailes-4 .project-detailes-swiper-4 .swiper-prev-project-4,
.project-detailes-4 .project-detailes-swiper-4 .swiper-next-project-4 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: fit-content;
    height: fit-content;
    transition: all 0.4s;
}

.project-detailes-4 .project-detailes-swiper-4 .swiper-prev-project-4:hover svg path,
.project-detailes-4 .project-detailes-swiper-4 .swiper-next-project-4:hover svg path {
    fill: var(--primary);
}

.swiper-prev-project-4 {
    left: 0;
}

.swiper-next-project-4 {
    right: 0;
}

.project-detailes-4-nav li,
.project-detailes-4-nav li svg path {
    transition: all 0.4s;
}

.project-detailes-4-nav li:hover {
    color: var(--primary);
    background-color: var(--secondary);
}

.project-detailes-4-nav li.active {
    color: white;
    background-color: var(--primary);
}

.project-detailes-4-nav li.active svg path {
    fill: white;
}

.project-detailes-4-nav li:hover svg path {
    fill: var(--primary);
}

.project-detailes-4 .title {
    color: var(--secondary);
    font-size: 24px;
    font-weight: 600;
    line-height: 150%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.dark .project-detailes-4 .title {
    color: var(--dark-title);
}

.project-detailes-4 .description {
    color: #515151;
    font-size: 15px;
    line-height: 175%;
}

.dark .project-detailes-4 .description {
    color: var(--dark-description);
}

@media (min-width: 650px) {
    .project-detailes-4 .title {
        font-size: 40px;
        gap: 32px;
    }

    .project-detailes-4 .description {
        font-size: 18px;
    }
}

.project-detailes-4 .title h3 {
    flex-grow: 1;
}

.swiper-prev-project-5,
.swiper-next-project-5 {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(58, 61, 67, 0.1);
    border-radius: 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-inline-start: 4px;
    z-index: 2;
}

.swiper-prev-project-5 {
    left: calc(100% - 72px);
}

.swiper-next-project-5 {
    right: 0px;
}

.project-detailes-5 .project-detailes-swiper-5 .swiper-slide {
    color: #272727;
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
}

.dark .project-detailes-5 .project-detailes-swiper-5 .swiper-slide {
    color: var(--dark-title);
}

@media (min-width: 650px) {
    .project-detailes-5 .project-detailes-swiper-5 .swiper-slide {
        font-size: 24px;
    }
}

.project-detailes-5 .title {
    color: var(--primary);
    font-size: 22px;
    font-weight: 600;
    line-height: 150%;
}

.project-detailes-5 .description {
    color: #515151;
    font-size: 15px;
    line-height: 175%;
}

.dark .project-detailes-5 .description {
    color: var(--dark-description);
}

@media (min-width: 650px) {
    .project-detailes-5 .title {
        font-size: 40px;
    }

    .project-detailes-5 .description {
        font-size: 18px;
    }
}

.prject-info div:not(:last-child) {
    position: relative;
}

.prject-info div:not(:last-child)::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: #dadada;
    top: 2px;
    inset-inline-end: -13px;
    display: none;
}

@media (min-width: 650px) {
    .prject-info div:not(:last-child)::after {
        display: block;
    }
}

@media (min-width: 1024px) {
    .prject-info div:not(:last-child)::after {
        inset-inline-end: -24px;
    }
}

.project-detailes-5-nav li a,
.project-detailes-5-nav li a svg path {
    transition: all 0.4s;
}

.project-detailes-5-nav li a.active {
    position: relative;
}

.project-detailes-5-nav li a.active::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 5px;
    background-color: var(--primary);
    left: -32px;
}

.project-detailes-5-nav li a.active,
.project-detailes-5-nav li a:hover {
    color: var(--primary);
}

.project-detailes-5-nav li a.active svg path,
.project-detailes-5-nav li a:hover svg path {
    fill: var(--primary);
    fill-opacity: 1;
}

.project-card-1,
.project-card-2,
.project-card-3,
.project-card-4,
.project-card-5 {
    transition: all 0.5s ease-in-out;
}

.hidden-article {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    transition: all 0.5s ease-out;
    position: absolute !important;
    visibility: hidden;
}

.show-article {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    position: relative;
    visibility: visible;
    transition: all 0.5s ease-in;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    /* display: none; */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background: white;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    border-radius: 12px;
    padding: 20px;
}

/* -------------------------------------------------- */

.accordion-item {
    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 16px 12px;
    transition: all 0.5s;
}

.accordion-header .icon-container {
    width: 36px;
    height: 36px;

    border-radius: 8px;
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s ease;
    aspect-ratio: 1/1;
}

.accordion-header .icon-container .on-q-open {
    display: none;
}

.accordion-header:hover {
    background-color: #f5f5f5;
    border-radius: 8px;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    background-color: #fafafa;
    color: #555555;
    border-radius: 0 0 8px 8px;
    padding: 0 30px;
    font-size: 15px;
}

.accordion-content.open {
    border-top: 1px solid #e0e0e0;
    max-height: 550px;
    padding: 14px 20px;
}

@media (min-width: 650px) {
    .accordion-header {
        gap: 24px;
        padding: 10px 20px;
    }

    .accordion-header .icon-container {
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }

    .accordion-content {
        font-size: 18px;
        padding: 0 30px;
    }

    .accordion-content.open {
        font-size: 18px;
        padding: 20px 30px;
    }
}

.career-card .main-content {
    position: relative;
    transition: background-color 0.3s ease;
    perspective: 800px;
}

.btn-flip {
    opacity: 1;
    outline: 0;
    position: relative;
    display: inline-block;
    width: 113px;
}

/* Front Face */
.btn-flip::before {
    content: attr(data-front);
    position: relative;
    display: block;
    padding: 5px 20px;
    border-radius: 10px;
    line-height: 30px;
    background-color: var(--primary);
    color: white;
    opacity: 1;
    transform: translateX(0) rotateY(0);
    transition: 0.5s;
    backface-visibility: hidden;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: bold;
    transform-origin: center;
}

/* Back Face */
.btn-flip::after {
    content: attr(data-back);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px 20px;
    border-radius: 10px;
    line-height: 30px;
    display: block;
    background-color: white;
    color: var(--primary);
    opacity: 0;
    transform: translateX(-50%) rotateY(90deg);
    transition: 0.5s;
    backface-visibility: hidden;
    font-size: 16px;
    font-weight: bold;
    text-transform: capitalize;
    transform-origin: center;
}

.career-card:hover .btn-flip::before {
   opacity: 0;
   transform: translateX(50%) rotateY(90deg);
   transform-origin: center;
}

.career-card:hover .btn-flip::after {
   opacity: 1;
   transform: translateX(0) rotateY(0);
   transform-origin: center;
}

.careers-card-4 {
   position: relative;
   transition: all 0.5s;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

/* .careers-card-4::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background: linear-gradient(
      0deg,
      rgba(18, 18, 18, 0.5) 0%,
      rgba(18, 18, 18, 0.5) 100%
   );
   top: 0;
   left: 0;
   z-index: 1;
   border-radius: 6px;
   transition: all 0.5s;
}

.careers-card-4:hover::before {
   background: linear-gradient(
      180deg,
      rgba(32, 32, 32, 0.7) 0%,
      rgba(18, 18, 18, 0.7) 100%
   );
} */

.careers-card-4::before,
.careers-card-4::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 1;
   border-radius: 6px;
   transition: all 0.5s;
}

.careers-card-4::before {
   background: linear-gradient(
      0deg,
      rgba(18, 18, 18, 0.5) 0%,
      rgba(18, 18, 18, 0.5) 100%
   );
   opacity: 1;
}
.careers-card-4::after {
   background: linear-gradient(
      180deg,
      rgba(32, 32, 32, 0.7) 0%,
      rgba(18, 18, 18, 0.7) 100%
   );

   opacity: 0;
}

.careers-card-4:hover::before {
   opacity: 0;
}
.careers-card-4:hover::after {
   opacity: 1;
}

.swiper-career-overlay {
   width: 100%;
   height: 100%;
   position: absolute;
   display: flex;
   align-items: flex-end;
   border-radius: 16px;
   transition: all 0.5s ease;
   opacity: 0;
}
.swiper-career-overlay::before {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   inset: 0;
   background-color: var(--primary);
   border-radius: 16px;
   opacity: 0.7;
}

.swiper-1-careers .swiper-slide:hover .swiper-career-overlay,
.swiper-2-careers .swiper-slide:hover .swiper-career-overlay {
   opacity: 1;
}

.swiper-career-overlay-content {
   padding-left: 30px;
   padding-right: 30px;
   margin-bottom: 26px;
   position: relative;
   z-index: 3;
}

.swiper-career-overlay-tag {
   font-size: 12px;
   padding: 0.5rem;
   background: var(--secondary);
   color: white;
   border-radius: 4px;
   height: 28px;
   text-align: center;
   width: fit-content;
   margin-bottom: 8px;
   text-transform: capitalize;
   display: flex;
   align-items: center;
   justify-content: center;
}

.swiper-career-overlay-title {
   font-size: 16px;
   font-weight: bold;
   line-height: 150%;
   color: white;
}

@media (min-width: 640px) {
   .swiper-career-overlay-tag {
      font-size: 16px;
   }
   .swiper-career-overlay-title {
      font-size: 24px;
   }
}

.career-form .label {
   color: #808080;
   font-size: 12px;
   font-weight: 500;
   display: block;
   margin-bottom: 8px;
   text-transform: capitalize;

   display: flex;
   align-items: center;
   gap: 16px;

   color: #373737;
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 18px;
}

.career-form input,
.career-form textarea,
.career-form .value-container,
.social-media-container {
   padding: 10px 14px;
   border-radius: 8px;
   border: 1px solid #dadada;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
   color: #808080;
   outline: none;
   width: 100%;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
   background-color: transparent;
}
.career-form textarea {
   height: 115px;
   padding-top: 18px;
}

.career-form input::placeholder,
.career-form textarea::placeholder {
   text-transform: capitalize;
   color: #aeaeae;
   font-size: 15px;
}

.dark .career-form input::placeholder,
.dark .career-form textarea::placeholder {
   color: #808080;
}

.dark .career-form .label,
.dark .career-form input,
.dark .career-form .value-container,
.dark .career-form input::placeholder,
.dark .career-form textarea::placeholder {
   color: var(--dark-description);
}
.dark .career-form input,
.dark .career-form textarea,
.dark .career-form .operation-btn,
.dark .social-media-container {
   border-color: var(--dark-border);
}

.career-form .operation-btn {
   border-radius: 12px;
   border: 1px solid #ebebeb;
   display: flex;
   padding: 12px;
   align-items: center;
   justify-content: baseline;
   height: 46px;
}

@media (min-width: 650px) {
   .career-form .label {
      font-size: 18px;
      margin-bottom: 20px;
   }

   .career-form input,
   .career-form .value-container,
   .social-media-container {
      padding: 15px 20px;
      height: 54px;
   }
   .career-form .operation-btn {
      height: 56px;
      padding: 17px;
   }
}

.career-deadline {
   width: 123px;

   height: 45px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-block: 14px;
   position: absolute;
   inset-inline-end: 0;
   /* top: 340px; */
   top: 72px;

   overflow: hidden;

   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='45' viewBox='0 0 216 79' fill='none'%3E%3Cpath d='M216 0V78.5H24.7784C21.8353 78.5 19.1299 76.8841 17.7346 74.2928L1.02933 43.2688C-0.23852 40.9142 -0.246025 38.0818 1.00933 35.7205L17.7434 4.24458C19.1321 1.63251 21.8489 0 24.8072 0H216Z' fill='%23000'/%3E%3C/svg%3E")
      no-repeat center/cover;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
   -webkit-mask-size: cover;

   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='45' viewBox='0 0 216 79' fill='none'%3E%3Cpath d='M216 0V78.5H24.7784C21.8353 78.5 19.1299 76.8841 17.7346 74.2928L1.02933 43.2688C-0.23852 40.9142 -0.246025 38.0818 1.00933 35.7205L17.7434 4.24458C19.1321 1.63251 21.8489 0 24.8072 0H216Z' fill='%23000'/%3E%3C/svg%3E")
      no-repeat center/cover;
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: cover;
   background-color: var(--secondary);
}

@media (min-width: 767px) {
   .career-deadline {
      width: 217px;
      top: 340px;
      height: 79px;

      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='79' viewBox='0 0 216 79' fill='none'%3E%3Cpath d='M216 0V78.5H24.7784C21.8353 78.5 19.1299 76.8841 17.7346 74.2928L1.02933 43.2688C-0.23852 40.9142 -0.246025 38.0818 1.00933 35.7205L17.7434 4.24458C19.1321 1.63251 21.8489 0 24.8072 0H216Z' fill='%23000'/%3E%3C/svg%3E")
         no-repeat center/cover;

      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='79' viewBox='0 0 216 79' fill='none'%3E%3Cpath d='M216 0V78.5H24.7784C21.8353 78.5 19.1299 76.8841 17.7346 74.2928L1.02933 43.2688C-0.23852 40.9142 -0.246025 38.0818 1.00933 35.7205L17.7434 4.24458C19.1321 1.63251 21.8489 0 24.8072 0H216Z' fill='%23000'/%3E%3C/svg%3E")
         no-repeat center/cover;
   }
}

.career-popup-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 9999;
}
.career-popup-overlay.active {
   display: flex;
}

.blog-category {
   padding: 8px 20px;
   text-transform: capitalize;
   font-size: 14px;
   line-height: 188%;
   color: #555;
   border-bottom: 1px solid #ebebeb;
   border-radius: 12px 12px 0 0;
   transition: all 0.3s ease;
}

@media (min-width: 640px) {
   .blog-category {
      font-size: 16px;
   }
}

.dark .blog-category {
   color: var(--dark-description);
   border-bottom-color: var(--dark-border);
}

.blog-category:hover {
   background: var(--primary);
   color: white !important;
   border-radius: 12px;
}

.blog-card-1 .blog-image-container,
.blog-card-2 .blog-image-container {
   position: relative;
}
.blog-card-1 .blog-image-container::before,
.blog-card-2 .blog-image-container::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.3) 100%
   );
   opacity: 0;
   transition: all 0.5s;
}
.blog-card-1:hover .blog-image-container::before,
.blog-card-2:hover .blog-image-container::before {
   opacity: 0.3;
}

.blog-card-2 button {
   transform-origin: center;
   transform-style: preserve-3d;
   transform: scaleX(1) translateY(-50%);
   transition: all 0.5s;
}
.blog-card-2:hover button {
   animation: button-animation 0.5s ease-in-out 1;
}

@keyframes button-animation {
   0% {
      transform: scaleX(1) translateY(-50%);
   }
   50% {
      transform: scaleX(0) translateY(-50%);
   }
   100% {
      transform: scaleX(1) translateY(-50%);
   }
}

.main-comment,
.reply {
   position: relative;
}

.comments-container > div:not(:last-child) .reply:last-child:after,
.comments-container > div:not(:last-child) .main-comment::after {
   content: "";
   width: 100%;
   height: 0.5px;
   max-height: 0.5px;
   position: absolute;
   left: 0;
   background-color: #e1e1e1;
}

.comments-container > div:not(:last-child) .main-comment::after,
.comments-container > div:not(:last-child) .reply:last-child:after {
   bottom: -20px;
}

@media (min-width: 650px) {
   .comments-container > div:not(:last-child) .main-comment::after,
   .comments-container > div:not(:last-child) .reply:last-child:after {
      bottom: -40px;
   }
}

.comment {
   display: flex;
   align-items: flex-start;
   gap: 16px;
}

.comment-img {
   width: 65px;
   min-width: 65px;
   max-width: 65px;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
}

.comment-body {
   flex: 1;
}

.comment-header {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 4px;
   margin-bottom: 8px;
}

.comment-author {
   font-size: 17px;
   font-weight: bold;
   line-height: 150%;
   letter-spacing: -0.02px;
}

.comment-date {
   color: var(--primary);
   font-size: 12px;
   line-height: 150%;
   letter-spacing: -0.014px;
}

.comment-text {
   margin-top: 4px;
   font-size: 12px;
   line-height: 150%;
   color: #555;
}

.dark .comment-text {
   color: var(--dark-description);
}

.comment-reply {
   margin-top: 4px;
   font-size: 14px;
   font-weight: bold;
   line-height: 188%;
   color: var(--primary);
   display: flex;
   align-items: center;
   gap: 8px;
   background: none;
   border: none;
   cursor: pointer;
}

.comment-reply-icon {
   width: 19px;
   height: 19px;
}

.comment.reply {
   margin-top: 40px;
   padding-inline-start: 40px;
}

@media (min-width: 640px) {
   .comment-img {
      width: 120px;
      min-width: 120px;
      max-width: 120px;
   }
   .comment-header {
      flex-direction: row;
      align-items: center;
      gap: 30px;
      margin-bottom: 0;
   }
   .comment-author {
      font-size: 20px;
   }
   .comment-date {
      font-size: 14px;
   }
   .comment-text {
      font-size: 16px;
   }

   .comment-reply {
      font-size: 16px;
      gap: 12px;
   }
   .comment-reply-icon {
      width: 24px;
      height: 24px;
   }

   .comment.reply {
      margin-top: 80px;
      padding-inline-start: 100px;
   }
}

.main-list {
   padding-block: 16px;
   background-color: white;
   z-index: 10;
}

.dark .main-list {
   background-color: var(--dark-body-bg);
}

.main-list li {
   padding: 16px 20px;
   cursor: pointer;
   transition: all 0.4s;
}
.main-list li:hover {
   color: var(--primary);
   background-color: #f5f5f5;
}
.dark .main-list li:hover {
   background-color: var(--dark-secondary-bg);
}

.job-menu-container.open .main-list {
   height: auto; /* expand when open */
}

.job-menu-container .arrow {
   transition: transform 0.3s ease;
}
.job-menu-container.open .arrow {
   transform: rotate(180deg);
}

.custom-select {
   position: relative;
   width: 220px;
   font-family: sans-serif;
   user-select: none;
}
.dropdown.open .main-list {
   height: auto;
   opacity: 1;
}

.dropdown .arrow {
   transition: transform 0.3s ease;
}
.dropdown.open .arrow {
   transform: rotate(180deg);
}

/* selected area */

.custom-select .selected {
   display: flex;
   align-items: center; /* push arrow to the right */
   gap: 10px;
   padding: 12px 16px;
   border: 1px solid #ddd;
   border-radius: 8px;
   background: #fff;
   cursor: pointer;
   height: 54px;
}

.custom-select .arrow {
   transition: transform 0.3s ease;
   margin-inline-start: auto;
}

.custom-select.open .arrow {
   transform: rotate(180deg);
}

.custom-select .selected i {
   transition: transform 0.3s;
}
.custom-select .selected i:hover {
   transform: scale(1.25);
}

/* dropdown list */
.custom-select .options {
   position: absolute;
   top: 110%;
   left: 0;
   right: 0;
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 6px 0;
   list-style: none;
   margin: 0;
   display: none;
   z-index: 20;
}

.custom-select.open .options {
   display: block;
}

.custom-select .options li {
   padding: 10px 16px;
   display: flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
   transition: all 0.2s;
}

.custom-select .options li:hover {
   background: #f3f3f3;
}

/* dark mode */
.dark .custom-select .selected,
.dark .custom-select .options {
   background: var(--dark-body-bg);
   color: white;
   border-color: #555;
}
.dark .custom-select .options li:hover {
   background: #444;
}

/* ------------------------------ */

.team-1 .image-container,
.team-2 .image-container {
   position: relative;
}

.team-1 .image-container::before,
.team-2 .image-container::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   background-color: var(--primary);
   transition: all 0.5s;
   opacity: 0;
}
.team-2 .image-container::before {
   height: 0px;
   opacity: 0.8;
   bottom: 0;
   top: auto;
   transition: all 0.75s;
}

.team-1:hover .image-container::before {
   opacity: 0.8;
}

.team-2:hover .image-container::before {
   height: 100%;
}

.team-3 img {
   transition: all 0.5s;
}

.team-3:hover img {
   transform: rotateY(180deg);
}

.team-4 {
   position: relative;
}
.team-4::before {
   content: "";
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 0;
   width: 100%;
   height: 0;
   background-color: var(--primary);
   opacity: 0.8;
   transition: all 0.6s;
}

.team-4:hover::before {
   height: 100%;
}

.team-5 .image-container,
.team-6 .image-container {
   position: relative;
}

.team-5 .image-container::before,
.team-6 .image-container::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: var(--primary);
   border-radius: 50%;
   opacity: 0;
   transition: all 0.5s;
   z-index: 2;
}

.team-5:hover .image-container::before,
.team-6:hover .image-container::before {
   opacity: 0.8;
}

.team-details-1 .quote-section {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    background: url("/assets/img/banner-7-bg.jpg") lightgray 50% / cover no-repeat;
    position: relative;
}

@media (min-width: 640px) {
    .team-details-1 .quote-section {
        padding: 80px;
        gap: 48px;
    }
}

.team-details-1 .quote-section svg,
.team-details-1 .quote-section h4 {
    position: relative;
    z-index: 3;
}

.team-details-1 .quote-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #272727;
    opacity: 0.9;
}

.team-detailes-tag {
    background-color: white;
    padding: 8px;
    /* min-height: 40px; */
    line-height: 150%;
    border-radius: 4px;
    color: #272727;
    font-style: italic;
    text-transform: capitalize;
    font-size: 14px;
}

.dark .team-detailes-tag {
    background-color: var(--dark-card-bg);
    color: white;
}

@media (min-width: 640px) {
    .team-detailes-tag {
        font-size: 16px;
    }
}

.team-detailes-3 .image-container {
    position: relative;
}

.team-detailes-3 .image-container .dash {
    position: absolute;
    background: rgba(var(--primary-rgb), 0.2);
    z-index: -1;
    transition: all 0.5s;
}

.team-detailes-3 .image-container:hover .dash {
    background: var(--primary);
}

.team-detailes-3 .image-container .top-right,
.team-detailes-3 .image-container .top-left {
    height: 48px;
    width: 64px;
    top: -16px;
}

.team-detailes-3 .image-container .top-mid {
    width: 25%;
    height: 16px;
    top: -8px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
}

.team-detailes-3 .image-container .top-right {
    inset-inline-end: -8px;
}

.team-detailes-3 .image-container .top-left {
    inset-inline-start: -8px;
}

.team-detailes-3 .image-container .top-right,
.team-detailes-3 .image-container .top-left {
    height: 48px;
    width: 64px;
    top: -8px;
}

.team-detailes-3 .image-container .left-top,
.team-detailes-3 .image-container .left-mid,
.team-detailes-3 .image-container .left-bottom {
    width: 8px;
    inset-inline-start: -8px;
}

.team-detailes-3 .image-container .right-top,
.team-detailes-3 .image-container .right-mid,
.team-detailes-3 .image-container .right-bottom {
    width: 8px;
    inset-inline-end: -8px;
}

.team-detailes-3 .image-container .left-top,
.team-detailes-3 .image-container .left-mid,
.team-detailes-3 .image-container .right-top,
.team-detailes-3 .image-container .right-mid {
    height: 17.5%;
}

.team-detailes-3 .image-container .left-top,
.team-detailes-3 .image-container .right-top {
    bottom: calc(17.5% + 16px);
}

.team-detailes-3 .image-container .left-mid,
.team-detailes-3 .image-container .right-mid {
    bottom: calc(52.5% + 16px);
}

.team-detailes-3 .image-container .left-bottom,
.team-detailes-3 .image-container .right-bottom {
    height: 32px;
    bottom: 0;
}

@media (min-width: 640px) {
    .team-detailes-3 .image-container .top-mid {
        top: -16px;
    }

    .team-detailes-3 .image-container .top-right {
        inset-inline-end: -16px;
    }

    .team-detailes-3 .image-container .top-left {
        inset-inline-start: -16px;
    }

    .team-detailes-3 .image-container .top-right,
    .team-detailes-3 .image-container .top-left {
        top: -16px;
    }

    .team-detailes-3 .image-container .left-top,
    .team-detailes-3 .image-container .left-mid,
    .team-detailes-3 .image-container .left-bottom {
        width: 16px;
        inset-inline-start: -16px;
    }

    .team-detailes-3 .image-container .right-top,
    .team-detailes-3 .image-container .right-mid,
    .team-detailes-3 .image-container .right-bottom {
        width: 16px;
        inset-inline-end: -16px;
    }
}

.team-details-tags-2-container-1,
.team-details-tags-2-container-2 {
    counter-reset: card-counter;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.team-details-tag-2 {
    counter-increment: card-counter;
    width: fit-content;
    background-color: white;
    position: relative;
}

.team-details-tag-2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0px;
    background-color: var(--primary);
    transition: all 0.5s;
}

.team-details-tag-2:hover:before {
    height: 100%;
}

.team-details-tag-2:hover h2::before,
.team-details-tag-2:hover p {
    color: white;
    position: relative;
    z-index: 3;
}

.team-details-tag-2:hover p {
    border-color: white !important;
}

.dark .team-details-tag-2 {
    background-color: var(--dark-card-bg);
}

.team-details-tag-2 h2::before {
    content: counter(card-counter);
    display: block;
    color: rgba(18, 18, 18, 0.2);
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 60px */
    padding: 8px;
    text-align: center;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
}

.team-details-tag-2 h2::before {
    color: var(--dark-description);
}

.team-details-tag-2 p {
    text-align: center;
    padding: 4px 16px;
    color: #272727;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 150%;
    border-top: 1px solid rgba(218, 218, 218, 1);
    text-transform: capitalize;
    transition: all 0.5s;
}

.dark .team-details-tag-2 p {
    color: var(--dark-title);
    border-color: var(--dark-border);
}

@media (min-width: 640px) {
    .team-details-tag-2 h2::before {
        font-size: 40px;
    }

    .team-details-tag-2 p {
        font-size: 14px;
    }
}

.team-info-list {
    padding: 20px;
    background-color: #f0f0f0;
}

.dark .team-info-list {
    background-color: var(--dark-secondary-bg);
}

.team-info-list h5 {
    color: #272727;
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #dadada;
}

.dark .team-info-list h5 {
    color: var(--dark-title);
    border-color: var(--dark-border);
}

.team-info-list .personal-list {
    padding-block: 12px;
}

.team-info-list .personal-list li {
    padding-block: 12px;
    border-bottom: 1px solid #dadada;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    color: #272727;
    font-size: 12px;
    line-height: 150%;
    text-transform: capitalize;
}

.dark .team-info-list .personal-list li {
    color: var(--dark-description);
    border-color: var(--dark-border);
}

@media (min-width: 650px) {
    .team-info-list {
        padding: 48px;
    }

    .team-info-list h5 {
        font-size: 24px;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .team-info-list .personal-list {
        padding-block: 24px;
    }

    .team-info-list .personal-list li {
        padding: 16px;
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .team-info-list {
        padding: 64px;
    }
}

.product-card-1 .image-container,
.product-card-2,
.product-card-4 {
   position: relative;
}

.product-card-1 .image-container::before,
.product-card-2::before,
.product-card-4::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   inset: 0;
   background-color: var(--secondary);
   opacity: 0;
   transition: all 0.5s;
}
.product-card-4::before {
   background-color: #f0f0f0;
}

.dark .product-card-4::before {
   background-color: var(--dark-card-bg);
}

.product-card-1:hover .image-container::before,
.product-card-2:hover::before {
   opacity: 0.2;
}

.product-card-4:hover::before {
   opacity: 1;
}

.product-3-tag {
   border-radius: 84px;
   border: 1px solid #dadada;
   box-shadow: 0 -8px 120px 0 rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(5px);
   color: #808080;
   text-align: center;
   font-size: 12px;
   line-height: 150%; /* 18px */
   text-transform: capitalize;
   height: 30px;
   padding: 6px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.dark .product-3-tag {
   color: var(--dark-description);
   border-color: var(--dark-border);
}

.product-card-3:hover .product-3-tag {
   border-color: white;
   color: white;
}

.product-card-4 .image-container {
   position: relative;
   width: 100%;
   overflow: hidden;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   overflow: hidden;
   opacity: 1;
   transition: all 0.5s;
   transform-origin: center;
}

.product-card-4:hover .image-container {
   opacity: 1;
   transform: scaleX(1.3);
}

.product-4 .categories li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
   padding-inline-end: 8px;
   position: relative;
}

.product-4 .categories li div {
   display: flex;
   align-items: center;
   gap: 16px;
   padding-block: 16px;
   padding-inline-start: 12px;
   padding-inline-end: 8px;
   line-height: 150%;
   color: #272727;
   cursor: pointer;
   flex-grow: 1;
   text-transform: capitalize;
}

.dark .product-4 .categories li div {
   color: var(--dark-title);
}
.product-4 .categories li div,
.product-4 .categories li span {
   position: relative;
   z-index: 2;
}

.product-4 .categories li .check-box {
   border-radius: 4px;
   border: 1px solid #dadada;
   display: flex;
   max-width: 18px;
   height: 18px;
   padding: 2px;
   justify-content: center;
   align-items: center;
   gap: 10px;
   cursor: pointer;
}

.dark .product-4 .categories li .check-box {
   border-color: var(--dark-border);
}
.product-4 .categories li.checked .check-box {
   border-color: var(--primary);
}

.product-4 .categories li.checked .check-box span {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 4px;
   background-color: var(--primary);
}
.product-4 .categories li::before,
.product-4 .categories li::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   opacity: 0;
}

.product-4 .categories li::before {
   background-color: #f0f0f0;
   z-index: -2;
}

.dark .product-4 .categories li::before {
   background-color: var(--dark-card-bg);
   z-index: -2;
}

.product-4 .categories li::after {
   background-color: var(--primary);
   z-index: -1;
}
.product-4 .categories li:hover:before {
   opacity: 1;
}

.product-4 .categories li.checked::after {
   opacity: 0.1;
}

.product-4 .categories li .count {
   min-width: 26px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   background-color: #f9f9fa;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 12px;
}
.dark .product-4 .categories li .count {
   background-color: var(--dark-card-bg);
}

.product-4 .categories li.checked .count {
   background-color: #f9f9fa;
}
.dark .product-4 .categories li.checked .count {
   background-color: var(--dark-bg-bg);
}

.product-details-swiper-thumbs .swiper-slide-thumb-active {
   border-color: var(--primary);
}

.product-4-tab {
   padding: 12px 16px;
   border-radius: 4px;
   border: 1px solid #ebebeb;
   color: #626262;
   font-size: 14px;
   line-height: 150%; /* 21px */
   text-transform: uppercase;
   position: relative;
}

.dark .product-4-tab {
   border-color: var(--dark-border);
   columns: var(--dark-description);
   color: var(--dark-description);
}

.product-4-tab.active {
   color: #fff;
   border: 1px solid var(--primary);
   background: var(--primary);
}

.tab-content {
   display: none;
   margin-top: 10px;
}

.tab-content.active {
   display: flex;
}

.product-opinion {
   padding-block: 22px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   border-bottom: 1px solid #dadada;
}

.dark .product-opinion {
   border-color: var(--dark-border);
}

.product-opinion .info-container {
   display: flex;
   align-items: start;
   gap: 12px;
}
.product-opinion .info-container img {
   width: 30px;
   height: 30px;
   border-radius: 50%;
}

.product-opinion .info-container h6 {
   color: #272727;
   font-size: 11px;
   font-weight: 600;
   line-height: 123%;
}

.product-opinion .info-container span {
   color: #808080;
   font-size: 11px;
   line-height: 123%;
}

.dark .product-opinion .info-container span {
   color: var(--dark-description);
}

.dark .product-opinion .info-container h6 {
   color: var(--dark-title);
}

.product-opinion p {
   color: #272727;
   font-size: 13px;
   font-weight: 400;
   line-height: 133.333%;
}
.dark .product-opinion p {
   color: var(--dark-description);
}

@media (min-width: 650px) {
   .product-opinion {
      padding-block: 32px;
   }
   .product-opinion .info-container img {
      width: 36px;
      height: 36px;
   }
   .product-opinion .info-container h6 {
      font-size: 13px;
   }

   .product-opinion .info-container span {
      font-size: 13px;
   }

   .product-opinion p {
      font-size: 15px;
   }
}

.pagination-3 {
   width: fit-content;
   display: flex;
   justify-content: center;
   align-items: center;
}

.pagination-3 .next {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--secondary);
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.4s;
}

.pagination-3 .next:hover {
   opacity: 0.9;
}

.pagination-3 .numbers-container {
   display: flex;
   justify-content: center;
   align-items: center;
}

.pagination-3 .numbers-container li .page-num {
   width: 36px;
   height: 36px;
   text-align: center;
   background: transparent;
   border-radius: 50%;
   color: #808080;
   position: relative;
   transition: all 0.5s;
   font-size: 15px;
   cursor: pointer;
   padding: 8px;
}
.dark .pagination-3 .numbers-container li .page-num {
   color: var(--dark-description);
}
.pagination-3 .numbers-container li .page-num:hover {
   color: var(--primary);
}

.pagination-3 .numbers-container li .page-num.active {
   background-color: var(--primary);
   color: white;
}

.sort-menu-container.open .main-list {
   height: auto;
   opacity: 1;
}

.sort-menu-container .arrow {
   transition: transform 0.3s ease;
}
.sort-menu-container.open .arrow {
   transform: rotate(180deg);
}

.specifications-container {
   width: 100%;
   padding: 16px;
   border-radius: 20px;
   border: 1px solid #dadada;
}

.dark .specifications-container {
   border-color: var(--dark-border);
}
.specifications-container .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-block: 16px;
   margin-bottom: 16px;
}

.specifications-container .header h3 {
   color: #272727;
   font-size: 15px;
   font-weight: 600;
   line-height: 89%;
}
.dark .specifications-container .header h3 {
   color: var(--dark-title);
}
.specifications-container .body .item {
   padding-top: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
}

.specifications-container .body .item:not(:last-child) {
   border-bottom: 1px solid #dadada;
   padding-bottom: 16px;
}

.dark .specifications-container .body .item:not(:last-child) {
   border-color: var(--dark-border);
}

.specifications-container .body .item h5,
.specifications-container .body .item p {
   color: #515151;
   font-size: 12px;
   font-weight: 500;
   flex: 1;
}

.specifications-container .body .item p {
   text-transform: capitalize;
}
.dark .specifications-container .body .item h5,
.dark .specifications-container .body .item p {
   color: var(--dark-description);
}

@media (min-width: 650px) {
   .specifications-container {
      padding: 32px;
   }
   .specifications-container .header h3 {
      font-size: 18px;
   }
   .specifications-container .body .item {
      gap: 30px;
   }
   .specifications-container .body .item h5,
   .specifications-container .body .item p {
      font-size: 16px;
   }
}

.testimonials-1 {
    position: relative;
}

.testimonials-1::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* left: 50%;
   transform: translateX(-50%) ; */
    background-color: var(--primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: all 0.5s;
    z-index: -1;
    opacity: 0;
}

.testimonials-1:hover::before {
    transform: scaleX(1);
    opacity: 1;
}

.testimonials-3 {
    position: relative;
    transition: all 0.5s;
}

.testimonials-3:hover {
    background-color: #f0f0f0;
}

.dark .testimonials-3:hover {
    background-color: var(--dark-card-bg);
}

.testimonials-3 .testimonials-icon {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
}

.testimonials-3 .testimonials-icon svg path {
    transition: all 0.4s;
}

.testimonials-3:hover .testimonials-icon svg path {
    fill: var(--primary);
    opacity: 1;
}

.testimonials-3 .desc {
    transition: all 0.5s;
}

.testimonials-3:hover .desc {
    transform: translateY(-12px);
}

@media (min-width: 650px) {
    .testimonials-3 .testimonials-icon {
        top: 32px;
        inset-inline-end: 32px;
    }
}

.testimonials-4 img {
    transition: all 0.5s;
    z-index: 3;
}

.testimonials-4:hover img {
    transform: translate(-50%, -50%) rotateY(-180deg);
}

.testimonials-5-swiper .swiper-slide {
    padding: 80px 20px 40px;
    border-radius: 22px;
    background: rgba(var(--primary-rgb), 0.1);
}

.testimonials-5-swiper .swiper-slide .left-icon,
.testimonials-5-swiper .swiper-slide .right-icon {
    position: absolute;
    width: 48px;
    height: 48px;
    /*78px*/
}

.testimonials-5-swiper .swiper-slide .left-icon {
    top: 25px;
    inset-inline-start: 30px;
}

.testimonials-5-swiper .swiper-slide .right-icon {
    bottom: 25px;
    inset-inline-end: 30px;
}

.testimonials-5-swiper .swiper-slide .testimonials-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 40px;
    text-align: center;
}

.testimonials-5-swiper .swiper-slide .testimonials-info h3 {
    color: #272727;
    text-align: center;
    font-size: 16px;
    /*20*/
    line-height: 200%;
}

.testimonials-5-swiper .swiper-slide .testimonials-info p {
    color: #272727;
    text-align: center;
    font-size: 15px;
    /*15*/
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 6px;
}

.testimonials-5-swiper .swiper-slide .testimonials-info span {
    color: #808080;
    text-align: center;
    font-size: 13px;
    /*13*/
    font-weight: 500;
    line-height: 150%;
}

.testimonials-5-swiper .swiper-button-next,
.testimonials-5-swiper .swiper-button-prev {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    z-index: 5;
}

/* .testimonials-5-swiper .swiper-button-next {
   right: -25px;
}
.testimonials-5-swiper .swiper-button-prev {
   left: -25px;
} */

.testimonials-5-swiper .swiper-button-next::after,
.testimonials-5-swiper .swiper-button-prev::after {
    content: "";
}

@media (min-width: 640px) {
    .testimonials-5-swiper .swiper-slide {
        padding: 80px 130px;
        border-radius: 32px;
    }

    .testimonials-5-swiper .swiper-slide .left-icon,
    .testimonials-5-swiper .swiper-slide .right-icon {
        width: 80px;
        height: 80px;
    }

    .testimonials-5-swiper .swiper-slide .left-icon {
        inset-inline-start: 40px;
    }

    .testimonials-5-swiper .swiper-slide .right-icon {
        inset-inline-end: 40px;
    }

    .testimonials-5-swiper .swiper-slide .testimonials-info {
        gap: 80px;
    }

    .testimonials-5-swiper .swiper-slide .testimonials-info h3 {
        font-size: 22px;
    }

    .testimonials-5-swiper .swiper-slide .testimonials-info p {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .testimonials-5-swiper .swiper-slide .testimonials-info span {
        font-size: 16px;
    }
}

@media (min-width: 768px) {
    .testimonials-5-swiper .swiper-slide {
        padding: 80px 150px;
    }
}

@media (min-width: 1024px) {
    .testimonials-5-swiper .swiper-slide {
        padding: 80px 180px;
    }

    .testimonials-5-swiper .swiper-slide .left-icon,
    .testimonials-5-swiper .swiper-slide .right-icon {
        width: 120px;
        height: 120px;
    }

    .testimonials-5-swiper .swiper-slide .left-icon {
        inset-inline-start: 60px;
        top: 40px;
    }

    .testimonials-5-swiper .swiper-slide .right-icon {
        inset-inline-end: 60px;
        bottom: 40px;
    }

    .testimonials-5-swiper .swiper-slide .testimonials-info h3 {
        font-size: 28px;
    }
}

@media (min-width: 1280px) {
    .testimonials-5-swiper .swiper-slide {
        padding: 80px 256px;
    }
}

.product-quote-1-card,
.product-quote-2-card {
    transition: all 0.5s;
    position: relative;
    overflow: hidden;
}

.product-quote-1-card:hover {
    background-color: #f5f5f5;
}

.dark .product-quote-1-card:hover {
    background-color: var(--dark-secondary-bg);
}

.product-quote-1-card .delete-icon {
    min-width: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
    position: absolute;
    top: 24px;
    inset-inline-end: -20px;
    transition: all 0.5s;
    cursor: pointer;
}

.product-quote-1-card:hover .delete-icon {
    inset-inline-end: 24px;
}

.product-quote-2-card .delete-icon {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
}

@media (min-width: 650px) {
    .product-quote-2-card .delete-icon {
        top: 12px;
        inset-inline-end: 12px;
    }
}

.favorite-badge {
    position: absolute;

    min-width: 16px;
    min-height: 16px;
    width: fit-content;
    padding: 4px;
    max-width: 20px;
    max-height: 20px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    font-size: 12px;
    color: white;

    background-color: #c82a2a;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    inset-inline-end: 0;
    transform: translate(50%, -50%);
}


.cart-badge {
    position: absolute;

    min-width: 16px;
    min-height: 16px;
    width: fit-content;
    padding: 4px;
    max-width: 20px;
    max-height: 20px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    font-size: 12px;
    color: white;

    background-color: #c82a2a;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    inset-inline-end: 0;
    transform: translate(50%, -50%);
}

.footer-5 {
    overflow: hidden;
}

.team-info-list {
    padding: 20px;
    background-color: #f0f0f0;
}

.dark .team-info-list {
    background-color: var(--dark-secondary-bg);
}

.team-info-list h5 {
    color: #272727;
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #dadada;
}

.dark .team-info-list h5 {
    color: var(--dark-title);
    border-color: var(--dark-border);
}

.team-info-list .personal-list {
    padding-block: 12px;
}

.team-info-list .personal-list li {
    padding-block: 12px;
    border-bottom: 1px solid #dadada;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    color: #272727;
    font-size: 12px;
    line-height: 150%;
    text-transform: capitalize;
}

.dark .team-info-list .personal-list li {
    color: var(--dark-description);
    border-color: var(--dark-border);
}

@media (min-width: 650px) {
    .team-info-list {
        padding: 48px;
    }

    .team-info-list h5 {
        font-size: 24px;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .team-info-list .personal-list {
        padding-block: 24px;
    }

    .team-info-list .personal-list li {
        padding: 16px;
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .team-info-list {
        padding: 64px;
    }
}


.landing-1-about-us-pic {
    position: relative;
}

.landing-1-about-us-pic::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background-color: #6c6c6c;
    mix-blend-mode: multiply;
}

/*
has been added
header 3 banner 1
header 1 banner 5
header 5 banner 6
header 6 banner 7
header 4 banner 8
header 2 banner 12
header 7 banner 13
*/

.section-title-1.on-start {
    align-items: flex-start;
    padding-inline: 0;
}

.section-title-1.on-start p {
    text-align: start;
}

.section-title-1.on-start p::before {
    inset-inline-start: 0;
    transform: none;
}

.figures-sections article,
.figures-sections article.active {
    transition: all 0.5s;
}

.figures-sections article:hover,
.figures-sections article.active {
    background-color: var(--primary);
}

.figures-sections article:hover i circle:first-child,
.figures-sections article.active i circle:first-child {
    fill: rgba(255, 255, 255, 0.5);
}

.figures-sections article:hover i circle:nth-child(2),
.figures-sections article.active i circle:nth-child(2) {
    fill: white;
}

.figures-sections article:hover i path,
.figures-sections article.active i path {
    fill: black;
}

.figures-sections article:hover h4,
.figures-sections article:hover p,
.figures-sections article.active h4,
.figures-sections article.active p {
    color: white;
}

.landing-1-team-section {
    position: relative;
}

.landing-1-team-section div:first-child {
    position: relative;
    z-index: 3;
}

.landing-1-team-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;

    inset: 0;
    background: url("/assets/img/banner-12-bg.jpg") lightgray 50% / cover no-repeat;
}

.landing-1-team-section::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;

    inset: 0;
    background-color: #fafafa;
    z-index: 0;
    opacity: 0.9;
}

.landing-1-intro-section-2 {
    background: url("/assets/svg/landing-1-pattern.svg") lightgray 50% / cover no-repeat;
    position: relative;
}

.landing-1-intro-section-2::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: var(--dark-secondary-bg); */
    opacity: 0.83;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: black;
}

/* fixing banner 10 issues  */
@media (max-width: 400px) {
    .banner-10-bg h3 {
        font-size: 44px;
    }
}

.landing-2-feature-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
}

.landing-2-feature-container .box {
    padding-block: 22px;
    border: 1px solid #dadada;
    max-width: 350px;
    padding-inline: 10px;
    position: relative;
}

.landing-2-feature-container .box.white-text p {
    color: white;
}

.landing-2-feature-container .box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0px;
    bottom: 0;
    left: 0;
    background-color: var(--primary);
    transition: all 0.5s;
}

.landing-2-feature-container .box h5,
.landing-2-feature-container .box p {
    position: relative;
    z-index: 2;
}

.landing-2-feature-container .box:hover::before {
    height: 100%;
}

.landing-2-feature-container .box:hover h5 {
    background: none;
    color: white;
    -webkit-text-fill-color: unset;
}

.landing-2-feature-container .box:hover p {
    color: white;
}

.landing-2-feature-container .box h5 {
    background: linear-gradient(180deg,
            var(--primary) 34.03%,
            rgba(var(--primary-rgb), 0.7) 72.22%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-align: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 150%;
    /* 72px */
    letter-spacing: 1.92px;
    text-transform: uppercase;
    /* transition: all 0.5s; */
}

.landing-2-feature-container .box p {
    color: #515151;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    /* 24px */
    margin-top: 6px;
    transition: all 0.5s;
}

.dark .landing-2-feature-container .box p {
    color: var(--dark-description);
}

@media (min-width: 650px) {
    .landing-2-feature-container .box {
        padding-block: 32px;
    }

    .landing-2-feature-container .box h5 {
        font-size: 38px;
    }

    .landing-2-feature-container .box p {
        font-size: 16px;

        margin-top: 12px;
    }
}

@media (min-width: 1024px) {
    .landing-2-feature-container {
        grid-template-columns: repeat(4, 1fr);

        grid-template-rows: repeat(1, 1fr);
    }

    .landing-2-feature-container .box h5 {
        font-size: 48px;
    }
}

.section-title-2 {
    margin-bottom: 40px;
    position: relative;
    padding-top: 20px;
}

.section-title-2 .shadow-text {
    color: #f5f5f5;
    text-align: center;
    font-style: normal;
    font-weight: 800;
    line-height: 80%;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: clamp(30px, 9vw, 80px);
}

.section-title-2 .main-text {
    background: linear-gradient(180deg,
            var(--primary) 34.03%,
            rgba(var(--primary-rgb), 0.7) 72.22%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 1.92px;
    text-transform: uppercase;
    position: relative;
    font-size: clamp(22px, 8vw, 48px);
}

.section-title-2 .stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.section-title-2 .stars svg {
    width: 14px;
    height: 14px;
}

@media (min-width: 650px) {
    .section-title-2 {
        margin-bottom: 80px;
    }

    .section-title-2 .shadow-text {
        bottom: 72px;
    }

    .section-title-2 .stars {
        margin-top: 32px;
    }

    .section-title-2 .stars svg {
        width: 18px;
        height: 18px;
    }
}

.landing-2-intro-section {
    position: relative;
}

.landing-2-intro-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background-color: #6c6c6c;
    /* z-index: -1; */
    mix-blend-mode: multiply;
}

.landing-2-intro-section-2 {
    position: relative;
}

.landing-2-intro-section-2::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: linear-gradient(0deg,
            rgba(58, 61, 67, 0.8) 0%,
            rgba(58, 61, 67, 0.8) 100%);
}

.section-title-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 30px;
    flex-wrap: wrap;
    padding-inline: 30px;
    margin-bottom: 40px;
    position: relative;
}

.section-title-3.reverse {
    flex-direction: row-reverse;
    text-align: end;
}

.section-title-3::before {
    content: "";
    position: absolute;
    width: 23px;
    height: 3px;
    background-color: var(--primary);
    top: 30px;
    inset-inline-start: 0px;
}

.section-title-3.reverse::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.section-title-3 .main-text {
    color: var(--primary);
    text-shadow: -8px -16px 0 rgba(0, 0, 0, 0.05);
    font-size: 23px;
    font-weight: 800;
    line-height: 60px;
    position: relative;
}

.section-title-3 .description {
    color: #515151;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 167%;
}

.dark .section-title-3 .description {
    color: var(--dark-description);
}

@media (min-width: 650px) {
    .section-title-3 {
        margin-bottom: 80px;
    }

    .section-title-3 .main-text {
        font-size: 30px;
    }

    .section-title-3 .description {
        font-size: 18px;
    }
}

@media (min-width: 767px) {
    .section-title-3 {
        padding-inline: 90px;
    }

    .section-title-3::before {
        width: 60px;
    }
}

@media (min-width: 1080px) {
    .section-title-3 {
        padding-inline: 128px;
    }

    .section-title-3 .main-text {
        font-size: 40px;
    }

    .section-title-3::before {
        width: 88px;
        height: 4px;
    }
}


.gallery-categories-card-1 {
    position: relative;
}

.gallery-categories-card-1 .image-contianer {
    position: relative;
}

.gallery-categories-card-1 .image-contianer::before {
    content: "";

    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    inset: 0;
    z-index: 0;
    transition: all 0.5s;
    opacity: 0;
    border-radius: 8px;
}

.gallery-categories-card-1:hover .image-contianer::before {
    opacity: 0.7;
}

.gallery-album-container-1 {
    max-width: 552px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 150px auto;
    gap: 4px;
}

.img-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.gallery-album-container-1 .img-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary);
    opacity: 0;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

.gallery-album-container-1:hover .img-container::after {
    opacity: 0.7;
}

/* Layout rules now apply to containers */
.gallery-album-container-1 .img-container:only-child {
    grid-row: 1;
    grid-column: 1 / -1;
}

.gallery-album-container-1 .img-container:nth-child(1),
.gallery-album-container-1 .img-container:nth-child(2) {
    grid-row: 1;
    grid-column: span 2;
}

.gallery-album-container-1 .img-container:first-child:nth-last-child(1) {
    grid-column: 1 / -1;
}

.gallery-album-container-1 .img-container:nth-child(n + 3) {
    grid-row: 2;
    grid-column: span 1;
    height: 75px;
}

.gallery-album-container-1 .img-container:nth-child(3):nth-last-child(1) {
    grid-column: 1 / -1;
}

.gallery-album-container-1 .img-container:nth-child(3):nth-last-child(2),
.gallery-album-container-1 .img-container:nth-child(4):nth-last-child(1) {
    grid-column: span 2;
}

.gallery-album-container-1 .img-container:nth-child(3):nth-last-child(3),
.gallery-album-container-1 .img-container:nth-child(4):nth-last-child(2) {
    grid-column: span 1;
}

.gallery-album-container-1 .img-container:nth-child(5):nth-last-child(1) {
    grid-column: span 2;
}

@media (min-width: 500px) {
    .gallery-album-container-1 {
        grid-template-rows: 272px auto;
        gap: 8px;
    }

    .gallery-album-container-1 .img-container:nth-child(n + 3) {
        height: 132px;
    }
}

.select-album.open .main-list {
    height: auto;
    opacity: 1;
}

.select-album .arrow {
    transition: transform 0.3s ease;
}

.select-album.open .arrow {
    transform: rotate(180deg);
}

.dynamic-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px 4px;
}

.dynamic-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.dynamic-gallery img:nth-child(9n + 1),
.dynamic-gallery img:nth-child(9n + 2) {
    grid-column: span 6;
    height: 180px;
}

.dynamic-gallery img:nth-child(9n + 3),
.dynamic-gallery img:nth-child(9n + 4),
.dynamic-gallery img:nth-child(9n + 5),
.dynamic-gallery img:nth-child(9n + 6) {
    grid-column: span 3;
    height: 80px;
}

.dynamic-gallery img:nth-child(9n + 7),
.dynamic-gallery img:nth-child(9n + 8),
.dynamic-gallery img:nth-child(9n + 9) {
    grid-column: span 4;
    height: 100px;
}

@media (min-width: 540px) {
    .dynamic-gallery {
        gap: 16px 8px;
    }

    .dynamic-gallery img:nth-child(9n + 1),
    .dynamic-gallery img:nth-child(9n + 2) {
        height: 240px;
    }

    .dynamic-gallery img:nth-child(9n + 3),
    .dynamic-gallery img:nth-child(9n + 4),
    .dynamic-gallery img:nth-child(9n + 5),
    .dynamic-gallery img:nth-child(9n + 6) {
        height: 120px;
    }

    .dynamic-gallery img:nth-child(9n + 7),
    .dynamic-gallery img:nth-child(9n + 8),
    .dynamic-gallery img:nth-child(9n + 9) {
        height: 160px;
    }
}

@media (min-width: 767px) {

    .dynamic-gallery img:nth-child(9n + 1),
    .dynamic-gallery img:nth-child(9n + 2) {
        height: 330px;
    }

    .dynamic-gallery img:nth-child(9n + 3),
    .dynamic-gallery img:nth-child(9n + 4),
    .dynamic-gallery img:nth-child(9n + 5),
    .dynamic-gallery img:nth-child(9n + 6) {
        height: 160px;
    }

    .dynamic-gallery img:nth-child(9n + 7),
    .dynamic-gallery img:nth-child(9n + 8),
    .dynamic-gallery img:nth-child(9n + 9) {
        height: 218px;
    }
}

@media (min-width: 1080px) {

    .dynamic-gallery img:nth-child(9n + 1),
    .dynamic-gallery img:nth-child(9n + 2) {
        height: 588px;
    }

    .dynamic-gallery img:nth-child(9n + 3),
    .dynamic-gallery img:nth-child(9n + 4),
    .dynamic-gallery img:nth-child(9n + 5),
    .dynamic-gallery img:nth-child(9n + 6) {
        height: 290px;
    }

    .dynamic-gallery img:nth-child(9n + 7),
    .dynamic-gallery img:nth-child(9n + 8),
    .dynamic-gallery img:nth-child(9n + 9) {
        height: 389px;
    }
}

.gallery-album-2 {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    height: 340px;
    flex-direction: column;
}

.gallery-album-2 div {
    min-height: 33%;
    position: relative;
    flex: 1px;
}

.gallery-album-2 div::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: linear-gradient(0deg,
            rgba(18, 18, 18, 0.2) 0%,
            rgba(18, 18, 18, 0.2) 100%);
}

@media (min-width: 440px) {
    .gallery-album-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2 equal columns */
        grid-template-rows: 182px 192px;
        /* row heights */
        gap: 4px;
        max-height: 379px;
        /* optional */
        height: auto;
    }

    .gallery-album-2>div {
        overflow: hidden;
        position: relative;
    }

    .gallery-album-2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* First row: 2 columns */
    .gallery-album-2>div:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .gallery-album-2>div:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    /* Third div: spans full width of row 2 */
    .gallery-album-2>div:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* If only 1 child → it should span both columns */
    .gallery-album-2>div:only-child {
        grid-column: 1 / -1;
        grid-row: span 2;
        height: 100%;
        /* optional */
    }

    /* If 2 children only → make them fill row 1 */
    .gallery-album-2>div:first-child:nth-last-child(2),
    .gallery-album-2>div:first-child:nth-last-child(2)~div {
        grid-row: span 2;
    }
}

.gallery-photo-2 {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
}

.gallery-photo-2 img {
    width: 48%;
    aspect-ratio: 1 / 1;

    object-fit: cover;
    border-radius: 6px;
    display: block;
    flex-grow: 1;
    max-height: 313px;
}

@media (min-width: 767px) {
    .gallery-photo-2 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 4px;
    }

    .gallery-photo-2 img {
        width: 100%;
        height: 100%;
        border-radius: 8px;

        max-width: 100%;
        max-height: 100%;
    }

    .gallery-photo-2 img:nth-child(13n + 1),
    .gallery-photo-2 img:nth-child(13n + 8) {
        grid-column: 1 / span 6;
        grid-row: span 2;
        height: 324px;
    }

    .gallery-photo-2 img:nth-child(13n + 8) {
        grid-column: span 6;
    }

    .gallery-photo-2 img:nth-child(13n + 2),
    .gallery-photo-2 img:nth-child(13n + 3),
    .gallery-photo-2 img:nth-child(13n + 4),
    .gallery-photo-2 img:nth-child(13n + 5),
    .gallery-photo-2 img:nth-child(13n + 6),
    .gallery-photo-2 img:nth-child(13n + 7),
    .gallery-photo-2 img:nth-child(13n + 9),
    .gallery-photo-2 img:nth-child(13n + 10) {
        height: 160px;
        grid-column: span 3;
    }

    .gallery-photo-2 img:nth-child(13n + 11),
    .gallery-photo-2 img:nth-child(13n + 12),
    .gallery-photo-2 img:nth-child(13n + 13) {
        height: 200px;
        grid-column: span 4;
    }
}

@media (min-width: 1080px) {
    .gallery-photo-2 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 8px;
    }

    .gallery-photo-2 img:nth-child(13n + 1),
    .gallery-photo-2 img:nth-child(13n + 8) {
        height: 588px;
    }

    .gallery-photo-2 img:nth-child(13n + 2),
    .gallery-photo-2 img:nth-child(13n + 3),
    .gallery-photo-2 img:nth-child(13n + 4),
    .gallery-photo-2 img:nth-child(13n + 5),
    .gallery-photo-2 img:nth-child(13n + 6),
    .gallery-photo-2 img:nth-child(13n + 7),
    .gallery-photo-2 img:nth-child(13n + 9),
    .gallery-photo-2 img:nth-child(13n + 10) {
        height: 290px;
    }

    .gallery-photo-2 img:nth-child(13n + 11),
    .gallery-photo-2 img:nth-child(13n + 12),
    .gallery-photo-2 img:nth-child(13n + 13) {
        height: 389px;
    }
}

.about-1-mission-section {
    position: relative;
}

.about-1-mission-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("/assets/img/mission-section-pattern.png");
    inset: 0;
}

.dark .about-1-mission-section::before {
    opacity: 0.01;
}

.missions-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 40px 60px;
    /* mobile first: row gap 40px, column gap 60px */
    padding-block: 28px;
    position: relative;
    z-index: 3;
}

@media (min-width: 1080px) {
    .missions-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 50px 100px;
        padding-block: 48px;
    }
}

@media (min-width: 1280px) {
    .missions-container {
        gap: 80px 200px;
    }
}

.about-bottom-section {
    position: relative;
    background: url("/assets/img/banner-12-bg.jpg") lightgray 50% / cover no-repeat;
}

.about-bottom-section div {
    position: relative;
    z-index: 2;
}

.about-bottom-section::before {
    content: "";
    width: 100%;
    height: 100%;
    inset: 0;
    position: absolute;
    background-color: var(--secondary);
    opacity: 0.98;
}

.about-us-2-pic {
    position: relative;
}

.about-us-2-pic::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: linear-gradient(270deg,
            rgba(214, 215, 216, 0) 0%,
            rgba(18, 18, 18, 0.5) 84%);
}

.about-2-bottom-section {
    position: relative;
    background: url("/assets/img/about-2-pic-2.jpg") lightgray 50% / cover no-repeat;
}

.about-2-bottom-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: var(--secondary);
    opacity: 0.8;
    backdrop-filter: blur(4px);
}

.about-2-bottom-section::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;

    backdrop-filter: blur(4px);
}

.about-3-mission-section {
    display: flex;
    align-items: stretch;
    gap: 16px 8px;
    flex-wrap: wrap;
    justify-content: center;
    counter-reset: card-counter;
}

.about-3-mission-section .mission {
    counter-increment: card-counter;

    padding: 24px 32px 100px 32px;
    max-width: 420px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.about-3-mission-section .mission .wave {
    position: absolute;
    bottom: 0;
    left: 0;
}

@media (min-width: 640px) {
    .about-3-mission-section .mission {
        padding: 42px 32px 80px 32px;
        max-width: 290px;
    }

    .about-3-mission-section .mission .wave svg {
        width: 290px;
        height: 56px;
    }
}

.about-3-mission-section .mission .wave svg {
    width: 420px;
    height: 80px;
}

.about-3-mission-section .mission::before {
    content: counter(card-counter);
    display: block;
    color: #555;
    font-size: 225px;
    font-weight: 700;
    line-height: 150%;
    padding: 8px;
    text-align: center;

    position: absolute;
    right: -17px;
    top: -52px;
    opacity: 0.04;
}

.about-2-slider .swiper-slide {
    width: 80px;
    /* default */
    border-radius: 4px;
    height: 522px;
    max-height: 522px;
}

.about-2-slider .swiper-slide img {
    border-radius: 4px;
}

.about-2-slider .swiper-slide-active {
    min-width: 250px;
}

@media (min-width: 400px) {
    .about-2-slider .swiper-slide {
        width: 100px;
    }

    .about-2-slider .swiper-slide-active {
        width: 350px;
        /* bigger active one */
    }
}

@media (min-width: 640px) {
    .about-2-slider .swiper-slide {
        width: 250px;
    }

    .about-2-slider .swiper-slide-active {
        width: 400px;
        /* bigger active one */
    }
}