@font-face {
  font-family: 'vazir';
  src: url('../fonts/Vazir.woff2') format('woff2'),
       url('../fonts/Vazir.woff') format('woff'),
       url('../fonts/Vazir.ttf') format('truetype');
  font-display: swap;
}

* {
     margin: 0;
     padding: 0;
     direction: rtl;
     font-family: 'vazir';
     box-sizing: border-box;
}

html {
     scroll-behavior: smooth;
}

body {
     background-color: #32323c;
}

ul {
     list-style: none;
}

.header-top {
     margin-top: 35px;
}

.menu {
     border-radius: 45px;
     background-color: #d0d0d02b;
     backdrop-filter: blur(15px);
     margin-top: 15px;
}

.menu a {
     color: #fdfdfd;
}

.slider {
     margin-top: 40px;
     position: relative;
}
.hero-text {
     position: absolute;
     bottom: 25px;
     right: 25px;
     color: #fff;
     background: rgba(0,0,0,0.35);
     padding: 10px 14px;
     border-radius: 12px;
     max-width: 60%;
     backdrop-filter: blur(4px);
}

.hero-text h1 {
     font-size: 20px;
     margin: 0;
     font-weight: bold;
}

.hero-text p {
     margin: 5px 0 0;
     font-size: 13px;
     opacity: 0.9;
}


.call-box {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
}

.custom-phone {
     transform-origin: center;
     position: relative;
     top: 4px;
}

.custom-phone svg {
     background-color: #ff0000;
     color: white;
     padding: 12px;
     border-radius: 10px;
     font-size: 18px;
}

.call-link {
     display: block;
     width: 100%;
     height: 100%;
}

#products {
     background-color: #32323c;
}

.menu-container {
     position: relative;
     z-index: 20;
}

.menu-container .menu-tabs {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 15px;
     list-style: none;
}

.menu-container .nav-item {
     flex: 1;
     text-align: center;
     position: relative;
}

.menu-container .nav-item .catalog-item {
     transition: transform 0.4s ease;
}

.menu-container .nav-item:hover .catalog-item {
     transform: translateY(-5px);
}

.menu-container .dropdown-menu {
     position: absolute;
     z-index: 1050;
     width: 100%;
}

.catalog-item {
     background: #7474746b;
     padding: 20px 0 0;
     border-radius: 8px;
}

.catalog-item svg {
     font-size: 20px;
     background-color: #212121;
     padding: 15px;
     border-radius: 50%;
     transition: all 0.3s ease-in;
     width: 20px;
     height: 20px;
}

.catalog-item svg:hover {
     background-color: #383838;
     color: #1a1a22;
}

.menu-container .catalog {
     background-color: #1a1a22;
     color: white !important;
     border-radius: 0 0 8px 8px !important;
     padding: 10px 15px;
     font-weight: bold;
     transition: background-color 0.3s ease;
}

.menu-container .catalog.active,
.menu-container .catalog:hover {
     background-color: #28282f !important;
     color: white !important;
}

.catalog {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
}

.menu-container .dropdown-menu {
     background-color: #32323c;
     border-radius: 8px;
}

.dropdown-menu li {
     text-align: center;
}

.menu-container .dropdown-item {
     color: white !important;
     padding: 10px 15px;
     transition: background-color 0.3s ease;
}

.menu-container .dropdown-item:hover {
     background-color: #494951 !important;
}

.menu-container .dropdown-divider {
     border-top: 1px solid #494951;
     margin: 5px 0;
}

.menu-container .dropdown.show .dropdown-toggle {
     background-color: #494951 !important;
     color: white !important;
     border: none !important;
}

.bg-about {
     background: linear-gradient(180deg, rgb(145 35 35 / 55%), rgb(0 0 0 / 90%) 80%), url(../images/about.jpg) center / cover;
     color: white;
     height: 400px;
     background-repeat: no-repeat;
     display: flex;
     align-items: center;
}

.bg-about p {
     text-align: justify;
     line-height: 1.8;
}

footer {
     background-color: #1a1a22;
     padding: 3rem 3rem .5rem;
}

footer p {
     text-align: justify;
     line-height: 1.9;
}

.bg-footer {
     background-color: #32323c;
     color: white;
     position: relative;
     border-radius: 20px;
}

.bg-footer a {
     text-decoration: none;
     color: white;
}

.bg-footer ul {
     list-style: none;
}

.social {
     background-color: #40404A;
     align-items: center;
     padding: 15px 15px 5px;
     border-radius: 40px;
     width: 90%;
     justify-content: center;
}

.social img {
     width: 25px;
     height: 25px;
}

.footer-shape {
     position: absolute;
     top: -4.5rem;
     left: 50%;
     z-index: 10;
     transform: translateX(-50%);
}

.footer-shape img {
     width: 300px;
     height: auto;
}

.modal-dialog {
     max-width: 1200px !important;
}

.modal-content {
     background: #dddddd38;
     backdrop-filter: blur(3px);
}

.product img {
     width: 100%;
     height: 400px;
}

.sl-overlay {
     z-index: 1060 !important;
}

.sl-wrapper {
     z-index: 1070 !important;
}

.swiper-slide h5,
.swiper-slide p,
.swiper-wrapper {
     color: white;
}

.swiper-button-next,
.swiper-button-prev {
     font-weight: bold;
     color: black;
}

.sl-wrapper .sl-navigation button.sl-next {
     transform: scaleX(-1);
}

.sl-wrapper .sl-navigation button.sl-prev {
     transform: scaleX(-1);
}

.new-swip {
     width: 100%;
}

.new-swip__wrapper {
     max-width: 1320px;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 3rem;
     margin: 0 auto;
}

.new-swip__box {
     width: 100%;
     overflow: hidden;
}

.new-swip .swiper-container {
     width: 100%;
     padding: 50px 0;
}

.custom-swiper {
     width: 520px;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}

.card__wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
}

.card__img img {
     width: 100%;
     height: 100%;
     border-radius: 8px;
     object-fit: fill;
     aspect-ratio: 2;
}

.custom-swiper.swiper-slide-active {
     transform: scale(1.20) !important;
     filter: blur(0);
     opacity: 1;
     z-index: 3;
}

.custom-swiper.swiper-slide-prev,
.custom-swiper.swiper-slide-next {
     transform: scale(0.95);
     filter: blur(2px);
     opacity: 0.9;
     z-index: 2;
}

.custom-swiper.swiper-slide-visible:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
     transform: scale(0.9) !important;
     filter: blur(3px);
     opacity: 0.7;
     z-index: 1;
}

.new-swip .custom-swiper.swiper-slide-shadow-left,
.new-swip .custom-swiper.swiper-slide-shadow-right {
     display: none !important;
}

.navbar-brand img {
     width: 190px;
}

.navbar-mobile {
     background-color: #141416d6;
     backdrop-filter: blur(2px);
     position: fixed;
     bottom: 0;
     width: 100%;
     z-index: 1030;
     border-radius: 54px 54px 0 0;
}

.navbar-mobile ul {
     flex-direction: row;
     width: 100%;
     justify-content: space-evenly;
}

.navbar-mobile span {
     font-size: .80rem;
}

.navbar-mobile svg {
     font-size: 1.125rem;
}

.pos-bottom {
     text-align: center;
}

.swiper-slide.no-data {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     text-align: center;
     padding: 1rem;
}

.contact-Support {
     width: 50px;
     height: 50px;
     background-color: white;
     border-radius: 50%;
     position: fixed;
     bottom: 25px;
     right: 35px;
}

.contact-Support a {
     text-decoration: none;
     position: relative;
     top: 10px;
     right: 8px;
}

.contact-Support img {
     width: 33px;
}

.text-Support {
     position: fixed;
     bottom: 80px;
     right: 13px;
     z-index: 1050;
}

.text-Support span {
     text-shadow: -1px 0px 5px rgb(0 0 0);
}

.social span {
     color: #ff0000;
}

.swiper-section h3 {
     text-align: center;
     color: white;
     padding: 20px 0;
}

.copyright {
     display: flex;
     justify-content: center;
}

#staticBackdrop .swiper-container-custom,
#staticBackdrop .swiper-container-custom .swiper-wrapper,
#staticBackdrop .swiper-container-custom .swiper-slide {
     direction: ltr !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
     font-size: 20px !important;
}

.swiper-button-custom {
     width: 40px !important;
     height: 40px !important;
     background-color: rgba(0, 0, 0, 0.5);
     border-radius: 50%;
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: background-color 0.3s ease;
     z-index: 10;
}

.swiper-button-custom:hover {
     background-color: rgba(0, 0, 0, 0.8);
}

.swiper-container-custom {
     overflow: visible;
}

.modal-body {
     overflow-x: hidden !important;
}


.contact {
     text-align: center;
}

.custom-img img {
     height: 450px !important;
}

.technical-item {
     background-color: #2b2b2bba;

}

.technical-section h3 {
     color: white;
}

.technical-item__desc {
     display: flex;
     flex-direction: column;
     gap: 6px;
     line-height: 1.8;
     color: #c9c9c9;
     text-align: center;
}

.technical-item__line {
     display: block;
}

@media (max-width:991.98px) {
     footer {
          padding: 3rem 1rem 5.5rem;
     }

     .contact-Support {
          bottom: 91px;
          right: 36px;
     }

     .text-Support {
          bottom: 144px;
     }

     .menu {
          background-color: transparent;
          backdrop-filter: unset;
          margin-top: auto;
     }

     .mobile-nav {
          justify-content: center !important;
     }

     .new-swip .swiper-container {
          padding: 0;
     }

     .social {
          width: 100%;
          margin-bottom: 25px;
     }

     .copyright p {
          font-size: 14px;
     }

     .custom-phone {
          animation: icon-spin-and-move 5s infinite;
     }

     .contact {
          animation: text-sequence 5s infinite;
          white-space: nowrap;
          transform: translateX(-40px);
          text-align: center;
     }

     .bg-about {
          height: 430px;
          font-size: 14px;
          line-height: normal;
     }
}

@media (max-width: 768px) {
     .custom-swiper {
          width: 240px;
          height: 220px;
     }

     .swiper-3d {
          perspective: none;
     }

     .contact p {
          font-size: 14px;
     }

     .custom-phone svg {
          padding: 6px;
     }

     .addres p {
       text-align:right;
     }

     .footer-shape {
          top: -3.8rem;
     }

     .footer-shape img {
          width: 233px;
     }

     .bg-about {
          height: 410px;
          font-size: 14px;
          line-height: normal;
     }

     .slider {
          margin-top: 25px;
     }

      .hero-text {
          display: none;
     }
     .header-top {
          margin-top: 10px;
     }

     .menu-container .nav-item:hover .catalog-item {
          transform: none !important;
     }
}

@media (max-width: 576px) {
     .bg-about {
          height: 650px;
     }

     .menu-container .nav-item {
          flex: 33.33%;
     }
}

@media (max-width: 375px) {
     .bg-about {
          height: 770px;
     }
}

@keyframes icon-spin-and-move {
     0% {
          transform: translateX(60px) rotate(0deg);
          transform-origin: center;
     }

     25% {
          transform: translateX(60px) rotate(360deg);
          transform-origin: center;
     }

     50% {
          transform: translateX(-10px) rotate(720deg);
          transform-origin: center;
     }

     100% {
          transform: translateX(-10px) rotate(720deg);
          transform-origin: center;
     }
}

@keyframes text-sequence {

     0%,
     35% {
          opacity: 0;
          transform: translateX(-40px);
     }

     55% {
          opacity: 1;
          transform: translateX(0);
     }

     100% {
          opacity: 1;
          transform: translateX(0);
     }
}