@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Jost:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --font-family-dm-sans: "DM Sans", sans-serif;
  --font-family-jost: "Jost", serif;
  --font-family-manrope: "Manrope", sans-serif;
  --font-family-montserrat: "Montserrat", sans-serif;
  --font-family-playfair: "Playfair Display", serif;
  --font-family-plus-jakarta: "Plus Jakarta Sans", sans-serif;
  --font-family-raleway: "Raleway", sans-serif;
  --theme-primary: #193ab3;
}

* {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-plus-jakarta);
}

/* GLOBAL */

a {
  text-decoration: none !important;
}

body {
  background-image: url(../asset/bg.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.color-primary {
  color: var(--theme-primary);
}

.background-primary {
  background-color: var(--theme-primary);
}

.max-content {
  width: max-content;
}

.line {
  width: 100%;
  height: 2px;
}

.bright {
  filter: brightness(100);
}
.section-head-title {
  color: #ffffff;
  width: max-content;
  padding: 0.2rem 1rem;
  border-radius: 5rem;
}
.max-1440 {
  max-width: 1440px;
}

.header-spacer {
  width: 100%;
  height: 76px;
}
/* HEADER */
.logo {
  max-height: 60px;
}

header .navbar {
  --bs-navbar-padding-y: 0.2rem !important;
}
header .nav-link {
  color: var(--theme-primary);
}

header .navbar-nav .nav-item {
  margin-left: 1rem;
  font-weight: 600;
}

.dropdown-menu {
  overflow: hidden !important;
  --bs-dropdown-bg: var(--theme-primary) !important;
  --bs-dropdown-border-radius: 0.65rem !important;
  --bs-dropdown-link-active-bg: #7c98ff !important;
  --bs-dropdown-padding-y: 0rem !important;
  --bs-dropdown-color: #ffffff !important;
}

.dropdown-item {
  color: #ffffff !important;
  padding: 0.6rem 1rem !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: #7c98ff !important;
}

/* HERO */
.hero-title {
  font-size: calc(2rem + 4.5vw);
  font-weight: 600;
  line-height: 1;
}

.hero-button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: var(--theme-primary);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffff;
  gap: 10px;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  width: max-content;
}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.hero-button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.hero-button:hover .icon {
  transform: translate(4px);
}

.hero-button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.hero-button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

.hero .swiper-button-next,
.hero .swiper-button-prev {
  width: 3.5rem !important;
  transition: all 0.2s ease-in;
}

.hero .swiper-button-next:hover,
.hero .swiper-button-prev:hover {
  width: 4rem !important;
}

.hero .swiper-button-next:after,
.hero .swiper-button-prev:after {
  display: none;
}

/* SERVICE */

.service-card-img {
  max-height: 15rem;
  transition: all 0.2s ease-in;
}

.service-card-1 .service-card-img-wrap,
.service-card-1 .hero-button {
  background: linear-gradient(135deg, #578fcf, #3a6eb3);
}

.service-card-2 .service-card-img-wrap,
.service-card-2 .hero-button {
  background: linear-gradient(135deg, #91c536, #6d9a28);
}

.service-card-3 .service-card-img-wrap,
.service-card-3 .hero-button {
  background: linear-gradient(135deg, #d2b050, #a5832d);
}

.service-card .hero-button {
  color: black;
}

.service-card {
  background-color: #ffffff26;
  backdrop-filter: blur(6px);
}

.service-card:hover .service-card-img {
  max-height: 20rem;
  margin-top: -5rem;
}

/* WHY WORK */
.why-work {
  background-image: url(../asset/home/why-work.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
  .why-work {
    background-attachment: scroll;
  }
}

@media (max-width: 768px) {
  .why-work {
    background-attachment: scroll;
  }
}

.why-work-icon {
  width: 20%;
  background-color: rgba(219, 219, 219, 0.274);
  border-radius: 50%;
  padding: 1.2rem;
}

.why-work-content {
  width: 80%;
}

.why-work-card {
  background-color: #05050528;
  backdrop-filter: blur(5px);
}

/* TESTIMONIAL */
.testimonial-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 5rem 0;
}

.testimonial-container .marquee {
  display: flex;
  gap: 20px;
  animation: scroll 30s linear infinite;
}

.testimonial-container .marquee-reverse {
  animation: scroll-reverse 30s linear infinite;
}

.testimonial-card {
  display: inline-block;
  background: white;
  padding: 1.5rem 1rem;
  border-radius: 2rem;
  box-shadow: 0 4px 8px rgba(54, 34, 128, 0.171);
  text-align: center;
  min-width: 300px;
  white-space: normal;
}

.testimonial-card .user {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.testimonial-card .stars {
  padding: 0.5rem 1rem;
  background-color: var(--theme-primary);
  width: max-content;
  border-radius: 0.8rem;
  margin-bottom: 1rem;
}

.testimonial-card .stars .star-img {
  width: 1.1rem;
  height: auto;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes scroll-reverse {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.marquee-wrapper {
  display: flex;
  width: 200%;
}

.testimonial-container::before,
.testimonial-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10%;
  height: 100%;
  z-index: 1;
}

.testimonial-container::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
}

.testimonial-container::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
}

/* CALL TO ACTION */
.call-to-action::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../asset/lines.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.4;
}

/* FOOTER */
footer {
  background: linear-gradient(135deg, #6669ff 0%, var(--theme-primary) 100%);
}

footer .social-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

footer .social-icon:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.2);
}

footer .footer-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #ffffff;
}

footer .newsletter-input {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white !important;
}

footer .newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

footer .newsletter-input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: white;
  box-shadow: none !important;
}

.scroll-to-top {
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  cursor: pointer;
}

/* BOOKMARK */
.bookmark a {
  color: var(--theme-primary);
}

.bookmark a:hover {
  font-weight: 500;
}

.bookmark {
  background-image: url(../asset/service/bookmark.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.bookmark::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #96bbff;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.9;
}

/* SERVICE PAGE */

.service-content-list li::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
  background-image: url(../asset/check.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  margin-bottom: -0.3rem;
  margin-right: 0.4rem;
}
.service-content-list-title {
  font-weight: 600;
  color: var(--theme-primary);
}
.service-cta .service-content-list-title {
  color: #77cc00;
}

/* PRDOCUT SOURCING */
.service-card-product .service-card-1 .service-card-img-wrap {
  background: linear-gradient(135deg, #d2b050, #a5832d);
}

.service-card-product .service-card-2 .service-card-img-wrap {
  background: linear-gradient(135deg, #D86644, #9b452b);
}

.service-card-product .service-card-3 .service-card-img-wrap {
  background: linear-gradient(135deg, #44BCC4, #27757a);
}

.service-card-product .service-card-4 .service-card-img-wrap {
  background: linear-gradient(135deg, #E3CC50, #8d7e28);
}

.service-card-product .service-card-5 .service-card-img-wrap {
  background: linear-gradient(135deg, #91c536, #6d9a28);
}


/* ENVIROMENTAL CONSULTANCY */

.service-card-environment .service-card-1 .service-card-img-wrap {
  background: linear-gradient(135deg, #d7467c, #8a2d4f);
}

.service-card-environment .service-card-2 .service-card-img-wrap {
  background: linear-gradient(135deg, #CDE4CF, #61c76a);
}

.service-card-environment .service-card-3 .service-card-img-wrap {
  background: linear-gradient(135deg, #DD94EE, #854194);
}

.service-card-environment .service-card-4 .service-card-img-wrap {
  background: linear-gradient(135deg, #53AC26, #2f6613);
}

/* CONTACT PAGE*/

.contact-card-item-1,
.contact-card-item-1 .contact-btn {
  background: linear-gradient(135deg, #578fcf, #3a6eb3);
}
.contact-card-item-2,
.contact-card-item-2 .contact-btn {
  background: linear-gradient(135deg, #91c536, #6d9a28);
}
.contact-card-item-3,
.contact-card-item-3 .contact-btn {
  background: linear-gradient(135deg, #d2b050, #a5832d);
}


.contact-card-item-1 .contact-btn::before {
  content: "Email Now";
}

.contact-card-item-2 .contact-btn::before {
  content: "Call Now";
}

.contact-card-item-3 .contact-btn::before {
  content: "Bangalore";
}


.contact-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 0.315);
  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  position: relative;
}

.svgIcon {
  transition-duration: 0.3s;
}

.svgIcon path {
  fill: white;
}

.contact-btn:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: 0.3s;
  background-color: var(--theme-primary);
  align-items: center;
}

.contact-btn:hover .svgIcon {
  transition-duration: 0.3s;
  transform: translateY(-200%);
}

.contact-btn::before {
  position: absolute;
  bottom: -20px;
  color: white;
  font-size: 0px;
}

.contact-btn:hover::before {
  font-size: 13px;
  opacity: 1;
  bottom: unset;
  transition-duration: 0.3s;
}


.submit-btn{
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  transition: all 0.3s ease;
}


.submit-btn:hover{
  background-color: var(--theme-primary);

}


form#contactForm{
  border: 1px solid #ffffff;
  background-color: #ffffff07;
  backdrop-filter: blur(3px);
}