/* FONT IMPORT */

/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap");

/* Local Font */
@font-face {
  font-family: "dear";
  src: url("../fonts/dears.otf");
}

@font-face {
  font-family: "spooky";
  src: url("../fonts/spookymother.otf");
}

:root {
  --white: #fff;
  --black: #000;
  --primary: #c20000;
  --secondary: #333333;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  position: relative;
  background: var(--black);
  overflow-x: hidden;
  height: 100%;
  font-family: "Archivo", sans-serif;
}

section {
  position: relative;
  padding: 6rem 0;
}

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  color: #eee;
  margin: 0;
}

h3 {
  color: #000;
  margin: 0;
  font-family: "dear";
}

h4 {
  color: #000;
  margin: 0;
  font-family: "spooky";
}

h5 {
  color: #000;
  margin: 0;
  font-family: "Libre Bodoni", serif;
}

h1,
h2,
h5,
h6 {
  color: #000;
  margin: 0;
}

.img-auto {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.img {
  perspective: none;
  overflow: hidden;
  transform-style: preserve-3d;
}

.img img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
  display: block;
}

a,
button {
  text-decoration: none !important;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

a:hover,
button:hover {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

figure {
  margin: 0;
}

/* Cursor Start */

.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}

.cursor-inner {
  margin-left: 2px;
  margin-top: 2px;
  width: 7px;
  height: 7px;
  z-index: 10000001;
  background-color: var(--primary);
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
    margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-inner.cursor-hover {
  margin-left: -10px;
  margin-top: -10px;
  width: 30px;
  height: 30px;
  background-color: var(--primary);
  opacity: 0.3;
}

/* Cursor End */

/* PRELOADER */

.preLoader {
  width: 100%;
  height: 100%;
  z-index: 1111;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.preLoader.black {
  background-color: var(--white);
  z-index: 11113;
}

.preLoader.white {
  z-index: 11112;
  background-color: var(--theme-color);
}

/* Video styling */
.preloader-video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* PRELOADER */


/* GLOBAL CSS */

.themeBtn {
  background-color: var(--primary);
  font-size: 1.125rem;
  color: var(--white);
  text-transform: capitalize;
  font-weight: 500;
  display: inline-block;
  padding: 22px 22px;
  line-height: normal;
  border-radius: 8px;
  outline: unset;
  border: unset;
}

.themeBtn.borderBtn {
  background: transparent;
  border: 1px solid #fff;
  padding: 1.04em 2em;
}

/* NAV HEADER CSS */

header {
  margin: 0 auto;
  width: 100%;
  padding: 1rem 0;
  transition: 0.3s ease-in-out;
}

.navbar-brand {
  padding: 0;
  margin: 0;
}

.navbar-nav {
  align-items: center;
  gap: 2.25rem;
}

.navbar-nav .nav-item .nav-link {
  font-size: 1.125rem;
  color: var(--white);
  text-transform: capitalize;
  font-weight: 500;
  padding: 0 0;
  display: inline-block;
}

/* !NAV HEADER CSS */

/* MAIN HERO SLIDER CSS */

.main-slider {
  height: 700px;
  margin: 0 127px;
}

.homeSlider.swiper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
}

.homeSlider.swiper-container .swiper-slide {
  overflow: hidden;
}

.homeSlider .swiper-pagination {
  bottom: 58px;
  width: fit-content;
  left: 0;
  right: 0;
  margin: auto;
}

.homeSlider .swiper-button-prev,
.homeSlider .swiper-button-next {
  width: 4.35rem;
  height: 4.35rem;
  font-size: 1rem;
  color: #fff;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.28);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

.homeSlider .swiper-button-next {
  right: 1rem;
}

.homeSlider .swiper-button-prev {
  left: 1rem;
}

.homeSlider .swiper-button-next:hover,
.homeSlider .swiper-button-prev:hover {
  background: var(--white);
  color: var(--black);
}

.homeSlider .swiper-pagination-bullet {
  height: 1rem;
  width: 1rem;
  display: inline-block;
  margin: 0 0.25rem !important;
  opacity: 1;
  background: rgb(255 255 255 / 30%);
}

.homeSlider .swiper-pagination-bullet-active {
  background: var(--white);
  position: relative;
}

.homeSlider .slide-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  /* margin: 0.235rem 0 0; */
  border-radius: 60px;
}

.main-slider h1 {
  margin: 0;
  color: var(--black);
  font-size: 5rem;
  line-height: 1;
  font-weight: 600;
  text-transform: capitalize;
  font-family: "Archivo";
}

.main-slider p {
  color: var(--black);
  line-height: 1.2;
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0.75rem 0 1.975rem 0;
}

.form-inline {
  gap: 0.625rem;
  margin-left: 3.125rem;
}

.form-inline a:first-child {
  background-color: #ffff;
  color: #000;
}

.slideOne h3 {
  font-size: 68px;
  font-weight: 400;
  text-transform: capitalize;
  font-family: "dear";
  color: #c20000;
  margin: 0;
  line-height: 1;
}

.slideOne {
  text-align: center;
}

form.main-form .form-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  justify-content: center;
}

.form-group input[type="file"] {
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 👇 Custom upload button styling */
.form-group ::-webkit-file-upload-button {
  background: linear-gradient(135deg, #ff3c3c, #c20000);
  color: #fff;
  border: none;
  padding: 5px 9px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-group ::-webkit-file-upload-button:hover {
  background: linear-gradient(135deg, #000000, #434343);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.form-group input[type="file"]:focus {
  outline: none;
  border-color: #c20000;
  box-shadow: 0 0 0 3px rgba(194, 0, 0, 0.2);
}

form.main-form .form-control::placeholder {
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--white);
}

form.main-form .form-control {
  height: 68px;
  border: 1px solid #f6f6f6;
  background-color: black;
  outline: unset;
  box-shadow: unset;
  backdrop-filter: blur(37px);
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--white);
  width: 252px;
  border-radius: 10px;
}

form.main-form .form-group span {
  display: flex;
  align-items: center;
  gap: 1rem;
}

form.main-form .form-group span a i {
  height: 68px;
  width: 86px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background-color: #c20000;
  font-size: 1.125rem;
  color: var(--white);
}

input.form-control.first-control {
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--white);
}

/* !MAIN HERO SLIDER CSS */

/* Brand Sec Css Start */

.mainHead {
  font-size: 44px;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--white);
  line-height: 1.2;
  font-family: "dear";
}

.brand-sec .mainHead {
  text-align: center;
  margin: 0 0 2.5rem 0;
  font-family: "dear";
  font-weight: 400;
}

.brand-wrapp {
  background-color: var(--white);
  padding: 16px 0px 14px 28px;
  /* height: 13rem; */
  position: relative;
  overflow: hidden;
  /* Taake zoom bahar na nikalay */
  border-radius: 20px;
}

.brand-imag img {
  width: 78px;
  padding: 1rem;
}

.brand-link-wrapper:hover .brand-wrapp {
  background-color: #b30000;
  transition: ease-in-out 0.5s;
}

.brand-link-wrapper:hover .brand-content h5 {
  color: #fff;
}

.brand-link-wrapper:hover .brand-imag {
  background-color: rgba(255, 255, 255, 0.2);
}

.brand-wrapp .hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.1);
  /* Shuru mein thori bari hogi */
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 2;
}

.brand-wrapp:hover .hover-img {
  opacity: 1;
  transform: scale(1);
  /* Hover par asli size mein wapis ayegi */
}

.read-more-btn {
  color: #ff0000;
}

.brand-imag {
  height: 80px;
  width: 80px;
  display: grid;
  place-items: center;
  border-radius: 50px;
  background-color: rgb(27 114 97 / 10%);
}

.brand-content h5 {
  font-size: 1.3rem;
  font-weight: bold;
  text-transform: capitalize;
  color: var(--black);
  margin: 1.125rem 0 0.625rem 0;
}

.brand-content a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 500;
  text-transform: capitalize;
  color: #ff0000;
  font-size: 1rem;
}

/* Brand Sec Css End  */

/* Services Sec Css Start */
.services-sec {
  background-color: #111111;
  position: relative;
  padding-bottom: 4rem;
}

.services-sec .subHead {
  color: var(--primary);
  text-align: center;
}

.services-sec .mainHead {
  text-align: center;
  margin-top: 1rem;
}

/* CARD */
.services-wrapp {
  position: relative;
  text-align: center;
  padding: 44px 20px 70px 20px;
  border-radius: 36px;
  transition: 0.4s ease;
  height: 100%;
  background: #1a1a1a;
}

/* IMAGE */
.services-imag {
  margin-bottom: 1.875rem;
}

/* CONTENT */
.services-content h4 {
  font-size: 34px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
}

.services-content p {
  font-weight: 500;
  text-transform: capitalize;
  color: #838383;
  line-height: 1.6;
  margin: 1.25rem 0 1rem 0;
}

.services-wrapp .no {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 70px;
  background: #00d084;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: #000;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 10;
}

.services-wrapp:hover .no {
  opacity: 1;
  visibility: visible;
  top: -35px;
}

.services-wrapp:hover .no h4 {
  color: var(--primary);
  font-weight: 900;
}

.services-wrapp:hover .services-content h4 {
  color: #838383;
  font-weight: 900;
}

.services-wrapp:hover {
  background-color: #fff;
}

/* Services Sec Css End  */

/* About Sec Css Start */
.subHead {
  font-size: 25px;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--white);
}

.about-content {
  padding-left: 64px;
}

.about-content .mainHead {
  font-size: 3.125rem;
  margin: 0.625rem 0;
  font-family: "dear";
  color: #ff0000;
}

.about-content p {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--white);
  width: 88%;
}

/* .about-content p+p {
  margin: 1.75rem 0;
} */

.about-content .themeBtn {
  padding: 1.125rem 45px;
}

.about-imag {
  position: relative;
  padding: 20px;
  background-color: #fbd7a3;
  transition: all 0.3s ease;
}

.about-imag img {
  width: 100%;
  z-index: 2;
  position: relative;
}

.about-imag::before {
  content: "";
  position: absolute;
  height: 557px;
  width: 507px;
  border: 22px solid #c20000;
  top: 0;
  left: 0;
  z-index: 1;
  transform: rotate(165deg);
  transition: all 0.5s ease;
}

.about-imag:hover::before {
  transform: rotate(180deg);
}

/* About Sec Css End  */

/* Solotuion Sec Css Start  */

.solotuion-sec {
  background: linear-gradient(182deg, rgb(6 6 6 / 13%), #333333);
  padding: 5rem 134px;
}

.solotuion-sec .mainHead {
  text-align: center;
  font-size: 5rem;
  margin: 0 0 2.5rem 0;
}

.solotuion-wrapp {
  position: relative;
  overflow: hidden;
  margin-bottom: 50px;
}

.solotuion-content h4 {
  font-size: 34px;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--white);
  position: absolute;
  bottom: 56px;
  text-align: center;
  transition: 0.5s ease;
  left: 0;
  right: 0;
}

.solotuion-position {
  text-align: center;
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  background-color: rgb(251 215 163 / 70%);
  border-radius: 20px;
  inset: 0;
  /* padding: 5rem 0 0 0; */
  padding: 0 1rem;
  transform: scale(0);
  transition: 0.6s ease;
  border-radius: 40px;
}

.solotuion-position h4 {
  font-size: 34px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.3;
}

.solotuion-position p {
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--black);
  line-height: 1.5;
}

.solotuion-position .themeBtn {
  padding: 1rem 1.75rem;
}

.solotuion-wrapp:hover .solotuion-position {
  transform: scale(1.01);
}

.solotuion-wrapp:hover .solotuion-content h4 {
  opacity: 0;
}

/* Solotuion Sec Css End  */

/* Product Sec Css Start  */

.products-sec {
  background-color: #0f0f0f;
  padding: 7.5rem 0;
}

section.products-sec .mainHead {
  text-align: center;
  margin-bottom: 72px;
  font-size: 80px;
}

.products-img img {
  width: 100%;
}

.products-content a {
  font-size: 34px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
  background: #232323;
  font-family: "spooky";
}

/* Product Sec Css End  */

/* Meet Sec Css Start  */

.meet-sec .mainHead {
  text-align: center;
  margin-bottom: 70px;
  font-size: 5rem;
}

.meet-wrapp {
  background-color: var(--white);
  padding: 50px 51px 52px 51px;
  text-align: center;
  border-radius: 30px;
}

.meet-content h4 {
  font-size: 34px;
  font-weight: 400;
  text-transform: uppercase;
  margin: 1rem 0 1rem;
}

.meet-social {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}

.meet-social li a i {
  color: transparent;
  -webkit-text-stroke: 1px #54595f;
  font-size: 1.25rem;
}

figure.meet-img img {
    width: 100%;
    height: 252px;
    object-fit: cover;
    border-radius: 10px;
    object-position: top;
  }

/* Meet Sec Css End  */

/* Feed Back Sec Css Start  */

.feedbak-sec {
  background-color: var(--white);
  margin: 0 135px 115px 134px;
  border-radius: 50px;
  padding-bottom: 5rem;
}

.feedbak-content .mainHead {
  color: var(--black);
  margin-top: 1rem;
  margin-bottom: 1.575rem;
  padding-top: 1rem;
}

.feedbak-content {
  text-align: center;
}

.feedbak-content p {
  font-size: 1.25rem;
  font-weight: 500;
  color: #54595f;
  letter-spacing: 0.3px;
  line-height: 1.7;
  width: 79%;
  margin: auto;
}

.feedbakimg1 {
  left: 11.625rem;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.feedbakimg2 {
  position: absolute;
  right: 11.625rem;
  top: 0;
  bottom: 0;
  margin: auto;
}

.party-content .mainHead {
  font-size: 4.375rem;
  margin-bottom: 1rem;
  color: #000;
  line-height: 1.5;
}

.party-sec {
  background: url(../images/partybg.webp) center/cover no-repeat;
  margin: 0 135px;
  border-radius: 50px;
}

/* Feed Back Sec Css End  */

/* Contact Sec Css Start */

.contact-sec {
  padding: 38px 0 47px;
  margin: 2rem 135px;
  background-color: #c20000;
  border-radius: 50px;
}

.contact-top {
  text-align: center;
  margin: 0 0 30px 0;
}

.contact-top p {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--white);
}

form.contact-form .form-control {
  height: 48px;
  background-color: rgb(103 103 103 / 10%);
  border: 1px solid #f6f6f6;
  border-radius: 10px;
  backdrop-filter: blur(37px);
  outline: unset;
  box-shadow: unset;
  font-size: 1rem;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--white);
  background: rgb(103 103 103 / 18%);
}

form.contact-form .form-control::placeholder {
  font-size: 1rem;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--white);
}

input.form-control.contact-control {
  width: 310px;
}

form.contact-form h5 {
  font-size: 23px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--white);
  font-family: "Archivo";
}

form.contact-form button {
  padding: 24px 43px;
  border: unset;
  background-color: var(--white);
  color: var(--primary);
}

/* Contact Sec Css End  */

/* Footer Sec Css Start */
footer {
  background-color: var(--white);
  padding: 56px 0 30px 0;
  margin: 0px 135px 50px 135px;
  border-radius: 50px;
}

.footer-top .mainHead {
  color: var(--black);
}

form.footer-form .form-control {
  height: 68px;
  outline: unset;
  border: 1px solid #f6f6f6;
  background-color: rgb(103 103 103 / 10%);
  backdrop-filter: blur(98px);
  padding: 1rem 0 1rem 30px;
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  color: #8e8e8e;
  border-radius: 10px;
}

form.footer-form .form-control::placeholder {
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  color: #8e8e8e;
}

form.footer-form .form-group button {
  position: absolute;
  right: 0;
  top: -14px;
  bottom: 0;
  margin: auto;
  border: unset;
  padding: 24px 28px;
  height: fit-content;
  width: fit-content;
  background: #ff0000;
}

.footer-top {
  margin-bottom: 80px;
}

footer p {
  font-size: 15px;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--black);
  line-height: 1.8;
  margin: 1rem 0 0;
}

ul.footer-list li a {
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--black);
}

ul.footer-list li+li {
  margin: 0.625rem 0;
}

footer h3 {
  font-family: "Archivo";
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--black);
  margin-bottom: 1.75rem;
}

.solution-btn {
  margin: 1rem 0 0 0;
}

section.solotuion-sec .subHead {
  font-size: 3rem;
  margin-bottom: 2rem;
  color: var(--primary);
}

figure.solotuion-img img {
  border-radius: 33px;
}

.feedbakslider {
  padding-bottom: 5rem;
}

.feedbakslider .swiper-pagination-bullet {
  height: 1rem;
  width: 1rem;
  background-color: #d9d9d9;
}

.feedbakslider .swiper-pagination-bullet-active {
  background: var(--primary);
}

ul.footer-social {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2rem;
}

ul.footer-social li a i {
  height: 42px;
  width: 42px;
  display: grid;
  place-items: center;
  border-radius: 50px;
  border: 2px solid var(--black);
  color: var(--black);
  transition: 0.5s ease;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgb(174 181 190 / 30%);
  padding-top: 40px;
  margin-top: 11px;
}

.footer-bottom p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--black);
}

.footer-bottom p a {
  font-weight: 800;
  color: var(--black);
}

ul.footer-items li a {
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--black);
}

ul.footer-items li+li {
  margin: 0.625rem 0 0;
}

ul.footer-items li a span {
  text-decoration: underline;
  color: var(--primary);
}

/* Footer Sec Css End  */

/* Hover Effect Css Start */

ul.footer-social li a:hover i {
  background: #000;
  color: #fff;
}

.themeBtn:hover {
  background-color: var(--white);
  color: var(--primary);
}

.form-inline a:first-child:hover {
  background-color: var(--primary);
  color: #ffff;
}

.navbar-nav .nav-item .nav-link:hover {
  color: var(--primary);
}
/* .form-inline .themeBtn{
  white-space: nowrap; min-width: 170px; display: inline-flex; align-items: center; justify-content: center; 
  height: 50px;
} */

form.contact-form button:hover {
  background-color: var(--black);
  color: #fff;
}

form.footer-form .form-group button:hover {
  background: #000;
  color: #fff;
}

ul.footer-list li a:hover {
  color: var(--primary);
}

/* Hover Effect Css End  */

.products-content {
  background: #232323;
  border-radius: 0 0 7px 7px !important;
  text-align: center;
  padding: 12px;
}

/* innerpages Start */

.innerBan .overlay {
  position: absolute;
  text-align: left;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
}

.innerBan h2 {
  font-size: 80px;
  color: var(--black);
  text-transform: capitalize;
  font-weight: 600;
  text-align: center;
  margin-bottom: 11rem;
}

.innerBan {
  position: relative;
  margin: 0 135px;
}

ul.houselist li {
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  font-family: "Archivo";
}

ul.houselist li {
  margin-top: 13px;
}

ul.houselist li i {
  margin-right: 10px;
}

ul.houselist {
  margin-top: 1rem;
}

.brand-content p {
  font-size: 1rem;
  font-weight: 400;
  color: #838383;
  width: 81%;
  margin-bottom: 1rem;
  line-height: 1.6;
  margin-top: 2rem;
  text-transform: capitalize;
}

.brand-sec.aboutbrand {
  padding-bottom: 2rem;
}

.brand-sec .party-prev,
.brand-sec .party-next {
  width: 45px;
  height: 45px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #0005;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 55%;
}

.brand-sec .party-prev::after,
.brand-sec .party-next::after {
  font-size: 20px;
  color: #000;
}

/* Position adjust */
.brand-sec .party-prev {
  position: absolute;
  left: 10%;
}

.brand-sec .party-next {
  position: absolute;
  right: 10%;
}

.about-content.vendorfind p {
  margin: 1.5rem 0;
}

.about-content .custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-content .custom-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 18px;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}

.about-content p {
  font-size: 1rem;
}

.about-content .custom-list li::before {
  content: "â–º";
  position: absolute;
  left: -5px;
  top: 6px;
  font-size: 10px;
  color: #e60000;
}

.about-content h6 {
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
}

section.how-it-section .mainHead {
  font-size: 80px;
  text-align: center;
  margin-bottom: 3rem;
}

.how-wrap h3 {
  font-size: 34px;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
  font-family: "spooky";
}

section.how-it-section figure img {
  width: 100%;

  border-radius: 57px !important;

  height: 500px;
  object-fit: cover;
}

.how-wrap p {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  width: 99%;
  margin: 1rem 0 1.5rem;
}

.how-wrap {
  margin-left: 2rem;
}

.how-wrap .themeBtn {
  padding: 1.125rem 2.5rem;
}

.how-wrap.howrap2 {
  margin: 0;
  margin-right: 2rem;
}

/* Contact Inner Start */
.inner-content .mainHead {
  text-align: center;
  font-size: 5rem;
  margin-bottom: 6.8rem;
}

.contact-innertext p {
  font-weight: 500;
  color: var(--white);
  font-size: 0.9375rem;
  line-height: 1.8;
  text-transform: capitalize;
  margin-bottom: 5.125rem;
}

.contact-innertext h2 {
  color: var(--white);
  font-weight: 600;
  font-size: 1.125rem;
  text-transform: capitalize;
  font-family: "Archivo";
}

.contact-innertext h3 {
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 500;
  font-family: "Archivo";
  margin: 20px 0;
}

.contact-innertext a {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: underline !important;
}

form.contactform {
  background: white;
  padding: 55px 66px;
}

form.contactform h4 {
  color: #000; 
  font-weight: 700;
  font-size: 2.125rem;
  text-align: center;
  margin-bottom: 2.5rem;
  text-transform: uppercase;
  font-family: serif; 
}

form.contactform .form-control {
  border: none;
  box-shadow: none;
  outline: none;
  background: transparent;
  border-bottom: 1px solid #000; 
  border-radius: 0;
  padding: 10px 0; 
  margin-bottom: 2rem;
  color: #000 !important; 
  font-weight: 500;
  font-size: 1.125rem;
  transition: all 0.3s ease;
}

form.contactform .form-control::placeholder {
  color: var(--black);
  font-weight: 600;
  font-size: 1.125rem;
}

form.contactform .form-group {
  margin: 1.875rem 0;
}

form.contactform button {
  background: #000;
  font-size: 1.125rem;
  font-weight: 500;
  border: none;
  box-shadow: unset;
  padding: 20px 71px;
  color: #f9f9f9;
  font-family: "Archivo";
  margin-top: 2.25rem;
}

ul.innericon {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin-top: 3rem;
}

ul.innericon li a i {
  color: var(--white);
}

section.contact-inner {
  padding-bottom: 2rem;
}

form.contactform button:hover {
  background: #000;
  color: #fff;
}

/* Contact Inner End */

section.how-it-section .row+.row {
  margin-top: 5rem;
}

/* MEMBERSHIP SEC START  */
/* .membership-sec .bg_box {
  background-color: #fff;
  border-radius: 20px;
  padding: 10px 15px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.membership-sec .bg_box .rounded-box {
  padding: 25px 0px;
  background-color: var(--primary);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.membership-sec .bg_box h6 {
  font-size: 20px;
  color: #fff;
  text-transform: uppercase;
}

.membership-sec .bg_box h2 {
  font-size: 3.125rem;
  color: var(--primary);
  font-weight: bold;
  margin-top: 30px;
}

.membership-sec .bg_box small {
  font-size: 1rem;
  color: #78716C;
  font-weight: 400;
}

.membership-sec .bg_box p {
  color: #0F1729;
  font-size: 15px;
  font-weight: 500;
}

.membership-sec .bg_box .themeBtn {
  padding: 24px 38px;
}

.membership-sec .bg_box .themeBtn:hover {
  background-color: var(--primary);
  color: #fff;
}

.membership-sec .bg_box .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.membership-sec .bg_box .content article {
  margin: 30px 0;
}

} */

.membership-sec .bg_box {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border-radius: 20px;
  padding: 10px 15px 20px;
  text-align: center;
  transition: color 0.3s ease;
  border: 1px solid #fff;
}

.membership-sec .bg_box h6 {
  padding: 25px 0px;
  background-color: var(--primary);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 20px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

.membership-sec .bg_box h2 {
  font-size: 3.125rem;
  color: var(--primary);
  font-weight: bold;
  margin-top: 30px;
  position: relative;
  z-index: 2;
}

.membership-sec .bg_box .content article {
  margin: 30px 0;
}

.membership-sec .bg_box small {
  font-size: 1rem;
  color: #78716c;
  font-weight: 400;
  position: relative;
  z-index: 2;
}

.membership-sec .bg_box p {
  color: #0f1729;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  z-index: 2;
}

.membership-sec .bg_box .themeBtn {
  padding: 24px 38px;
  position: relative;
  z-index: 99;
}

.membership-sec .bg_box::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -50%;
  right: -50%;
  background: #000;
  border: 5px solid #fff;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease-in-out;
}

.membership-sec .bg_box:hover::before {
  transform: scale(3);
}

.bg_box:hover h6,
.bg_box:hover h2,
.bg_box:hover p,
.bg_box:hover small {
  color: #fff;
}

/* Best Sec Start  */
section.best-sec {
  padding: 0 135px;
}

.best_bg {
  position: relative;
  background: url(../images/best-img.png) no-repeat top / cover;
  padding: 55px 0;
  border-radius: 50px;
  overflow: hidden;
}

.best_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(251, 215, 163, 1) 0%,
      /* Left dark (#FBD7A3 full) */
      rgba(251, 215, 163, 0.5) 40%,
      /* Mid light */
      rgba(251, 215, 163, 0) 100%
      /* Right transparent */
    );
  /* z-index: 1; */
  pointer-events: none;
}

.best_bg .mainHead {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.5;
  color: #000 !important;
}

.best_bg .themeBtn {
  padding: 24px 30px;
  font-size: 18px;
  margin-top: 1rem;
}

/* Mission sec  start  */
.mission .mission-content h4 {
  color: #495057;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.mission-card {
    padding: 1rem;
    background: #fff;
    border-radius: 10px;
}

.mission-content p {
    color: #000;
}

/* dj sec satrt  */

.dj {
  background: url(../images/dj-images.jpg) no-repeat center / cover;
  text-align: center;
  padding: 11rem 0;
  margin: 0 8.4375rem;
  border-radius: 50px;
}

.dj_text h3 {
  font-size: 3rem;
  color: var(--primary);
}

.dj_text h2 {
  font-size: 4rem;
  margin: 0.6rem 0;
}

.dj_text p {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.dj_text .themeBtn {
  font-size: 0.9rem;
  padding: 16px 30px;
}

/* dj sec end  */

.innerBan h3 {
  color: var(--primary);
  text-align: center;
  font-size: 3rem;
}

.about-sec h6 {
  color: #fff;
  font-size: 1.2rem;
  margin: 1rem 0;
}

/* Faqs sec Start  */

section.faq-section h2 {
  font-size: 2.2rem;
  font-weight: bold;
  margin-top: 22px;
  color: var(--primary);
}

.faq-section {
  padding: 60px 16px 80px;
}

.faq-container {
  max-width: 960px;
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.faq-item {
  border-radius: var(--radius);
  border-bottom: 1px solid #ffffff30 !important;
  outline: unset;
}

.faq-header {
  width: 100%;
  padding: var(--padding);
  border: none;
  outline: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  text-align: left;
}

.faq-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

.faq-question {
  flex: 1;
  color: #fff;
  font-size: 1.1rem;
  padding: 1.1rem 0;
  transition: all 0.5s ease-in;
}

.faq-header:focus,
.faq-header:focus-visible,
.faq-header:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.faq-question:hover {
  color: var(--primary);
}

.faq-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 5%;
  top: 50%;
  width: 50%;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
  transform-origin: center;
}

.faq-icon::before {
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-header:hover .faq-icon::before,
.faq-header:hover .faq-icon::after {
  background: var(--primary);
}

.faq-item.is-open .faq-icon::after {
  opacity: 0;
}

.faq-item.is-open .faq-icon::before {
  background: var(--primary);
  width: 100%;
}

.faq-item.is-open .faq-question {
  color: var(--primary);
}

.faq-body {
  padding: 0 var(--padding);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.35s ease, padding-top 0.35s ease,
    padding-bottom 0.35s ease;
  will-change: max-height;
}

.faq-item.is-open .faq-body {
  max-height: 400px;
  opacity: 1;
  padding-bottom: var(--padding);
}

.faq-body p {
  margin: 5px 0 16px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #fff;
  max-width: 720px;
}

/* faqs section end  */

/* section Start Connecting start  */

.connecting {
  background: url(../images/connecting.png) no-repeat center / cover;
  text-align: center;
  padding: 11rem 0;
  margin: 0 8.4375rem;
  border-radius: 50px;
}

section.connecting::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: rgb(0 0 0 / 33%);
}

.connecting_text {
  position: relative;
  z-index: 111;
}

.connecting_text h3 {
  font-size: 3rem;
  color: var(--primary);
}

.connecting_text h2 {
  font-size: 4rem;
  margin: 0.6rem 0;
}

.connecting_text p {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding: 0 11rem;
}

.connecting_text .themeBtn {
  font-size: 0.9rem;
  padding: 16px 30px;
}

/* section Start Connecting end  */

/* product list details sec start  */

section.product-list {
  padding: 0;
}

.product-list .filter-box {
  width: 90%;
  margin: 80px auto;
  background: #111;
  padding: 25px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 1px solid #222;
}

/* Top Buttons */
.product-list .top-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.product-list .btn {
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-list .btn-red {
  background: #d11;
  color: #fff;
}

.product-list .btn-gray {
  background: #222;
  color: #fff;
}

.product-list .btn:hover {
  opacity: 0.85;
}

/* Inputs Row */
.product-list .inputs {
  display: flex;
  gap: 12px;
  width: 100%;
}

.product-list .input-box {
  width: 100%;
  position: relative;
}

.product-list input:focus {
  border: unset;
  outline: unset;
}

.product-list .input-box input {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 14px 48px;
  border-radius: 6px;
  color: #f8f8f8;
  font-size: 1rem;
}

.product-list .input-box i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #666;
  font-style: normal;
  font-size: 14px;
}

.product-list .dropdown {
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  background: #1a1a1a;
  border: 1px solid #333;
  padding: 12px;
  padding-right: 35px;
  border-radius: 6px;
  color: #f8f8f8;
}

.product-list .dropdown option li {
  color: red;
}

.dropdown-arrow {
  position: absolute;
  right: 17.8%;
  top: 36%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #ccc;
  pointer-events: none;
}

.product-list .dropdown:focus {
  border: unset;
  outline: unset;
}

.product-list .search-btn {
  background: #d11;
  padding: 12px 25px;
  color: #fff;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
}

.product-list button:focus {
  border: unset;
  outline: unset;
}

.product-list .search-btn:hover {
  opacity: 0.85;
}

section.product-list .row {
  margin: 0 7rem;
}

/* filter sec start  */

.filter-sec h3 {
  font-size: 2rem;
  color: var(--primary);
  font-weight: bold;
  margin-top: 2rem;
}

.filter-sec .content .tags {
  font-size: 1.1rem;
  color: gray;
  display: grid;
  gap: 1rem 4rem;
  grid-template-columns: repeat(auto-fit, minmax(233px, 1fr));
  margin-top: 2rem;
}

.filter-sec .content .tags .tag input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--primary);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin-right: 0.4rem;
}

.filter-sec .content .tags .tag input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 7px;
  height: 14px;
  border: solid black;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* product list details sec end  */

form.loginform {
  background: #171717;
  border-radius: 60px;
  padding: 100px;
}

form.loginform .form-control {
  border: 1px solid #f6f6f6;
  border-radius: 10px;
  background: rgb(103 103 103 / 10%);
  padding: 0;
  height: 48px;
  padding-left: 1rem;
}

.loginform label {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 1rem;
  font-family: "Archivo";
}

.loginform.form-group {
  margin: 0;
}

form.contactform.loginform .form-group {
  margin: 0 0 2rem 0;
}

form.contactform.loginform a {
  color: #63bbff;
  font-size: 15px;
}

form.contactform.loginform button {
  width: 100%;
  border-radius: unset;
  background: var(--primary);
  color: #fff;
  margin-top: 1rem;
  padding: 15px 1rem;
}

form.contactform.loginform button:hover {
  background: #fff;
  color: #000;
}

form.contactform.loginform p {
  font-size: 1rem;
  color: #fff;
  font-family: "Archivo";
  text-align: center;
}

.toplogin .mainHead {
  font-size: 80px;
  margin-bottom: 1rem;
}

.toplogin {
  text-align: center;
  margin-bottom: 55px;
}

.toplogin p {
  font-size: 20px;
  color: #fff;
  font-family: "Archivo";
  margin: 0;
}

form.loginform .form-control::placeholder {
  font-size: 1rem;
  font-weight: 300;
  text-transform: inherit;
  color: var(--white);
}

.loginform .form-check-label {
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  font-family: "Archivo";
}

form.loginform h3 {
  font-size: 20px;
  font-weight: 500;
  color: #c30000;
  font-family: "Archivo";
  margin-bottom: 1rem;
}

/* New Css Start */

.contact-inner.login-contact {
  padding: 6rem 0;
}

section.contact-inner.sign-inner {
  padding: 6rem 0;
}

section.contact-inner.vendor-contact form.contactform.loginform textarea.form-control {
  height: 130px;
  padding: 1rem;
}

section.contact-inner.vendor-contact input.form-control.file-option {
  height: 263px;
  border: 4px dashed #c6c7c8;
  padding: 3rem 0 2rem 2rem;
}

.note-box p {
  text-align: start !important;
  color: var(--black) !important;
}

.note-box {
  padding: 1.125rem 1.25rem;
  background-color: var(--white);
  margin: 1.875rem 0 2.5rem;
  border-radius: 10px;
}

.note-box p span {
  font-weight: bold;
  font-family: "Archivo";
}

section.contact-inner.vendor-contact form.contactform.loginform a {
  color: var(--primary);
}

section.contact-inner.vendor-contact {
  padding: 6.25rem 0;
}

/* Inner-Pages Start */

/* Portfolio-Inner Start */

.vendorport-sec.inner {
  padding: 100px 108px 50px 108px;
}

.portfolio-top {
  text-align: center;
  margin-bottom: 50px;
}

.portfolio-top p {
  color: var(--white);
  font-size: 1.25rem;
  font-family: "Archivo";
  line-height: 1.4;
  margin-top: 30px;
}

.portfolio-top .mainHead {
  font-size: 80px;
}

.vendor-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--white);
  border-radius: 10px;
  padding: 9px 100px;
}

.vendor-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.vendor-left h3 {
  color: #000000;
  font-weight: 400;
  font-family: "Archivo";
  font-size: 1.875rem;
  line-height: 0.9;
}

.vendor-left h3 span {
  display: block;
  font-size: 1.25rem;
  font-weight: 300;
  margin-top: 10px;
}

.vendor-main .themeBtn {
  padding: 10px 31px;
  height: 39px;
  border-radius: 3px;
}

/*  */

.portfoliovendor.inner {
  padding: 0 0 100px 108px;
}

.vendorportfolio-main figure img {
  width: 100%;
}

.vendorportfolio-main h3 {
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
  font-family: "Archivo";
  line-height: 1.3;
  margin: 30px 0 10px;
}

.vendorportfolio-main p {
  color: var(--white);
  font-size: 1rem;
  font-weight: 300;
  font-family: "Archivo";
  line-height: 1.3;
  margin: 0;
}

.portfolio-second-main {
  display: flex;
  align-items: center;
  gap: 30px;
}

h3.topHeading {
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
  font-family: "Archivo";
  line-height: 1.3;
  margin: 60px 0 30px;
}

.portfolio-bottom {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 110px;
}

.bottom-main {
  background-color: var(--white);
  border-radius: 22px;
}

.bottom-main h3 {
  margin: 2.5rem 0 0 2.5rem;
  color: #000000;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: "Archivo";
  line-height: 1.3;
}

.bottom-main p {
  margin: 10px 0 39px 40px;
  color: #000000;
  font-size: 1rem;
  font-weight: 300;
  font-family: "Archivo";
  line-height: 1.6;
}

/*  */

/* Portfolio-Inner End */

/* Second */
.studio-sec.inner {
  background-color: #171717;
  padding: 100px 214px 118px 208px;
}

.studioleft-main {
  border: 1px solid #f6f6f6;
  padding: 30px 55px 35px 20px;
  border-radius: 10px;
  background-color: rgb(103 103 103 / 10%);
}

.studioleft-main h3 {
  color: var(--white);
  font-size: 1rem;
  font-weight: 400;
  font-family: "Archivo";
  line-height: 1.6;
}

.studioleft-main p {
  color: var(--white);
  font-size: 1rem;
  font-weight: 300;
  font-family: "Archivo";
  line-height: 1.3;
  margin: 1rem 0 1.25rem;
}

.studioleft-main h4 {
  color: var(--white);
  font-size: 1rem;
  font-weight: bold;
  font-family: "Archivo";
}

.studioleft-main h4 span {
  font-weight: 400;
}

.studioright-main {
  border: 1px solid #f6f6f6;
  border-radius: 10px;
  background-color: rgb(103 103 103 / 10%);
  padding: 25px 30px;
  transition: 0.5s ease;
}

.studioright-main h3 {
  color: var(--white);
  font-size: 1rem;
  font-weight: 400;
  font-family: "Archivo";
  line-height: 1.6;
}

.studioright-main h4 {
  color: #c20000;
  font-size: 25px;
  font-weight: 400;
  font-family: "Archivo";
  margin: 10px 0 23px;
}

.studiolist li+li {
  margin: 10px 0 0;
}

.studiolist li a {
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.studiolist li a i {
  color: #00c950;
}

.studioright-main .themeBtn {
  width: 100%;
  padding: 11px 136px;
  margin-top: 30px;
  border-radius: 3px;
  color: var(--white);
  font-size: 17px;
  font-weight: bold;
  font-family: "Archivo";
  letter-spacing: 1px;
  height: 39px;
}

.studio-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.studio-flex h5 {
  color: #c20000;
  font-size: 25px;
  font-weight: 400;
  font-family: "Archivo";
}

.studio-overlay h2 {
  color: var(--white);
  font-size: 1rem;
  font-weight: 400;
  font-family: "Archivo";
  margin: 30px 0 15px;
}

.star {
  display: flex;
  align-items: center;
  gap: 3px;
}

.star li a i {
  color: #ffc107;
}

.studioleft-main h6 {
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  font-family: "Archivo";
  line-height: 1.6;
}

.studioleft-main+.studioleft-main {
  margin: 1.875rem 0 0 0;
}

.studioright-main+.studioright-main {
  margin: 1.25rem 0;
}

.studioright-main:hover {
  background-color: rgb(194 0 0 / 10%);
  border: 1px solid #c20000;
}

.studioright-bottom {
  margin-top: 32px;
}

.studioright-bottom .themeBtn {
  width: 100%;
  padding: 10px 176px;
  height: 39px;
  margin-bottom: 30px;
}

.studioright-bottombox {
  background-color: #171717;
  border: 1px solid #f6f6f6;
  border-radius: 10px;
  padding: 25px 18px;
}

.studioright-bottombox p {
  color: var(--white);
  font-size: 14px;
  font-weight: 300;
  font-family: "Archivo";
  line-height: 1.5;
  margin-bottom: 30px;
}

.studioright-bottombox .themeBtn {
  padding: 14px 156px;
  background-color: rgb(103 103 103 / 10%);
  border: 1px solid #f6f6f6;
  border-radius: 10px;
  height: 48px;
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  font-family: "Archivo";
}

.listing-main h2 {
  color: var(--white);
  margin: 1rem 0 2rem 0;
  font-size: 2.5rem;
}

.listing-wrapp figure img {
  width: 100%;
}

.listing-wrapp {
  background-color: var(--white);
  padding: 0px 0px 0px 0px;
  border-radius: 33px;
}

.listing-content h3 {
  font-size: 1rem;
  font-weight: 500;
  text-transform: capitalize;
  font-family: "Archivo";
}

.listing-content p {
  font-size: 0.875rem;
  font-weight: 300;
  text-transform: capitalize;
  color: var(--black);
  margin: 0.325rem 0 0.2875rem;
}

.listing-content .themeBtn {
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: capitalize;
  background-color: rgb(194 0 0 / 60%);
  padding: 0.875rem 1.975rem;
}

.listing-flex {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.625rem 0;
}

.listing-flex h5 {
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: capitalize;
  font-family: "Archivo";
}

.listing-items {
  display: flex;
  align-items: center;
}

.listing-items li a i {
  color: #ffc107;
}

.listing-info li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--black);
}

.listingcontent .themeBtn {
  font-size: 0.875rem;
  font-weight: bold;
  padding: 0.75rem 0;
  background-color: var(--black);
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

.listing-info li+li {
  margin: 0.3252rem 0 1rem;
}

.listing-overlay {
  padding: 38px 1.5rem 1.7rem;
  margin: 0 0 40px 0;
}

.listing-wrapp figure img {
  height: 377px;
  object-fit: cover;
  border-radius: 33px 33px 0 0;
}

section.vendorlist-sec {
  padding: 6rem 25px 3.5rem;
}

.range-container label {
  font-size: 1rem;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--black);
  font-family: "Archivo";
  margin: 0;
}

.slider {
  position: relative;
  height: 12px;
  margin-top: 20px;
}

/* Black Track Background */
.track {
  position: absolute;
  height: 36px;
  width: 100%;
  background: var(--black);
  border-radius: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* Range sliders */
input[type="range"] {
  position: absolute;
  width: 100%;
  pointer-events: none;
  -webkit-appearance: none;
  background: none;
  z-index: 2;
  bottom: 0;
  top: 0;
  margin: auto;
}

input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  height: 22px;
  width: 22px;
  background: white;
  border-radius: 50%;
  border: 2px solid black;
}

.values {
  display: flex;
  justify-content: space-between;
  margin: 1.8755rem 0 1rem 0;
}

.filter-main {
  background-color: var(--white);
  border-radius: 50px;
  box-shadow: 0 4px 4px 0 rgb(0 0 0 / 25%);
  padding: 30px;
}

form.filer-form label {
  font-size: 1rem;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--black);
}

.filter-main h2 {
  font-size: 1.25rem;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--black);
  margin: 0 0 1.025rem 0;
}

.filer-form .form-control {
  height: 3rem;
  backdrop-filter: blur(37px);
  border: 1px solid #f6f6f6;
  background-color: rgb(103 103 103 / 10%);
  box-shadow: inset 19px 0px 58px hsl(0deg 0% 0% / 10%);
}

form.filer-form option {
  background-color: var(--black);
  color: var(--white);
  border: unset;
}

form.filer-form .form-group {
  margin: 0 0 1.75rem 0;
}

.values span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--black);
  font-family: "Archivo";
  text-transform: capitalize;
}

.filter-main a {
  display: block;
  text-align: center;
  font-size: 15px;
  font-weight: 300;
  text-transform: capitalize;
  color: var(--black);
  border: 1px solid #f6f6f6;
  background-color: rgb(103 103 103 / 10%);
  box-shadow: inset 19px 0px 58px hsl(0deg 0% 0% / 10%);
  padding: 0.75rem 0;
  border-radius: 10px;
}

.profile-sec {
  padding: 3.125rem 3.125rem 3.125rem 215px;
  background-color: var(--primary);
  margin: 2.25rem 0 0 0;
}

.profile-flex {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.profile-overlay {
  display: flex;
  align-items: center;
  gap: 1.875rem;
  flex-shrink: 0;
}

figure.profiel-sub {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background-color: var(--white);
  padding: 0.625rem 1.5rem;
  border-radius: 6px;
}

.profile-content h4 {
  font-size: 1.875rem;
  font-weight: 400;
  text-transform: capitalize;
  color: var(--white);
  font-family: "Archivo";
  line-height: 1.2;
}

.profile-content p {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1.5;
  margin: 0.2625rem 0 1.025rem;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.profile-info ul {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.profile-info ul li a {
  font-size: 1rem;
  font-weight: 300;
  text-transform: capitalize;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.profile-info ul li a i {
  color: #ffc107;
}

.profile-info span {
  font-size: 17px;
  font-weight: bold;
  text-transform: capitalize;
  color: #c20000;
  background-color: var(--white);
  padding: 7px 1.125rem;
  border-radius: 3px;
}

figure.profiel-sub h5 {
  font-size: 17px;
  font-weight: bold;
  text-transform: capitalize;
  color: var(--black);
  font-family: "Archivo";
}

/* New Css End  */
figure.profile-img img {
  width: 250px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}


/* Review Wrapper */

.review-wrapper h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #fff;
}

.review-wrapper h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 25px;
  color: #fff;
}

.rating-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.rating-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rating-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.stars {
  display: flex;
  gap: 5px;
  color: #fff;
}

.star {
  font-size: 20px;
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s;
}

.star.filled {
  color: #00d4d4;
}

.star:hover,
.star:hover~.star {
  color: #00d4d4;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  transition: border-color 0.3s;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none;
  border-color: #00d4d4;
}

textarea {
  resize: vertical;
  min-height: 150px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0 0 0 -1.5rem;
}

.checkbox-label {
  font-size: 13px;
  color: #fff;
  cursor: pointer;
}

.submit-btn {
  background-color: #ff0000;
  color: white;
  padding: 14px 40px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #cc0000;
}

@media (max-width: 768px) {
  .rating-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


.single-review strong {
  color: #fff;
  margin-bottom: 1rem;
  display: inline-block;
  font-size: 1.4rem;
}

.review-summary small {
  color: #fff;
}

.single-review small {
  color: #fff;
}

.single-review {
  border-bottom: 2px solid azure;
  padding-bottom: 1rem;
}

.pricing ul li {
  list-style: disc;
  text-align: unset;
  color: var(--black);
}

.pricing ul {
  text-align: left;
  padding-inline: 3rem;
  margin-top: 1rem;
  position: relative;
  z-index: 99;
}

.bg_box:hover .pricing ul li {
  color: #fff !important;
}

.bg_box:hover .pricing ul li::marker {
  color: #fff !important;
}

.banner-style {
  background-color: #c20000 !important;
}

.custom-btn-style {
  background-color: #c20000 !important;
  color: #fff !important;
  border: 1px solid #c20000 !important;
  border-radius: 20px;
  padding: 10px 30px;
}

.vendor-locked {
  position: relative;
}

.vendor-locked .vendor-blur-content {
  filter: blur(4px);
  opacity: 0.6;
  pointer-events: none;
}

.vendor-overlay-text {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-content {
  position: relative;
  background: #ffffff0f;
  width: 90%;
  max-width: 420px;
  padding: 40px 30px;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  text-align: center;
  transform: scale(0.8) translateY(20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.modal.is-active {
  display: flex;
}

.modal.is-active .modal-content {
  transform: scale(1) translateY(0);
}

#modal-img {
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 25px;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #f1f5f9;
  color: #64748b;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.close-btn:hover {
  background: #ff4757;
  color: white;
  transform: rotate(90deg);
}

.form-check label {
    margin: 0;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 12px;
}