@charset "utf-8";
/* CSS Document */

body
{
	position:relative;
margin: 0;
overflow-x: hidden !important;
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
  
}
/*for clean anchor scroll behavior - because scrollspy is added*/
section {
  scroll-margin-top: 110px; /* navbar height */
  
}

.nav-link
{
	padding:8px 16px !important;
}
.navbar-brand
{
	padding: 0 !important;
}

.navbar-nav .nav-link {
  position: relative;
  padding-bottom: 5px;
	 color: inherit; /* default color */
  transition: color 0.3s ease;
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
	border-radius: 20px;
  background-color: #F99745; /* orange color */
  transition: width 0.3s ease;
	color: #174272 !important;
}
/* Hover state */
.navbar-nav .nav-link:hover {
  color: #174272 !important;
}

.navbar-nav .nav-link:hover::after {
  width: 97%;
}

/* Active state (via Scrollspy) */
.navbar-nav .nav-link.active {
  color: #174272 !important; /* active link text */
}

.navbar-nav .nav-link.active::after {
  width: 97%;
}



.whatsapp {
	right:0;
  position: fixed;
  top: 90%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color:#25D366;
   width:auto;
   height:auto;
    text-align: center;
  z-index:90;
	border-radius: 0.5rem;
}
/*----whatsapp button-----*/
.whatsapp a {
  display: block;
  text-align: center;
   transition: all 0.3s ease;
  text-decoration:none;
 }
.whatsapp a:hover {
 -ms-transform: scale(1.1); 
  -webkit-transform: scale(1.1); 
  transform: scale(1.1); 
}
.hero_img
{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	
}
/* Flip animation for hero banner headings */
/* optional: adds 3D depth to the flip */
.flip-perspective
{ perspective: 800px; }
@keyframes flipTopBottom {
  0% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
 
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}

.flip-heading {
  display: inline-block;
  transform-origin: top;
  opacity: 0; /* hidden before animation */
  animation: flipTopBottom 0.6s ease forwards;
  animation-fill-mode: both; /* keeps final state after anim */
}

/* sequential delays */
.delay-0 { animation-delay: 0s;   }
.delay-1 { animation-delay: 0.3s;   }
.delay-2 { animation-delay: 0.6s;   }

.section-title {
   font-weight: 500;
  font-size: 1.7rem;
  color: #174272;
  position: relative;
  display: inline-block;
  margin: 1.5rem 0;
  padding-bottom: 6px; /* space for underline */
}

.section-title::after {
  content: '';
  position: absolute;
  padding-left:20px;
  left: 5%;
  transform: translateX(-50%);
  bottom: 0;
  width: 110px;   /* short underline length */
  height: 3px;   /* underline thickness */
  background-color: #f99745; /* accent orange */
  border-radius: 3px;
}
@media (max-width: 768px) {
  .section-title::after {
    left: 9%;
    transform: translateX(-35%);
  }/*for underline to appear properly on mobile. without this it was appearing in extreme left*/
}

/*------ SERVICES-------*/
/* --- Service Card: Flip + Zoom + Overlay --- */
.service-card {
  position: relative;
  width: 100%;
  height: 300px;
  perspective: 1000px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
}
.service-card:focus { box-shadow: 0 0 0 0.15rem rgba(23,66,114,.25); } /* focus style for accessibility */

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;      /* keeps 3D children */
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Background layer that we can zoom */
.card-face .bg {
  position: absolute;
  inset: 0;
  background: var(--bg) center / cover no-repeat;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* FRONT (title centered) */
.card-front .front-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.15);       /* visible by default */
  transition: background .3s ease;
}

.card-front .title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
  text-align: center;
  padding: 0 12px;
  font-weight: 600;
  letter-spacing: .3px;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
}

/* BACK (list with dark overlay) */
.card-back {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.card-back .back-overlay {
  position: absolute;
  inset: 0;
  /*background: rgba(23,66,114,.72);*/ 
	background: rgba(29,29,30,.72);/* brand-tinted darkness */
}

.card-back .content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 24px;
  width: 100%;
}

.card-back h5 { color: #f99745; font-weight: 700; }
.card-back ul li + li { margin-top: .35rem; }

/* HOVER: flip, zoom, darken */
.service-card:hover .card-inner,
.service-card:focus-within .card-inner {
  transform: rotateY(180deg);
}

.service-card:hover .card-face .bg,
.service-card:focus-within .card-face .bg {
  transform: scale(1.08);            /* subtle zoom on hover */
}

.service-card:hover .card-front .front-overlay,
.service-card:focus-within .card-front .front-overlay {
  background: rgba(0,0,0,.35);       /* darker while flipping */
}
/*-----work carousel-----*/

 /* ========= Cards & layout ========== */


/* image inside ratio wrapper */
/* Make sure the card wrapper is positioned so absolute children are relative to it */
/* ======= Category cards (visuals) ======= */
.category-card {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
  position: relative;
}

/* make columns stretch, so cards equal height */
.carousel-inner .row > .col-12,
.carousel-inner .row > .col-md-6,
.carousel-inner .row > .col-lg-4 {
  display: flex;
}
.carousel-inner .row > .col-12 > .category-card,
.carousel-inner .row > .col-md-6 > .category-card,
.carousel-inner .row > .col-lg-4 > .category-card {
  flex: 1 1 auto;
}

/* ratio image handling */
.ratio { position: relative; }
.ratio .ratio-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* bottom caption (translucent strip) */
.card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;      /* pinned only at bottom */
  padding: 0.9rem 0.85rem;
  background: rgba(0,0,0,0.62);
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  /* control growth */
  min-height: 56px;
  max-height: 40%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* caption typography */
.card-caption h5 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.card-caption p { margin: 0; margin-top: 4px; font-size: .95rem; color: rgba(255,255,255,0.92); }

/* hover lift & shadow */
.category-card:hover,
.category-card:focus,
.category-card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}
.category-card:active { transform: translateY(-3px); }

/* Card style */
.category-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.3s ease;
}
.category-card:hover {
  transform: translateY(-5px);
	box-shadow: 0 4px -20px rgba(0,0,0,0.5);
}
.category-card img {
  width: 100%;
  height: 300px; /* square-ish */
  object-fit: cover;
}

/* Caption at bottom */
.card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
}
.card-caption h5 {
  margin: 0;
  font-size: 1.1rem;
}
.card-caption p {
  margin: 0;
  font-size: 0.9rem;
}

/* Custom arrow buttons */
.custom-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  top: 50%;
  transform: translateY(-50%);
}
.custom-arrow .carousel-control-prev-icon,
.custom-arrow .carousel-control-next-icon {
 background-image: none;/* remove default black arrow in bootstrap class */
	width: 20px;
	height: 20px;
	border: solid white;/* make arrow white */
	border-radius: 3px;
	border-width: 0 3px 3px 0 ;
	display: inline-block;
	padding: 4px;
}
.carousel-control-next{right: -8px;}
.carousel-control-prev{left: -8px;}
/* Style previous arrow */
.carousel-control-prev-icon {
  transform: rotate(135deg); /*without this arrows look tilted*/
  margin-left: 4px;/*for margin of arrow from the edge of background circle*/
}

/* Style next arrow */
.carousel-control-next-icon {
  transform: rotate(-45deg);
  margin-right: 4px;
}

.modal .carousel-item {
 /* display: flex;*/
  justify-content: center;
  align-items: center;
  background-color: #000000;
  
	border-radius: 7px;
}
.modal .carousel-item img {
  width: 100%;
  height: 80vh;           /* keeps all images same height across devices */
  object-fit: contain;    /* prevents cropping, fits image inside */
  
}
@media (max-width: 768px) {
  .modal .carousel-item img {
    height: 60vh;
  }
}
/*for testimonials section*/

/* Testimonial Section */
/* Section basics */
#testimonials {
  position: relative;
  overflow: hidden;
	  z-index: 5;
}
/* keep container spacing */
/* ---------- Testimonials Section ---------- */
/* Testimonials - card look */
#testimonials { }
#testimonials .carousel-inner { padding: 1rem 0; }

.testimonial-card {
  display: flex;
  flex-direction: column;
  background: ivory;/* card bg */
  color: #fff;
  border-radius: 12px;
  overflow: hidden;
  height: 320px !important;                 /* fixed height so cards equal */
  box-shadow: 0 6px 12px rgba(0,0,0,0.18);
  transition: transform .28s ease, box-shadow .28s ease;
}
.testimonial-card p
{
	color: #1E1E1E;
	font-size: 17px;
}
/* Hover lift */
.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

/* header is ~25% of card height */
.testimonial-header {
  background: rgba(25 68 115);
	color: ivory;
  padding: 14px 16px;
  flex: 0 0 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* body scrolls if long */
.testimonial-body {
  padding: 14px 16px;
  flex: 1 1 auto;
  overflow-y: auto;
  color: #e9e9e9;
  font-size: 0.98rem;
  line-height: 1.5;
}

/* scrollbar styling (Webkit) */
.testimonial-body::-webkit-scrollbar { width: 6px; }
.testimonial-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.35); border-radius: 6px; }

/* ensure headings inside header are readable */
.testimonial-header h5 { margin: 0; color: #fff; font-weight: 600; }

/* Carousel item column wrapper: ensures proper spacing */
.testimonial-slide-col {
  padding: 8px;
  box-sizing: border-box;
}

/* Arrows – reuse same look as Our Works */
.custom-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-arrow .carousel-control-prev-icon,
.custom-arrow .carousel-control-next-icon {
  background-image: none !important;
  width: 18px;
  height: 18px;
  display: inline-block;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  padding: 3px;
  box-sizing: content-box;
}
.custom-arrow.carousel-control-prev .carousel-control-prev-icon { transform: rotate(135deg); }
.custom-arrow.carousel-control-next .carousel-control-next-icon { transform: rotate(-45deg); }

/* Position arrows outside the content slightly */
#testimonialCarousel .carousel-control-prev { left: -8px; }
#testimonialCarousel .carousel-control-next { right: -8px; }

/* Responsive behavior: we will build slides via JS but ensure column width */
@media (min-width: 992px) {
  /* 3 visible -> each column takes 33.333% */
  .testimonial-slide-col { width: 33.3333%; display: inline-block; vertical-align: top; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  /* 2 visible -> each column takes 50% */
  .testimonial-slide-col { width: 50%; display: inline-block; vertical-align: top; }
}
@media (max-width: 767.98px) {
  /* 1 visible -> full width */
  .testimonial-slide-col { width: 100%; display: block; }
}





/*testimonial end*/



#contact, #next-section {
  position: relative;
  z-index: 1;
  margin-top: 60px; /* space between sections */
}

/*contact start*/
.contact-section {
  background: #111;
  color: #fff;
}

.contact-info p {
  font-size: 1rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.contact-icon {
  font-size: 1.5rem;
  color: #ee7f22;
  margin-right: 10px;
}

.contact-link {
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-link:hover {
  color: white;
  text-decoration: none;
}

.contact-form .form-control {
  background-color: black;
	opacity: 0.8;
  border: 1px solid #555;
  color: #fff;
}

.contact-form .form-control:focus {
  background-color: black;
  border-color: #ee7f22;
  box-shadow: none;
  color: #fff;
}
/* Change placeholder text color */
.contact-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);  /* white with 60% opacity */
}

.btn-info {
  background-color: #ee7f22;
	font-weight:500 !important;
	color:#272727 !important;
  border: none;
  transition: all 0.3s ease;
}

.btn-info:hover {
  background-color: ivory;
	font-weight:500 !important;
	color:black !important;
}
.text-info
{color: #ee7f22 !important;
font-family: "Rubik", sans-serif;
	font-size:1.7rem;
}








/*contact end*/



/*footer start*/
.footer {
	
  color: #fff;
  position: relative;
}

.footer .social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-icon {
  color: #fff;
  font-size: 1.4rem;
  transition: all 0.3s ease;
}

.footer-icon:hover {
  color:#ee7f22; 
  transform: translateY(-4px);
}

.footer p {
  margin-top: 10px;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}




/*footer end*/