body {
    padding-top: 80px;
    padding-bottom: 0rem;
    font-family: 'Roboto', Arial, sans-serif;
    background-color: #ffffff;
    color: #2E2E2E;
}

@media (max-width: 991.98px) {
    body {
        padding-top: 70px;
    }
}

.no-radius {
  border-radius: 0 !important;}    
  
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  
  /* Carousel base class */
  .carousel {
    margin-bottom: 4rem;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: 32rem;
  }
  
  
  /* MARKETING CONTENT
  -------------------------------------------------- */
  
  /* Center align the text within the three columns below the carousel */
  .marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
  }
  /* rtl:begin:ignore */
  .marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
  }
  /* rtl:end:ignore */
  
  
  /* Featurettes
  ------------------------- */
  
  .featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  }
  
  /* Thin out the marketing headings */
  /* rtl:begin:remove */
  .featurette-heading {
    letter-spacing: -.05rem;
  }
  
  /* rtl:end:remove */
  
  /* RESPONSIVE CSS
  -------------------------------------------------- */
  
  @media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
      margin-bottom: 1.25rem;
      font-size: 1.25rem;
      line-height: 1.4;
    }
  
    .featurette-heading {
      font-size: 50px;
    }
  }
  
  @media (min-width: 62em) {
    .featurette-heading {
      margin-top: 7rem;
    }
  }

  .btn:not(.above-footer-btn):not(.hero-btn):not(.hero-btn-small):not(.contact-btn), .dropdown-menu, .form-control {
    border-radius:0px;
}

 /* Navbar Links: White by default (exclude integrated navbar) */
 .navbar:not(.integrated-navbar) .nav-link {
  color: rgb(251, 251, 251) !important;
  transition: color 0.3s ease-in-out;
}

/* Navbar Links: Slight color change on hover (exclude integrated navbar) */
.navbar:not(.integrated-navbar) .nav-link:hover {
  color: #cfd0d1 !important; /* Light white/grey */
}

/* Dropdown: Open on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* Dropdown: Override Bootstrap dropdown hover issue */
.dropdown-menu {
  display: none;
}

/* Dropdown menu styling */
.dropdown-menu .dropdown-item:hover {
  background-color: #c6c8ca;
  color: #212529;
}

 /* Preserve image quality and prevent distortion */
 .carousel-inner img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Align images to the left on smaller devices */
@media (max-width: 768px) {
  .carousel-inner .carousel-item img {
    object-position: right;
  }
}


/* Overlay container */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* for security notification */
/* Notification box */
.notification {
    background-color: white;
    padding: 20px;
    text-align: center;
    border-radius: 0px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
}

.notification strong {
    font-size: 18px;
    color: #333;
}

/* Proceed button */
.btn-proceed {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #3498db;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    text-decoration: none;
}

/* .btn-proceed:hover {
    background-color: #2980b9;
} */


/* for outline checking */
/* * {
    outline: 1px solid red;
} */
.callout {
  padding: 0.3rem;
  margin: 0.2rem 0;
  border: 0px solid #e9e9e9;
  border-left-width: 3px;
  border-radius: 0.2rem;
}

.gradient-border {
  position: relative;
  border-radius: 0px;
  background: white;
  color: black; /* Black text */
  padding: 20px;
  text-align: left;
}

.gradient-border::before {
  content: "";
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  border-radius: inherit;
  background: linear-gradient(to right, #01adf7, #002dfd);
  z-index: -1;
}

.btn-gradient {
  background: linear-gradient(to right, #48c9b0, #2ecc71);
  color: white;
  border: none;
}

.footer-heading {
  font-size: 1.1rem;  /* Adjust as needed */
  font-weight: 300;   /* Bold weight */
   /* Optional for spacing */
}

/* image logo settings  */

/* Change the navbar toggler (☰) icon color */
.navbar-toggler {
  border-color: #2FCABB !important; /* Border color */
  background-color: transparent; /* Remove background */
  /* padding: 8px; */
}

/* Change the navbar toggler icon (three lines) - exclude integrated navbar */
.navbar:not(.integrated-navbar) .navbar-toggler-icon {
  filter: brightness(0) invert(1); /* White icon */
}

/* Change toggler icon on hover */
.navbar-toggler:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #23a396 !important; /* Slightly darker */
}

.text-justify {
  text-align: justify;
}

/* HERO BTN */
.hero-btn {
  padding: 7px 25px;
  font-size: 18px;
  color: white;
  background-color: #05a58d;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.5s;
}
.hero-btn:hover {
    background-color:#007c6a;
    color:#fff;
}
.hero-btn-small {
  padding: 6px 13px;
  font-size: 17px;
  color: white;
  background-color: #05a58d;
  border: none;
  border-radius: 7px;
  text-decoration: none;
  transition: 0.5s;
}
.hero-btn-small:hover {
  background-color:#007c6a;
  color:#fff;
}
:root {
  --dark-blue: #0D3B66;
  --footer-bg: #052B3A;
  --footer-text: #D3DEDC;
  --hero-bg: #E3F6F5;
  --primary-light-blue: #D1E8F0;
  --soft-mint: #E3F6F5;
  --warm-ivory: #FAF3E0;
  --muted-lavender: #F0E5F9;
  --light-gray: #F5F5F5;
  --elegant-beige: #F6EFD5;
  --pure-white: #FFFFFF;
  --accent-yellow: #F8B400;
}