/* @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  /* --font-primary: "Montserrat", sans-serif; */
  --font-primary: "Barlow", sans-serif;
  --bg-color: #011d41;
  --secondary-bg-color: #f9f9f9;
  /* --primary-color: ; */
  --primary-text-color: #032a3a;
  --secondary-text-color: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none !important;
}

body {
  overflow-x: hidden;
  font-family: var(--font-primary) !important;
}

ul {
  list-style: none;
}

a {
  text-decoration: none !important;
  font-style: normal;
  font-family: var(--font-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700 !important;
  font-style: normal;
}

.main_btn {
  display: inline-block;
  padding: 10px 20px !important;
  font-size: 16px;
  font-weight: 500 !important;
  text-decoration: none;
  color: #ffffff !important;
  background: linear-gradient(45deg, #6a11cb, #2575fc);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 5px !important;
  cursor: pointer;
  transition: 0.3s ease !important;
}
.main_btn:hover {
  background: linear-gradient(45deg, #2575fc, #6a11cb);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.title {
  /*h1 Hero Section Main Title */
  font-size: 54px;
  /* font-weight: 700; */
  line-height: 1.2;
}
.section_title {
  /*h2 (About, Services, Projects, Contact). */
  font-size: 32px;
  line-height: 1.2;
  color: var(--primary-text-color);
}
.sub_titles {
  /*h3 (card titles, mission/vision headers, service names) */
  font-size: 22px;
  line-height: 1.5;
  color: var(--primary-text-color);
}
.minor_headings {
  /*h4 inside sections (e.g., “Ongoing Projects” vs “Finished Projects”) */
  font-size: 18px;
  color: var(--primary-text-color);
}
h5 {
  /* maybe for feature labels, small titles in cards. */
  font-size: 18px !important;
  color: var(--primary-text-color) !important;
}

p {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: var(--primary-text-color);
}
/* header */

.header {
  position: relative;
  background: url("../img/hero-bg.jpeg") no-repeat center center;
  background-size: cover;
}

.header .hero {
  padding: 200px 0;
  text-align: center;
  position: relative;
  z-index: 100;
}

.header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

/* !header */

/* navbar */
nav {
  background-color: var(--secondary-bg-color);
}
nav .nav-link {
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  color: var(--bg-color) !important;
}

/* .navbar .navbar-brand {
  background-color: #ffffff;
  padding: 5px;
  border-radius: 5px;
} */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.dropdown-menu.show {
  -webkit-animation: fadeIn 0.3s alternate;
  /* Safari 4.0 - 8.0 */
  animation: fadeIn 0.3s alternate;
}

.nav-item.dropdown.dropdown-mega .dropdown-menu {
  width: 90%;
  top: auto;
  left: 5%;
}

.navbar-toggler {
  border: none;
  padding: 0;
  outline: none !important;
  padding: 0px !important;
}
.navbar-toggler:focus {
  box-shadow: none;
  outline: none !important;
}
.navbar-toggler .hamburger-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  z-index: 11;
  float: right;
}
.navbar-toggler .hamburger-toggle .hamburger {
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  pointer-events: none;
}
.navbar-toggler .hamburger-toggle .hamburger span {
  width: 100%;
  height: 4px;
  position: absolute;
  background: var(--bg-color);
  border-radius: 2px;
  z-index: 1;
  transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
  left: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger span:first-child {
  top: 10%;
  transform-origin: 50% 50%;
  transform: translate(0% -50%) !important;
}
.navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
.navbar-toggler .hamburger-toggle .hamburger span:last-child {
  left: 0px;
  top: auto;
  bottom: 10%;
  transform-origin: 50% 50%;
}
.navbar-toggler .hamburger-toggle .hamburger.active span {
  position: absolute;
  margin: 0;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
  top: 45%;
  transform: rotate(45deg);
}
.navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
  left: 50%;
  width: 0px;
}
.navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
  top: 45%;
  transform: rotate(-45deg);
}
.dropdown-niv2 .dropdown-menu-niv2 {
  top: 50px;
}
.dropdown-niv2 .dropdown-menu-niv2 .dropdown-item:hover {
  font-weight: 500;
  transition: 0.3s ease;
  background-color: #011d41;
  color: var(--secondary-text-color);
}

@media screen and (min-width: 990px) {
  .dropdown-niv2 .dropdown-menu-niv2 {
    opacity: 0;
    display: block;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s ease;
  }
  .dropdown-niv2:hover .dropdown-menu-niv2 {
    transform: translateY(0);
    margin-top: 0;
    visibility: visible;
    opacity: 1;
  }
}

/* about landing page */
.about_home {
  margin: 100px 0;
}
/* !about landing page */

.services {
  background: var(--secondary-bg-color);
  padding: 100px 0;
}
.services .service_card img {
  height: 330px;
  transition: 0.3s ease;
  cursor: pointer;
}

.services .service_card:hover img {
  transform: scale(1.05);
}

/* projects */
.projects {
  margin: 100px 0;
}

.projects .project_card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.projects .project_card img {
  height: 350px;
  transition: 0.3s;
}
.projects .project_card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.projects .project_card img:hover {
  transform: scale(1.1);
}

.projects_page .project_card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 480px;
}

.projects_page .project_card img {
  height: 350px !important;
  transition: 0.3s;
}
.projects_page .project_card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* .projects_page .project_card:hover img {
  transform: scale(1.1);
} */
.projects_page .project_card h5 {
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* !projects */

/* clients */
.clients {
  background: var(--secondary-bg-color);
  padding: 100px 0;
}
.clients .client_logo img {
  padding: 10px;
  border: 1px solid #011d4150;
}

.clients-section h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.clients-section p {
  color: #555;
  margin-bottom: 40px;
}

/* swiper js */

.swiper-container {
  --swiper-navigation-size: 28px; /* Sets the navigation button size to 40px for this specific Swiper */
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  text-align: center;
}

.swiper-slide img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  margin-bottom: 20px;
}

.client-controls-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding: 0 1rem;
  margin-top: 30px;
}

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

.client-pagination {
  position: static !important;
  width: 250px !important;
  background: #e0e0e0;
  height: 6px;
  border-radius: 5px;
  margin-right: 20px;
}

.swiper-pagination-progressbar-fill {
  background: linear-gradient(to right, #6a11cb, #2575fc) !important;
  border-radius: 5px;
}

.swiper-button-prev,
.swiper-button-next {
  position: static !important;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s ease;
  margin: 0 5px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #e0e0e0;
}
/* !swiper js */

/* !clients */

/* license */
.licenses {
  margin: 100px 0;
}

.licenses .swiper-slide img {
  max-width: 100%;
  max-height: 350px;
  object-fit: contain;
  margin-bottom: 20px;
}

.license-controls-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding: 0 1rem;
  margin-top: 30px;
}
.license-pagination {
  position: static !important;
  width: 250px !important;
  background: #e0e0e0;
  height: 6px;
  border-radius: 5px;
  margin-right: 20px;
}
/* !license */

/* contact us */
.contact {
  background: var(--secondary-bg-color);
  padding: 100px 0;
}
/* !contact us */

footer {
  background: var(--bg-color);
  color: var(--secondary-text-color) !important;
}

/* about page */
.about_header {
  background: url("../img/about-page.png") no-repeat center center;
  background-size: cover;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.our_story {
  margin: 100px 0;
}
@media (max-width: 1200px) {
  .our_story .portfolio_img {
    text-align: center;
  }
  .our_story .portfolio_img img {
    width: 70% !important;
    margin: 20px 0;
  }
  .our_story .bottom_text {
    width: 100% !important;
  }
}

.mission_vission {
  background: var(--secondary-bg-color);
  padding: 100px 0;
}
.about_page .clients {
  background: #fff;
  padding-bottom: 0;
}
/* !about page */

/* services page */
.services_header {
  background: url("../img/services-page.png") no-repeat center center;
  background-size: cover;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* !services page */

/* gov_project non gov */
.gov_project {
  margin: 100px 0;
}
.services_page .service_card img {
  height: 350px;
}
.services_page .interior_solution {
  background: var(--secondary-bg-color);
  padding: 100px 0;
}
.services_page .real_estate {
  margin: 100px 0;
}
.services_page .supply {
  margin: 100px 0;
}
.services_page ul {
  list-style: disc;
}
.services_page ul li {
  margin-bottom: 10px;
}

/* !gov_project non gov*/

/* project page  */
.projects_header {
  background: url("../img/project-page.png") no-repeat center center;
  background-size: cover;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.on_going_project {
  margin: 100px 0;
}
.finished_project {
  padding: 100px 0;
  background: var(--secondary-bg-color);
}
/* !project page  */

/* contact us page */
.contact_header {
  background: url("../img/contact-page.png") no-repeat center center;
  background-size: cover;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.contact_page {
  margin: 100px 0;
}

/*
 * Desktop-only: Show dropdown menu on hover
 * This CSS targets screen sizes larger than Bootstrap's 'lg' breakpoint (992px)
 */
@media all and (min-width: 992px) {
  /* Target the dropdown menu when the parent list item is hovered */
  .navbar .dropdown-niv2:hover .dropdown-menu {
    display: block; /* Force the menu to show */
    margin-top: 0; /* Ensures the menu aligns properly */
  }
}
/* !contact us page */

#missionVission,
#clients,
#licenses,
#govProject,
#supply,
#interiorSolution,
#realEstate,
#onGoingProject,
#finishedProject {
  scroll-margin-top: 120px;
}