/* Created By Shyam 30-5-2025 */

@import url(root.css);

/* Home Page Start */
.heroSectionWrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.bannerImage img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  object-fit: cover;
}

.heroBannerContent {
  position: absolute;
  top: 25%;
  left: 5%;
  z-index: 99;
  max-width: 600px;
}

.heroBannerTitle {
  font-size: var(--fontExtraLarge);
  color: var(--PrimaryColor);
}

.heroBannerDesc {
  font-size: var(--fontMedium);
  color: var(--TextColor);
}

/* About Section */

.about-section {
  background-color: var(--WhiteColor);
  overflow: hidden;
}

.bg-illustration {
  position: absolute;
  bottom: -10%;
  left: 0;
  width: 40%;
  opacity: 0.05;
  z-index: 0;
}

.about-img-wrapper {
  position: relative;
  z-index: 1;
}

.about-img-wrapper img {
  border-radius: 16px;
  max-width: 70%;
  height: auto;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
}

.aboutUsContainer {
  width: 90%;
  margin: 50px auto;
}

.aboutUsTitle {
  font-size: var(--fontMediumLarge);
  color: var(--PrimaryColor);
}

.aboutUsDesc {
  font-size: var(--fontSml);
  color: var(--TextLight);
}

/* Product Styles */

.productContainer {
  width: 90%;
  margin: 50px auto;
}

.productsTitle {
  font-size: var(--fontMediumLarge);
  color: var(--PrimaryColor);
}

.product-section .card {
  width: 90%;
  margin: auto;
  border-radius: 16px;
  box-shadow: var(--BoxShadow) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;
  -ms-transform: translateY(-5px);
  -moz-transition: transform 0.3s ease, box-shadow 0.3s ease;
  -ms-transition: transform 0.3s ease, box-shadow 0.3s ease;
  -o-transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-section .card:hover {
  transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -o-transform: translateY(-5px);
}

.productTitle {
  font-size: var(--fontLarge);
  color: var(--PrimaryColor);
}

.productDesc {
  font-size: var(--fontMedium);
  color: var(--ProductDesc);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.productReadMoreBtn {
  font-size: var(--fontMedium);
  font-weight: var(--fontW400);
  color: var(--PrimaryColor);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: fit-content;
}

.productReadMoreBtn:hover {
  color: var(--TextColor);
}

.productReadMoreBtn svg {
  font-size: var(--fontMedium);
}

/* Our Approch Styles */

.our-approach {
  background: url('../../images/ourApproch.jpg') center center / cover no-repeat;
}

.ourApprochContainer {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ourApprochContainer div {
  width: 50%;
}

.approach-hero {
  background: rgba(34, 34, 34, 0.7);
  padding: 60px 0 200px;
}

.ourApprochHighlighted{
  font-size: var(--fontExtraLarge);
  font-weight: var(--fontW200);
}

.ourApprochHighlighted span{
  font-weight: var(--fontW500);
}

.ourApprochTitle {
  font-size: var(--fontMedium);
  font-weight: var(--fontW400);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.ourApprochContent {
  font-size: var(--fontSml);
  font-weight: var(--fontW300);
}

/* Mission Vision Value Styles */

.whyusSectionWrap{
  width: 90%;
  margin: -170px auto 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--WhiteColor);
  z-index: 999;
  position: relative;
}

.contentWrapper{
  padding: 40px 0;
  width: 90%;
  margin: auto;
}

.whyUsImage{
  border-radius: 20px;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.whyUsTitle{
  font-size: var(--fontMedium);
  font-weight: var(--fontW300);
  color: var(--TitleLight);
  margin-bottom: 20px;
  text-align: left;
}

.whyUsContentPoints{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fontLarge);
  font-weight: var(--fontW400);
  color: var(--TitleLight);
  margin-bottom: 10px;
  text-align: left;
}

.whyUsTabsContainer .nav-pills li{
  width: 33.33%;
}

.whyUsTabsContainer .nav-pills li a{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  border-radius: 0;
}

.whyUsTabsContainer .nav-pills li a.active{
  background: var(--PrimaryColor);
}

.whyUsTabsContainer .nav-pills li a.active svg path{
  fill: var(--WhiteColor);
}

.whyUsTabsContainer .nav-pills li a{
  color: var(--LightBlack);
  text-decoration: none;
  font-size: var(--fontMedium);
  font-weight: var(--fontW400);
}

.whyUsTabsContainer .nav-pills li a.active{
  color: var(--WhiteColor);
}

/* WhatWeDo Styles */

.whatWeDoSection .wwd-card {
  border-radius: 12px;
  padding: 20px;
  transition: background 0.3s ease;
  height: 100%;
  border: solid 1px var(--CardEvenColor);
}

.whatWeDoSection .wwd-card:hover {
  background-color: var(--HoverBackground);
}

.whatWeDoSection .wwd-card img {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}

.whatWeDoSection .wwd-card h6 {
  font-weight: var(--fontW500);
  font-size: var(--fontLarge);
  margin-bottom: 10px;
}

.whatWeDoSection .wwd-card p {
  font-size: var(--FontSmall);
  color: var(--WhiteColor);
  margin: 0;
}

.whatWeDoSection .floating-btn {
  position: absolute;
  top: 50%;
  right: -50px;
  transform: translateY(-50%);
  z-index: 10;
}

.whatWeDoSection .floating-btn .btn {
  border: none;
  line-height: 1;
}

.whatWeDoTitle{
  font-size: var(--fontMedium);
  font-weight: var(--fontW400);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.whatWeDoHighlighted{
  font-size: var(--fontExtraLarge);
  font-weight: var(--fontW200);
}

.whatWeDoSectionSide{
  background: var(--LightBlack);
  padding: 100px;
  color: var(--WhiteColor);
}

.wwd-card-even {
  background-color: var(--CardEvenColor);
}

/* Testimonial Styles */

.testimonial-section {
  background-color: var(--WhiteColor);
  padding: 150px 0;
}

.testimonialContainer{
  width: 90%;
  margin: auto;
  position: relative;
  z-index: 9;
}

.testimonialProfileIcon{
  border-radius: 7px;
  object-fit: cover;
}

.testimonial-quote {
  color: var(--TitleLight);
  font-size: var(--fontMedium);
  font-weight: var(--fontW300);
}

.testimonialProfileName{
  font-size: var(--fontMedium);
  font-weight: var(--fontW500);
  color: var(--PrimaryColor);
}

.ourClientsTitle{
  font-size: var(--fontMedium);
  font-weight: var(--fontW500);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--PrimaryColor);
}

.satisfactionText{
  font-size: var(--fontExtraLarge);
  font-weight: var(--fontW400);
  color: var(--TextColor);
}

.testimonialNavigation{
  border-radius: 7px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--PrimaryColor);
  border: solid 1px var(--PrimaryColor);
}

.testimonialNavigation:hover{
  border: solid 1px var(--PrimaryColor);
  background: var(--WhiteColor);
}

.testimonialNavigation i{
  color: var(--WhiteColor);
}

.testimonialNavigation:hover i{
  color: var(--PrimaryColor);
}

.bgTestimonialsBanner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}