/* General Styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #fff;
    background-color: #f9f9f9;
}

/* Header Styles */
span {
    font-weight: bolder;
    font-size: 15px;
    color: white;
}

header .logo {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow logo to wrap on smaller screens */
}

header .logo img {
    height: 110px;
    margin-right: 10px;
    width: 150px;
}

header .social-icons {
    display: flex;
    flex-wrap: wrap; /* Allow icons to wrap when space is limited */
    justify-content: flex-start;
}

header .social-icons a {
    margin: 0 5px;
    color: #003366;
    text-decoration: none;
}

header .social-icons a:hover {
    text-decoration: underline;
}

header .helpline {
    margin: 0;
    font-size: 16px;
}

header .apply-now {
    background-color: #FFC107;
    color:black;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    max-width: 100%;
}

header .apply-now:hover {
    background-color: white;
    color: black;
}

/* Media Query for Mobile Screens */
@media (max-width: 768px) {
    header .logo {
        flex-direction: column; /* Stack logo and text vertically */
        align-items: center; /* Center the logo */
    }

    header .logo img {
        height: 80px; /* Reduce logo size */
        width: auto; /* Maintain aspect ratio */
        margin-bottom: 10px; /* Add space below logo */
    }

    header .social-icons {
        justify-content: center; /* Center the social icons */
    }

    header .helpline {
        font-size: 12px; /* Reduce font size for helpline */
    }

    header .apply-now {
        font-size: 14px; /* Adjust button font size */
        padding: 8px 15px; /* Adjust padding */
    }
}

/* Media Query for Very Small Screens (Mobile Phones) */
@media (max-width: 480px) {
    header .logo img {
        height: 60px; /* Further reduce logo size */
    }

    header .apply-now {
        font-size: 12px; /* Further reduce button font size */
        padding: 6px 12px; /* Further reduce padding */
    }
}


/* Navigation Bar */
/* Navbar styling */
.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
   background-color: #FFC107 ; 
   border: 1px solid black ;/* Brown background 
  
    justify-content: space-around;
    align-items: center;
    border: 1px solid blue ; /* Thin off-white border */
}

.navbar li {
    position: relative;
}

.navbar > li > a {
    display: block;
    padding: 10px 20px;
    color: black;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.navbar > li > a:hover {
    background-color:  rgb(50, 4, 4); /* Darker brown on hover */
    color: white;
}

/* Dropdown styling */
.dropdown {
    list-style-type: none;
    position: absolute;
    top: 100%;
    left: 0;
    display: none; /* Hidden by default */
    background-color: #f8f4f0; /* Off-white */
    border: 1px solid rgb(50, 4, 4); /* Brown border */
    padding: 10px 0;
    z-index: 1000;
    width: 200px; 
}

.dropdown li {
    text-align: left;
}

.dropdown li a {
    display: block;
    padding: 10px 20px;
    color: black; /* Dark text */
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.dropdown li a:hover {
    background-color: rgb(50, 4, 4); /* Brown background on hover */
    color: white; /* White text on hover */
}

/* Show dropdown on hover */
.navbar li:hover .dropdown {
    display: block;
}



/* Footer Styles */
footer {
    background-color:hsl(0, 88%, 10%);
    color: white;
    padding: 20px;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    max-width: 1200px;
    margin: auto;
}

.footer-section {
    margin: 10px;
    flex: 1;
    min-width: 200px;
}

.footer-section h3 {
    border-bottom: 2px solid #fff;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.footer-section h3:hover {
    
    color: #FFC107;
}
.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin: 5px 0;
    
}

.footer-section ul li a {
    color: #fff;
    text-decoration: none;
}

.footer-section ul li a:hover {
    text-decoration: underline;
    color: #FFC107;
}
.footer-section p:hover {
    
    color: #FFC107;
}

.footer-section .social-icons a {
    margin: 0 5px;
    color: #fff;
    text-decoration: none;
    align-items: center;
    
}

.footer-section .social-icons a:hover {
    text-decoration: underline;
    color: #FFC107;
}


/* Responsive Design */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    header .social-icons {
        margin-top: 10px;
    }

    nav ul {
        flex-direction: column;
    }

    nav ul li a {
        text-align: center;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
    }
}

/* Container for social icons */
.social-icons {
    display: flex;
    justify-content: flex-start; /* Aligns icons to the left */
    align-items: center;
    gap: 10px; /* Adjust space between icons */
}

/* Style for the social media icons */
.social-icons a {
    display: inline-block;
}

.social-icons img {
    width: 20px; /* Set the size of the icons */
    height: auto; /* Maintain aspect ratio */
    transition: transform 0.3s ease; /* Smooth transition on hover */
}

/* Hover effect for icons */
.social-icons img:hover {
    transform: scale(1.2); /* Slightly enlarge the icons on hover */
}
/* Logo section in the footer */
.footer-section .logo-section img {
    max-width: 20px; /* Limits the logo width */
    width: 20%; /* Ensures the logo scales proportionally within its container */
    height: auto; /* Maintain aspect ratio */
}

/* Style for the helpline number */
.helpline {
    font-size: 4vw; /* Use viewport width for responsive font size */
    font-weight: bold; /* Bold text */
    color: #FFC107; /* Text color */
    background-color: white; /* Background color */
    padding: 10px 20px; /* Padding for spacing */
    border-radius: 5px; /* Rounded corners */
    text-align: center; /* Center the text */
    position: fixed; /* Fix position on the screen */
    top: 10px; /* Distance from the top */
    right: 10px; /* Distance from the right */
    z-index: 1000; /* Ensure it appears above other elements */
    opacity: 0; /* Initially hidden */
    animation: fadeInOut 5s infinite; /* Apply the animation */
    border: 1px solid hsl(251, 86%, 15%); /* Thin off-white border */
    width: auto; /* Adjust width based on content */
}

/* Keyframes for the appear and disappear effect */
@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Responsive Styles */

/* Mobile screens (480px and below) */
@media (max-width: 480px) {
    .helpline {
        font-size: 6vw; /* Adjust font size for smaller screens */
        padding: 8px 15px; /* Adjust padding for smaller screens */
    }
}

/* Tablet Screens (768px and below) */
@media (max-width: 768px) {
    .helpline {
        font-size: 5vw; /* Adjust font size for tablet screens */
        padding: 8px 18px; /* Adjust padding for tablets */
    }
}

/* Larger Desktop Screens (1024px and above) */
@media (min-width: 1024px) {
    .helpline {
        font-size: 20px; /* Default font size for larger screens */
        padding: 10px 20px; /* Maintain padding */
    }
}


/* Additional Links Section Styles */
.additional-links-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Full viewport height to center vertically */
    background-color: hsl(251, 86%, 15%); /* Optional: Add a background for visibility */
    padding: 10px; /* Add some padding for smaller screens */
    box-sizing: border-box;
}

.additional-links {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    flex-wrap: wrap; /* Allow links to wrap on smaller screens */
    justify-content: center; /* Center the links horizontally */
}

.additional-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    position: relative; /* For pseudo-elements */
    display: inline-block; /* Ensures proper alignment */
    padding: 10px 20px; /* Space around the text */
    border-radius: 5px; /* Optional: Rounded edges */
    overflow: hidden; /* Hide overflow from pseudo-elements */
    transition: transform 0.3s ease; /* Smooth hover scale */
    font-size: 13px; /* Default font size */
}

.additional-links a::before,
.additional-links a::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 10px;
    background: #FFC107;
    border-radius: 50%; /* Make it circular */
    animation: bubble 3s infinite ease-in-out;
    z-index: -1; /* Ensure it appears behind the text */
    opacity: 0.5;
}

.additional-links a::before {
    top: 50%;
    left: 20%;
    animation-delay: 0.5s;
}

.additional-links a::after {
    bottom: 50%;
    right: 20%;
    animation-delay: 1s;
}

.additional-links a:hover {
    transform: scale(1.1); /* Slightly enlarge the link on hover */
}

.additional-links a:hover::before,
.additional-links a:hover::after {
    background: white; /* Brighten bubbles on hover */
}

@keyframes bubble {
    0% {
        transform: scale(0.5) translateY(0);
        opacity: 0.8;
    }
    50% {
        transform: scale(1) translateY(-20px);
        opacity: 1;
    }
    100% {
        transform: scale(0.5) translateY(-40px);
        opacity: 0;
    }
}

/* Responsive Styles */

/* Tablet or small desktop screens (1024px and below) */
@media (max-width: 1024px) {
    .additional-links {
        gap: 15px; /* Slightly smaller gap for smaller screens */
        font-size: 12px; /* Reduce font size */
    }

    .additional-links a {
        padding: 8px 16px; /* Adjust padding for smaller screens */
    }

    .additional-links a::before,
    .additional-links a::after {
        width: 15px;
        height: 8px;
    }
}

/* Mobile Screens (768px and below) */
@media (max-width: 768px) {
    .additional-links-container {
        height: auto; /* Adjust height for smaller screens */
        padding: 20px 10px; /* Add more padding */
    }

    .additional-links {
        gap: 10px; /* Reduce gap */
        font-size: 12px; /* Smaller font size */
        flex-direction: column; /* Stack links vertically */
    }

    .additional-links a {
        padding: 8px 12px; /* Adjust padding for smaller screens */
        font-size: 14px; /* Adjust font size for better readability */
    }

    .additional-links a::before,
    .additional-links a::after {
        width: 12px;
        height: 6px;
    }
}

/* Small mobile screens (480px and below) */
@media (max-width: 480px) {
    .additional-links-container {
        height: auto; /* Ensure proper fit on small screens */
        padding: 15px 5px;
    }

    .additional-links {
        gap: 8px; /* Further reduce gap */
        font-size: 10px; /* Smaller font size */
    }

    .additional-links a {
        padding: 6px 12px; /* Adjust padding for small screens */
        font-size: 12px; /* Slightly smaller font for better readability */
    }

    .additional-links a::before,
    .additional-links a::after {
        width: 10px;
        height: 5px;
    }
}




/* Adjust header layout to accommodate the new section */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: hsl(0, 88%, 10%); /* Light Brown */
    padding: 10px 50px;
    color: #003366;
    flex-wrap: wrap; /* Allow wrapping if the space is small */
}

header .logo {
    display: flex;
    align-items: center;
    flex: 1;
}

header .social-icons {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center; /* Center social icons on smaller screens */
}

header .helpline,
header .apply-now {
    flex: 1;
    text-align: center; /* Center text for smaller screens */
}

header .additional-links {
    flex: 2;
    display: flex;
    justify-content: flex-end;
    gap: 20px; /* Space between links */
}

/* Media Query for Tablets and Larger Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
    header {
        padding: 10px 20px; /* Reduce padding */
        flex-direction: column; /* Stack the elements vertically */
        align-items: flex-start; /* Align items to the left */
    }

    header .logo {
        justify-content: center; /* Center logo in smaller screens */
        margin-bottom: 10px; /* Add space between logo and other sections */
    }

    header .social-icons {
        justify-content: center; /* Center the social icons */
        margin-bottom: 10px; /* Add space between icons and helpline */
    }

    header .helpline,
    header .apply-now {
        flex: none; /* Allow these items to take up only their natural space */
        margin-bottom: 10px; /* Add space between helpline and apply now */
    }

    header .additional-links {
        flex: none;
        justify-content: center; /* Center additional links */
        margin-bottom: 10px; /* Add space between links and other elements */
        gap: 10px; /* Reduce space between links */
    }
}

/* Media Query for Mobile Devices (max-width: 480px) */
@media (max-width: 480px) {
    header {
        padding: 10px 10px; /* Further reduce padding */
    }

    header .logo {
        flex: none; /* Let the logo have its natural size */
        margin-bottom: 5px; /* Add space between logo and other elements */
    }

    header .social-icons {
        justify-content: center; /* Center social icons */
        margin-bottom: 10px; /* Add space between social icons and helpline */
    }

    header .helpline,
    header .apply-now {
        flex: none; /* Allow these elements to take up only necessary space */
        font-size: 14px; /* Adjust font size */
    }

    header .additional-links {
        flex: none;
        justify-content: center; /* Center the links */
        margin-bottom: 10px;
        gap: 5px; /* Further reduce space between links */
    }
}



.whatsapp-icon {
    position: fixed; /* Fixes the position relative to the viewport */
    bottom: 20px; /* Distance from the bottom of the viewport */
    left: 20px; /* Distance from the right of the viewport */
    z-index: 1000; /* Keeps it above other elements */
    width: 60px; /* Icon width */
    height: 60px; /* Icon height */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
}

.whatsapp-icon img {
    width: 100%; /* Ensures the image fills the icon container */
    height: 100%; /* Maintains aspect ratio */
    border-radius: 50%; /* Makes the icon circular */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Optional: Adds a shadow */
}

.whatsapp-icon:hover img {
    transform: scale(1.1); /* Optional: Adds a hover effect */
    transition: transform 0.2s ease; /* Smooth animation */
}
/* Home Icon Styles */
.home-icon {
    position: fixed; /* Fixes the position relative to the viewport */
    bottom: 2vw; /* Use relative units for distance from the bottom */
    right: 2vw; /* Use relative units for distance from the right */
    z-index: 1000; /* Keeps it above other elements */
    width: 8vw; /* Use viewport width for icon size */
    height: 8vw; /* Use viewport width for height, maintaining the aspect ratio */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
}

/* Ensure the image inside the icon fills the container */
.home-icon img {
    width: 100%; /* Ensures the image fills the icon container */
    height: 100%; /* Maintains aspect ratio */
    border-radius: 50%; /* Makes the icon circular */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Optional: Adds a shadow */
}

/* Hover effect */
.home-icon:hover img {
    transform: scale(1.1); /* Adds a hover effect */
    transition: transform 0.2s ease; /* Smooth animation */
}

/* Media Query for tablet screens (max-width: 768px) */
@media (max-width: 768px) {
    .home-icon {
        bottom: 4vw; /* Adjust distance from bottom */
        right: 4vw; /* Adjust distance from right */
        width: 12vw; /* Increase icon size slightly for tablets */
        height: 12vw; /* Increase icon size */
    }
}

/* Media Query for mobile screens (max-width: 480px) */
@media (max-width: 480px) {
    .home-icon {
        bottom: 5vw; /* Adjust distance from bottom */
        right: 5vw; /* Adjust distance from right */
        width: 15vw; /* Larger icon size for small screens */
        height: 15vw; /* Larger icon size */
    }
}

/* Large screen default (above 1024px, for larger desktops) */
@media (min-width: 1024px) {
    .home-icon {
        bottom: 2vw; /* Default distance from the bottom */
        right: 2vw; /* Default distance from the right */
        width: 6vw; /* Slightly smaller icon for large screens */
        height: 6vw; /* Slightly smaller icon */
    }
}


.sub-dropdown {
    position: absolute;
    top: 0;
    left: 100%; /* Align to the right of the parent dropdown */
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f1ebeb;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: red;
    width: 200px;
}

.sub-dropdown li a {
    padding: 10px 15px;
}
li:hover > .sub-dropdown {
    display: block;
}



.horizontal-line {
    position: absolute;
    bottom: 10px; /* Distance from the bottom */
    left: 0;
    width: 100%; /* Full width */
    height: 2px; /* Thickness of the line */
    background-color: black; /* Line color */
}



.info-item i {
    font-size: 20px;
    color: red; /* Orange color for the icons */
    margin-right: 10px;
  }
  

  /* Large screens (desktops) */
@media (min-width: 1200px) {
    .navbar {
      justify-content: space-around;
    }
    .footer-content {
      flex-direction: row;
      justify-content: space-between;
    }
  }
  
  /* Medium screens (tablets) */
  @media (max-width: 1024px) {
    header {
      flex-direction: column;
      text-align: center;
    }
    .navbar li {
      margin: 0 5px;
    }
    footer {
      text-align: center;
    }
  }
  
  /* Small screens (phones) */
  @media (max-width: 768px) {
    header {
      padding: 10px 20px;
    }
    .navbar {
      flex-direction: column;
      align-items: flex-start;
    }
    .navbar li a {
      text-align: left;
      padding: 8px 10px;
    }
    .footer-section {
      text-align: center;
    }
  }
  
  /* Extra small screens */
  @media (max-width: 480px) {
    header .logo img {
      width: 150px;
      height: auto;
    }
    .footer-section {
      min-width: 100%;
      margin: 10px 0;
    }
  }