/* Global Reset to remove default margins, padding, and box model styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Define primary, secondary colors, and other global styles in the :root */
:root {
  /* Primary color */
  --primary-color: #042c71; 
  --primary-color-light: #0749ba;
  --primary-color-dark: #031d4a;
  --primary-color-dark-alpha: rgba(3, 29, 74, 0.5);
  /* secondary color */
  --secondary-color: #0f993e;
  --secondary-color-dark: #e39d2d;
  --text-color: #4b4b4b;
  --text-shadow: 5px 5px 10px black;
  /* General text color (dark gray) */
  --body-bg-color: #f8f9fa;
  --gray-color: #e9e9e9;
  --gray-color-hover: #d8d6d6;
  /* outline color  */
  --border-color: #d6d6d6;
  /* Background color for body */
  --font-family: "Arial", sans-serif;
  /* Base font family */
  --font-size-base: 18px;
  /* Base font size */
  --font-size-lg: 1.25rem;
  /* Large font size */
  --font-size-sm: 0.875rem;
  /* Small font size */
}

/* Apply body-level styles */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-color);
  line-height: 1.6;
  /* Line height for readability */
  margin: 0;
}
h1,
h2,
h3,
h4,
h5 {
  color: #000000;
}

/* Button Styles */
.btna {
  display: inline-block;
  background-color: #f5f5f5;
  /* Primary color for buttons */
  color: #000000;
  border: none;
  padding: 8px 18px !important;
  font-size: var(--font-size-base);
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
  list-style: none;
  transition: all 0.2s;
  
}
.justify-text {
  text-align: justify;
}

.btn-pri {
  background-color: var(--primary-color);
  color: #ffffff;
}

.btn-pri-hover:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

.btn-sec {
  background-color: var(--secondary-color);
  color: #000000;
}

.btn-sec-border {
  border: 1px solid var(--secondary-color);
  color: #000000;
}

.btn-sec-hover:hover {
  background-color: var(--secondary-color-dark);
  color: #000000;
}

.btn-gray {
  background-color: var(--gray-color);
}

.btn-gray-hover:hover {
  background-color: var(--gray-color-hover);
}

.btna-outline {
  border: 1px solid var(--border-color);
}

p,
.text-color {
  color: var(--text-color);
  transition: all 0.2s;
}

.text-color-hover:hover {
  color: #fff;
}

.pri-color {
  color: var(--primary-color);
}
.sec-color {
  color: var(--secondary-color);
}

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

.pri-background-dark {
  background-color: var(--primary-color-dark);
}
.sec-background {
  background-color: var(--secondary-color);
}

.sec-color-hover:hover {
  color: var(--secondary-color);
}

.border1 {
  border: 1px solid var(--border-color);
}

.gray-color {
  color: var(--gray-color);
}

.gray-color-hover:hover {
  color: var(--gray-color-hover);
}
.gray-background {
  background-color: var(--gray-color);
}

.gray-background-hover:hover {
  background-color: var(--gray-color-hover);
}

.gray-background-light {
  background-color: var(--body-bg-color);
}

.gray-background-light-hover:hover {
  background-color: var(--gray-color-light);
}

.inputa {
  padding: 10px 15px;
  background-color: var(--gray-color-light);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.input-focus:focus {
  border-color: var(--primary-color);
  box-shadow: none;
}

/*------------top bar -----------*/

/* Increase the height of the top bar */
.top-bar {
  width: 100%;
  height: 2.2rem;
  background-color: var(--primary-color);
  padding: 0px 0px !important;
  color: gray;
}

/*------------top section-----------*/

.top-section {
  width: 100%;
  height: 6rem;
  margin-bottom: 4rem;
  font-size:30px;
}

.nav-list {
  gap: 6px !important;
}
/* Styling for the language list */
.language-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 15px;
}

.language-list li {
  display: inline-block;
}

.language-list li a.selected {
  color: var(--secondary-color);
}

/*------------navbar-----------*/
.navbar2 {
  width: 100%;
  height: 60px !important;
  position: relative;
  z-index: 1000;
}

/* Dropdown menu styling */
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
}

/* Show dropdown on hover */
.nav-item:hover > .dropdown-menu,
.dropdown:hover > .dropdown-menu {
  display: block;
}

/* Nested dropdown positioning */
.dropdown-menu .dropdown-menu {
  position: absolute;
  left: 100%;
  top: 0;
}

/* Submenu links styling */
.dropdown-menu .dropdown-item {
  color: #333;
  padding: 10px 20px;
  border-radius: 8px;
}

/* Hover effect on submenu items */
.dropdown-item:hover {
  background-color: #d6eaff;
  border-radius: 0px;
}

.dropdown i {
  font-size: 10px;
  margin-left: 5px !important;
}

/*---------image slider----------- */

/*#customSlider .carousel-item {*/
/*  height: 300px;*/
/*  width: 300px;*/
/*}*/

/*#customSlider .slide-content {*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  display: flex;*/
/*  align-items: flex-start;*/
/*  justify-content: center;*/
/*  padding-top: 50px;*/
  /* Adjust to position the text */
/*}*/

/*.sliderimg {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 80%;*/
/*  object-fit: cover !important;*/
/*  object-position: center;*/
/*}*/

/*.carousel-item {*/
/*  position: relative;*/
/*  height: 15rem;*/
/*  overflow: hidden;*/
/*  z-index: 1;*/
/*}*/

/*.carousel-item::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 80%;*/

/*  background-color: transparent;*/
  /* Green overlay with transparency */
/*  z-index: 2;*/
/*}*/



/*.slide-content,*/
/*.carousel-control-next,*/
/*.carousel-control-prev {*/
/*  position: absolute;*/
/*  z-index: 5;*/
  
/*}*/
/*.carousel-item .slide-content p a{*/
/*    top:-10rem;*/
/*}*/



/*--------------------------New slider style-----------------*/
/* Slider image */
.slider-img {
  height: 75vh;              /* Full window height */
  object-fit: cover;         /* Crop nicely */
    
    
}

/* Space for cards below slider */
.carousel {
  margin-bottom: -30px;
 
}

/* Center text vertically */
.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  text-align: center;
}

/* Caption text */
.carousel-caption h1 {
  font-size: 3rem;
  font-weight: bold;
}

.carousel-caption p {
  font-size: 1.25rem;
  margin-top: 10px;
}

/* Buttons */
.carousel-caption a {
  padding: 10px 20px;
  margin: 5px;
  font-size: 1rem;
}

.carousel-control-prev , .carousel-control-next{
    top: 75%;                  /* center vertically */
  transform: translateY(-60%);
  bottom: auto;               /* don’t stretch full height */
  height:30rem;
  z-index: 10;
}

/* 🔹 Responsiveness */
@media (max-width: 992px) { /* Tablets */
  .carousel-caption h1 {
    font-size: 2.2rem;
  }
  .carousel-caption p {
    font-size: 1rem;
  }
  .carousel {
  margin-bottom: 30px;
 
}
}

@media (max-width: 768px) { /* Mobiles */
  .slider-img {
    height: 70vh; /* Smaller height for phones */
  }
  .carousel {

  margin-bottom: 30px;
}
  .carousel-caption h1 {
    font-size: 1.8rem;
  }
  .carousel-caption p {
    font-size: 0.95rem;
  }
  .carousel-caption a {
    font-size: 0.9rem;
    padding: 8px 16px;
  }
  .carousel-caption {
    top: 55%; /* Shift a little lower */
  }
  
section .row .counter{
    margin:20px auto 40px;
}

nav .small-screen{
    display:block;
}

}




/* mission vission and value  */

.section-mb {
  margin-bottom: 6rem;
}

.section-mt {
  margin-bottom: 6rem;
}

.top-infographic {
  position: relative;
  margin-top: -2rem;
  z-index: 5;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(4, 44, 113, 0.8);*/
  /*background:rgba(55, 150, 232, 0.7);*/
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffff;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
}
.overlay .icon-box img {
  width: 80px;
  text-align: center;
  justify-content: center;
  margin-bottom: 1rem;
  
}

/* our project */

.overlay .icon-box1 img {
  width: 60px;
  text-align: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.overlay .icon-box2 img {
  width: 73px;
  text-align: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.overlay .icon-box3 img {
  width: 85px;
  text-align: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.project-icon img {
  width: 60px;
}

/* student story */

.project-card {
  transition: transform 0.3s ease-in-out;
}

.project-card:hover {
  transform: scale(1.05);
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.student-story-slider {
  position: relative;
  overflow: hidden;
}

.student-story {
  display: none;
}

.student-story.active {
  display: block;
}

.social-icons a {
  color: white;
  font-size: 1.5rem;
  margin-right: 15px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-info i {
  font-size: 1.5rem;
  color: var(--secondary-color);
}

/* our newsletter 
.newsletter{
position: relative;
top: 0;
left: 0;
height: 20rem;
overflow: hidden;


}

.newsletter-img img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
object-fit: cover;
object-position: start;
z-index: 1;
}

*/

/* our client */
img {
  max-width: 100%;
}

.client .swiper {
  padding: 40px 50px;
}

.client__box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
}

.client__image {
  max-width: 100%;
  height: auto;
  max-height: 140px;
}

@media only screen and (max-width: 767px) {
  .client .swiper {
    padding: 0 0 40px;
  }

  .client__box {
    padding: 0;
    text-align: center;
  }

  .client .swiper-button-prev,
  .client .swiper-button-next {
    display: none;
  }
  
  #customSlider .carousel-inner{
      height:800px;
  }
  
  #customSlider .carousel-item {
      width:70%;
  }
  
}