* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Avenure";
  src: url(/fonts/avenir/AvenirLTStd-Light.otf);
}
@font-face {
  font-family: "Carentro";
  src: url(/fonts/carentro/Carentro\ DEMO.otf);
}

:root {
  --body-font: Avenure;
  --title-font: Carentro;

  /* === Color === */

  /* #845020 #AE782B #FBD268 #FDF59D */
  --white-color: #fff;
  --brown-color: #845020;
  --dark-gold-color: #AE782B;
  --gold-color: #FBD268;
  --light-gold-color: #FDF59D;
  --text-color: #010101;
}
body {
  overflow-x: hidden;
  font-family: var(--body-font);
  color: var(--text-color);
  background-color: #eee;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--title-font);
  color: var(--title-color);
}
h1 {
  font-size: 48px;
}
a {
  text-decoration: none;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 10px;
}
a:hover img {
  transform: translateX(10px);
}
img {
  transition: all 0.3s ease-in-out;
}
li {
  list-style: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.moreAbout-link a,
.browse-service-link a,
.browse-project-link a, .get_in_touch_link a, .view-team-link a, .browse-blog-link a, .news-card > a {
  color: #fff;
  font-weight: 400;
  border-radius: 30px;
  background-color: #301a1a;
  letter-spacing: 1px;
  padding: 1rem 2rem;
  white-space: nowrap;
}

.get_in_touch_link a{
  transform: translateX(1.5rem) translateY(2rem);
  display: inline-block;
  background-color: #301a1a;
  width: 280px;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  color: var(--white-color);
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
}

.get_in_touch_link a:hover {
  background-color: #4a2a2a; /* Lighter shade on hover */
  transform: translateX(1.5rem) translateY(2rem) scale(1.05); /* Slight zoom effect */
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2); /* Soft glow effect */
}

.get_in_touch_link a:active {
  transform: translateX(1.5rem) translateY(2rem) scale(0.95);
}
/* .moreAbout-link {
  transform: translateX(1.5rem) translateY(2rem);
  display: inline-block;
  background-color: #301a1a;
  width: 280px;
  border-radius: 25px;
} */

.moreAbout-link a{
  transform: translateX(1.5rem) translateY(2rem);
  display: inline-block;
  background-color: #301a1a;
  width: 308px;
  border-radius: 25px;
  color: var(--white-color);
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
}

.moreAbout-link a:hover {
  background-color: #4a2a2a; /* Lighter shade on hover */
  transform: translateX(1rem) translateY(2rem) scale(1.05); /* Slight zoom effect */
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2); /* Soft glow effect */
}

.moreAbout-link a:active {
  transform: translateX(1.5rem) translateY(2rem) scale(0.95);
}

.browse-project-link a{
  transform: translateX(1.5rem) translateY(2rem);
  display: inline-block;
  background-color: #301a1a;
  width: 280px;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  width: 308px;
  color: var(--white-color);
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
}

.browse-project-link a:hover{
  background-color: #4a2a2a; /* Lighter shade on hover */
  transform: translateX(1.5rem) translateY(2rem) scale(1.05); /* Slight zoom effect */
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2); /* Soft glow effect */
}



.browse-project-link a:active{
  transform: translateX(1.5rem) translateY(2rem) scale(0.95);
}

/* .projectsPageSection{
  align-items: center;
} */

.servicesPageSection,
.projectsPageSection, .teamPageSection, .testimonialsPageSection, .contactPageSection, .news_articlePageSection {
  padding: 1rem;
}

.arrow-img {
  width: 25px;
  filter: invert(1);
  transform: translateY(1px);
}

.project-headings h1, .team-headings h1, .testimonial-heading h1, .news-headings h1 {
  color: var(--white-color);
}
.project-headings p, .team-headings p, .testimonial-heading p, .news-headings p {
  width: 60%;
  font-size: 18px;
  padding: 1rem 0;
  line-height: 1.7;
  color: var(--white-color);
}

/* === Header CSS === */
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  transform: translateY(0);
  text-align: center;
  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease-in-out;
  z-index: 99;
}

.menu-bar{
  width: 40px;
  height: 35px;
  padding: 6px;
  z-index: 999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  display: none;
  cursor: pointer;
  border-radius: 5px;
}
.menu-bar.active .bar-1{
  transform: translateY(8px) rotate(45deg);
}
.menu-bar.active .bar-2{
  opacity: 0;
}
.menu-bar.active .bar-3{
  transform: translateY(-8px) rotate(-45deg);
}
.bars{
  width: 100%;
  height: 3px;
  border-radius: 4px;
  background: #fff;
  transition: all 0.4s ease-in-out;
}

.menu-bar{
  display: flex;
}
.navbar{
  justify-content: space-between !important;
  padding: 0.5rem 2rem;
}

.navLinks {
  padding: 0.5rem 0;
  justify-content: space-around;
  background-color: #5d4d4d;
  position: fixed;
  flex-direction: column;
  justify-content: center;
  top: -100vh;
  right: 0;
  width: 30%;
  height: 100vh;
  z-index: 999;
  transition: top 0.5s ease-in-out;
}
.navLinks li a{
  color: #000;
}
.navLinks.show{
  top: 0;
}

.logo {
  font-size: 44px;
}

.navbar {
  justify-content: space-around;
  background-color: #301a1a;
}
.logo img{
  width: 120px;
}
.navLinks {
  gap: 25px;
}
.navLinks li a{
  color: #fff;
}
/* .rq-visit h2 {
  font-weight: 400;
  font-size: 20px;
} */
/* .rq-visit a {
  background-color: #301a1a;
  color: var(--white-color);
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
} */

/* .rq-visit a {
  background-color: #301a1a;
  color: var(--white-color);
  padding: 0.75rem 1.5rem;
  border: 1px solid #fff;
  border-radius: 30px;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.rq-visit a:hover {
  background-color: #4a2a2a;
  transform: scale(1.05);
}

.rq-visit a:active {
  transform: scale(0.95);
} */


/* ===Home number CSS === */

.home-swipers{
  padding: 0 2rem;
  justify-content: space-evenly;
  transform: translateY(7rem);
  gap: 25px;
}

.home-swiper-container{
  width: 55%;
  height: 670px;
  position: relative;
}
.home-swiper-container .swiper-button-prev, .home-swiper-container .swiper-button-next{
  top: 82%;
  background: #301a1a;
  padding: 1.5rem;
  border-radius: 50%;
  border: 1px solid #845020;
}
.home-swiper-container .swiper-button-prev{
  left: -3%;
}
.home-swiper-container .swiper-button-prev::after, .home-swiper-container .swiper-button-next::after{
  font-size: 25px;
  color: #fff;
}
.home-swiper-container .swiper-button-next{
  right: -3%;
}
.home-left-swiper{
  position: relative;
  width: 40%;
  height: 670px;
  background-color: #d3d4d4;
  border-radius: 45px;
  overflow: hidden;
}

/* Pincode Text Background */

.home-left-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 45px;
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s ease-in-out; /* Increase transition time */
}

.home-left-swiper img.active {
  opacity: 1;
}
.home-swiper-content{
  width: 100%;
  height: 65.5%;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.home-head, .home-para {
  opacity: 0;
  width: 100%;
  transform: translateY(50px);
  transition: opacity 2s ease-out, transform 2s ease-out;
}
.home-head{
  font-size: 58px;
}
.home-para{
  font-size: 24px;
}
.home-swiper-content.active .home-head,
.home-swiper-content.active .home-para {
  opacity: 1;
  transform: translateY(0);
}
.home-below-swiper{
  width: 100%;
  height: 25.5%;
}
.home-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
}
.home-numbers-container {
  padding: 12rem 1rem 6rem;
  background-color: var(--gray-color);
  justify-content: space-between;
}

.home-num {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.home-num h2 {
  font-size: 58px;
}

/* === About us page CSS === */
.aboutPageSection {
  padding: 4rem 2rem 4rem;
}
.aboutUsContent {
  width: 50%;
  min-width: calc(512px - 1.5rem);
}
.aboutUsContent p {
  padding: 0.75rem 0;
  font-size: 20px;
  width: 95%;
  line-height: 1.7;
}
.aboutListDiv {
  padding: 1rem 0;
}
.aboutList,
.aboutCallDiv {
  width: 50%;
}
.aboutList {
  border-right: 1px solid var(--body-text-color);
}
.aboutList,
.aboutList li {
  gap: 15px;
  font-size: 18px;
  color: var(--title-color);
}
.aboutList img {
  width: 27.5px;
}

.aboutCallDiv {
  padding: 0 3rem;
  gap: 12px;
}
.aboutCallDiv > img {
  width: 55px;
  transform: rotateY(180deg);
}

.aboutUsSwiper {
  width: 40%;
  min-width: calc(488px - 1.5rem);
  height: 575px;
  /* background: var(--gray-color); */
  padding: 0 4rem;
}

/* === Service section CSS === */
.servicesPageSection {
  background-color: var(--gray-color);
  border-radius: 50px 50px 0 0;
}

.service-headings p {
  width: 60%;
  font-size: 18px;
  padding: 1rem 0;
  line-height: 1.7;
}
.browse-services {
  text-align: end;
  transform: translateX(-2rem);
}

.service-cards {
  padding-top: 2rem;
  gap: 25px;
}

.s-card {
  width: 31%;
  min-width: 375px;
  height: 100%;
}
.service-icon {
  width: 100px;
  height: 100px;
  border: 1px solid var(--theme-2-color);
  padding: 1.5rem;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
.service-icon svg {
  transition: all 0.3s ease-in-out;
}
.s-card:hover .service-icon {
  background-color: var(--theme-2-color);
}
.s-card:hover .service-icon img {
  filter: invert(1);
  transform: rotate(360deg);
}
.s-card h2 {
  font-size: 28px;
  padding: 1rem 0;
}
.s-card p {
  font-size: 16px;
  padding: 1rem 0 2.5rem;
  line-height: 1.7;
}
.service-card-img {
  width: 100%;
  overflow: hidden;
  border-radius: 30px;
}
.service-card-img img {
  width: 100%;
  object-fit: cover;
  border-radius: 30px;
}
.service-card-img:hover img {
  scale: 1.1;
}

/* === Projects page CSS === */
.projectsPageSection {
  background-color: #301a1a;
}

.browse-project-link a, .view-team-link a, .browse-blog-link a, .news-card > a {
  background-color: transparent;
  border: 1px solid var(--white-color);
}

.projectSwiper {
  width: 100%;
  margin-top: 4rem;
  position: relative;
  z-index: 50;
}

/* === Get qoute page CSS Starts === */
.getQuotePageSection{
  padding: 12rem 1rem;
  border-radius: 100px 100px 0 0;
  position: relative;
}
.getQuotePageSection::before, .testimonialsPageSection::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  display: none;
  height: 188px;
  background: transparent;
  border-top-left-radius: 100px;
  box-shadow: 0 -95px 0 #301a1a;
  
}
.getQuotePageSection::after, .testimonialsPageSection::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  display: none;
  height: 188px;
  background: transparent;
  border-top-right-radius: 100px;
  box-shadow: 0 -95px 0 #301a1a;
}

.qoute_img_container_1, .qoute_img_container_2{
  gap: 45px;
  border-radius: 25px;
}

.qoute_img_container_1 img, .qoute_img_container_2 img{
 width: 30%;
 border-radius: 25px;
 height: 290px;
 object-fit: cover;
}
.qoute_img_container_1 img:nth-of-type(2){
  transform: translateY(-115px);
  height: 315px;
}
.qoute_img_container_2 img:nth-of-type(2){
  transform: translateY(115px);
  height: 315px;
}
.get_in_touch_link{
  transform: translateY(50px);
}

/* === Team Page CSS === */
.teamPageSection{
  background-color: var(--theme-2-color);
}

.team_member_container{
  gap: 30px;
  padding-top: 1.5rem;
}
.team_member_card{
  width: 32%;
  background-color: var(--white-color);
  border-radius: 20px;
}
.team_member_card > img{
  width: 100%;
  border-radius: 20px 20px 0 0;
}
.team_member_info{
  padding: 0.75rem 1.5rem;
}

/* === Testimonials page === */
.testimonialsPageSection{
  border-radius: 100px 100px 0 0;
  position: relative;
  background-color: var(--gray-color);
}
.testimonial-heading h1, .testimonial-heading p{
  color: var(--title-color);
}
.testimonial-swiper{
  margin-top: 3rem;
  width: 100%;
}
.test-swiper-pagination{
  position: relative;
  width: 10%;
}
.test-slide{
  position: relative;
}
.test-slide-img{
  width: 85%;
  height: 490px;
  border-radius: 50px;
}
.test-slide-img img{
  width: 100%;
  height: 100%;
  border-radius: 50px;
  object-fit: cover;
  object-position: center;
}
.test-slide-content{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
  background-color: var(--white-color);
  width: 65%;
  border-radius: 35px;
}
.test-stars img{
  width: 20px;
}
.test-content-para{
  padding: 1.5rem 1.5rem 1rem;
}
.test-content-para p{
  padding: 0.5rem 0 0;
  font-size: 18px;
  line-height: 1.7;
}
.test-content-profile{
  padding: 1rem 1.5rem 1.5rem;
  gap: 25px;
}
.test-profile-img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--body-text-color);
}
.test-profile-img img{
  width: 100%;
  border-radius: 50%;
  height: 100%;
  object-fit: cover;
}
.test-hr{
  gap: 40px;
}
.test-hr hr{
  width: 65%;
}
.test-hr img{
  width: 45px;
  filter: grayscale(100%);
  opacity: 0.6;
}
.test-profile-info{
  line-height: 1.7;
}
/* === Contact Page CSS === */
.contactPageSection{
  background-color: #301a1a;
}
.contact_form_container{
  padding: 4rem 0;
}
.contact_form_img{
  width: 45%;
  min-width: 530px;
  border-radius: 30px;
}
.contact_form_img img{
  border-radius: 30px;
  width: 100%;
  object-fit: cover;
}
.contact_form{
  width: 50%;
  gap: 20px;
  min-width: 610px;
}
.contact_form h1{
  color: var(--white-color);
  padding: 0 0 1rem;
  text-align: center;
}

.contact_form img{
  width: 25px;
}

.input_container input, .message_container textarea{
  width: 100%;
  padding: 0.75rem 2rem;
  font-size: 20px;
  line-height: 1.5;
  background: transparent;
  inset: none;
  border-radius: 30px;
  border: 1px solid #fff;
  outline: none;
  color: #fff;
}
.input_container input::placeholder, .message_container textarea::placeholder{
  color: #fff;
}
.input_container, .message_container{
  position: relative;
}
.input_container img, .message_container img{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  filter: invert(1);
}
.message_container img{
  transform: translateY(0);
  top: 5%;
}
.form_submit{
  width: 100%;
  cursor: pointer;
  font-size: 18px;
  gap: 15px;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  border-radius: 30px;
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
}


.form_submit{
  /* transform: translateX(1rem) translateY(2rem); */
  background-color: #301a1a;
  color: var(--white-color);
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.form_submit:hover{
  background-color: #4a2a2a; /* Lighter shade on hover */
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2); /* Soft glow effect */
}

.form_submit:active{
  transform: translateX(1.5rem) translateY(2rem) scale(0.95);
}



/* === Get in touch Page CSS === */
.get_in_touch_content{
  padding: 6rem 0 4rem 2rem;
  width: 55%;
  min-width: 350px;
}
.get_in_touch-heading p{
  width: 80%;
}
.git-info-content{
  width: 80%;
  gap: 20px;
  padding: 1.75rem;
  border: 1px solid var(--text-color);
  border-radius: 30px;
  margin: 1rem 0 2rem;
}
.git-info-content img{
  width: 35px;
  margin-top: 0.5rem;
}
.git-info-content-headings{
  line-height: 1.7;
}
.get_in_touch_map{
  min-width: 400px;
  width: 45%;
}

/* === News & Article Page CSS === */
.news_articlePageSection{
  background-color: var(--theme-2-color);
}

.news-cards-container{
  padding-top: 2rem;
  gap: 30px;
}
.news-card{
  width: 45%;
}
.news-card-img{
  border-radius: 30px;
  height: 284px;
}
.news-card-img img{
  border-radius: 30px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.news-card :is(h4, h2, a) {
  color: var(--white-color);
  white-space: wrap;
}
.news-card > a {
  width: 200px;
}
.news-card h4{
  margin: 1rem 0 0;
}
.news-card h2{
  margin: 1.75rem 0;
}

/* ===Footer CSS === */
.footer{
  padding: 3rem 0 0;
  color: #fff;
  background: linear-gradient(135deg, #462f2f 0%, #301a1a 50%, #301a2c 100%);  color: var(--text-color);
}

.footer-content-container{
  gap: 30px;
  padding-bottom: 2rem;
}
.footer-logo img{
  width: 100px;
}
.footer-content-1 p{
  line-height: 1.7;
  padding: 1.25rem 0;
  color: #fff;
}

.footer-content-2{
  color: #fff;
}

.footer-content-3{
  color: #fff;
}

.footer-content-3 a{
  color: #fff;
}
.footer-content-1 {
  width: 30%;
}

.footer-social-links{
  gap: 10px;
}
.footer-social{
  display: flex;
  align-items: center;
  background-color: #dec0c0;
  padding: 0.5rem;
  border-radius: 50%;
}
.footer-social img{
  width: 100%;
  width: 20px;
}

.footer-git{
  margin: 2rem 0 1rem;
  gap: 15px;
}
.footer-git-icon{
  display: flex;
  align-items: center;
  border-radius: 50%;
  padding: 0.5rem;
  border: 1px solid #fff;
  background: #dec0c0;
}
.footer-git-icon img{
  width: 25px;
}
.footer-git-para p{
  font-size: 18px;
  line-height: 1.4;
}

.footer-useful-link, .footer-explore-link{
  margin: 2rem 0 0 1rem ;
  gap: 25px;
}
.footer-useful-link a, .footer-explore-link p{
  font-size: 18px;
  display: inline-block;
}

.copyright{
  padding: 1.5rem 3rem;
}
.footer-policy-links{
  gap: 25px;
}


.copyright {
  color: #fff;
}

.copyright a{
  color: #fff;
}