/* ---------------------Colors--Font-----------------*/

:root {
    /* Bootstrap Colors */
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
  
    /* RGB Values */
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-body-color-rgb: 33,37,41;
    --bs-body-bg-rgb: 255,255,255;
  
    /* Additional Colors */
    --white-color: #ffffff;
    --primary-color: #7cb8eb;
    --secondary-color: #4f83d1;
    --section-bg-color: #f0f8ff;
    --custom-btn-bg-color: #4f83d1;
    --custom-btn-bg-hover-color: #7cb8eb;
    --dark-color: #000000;
    --p-color: #717275;
    --border-color: #e9eaeb;
    --link-hover-color: #4f83d1;
  }
  
  /* Font */
  :root {
    --body-font-family: 'Poppins', sans-serif;
    --h1-font-size: 52px;
    --h2-font-size: 46px;
    --h3-font-size: 32px;
    --h4-font-size: 28px;
    --h5-font-size: 24px;
    --h6-font-size: 22px;
    --p-font-size: 16px;
    --btn-font-size: 18px;
    --copyright-font-size: 14px;
    --border-radius-large: 100px;
    --border-radius-medium: 20px;
    --border-radius-small: 10px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
  }
  
  /* Body */
  :root {
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    font-family: var(--body-font-family);
    background-color: var(--bs-body-bg);
  }
  
  /* Other */
  :root {
    --btn-font-size: 18px;
    --border-color: #e9eaeb;
  }
  
  /* Padding */
  :root {
    --padding-top: 100px;
    --padding-bottom: 100px;
  }
  
  /* Background */
  :root {
    --background-color: var(--section-bg-color);
  }
  


body {
    flex-direction: flex;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    flex-direction: column;
    min-height: 100vh;
  }

/* CONTENT ON BACKGROUND */

.container-fluid p {
  font-size: 25px;
}

.container-fluid h2 {
  font-size: 65px;
}

.custom-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  padding: 40px;
  color: white;
  z-index: 1;
}

.container-fluid {
  position: relative;
  padding: 0; /* Remove default padding to ensure full-width image */
}

.back img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0; /* Ensure the overlay is behind the content */
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Ensure the content is above the overlay */
  color: white;
}

.container-fluid .button {
  font-size: 45px;
}

.container-fluid .button a {
  font-size: 25px;
}

.container-fluid .button .btn-primary {
  background-color: #0d6efd;
}

.container-fluid .btn-primary {
  border: none;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-primary:hover {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow on hover */
  transform: translateY(-2px); /* Slightly lift the button on hover */
}

.btn-primary:active {
  transform: translateY(2px); /* Push the button down on click */
}

/* ANIMATION EFFECT */

.name {
  color: white;
}

/* Apply the animation */
.name.yellow {
  animation: colorChange 2s infinite alternate;
}

@keyframes colorChange {
  0% {
    color: yellow; /* Starting color (yellow) */
  }
  100% {
    color: transparent; /* Ending color (black) */
  }
}

/* Media queries for responsive design */

@media (max-width: 768px) {
  .container-fluid h2 {
    font-size: 40px; /* Adjust the font size for smaller screens */
  }

  .container-fluid .button {
    font-size: 30px; /* Adjust the button font size for smaller screens */
  }

  .container-fluid .button a {
    font-size: 18px; /* Adjust the button text font size for smaller screens */
  }
}


/*CONTACT FORM STYLES */

  /* Basic styling for the contact form */
  .contact-form-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    display: none;
  }

  label {
    display: block;
    margin-bottom: 5px;
  }

  input,
  select,
  textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  textarea {
    resize: vertical;
  }

  /* Basic styling for the thank-you page */
  .thank-you {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
  }



/*THE BUSINESS HOURS OR SPLIT-SECTION */


.contact_details {
  display: flex;
}



/* .contact_details h5 {
  margin: 0;
  margin-right: 10px;
  margin-top: 82px ;
} */






.section {
display: flex; 
gap: 1rem;
max-width: 700px;
margin: 2rem auto; 
}

/*flex-direction: column; 
align-items: center;*/

.section {
align-items: center;
}

/**/
.section_item {
flex: 1;
}

.section .section_item {
  font-size: medium;
}




/*Adding The Separator*/

.section:before {
content: "";
border: 1px solid #d3d3d3;
align-self: stretch;
}

.section_item--start {
order: -1;
}

/*fit on different screen size*/

@media (mid-width : 700px) {
.section {
  align-items: center;
  flex-direction: row; /*big screen*/
}
}


/*-------------------------
  SERVICES              
---------------------------*/

body {
  background-color: #f2f7ff; /* Light blue background */
  color: #333; /* Dark text color */
}

h1 {
  color: #03619c; /* Ocean blue heading color */
}


.services-section p {
  font-size: 20px;
}


.card {
  border: 1px solid #03619c; /* Ocean blue border for cards */
}

.card-img-top {
  height: 200px; /* Set a fixed height for the images */
  object-fit: cover; /* Resize the images to cover the container, maintaining aspect ratio */
  padding: 10px; /* Add some padding around the images */
  border-radius: 50%;
}

.card-title {
  color: #03619c; /* Ocean blue title color */
}

.card-text {
  color: #555; /* Dark gray text color */
}

/* Additional styles for the "Read More" buttons */
.btn-primary {
  background-color: #03619c; /* Ocean blue button background */
  border-color: #03619c; /* Ocean blue button border color */
}

.container .row .col-md-6 .contact .form .submit input, .contact .form .submit textarea{
  width: 100%;
  padding: 15px;
  border:1px solid #95a5a6;
  outline: none;
  margin: 13px 0;
}


.container .row .col-md-6 .contact .form .submit input, .contact .form .submit textarea:focus {
  border: 1px solid #111;
}

.container .row .col-md-6 .contact .form .submit input::placeholder {
  color: #7f8c8d;
  font-size: 1.1rem;
}

.slide-in-from-left p {
  font-size: 30px;
}



/* ABOUT US */

.slide-in-from-left2 p {
  font-size: 20px;
} 

/* TESTIMONIAL SECTION */

   .testimonial-section {
      padding: 50px 0;
      text-align: center;
    }

    .testimonial-section h2{
      color: #03619c;
      font-weight: 600;
    }

    .testimonial-card {
      border: 1px solid #ccc;
      padding: 20px;
      border-radius: 5px;
      margin-bottom: 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .testimonial-card p {
      font-style: italic;
    }

    .testimonial-card .customer-name {
      font-weight: bold;
      margin-top: 10px;
    }


/* CONTACT FORM AND MAP */

.contact .form {
  width: 70%; 
}

.contact .form h2{
  font-size: 2rem;
  color:  #03619c;
}

.contact .form .submit textarea::placeholder {
  color: #7f8c8d;
  font-size: 1.1rem;
  height: 80%;
}


.container .contact .submit button[type="submit"] {
  display: inline-block;
  width: auto;
  padding: 15px 30px;
  text-decoration: none;
  background: #111;
  color: #fff;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.container .contact .submit button[type="submit"]:hover {
  background-color: #444;
}


.container .map {
  width: 45%;
  margin-top: 10%;
}

/* Set initial state of elements */
.slide-in-from-top {
  opacity: 0;
  position: relative;
  /* Initial position with slight scaling */
  transform: translateY(50px) scale(0.8); 
  transition: all 0.5s ease;
}

/* Define slide-in animation for elements coming from top */
.slide-in-from-top.from-top {
  /* Slide in from top and restore original size */
  transform: translateY(0) scale(1); 
  opacity: 1;
}

.slide-in-from-bottom {
  opacity: 0;
  position: relative;
   /* Initial position with slight scaling */
  transform: translateY(50px) scale(0.8);
  transition: all 0.5s ease;
}

/* Define slide-in animation for elements coming from bottom */
.slide-in-from-bottom.from-bottom {
  /* Slide in from bottom and restore original size*/
  transform: translateY(0) scale(1); 
  opacity: 1;
}

.slide-in-from-left {
  opacity: 0;
  position: relative;
  /* Initial position with slight scaling */
  transform: translateY(50px) scale(0.8); 
  transition: all 0.5s ease;
  border: 1px solid #000000;
  border-radius: 3px;
}

/* Define slide-in animation for elements coming from left */
.slide-in-from-left.from-left {
  /* Slide in from left and restore original size */
  transform: translateX(0) scale(1); 
  opacity: 1;
}

/*Define slide */
.slide-in-from-right {
  opacity: 0;
  position: relative;
  /* Initial position with slight scaling */
  transform: translateY(50px) scale(0.8); 
  transition: all 0.5s ease;
}

/* Define slide-in animation for elements coming from right */
.slide-in-from-right.from-right {
  /* Slide in from right and restore original size */
  transform: translateX(0) scale(1); 
  opacity: 1;
}

/* ---------------------------------*/
.slide-in-from-top2 {
  opacity: 0;
  position: relative;
  /* Initial position with slight scaling */
  transform: translateY(50px) scale(0.8); 
  transition: all 0.5s ease;
}

.slide-in-from-top2.from-top {
  /* Slide in from right and restore original size */
  transform: translateX(0) scale(1); 
  opacity: 1;
}


.slide-in-from-left2 {
  opacity: 0;
  position: relative;
  /* Initial position with slight scaling */
  transform: translateY(50px) scale(0.8); 
  transition: all 0.5s ease;
}

.slide-in-from-left2.from-left2 {
  /* Slide in from right and restore original size */
  transform: translateX(0) scale(1); 
  opacity: 1;
}

.slide-in-from-bottom2 {
  opacity: 0;
  position: relative;
   /* Initial position with slight scaling */
  transform: translateY(50px) scale(0.8);
  transition: all 0.5s ease;
}


.slide-in-from-bottom2.from-bottom2{
  transform: translateX(0) scale(1);
  opacity: 1;

}

/* Footer Section */

.site-footer {
  padding: 5em 0;
  background: #0d6efd;
  font-size: 14px;
  color: white;
}


.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: #ffc107;
  border-bottom: 1px solid transparent;
  color: #fff;
}

.site-footer a:hover {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0, 0.2);
}

.site-footer h2 {
  font-size: 22px;
  margin-bottom: 28px;
  letter-spacing: .05rem;
  color: #fff;
}

.site-footer .footer-link li {
  line-height: 1.5;
  margin-bottom: 15px;
}

.footer-social a {
  line-height: 0;
  border-radius: 50%;
  margin: 0 5px 5px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 30px;
  height: 30px;
  text-align: center;
  display: inline-block;
}

.footer-social a:hover {
  background: #fff;
  border-color: white;
  color: black;
}

.footer-social .fa {
  margin-top: 7px;
}