*, *::before, *::after { box-sizing: border-box; }

/* 1. Make the container fill the entire screen height */
.hero-background {
    background-image: url('../Pages/images/jj.png');
    background-repeat: no-repeat;
    background-size: cover;
background-position: right center;
background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh; /* This forces the background to be at least the full screen height */
    width: 100%;
    margin: 0;
}
/* 4. Remove default browser margins so the image touches the edges */
body {
    margin: 0;
    padding: 0;
}

.Top-page{
   display: flex; /* Puts items in a row */
    align-items: center; /* Centers buttons vertically relative to the logo */
    justify-content: flex-start; /* Keeps them to the left side */
    padding: 12px 60px; /* Spacing from the edges of the page */
    gap: 25px; /* Space between logo and buttons */
    margin-top: -20px;
}

.top_buttons{
    background-color: transparent;
    color: white;
    font-size: 18px;
  
    cursor: pointer;
    transition: 0.3s;
    border: none;
    font-size: 23px;
}
.top_buttons:hover{
color:  rgb(242, 186, 0);
}


/*  used in About Us Page Styling  */
/* Container to split left and right */
.about-section {
  display: flex;
  align-items: center; /* This centers the image vertically with the text */
  justify-content: space-between;
  padding: 50px 120px;
  background-color: rgba(9, 24, 55); /* Matching your dark theme */
  color: white;
  gap: 50px;
  margin-bottom: 100px;
  margin-right: 30px;
}

/* Left side styling text content*/
.Left-side-styling {
  flex: 1.5; /* Takes up 50% space */
  margin-top: 0px;
}

/* Bolder, bigger question heading */
.section-title {
  font-size: 48px; /* Significantly bigger than paragraph */
  font-weight: 800; /* Extra bold */
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #ffffff;
  /* REDUCE THIS: If the gap is between the title and the paragraphs */
  margin-top: 0px; 
  margin-bottom: 10px;

}

/* Paragraph styling for readability */
.Left-side-styling p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 15px;
  color: #ffffff;
 font-family: 'Montserrat', sans-serif;
 letter-spacing: 1px; /* Tighter look seen in modern agencies */

}

/* Right side styling */
.image-content {
  flex: 1; /* Takes up 50% space */
  display: flex;
  justify-content: center; /* Centers image horizontally within its half */
}

.centered-image {
  max-width: 700px;
  height: auto;
  border-radius: 10%; /* Optional: matches the circular style in your sample image */
  border:2px solid white;
}

/* Responsive: Stack them on mobile */
@media screen and (max-width: 800px) {
  .about-section {
    flex-direction: column;
    text-align: center;
  }
}
/* Target only the section with the vision-section class */
.vision-section {
  gap: 300px !important; /* Forces the gap to exactly 80px */
}

/* Optional: If you want the image on the left and text on the right to stay perfectly balanced */
.vision-section .image-content {
  flex: 1;
}

.vision-section .Left-side-styling {
  flex: 1.5;
}

/* slider animation od 2nd div */
/* Animation for the Image (Left to Right) */
.slide-in-left {
  animation: slideLeftToRight 0.8s ease-out forwards;
}

/* Animation for the Text (Right to Left) */
.slide-in-right {
  animation: slideRightToLeft 0.8s ease-out forwards;
}

/* Keyframes for Image */
@keyframes slideLeftToRight {
  0% {
    transform: translateX(-100px); /* Start 100px to the left */
    opacity: 0;
  }
  100% {
    transform: translateX(0); /* End at original position */
    opacity: 1;
  }
}

/* Keyframes for Text */
@keyframes slideRightToLeft {
  0% {
    transform: translateX(100px); /* Start 100px to the right */
    opacity: 0;
  }
  100% {
    transform: translateX(0); /* End at original position */
    opacity: 1;
  }
}

/* Ensure the second section has the 80px gap you requested */
.vision-section {
  gap: 250px !important;
  overflow: hidden; /* Prevents scrollbars during animation */
}

/* Login Button */
.Login_button{
  /* No background initially */
  background-color: transparent;
  
  /* Border and Text color to match your theme */
  color: white; 
  border: 2px solid #d35400;
  
  /* The Pill Shape */
  border-radius: 50px; 
  
  /* Size and Spacing */
  padding: 15px 25px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  
  /* Centering the Text Perfectly */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: auto; 
  margin-right: 0;
  /* Smooth Transition effect */
  transition: all 0.3s ease;
}

/* Hover State: Background appears */
.Login_button:hover {
  background-color: #d35400;
  color: white; /* Text turns white when background appears */
  transform: scale(1.02); 
}

/*    services slider in /services Html */


/* ══════════════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════════════ */
.hero-slider {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* Each slide is a full-screen background layer */
.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.1s ease, transform 6s ease;
    z-index: 0;
}

/* Active slide fades in + subtle Ken Burns zoom */
.slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

/* Dark overlay for text legibility */
.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.45) 0%,
        rgba(0,0,0,0.15) 50%,
        rgba(0,0,0,0.55) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Navbar sits on top of slides */
.Top-page {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 60px;
    gap: 25px;
}

/* Optional centre hero text */
.hero-text {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    z-index: 10;
    pointer-events: none;
}

.hero-text h1 {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.6);
    white-space: nowrap;
}

.hero-text p {
    font-size: 20px;
    font-weight: 400;
    opacity: 0.88;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* ── Arrows ── */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 42px;
    line-height: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, border-color 0.25s;
    padding: 0;
}

.slider-arrow:hover {
    background: rgba(200, 148, 58, 0.55);
    border-color: #c8943a;
}

.slider-arrow.prev { left: 28px; }
.slider-arrow.next { right: 28px; }

/* ── Dots ── */
.slider-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 20;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7);
    background: transparent;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    padding: 0;
}

.dot.active {
    background: #c8943a;
    border-color: #c8943a;
    transform: scale(1.35);
}