/*--------------------------------------------------------------
# Image Container
--------------------------------------------------------------*/
.image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 20 / 11;
}

/* Ensure the image is full width and responsive */
.img-fluid {
    width: 100%;
    height: auto;
    display: block; /* Removes extra space below the image */
    
    transition: opacity 1s ease-in-out; /* Fade-in transition */
}

.opn { opacity: 0; /* Start with the image hidden */ }


/* Overlay text styling */
.overlay-text {
    position: absolute; /* Position text absolutely within the container */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
width:80%;
    transform: translate(-50%, -50%); /* Adjust for exact centering */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better readability */
    color: white; /* Text color */
    padding: 15px; /* Padding around the text */
    text-align: center; /* Center-align text */
    max-width: 80%; /* Limit the text width for better readability */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    font-size: 1.5em; /* Base font size */
    line-height: 1.4; /* Line height for better spacing */
    z-index: 2; /* Ensure the text is above the image */
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
    .overlay-text {
        font-size: 1.2em; /* Smaller font size for tablets and mobile devices */
        padding: 10px; /* Reduced padding */
        max-width: 90%; /* Wider max-width to accommodate smaller screens */
    }
}

@media (max-width: 576px) {
    .overlay-text {
        font-size: 1em; /* Smaller font size for very small devices */
        padding: 8px; /* Further reduced padding */
        max-width: 95%; /* Max-width adjusted for small screens */
    }
}

h1.text-shadow {
    text-shadow: 2px 2px 5px black; color:#fff;
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
    h1.text-shadow {
        font-size: 1.2em; /* Smaller font size for tablets and mobile devices */
        padding: 10px; /* Reduced padding */
        max-width: 90%; /* Wider max-width to accommodate smaller screens */
    }
}

@media (max-width: 576px) {
    h1.text-shadow {
        font-size: 1.1em; /* Smaller font size for very small devices */
        padding: 8px; /* Further reduced padding */
        max-width: 95%; /* Max-width adjusted for small screens */
    }
}


.spacer { height:10px; clear:both }
.spacer2 { height:20px; clear:both }
.spacer3 { height:30px; clear:both }
.spacer4 { height:40px; clear:both; display: block;}

.boxsd {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Adds shadow to the bottom edge */
}

.vertical-text {
  writing-mode: vertical-rl; /* Makes text vertical from right to left */
  transform: rotate(180deg); /* Optional: To flip it to be more readable */
  font-size: 24px; /* Adjust font size as needed */
  text-align: center; /* Center the text if needed */
}

.subtle-shadow {
    color: #333; /* Text color */
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.2),  /* First shadow */
        0 0 5px rgba(0, 0, 0, 0.15);  /* Optional second shadow for depth */
}

.wte { color:#fff }



.bgc {
    background-color: rgba(0, 0, 0, 0.5); /* Black with 30% transparency */
}

#recommendation {
    display: none; /* Hide the div initially */
    background-color: #f0f4f8;
    border: 1px solid #d1e1ea;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#recommendation:hover {
    background-color: #e2ecf3;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.service-item {
  position: relative;
  padding-bottom: 50px; /* Make space for the button */
}

.hover-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: none; /* Initially hidden */
  padding: 10px 20px;
  background-color: #172C54;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.service-item:hover .hover-btn {
  display: block; /* Show the button on hover */
}

.hover-btn:hover {
  background-color: #172C54; /* Change color on hover */
}

.sitename {color:#fff;}
.mt-3 {color:#fff; }

.contact-link {
  color: white !important; /* Initial color */
  text-decoration: none; /* Optional: remove underline */
font-size:14px !important;
}

.contact-link:hover,
.contact-link:focus,
.contact-link:active {
  color: #F8BD0D !important; /* Color on hover and when selected */
font-size:14px !important;
}

.cta-button {
            margin-top: 20px;
            background-color: #eda407; /* Button background color */
            color: white; /* Button text color */
            border: none; /* No border */
            padding: 10px 20px; /* Padding for button */
            font-size: 1.2rem; /* Font size */
            border-radius: 5px; /* Rounded corners */
            transition: background-color 0.3s; /* Smooth background transition */
        }
        .cta-button:hover {
            background-color: #0f1e36; /* Darker shade on hover */
        }

.fancy-hr {
            border: none; /* Remove default border */
            height: 1px; /* Height of the line */
            background: linear-gradient(to right, #172C54, #D9EAD3, #172C54); /* Gradient line */
            margin: 30px 0; /* Space above and below */
        }
        .fancy-hr.dotted {
            border-top: 2px dotted #172C54; /* Dotted line style */
            height: 0; /* No height needed for dotted line */
            margin: 30px 0; /* Space above and below */
        }
        .fancy-hr.thick {
            height: 4px; /* Height for thick line */
            background-color: #172C54; /* Solid color */
        }
        .fancy-hr.custom {
            height: 3px; /* Custom height */
            background-color: #D9EAD3; /* Custom background color */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
            margin: 30px 0; /* Space above and below */
        }

.hr.style-seven {
            overflow: visible !important; /* For IE */
            height: 30px !important; /* Height of the HR */
            border-style: solid !important; /* Border style */
            border-color: black !important; /* Border color */
            border-width: 1px 0 0 0 !important; /* Border width */
            border-radius: 20px !important; /* Rounded corners */
        }
        .hr.style-seven:before {
            display: block !important; /* Display block */
            content: "" !important; /* Required for pseudo-element */
            height: 30px !important; /* Height of the before element */
            margin-top: -31px !important; /* Adjusts position */
            border-style: solid !important; /* Border style */
            border-color: black !important; /* Border color */
            border-width: 0 0 1px 0 !important; /* Border width for the before element */
            border-radius: 20px !important; /* Rounded corners */
        }

hr.centered {
            width: 90%; /* Set the width to 90% */
            margin: 20px auto; /* Center the HR horizontally */
            border: none; /* Remove default border */
            border-top: 2px solid #d6ccb8; /* Add a top border */
            height: 0; /* Height set to 0 for a line */
        }


.qu { font-weight:bold; color:#172C54}
.pic {padding:2px; border:2px solid #E5DCC2 }
.green { color:green; font-weight:bold }
.amber {color:#FFBF00; font-weight:bold  }
.red { color:red; font-weight:bold }

.checklist-title {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .checklist-item {
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            background-color: #ffffff;
            margin-bottom: 10px;
        }
        .checklist-item:hover {
            background-color: #e9ecef;
            cursor: pointer;
        }
        .checklist-item input {
            margin-right: 10px;
        }

.why-choose-us {
            background-color: #007bff; /* Bootstrap Primary Color */
            color: white;
            padding: 40px;
            border-radius: 10px;
            max-width: 600px;
            margin: 50px auto;
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .why-choose-us h2 {
            font-weight: bold;
            margin-bottom: 20px;
        }
        .why-choose-us p {
            font-size: 1.1em;
        }

.intlink {
    color: #0077cc; /* A medium blue that stands out on light backgrounds */
    text-decoration: none; /* Removes underline for a cleaner look */
    font-weight: bold; /* Makes the link stand out */
    transition: color 0.3s ease; /* Smooth transition for the hover effect */
}

.intlink:hover {
    color: #005fa3; /* Darker blue for hover effect */
    text-decoration: underline; /* Adds underline on hover */
}

.affil {margin:0 20px 0 0; }

.footer-images {
    display: flex;
   
    flex-wrap: wrap; /* Allows wrapping on small screens if needed */
}

.footer-images img {
    max-width: 219px; /* Controls the image size; adjust as needed */
    height: 77px;
}

/* Adjust layout on smaller screens */
@media (max-width: 576px) {
    .footer-images {
        justify-content: center; /* Center the images on small screens */
    }
    .footer-images img {
         margin-top:10px; /* Optional: resize images for smaller screens */
    }
}

.image-fader {
    position: relative;
    max-width: 550px; /* Adjust the width as needed */
    height: 150px; /* Adjust the height as needed */
    overflow: hidden;
}

.image-fader img {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.image-fader img.active {
    opacity: 1;
}

.qte { 
    font-family: Georgia, serif ;color:#FFC40C
}

.margin-top-mobile {
    margin-top: 200px; /* Apply margin-top on mobile */
}

@media (min-width: 768px) { /* Adjust the breakpoint as needed */
    .margin-top-mobile {
        margin-top: 0; /* Remove margin-top on larger screens */
    }
}


.container.section-title1 {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: white; /* Ensures text is visible */
    padding: 20px; /* Adds space inside the div */
    border-radius: 10px; /* Optional: Rounds the corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Optional: Adds depth */
    backdrop-filter: blur(5px); /* Optional: Adds a blur effect to the background */
}


label[data-toggle="tooltip"] {
    display: inline-block;
    width: 100%;
    background-color: #f0f0f0; /* Optional: Add a background to see the width */
    padding: 5px;
  }

.tooltip, .tooltip-inner {
  width: 290px !important;
  max-width: 300px !important;
}


.c12 {
  text-decoration: none; /* Remove default underline */
  color: inherit; /* Use the current text color */
  position: relative; /* Required for the pseudo-element */
  transition: color 0.3s ease; /* Smooth color transition */
}

.c12::after {
  content: ''; /* Create the underline */
  position: absolute;
  left: 0;
  bottom: -2px; /* Position the underline slightly below the text */
  width: 0; /* Start with no underline */
  height: 2px; /* Thickness of the underline */
  background-color: white; /* White underline color */
  transition: width 0.3s ease, background-color 0.3s ease; /* Smooth underline animation */
}

.c12:hover {
  color: white; /* Change text color to white on hover */
}

.c12:hover::after {
  width: 100%; /* Extend the underline on hover */
}