/*=====================================

GLOBAL STYLES

======================================*/

:root {

    --primary-color: #2a6f97; /* Calmer blue */

    --secondary-color: #333; /* Dark gray */

    --text-color: #fff; /* White text */

    --bg-color: #f9f9f9; /* Light background */

   --font-family: 'Roboto', sans-serif; /* Modern font */


    }

    

    body {

    font-family: var(--font-family);

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    background-color: var(--bg-color);

    color: var(--secondary-color);

    overflow-x: hidden; /* Prevent horizontal scrolling */

    }

    

    a {

    text-decoration: none;

    }

     /*====================================== 
            backToTop scroll button
======================================*/
    /* Back-to-Top Button Styles */
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #dc3545; /* Bootstrap primary color */
      color: white;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
    
    /* Hover Effect */
    .back-to-top:hover {
      background-color: #0056b3; /* Darker primary color */
      transform: scale(1.1);
    }
    
    /* Show Button */
    .back-to-top.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    

    

    img {

    max-width: 100%;

    height: auto;

    display: block;

    }

    

    

   /*=====================================

    top infor section

    ======================================*/

    .bg-light{

      background-color: #ffc107 !important;

    }

    

    /* Info Bar Styling */

    .info-bar {

    font-size: 14px;

    background-color: #f8f9fa;

    border-bottom: 1px solid #ddd;

    padding: 10px 0;

    }

    

    /* Flexbox Layout */

    .info-bar .container {

    display: flex;

    justify-content: space-between; /* Space out sections */

    align-items: center;

    }

    

    /* Links Styling */

    .info-link {

    color: #000;

    text-decoration: none;

    font-weight: bold;

    }

    

    .info-link:hover {

    text-decoration: underline;

    color: #007bff;

    }

    

    /* Contact Info Styling */

    .contact-info span {

    color: #000;

    font-size: 14px;

    }

    

    .contact-info i {

    margin-right: 5px;

    }

    

    /* Screen Reader Access Styling */

    .screen-reader-access {

    display: flex;

    align-items: center;

    gap: 5px; /* Space between text and buttons */

    }

    

    .screen-reader-access span {

    font-weight: bold; /* Bold for "Text Size" label */

    margin-right: 5px; /* Space between label and buttons */

    }

    

    .screen-reader-access a {

    margin-right: 5px; /* Space between buttons */

    color: #000; /* Default color */

    text-decoration: none;

    font-size: 14px; /* Consistent font size */

    }

    

    .screen-reader-access a:hover {

    color: #f6f7f8; /* Blue color on hover */

    text-decoration: none;

    }

    

    /* Active Button Styling */

    .text-size.active {

    font-weight: bold; /* Highlight active button */

    text-decoration: underline;

    color: #007bff; /* Blue color for active button */

    }

    

    /* Social Profiles Styling */

.social-profiles a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 25px; /* Adjust size as needed */

  height: 25px; /* Adjust size as needed */

  border-radius: 50%; /* Makes the container circular */

  font-size: 16px;

  text-decoration: none;

  transition: background-color 0.3s ease, color 0.3s ease;

  color: white; /* Set icon color to white for contrast */

}



.social-profiles .facebook {

  background-color: #0d2d56 /* Facebook blue */

}



.social-profiles .facebook:hover {

  background-color: #145dbf;

}



.social-profiles .twitter {

  background-color: #195e88 /* Twitter blue */

}



.social-profiles .twitter:hover {

  background-color: #0d95e8;

}



.social-profiles .linkedin {

  background-color: #0A66C2; /* LinkedIn blue */

}



.social-profiles .linkedin:hover {

  background-color: #004182;

}



.social-profiles .instagram {

  background-color: #c2134e /* Instagram primary color */

}



.social-profiles .instagram:hover {

  background-color: #c72e65;

}



.social-profiles i {

  font-size: 16px; /* Adjust icon size as needed */

}



    



    /* Responsive Styling for Info Bar */

@media (max-width: 768px) {

  .info-bar .container {

    flex-direction: column; /* Stack items vertically */

    text-align: center;

    gap: 10px; /* Add space between stacked sections */

  }



  .screen-reader-access, 

  .social-profiles {

    margin-top: 10px; /* Add spacing between sections */

  }



  .screen-reader-access {

    justify-content: center; /* Center align text size buttons */

  }



  .social-profiles a {

    font-size: 18px; /* Slightly larger icons for better visibility */

    margin: 0 10px; /* Add space between social icons */

  }



  .contact-info span {

    display: block; /* Stack contact info vertically */

    margin-bottom: 5px;

  }



  .screen-reader-access a, 

  .screen-reader-access span {

    font-size: 14px; /* Ensure readable text size on smaller screens */

  }



  .info-bar {

    padding: 15px 0; /* Adjust padding for smaller screens */

  }

}



    

    /*=====================================

    NEWS SECTIONS

    ======================================*/

    

    /* New Top Banner Section */

    /* New Top Banner Section */

    .top-banner {

    background-color: #e9ecef !important; /* Red background for the section */

    color: rgb(248, 9, 9) !important; /* White color for the text */

    overflow: hidden; /* To hide text overflow when scrolling */

    padding: 5px 0; /* Add some padding */

    }

    .announcement .news-item {

    text-transform: uppercase;

    }

    

    

    /* Blinking Effect */

    @keyframes blink {

    0% {

    opacity: 1;

    }

    50% {

    opacity: 0;

    }

    100% {

    opacity: 1;

    }

    }

    

    .top-banner .announcement {

    display: flex; /* Display items in a row */

    animation: ticker 40s linear infinite; /* Ticker animation */

    }

    

    .top-banner .news-item {

    white-space: nowrap; /* Prevent text from wrapping */

    font-size: 0.8rem;

    font-weight: bold;

    margin-right: 30px; /* Space between news items */

    cursor: pointer; /* Indicate that it is interactive */

    /* animation: blink 1.5s infinite; /* Blinking effect for news text */

    }

    

    .top-banner .news-item:hover {

    animation-play-state: paused; /* Pause the animation when hovering */

    }

    

    /* Targeting the "|" symbol specifically */

    .top-banner .news-item::before,

    .top-banner .news-item::after {

    content: '|'; /* Add the pipe symbol before and after the text */

    color: rgb(8, 1, 1); /* Set color of the pipe symbol to black */

    font-weight: bold; /* Make the pipe symbol less bold */

    margin: 0 2px; /* Add space around the pipe symbol */

    }

    

    /* Ticker animation for scrolling */

    @keyframes ticker {

    0% {

    transform: translateX(100%); /* Start off to the right */

    }

    100% {

    transform: translateX(-100%); /* Move to the left */

    }

    }

    

    /* Mobile Responsive Adjustments */

    @media (max-width: 768px) {

    .top-banner .container {

    text-align: center;

    }

    }

    

    

    

    /*=====================================

    HEADER

    ======================================*/

    .top-header {

    background: var(--primary-color);

    color: var(--text-color);

    padding: 10px 0;

    position: relative;

    }

    

    .top-header .container {

    display: flex;

    flex-wrap: nowrap; /* Ensure single-line layout */

    justify-content: space-between;

    align-items: center;

    position: relative;

    }

    

    .top-header .logo img {

    height: 70px; /* Adjust size to fit layout */

    width: auto;

    margin-right: 10px;

    }

    

    .top-header .school-name {

    flex-grow: 1;

    text-align: center;

    }

    

    .top-header .school-name h1 {

    font-size: 1.6rem; /* Adjust size to fit */

    margin: 0;

    color: #f3f9fb; /* Light blue contrast */

    }

    

    .top-header .school-name p {

    font-size: 0.85rem; /* Subtext size */

    margin: 0;

    color: #e0eff6; /* Softer tone for subtlety */

    }

    

    .top-header .education-dept {

    font-size: 0.8rem; /* Slightly smaller for secondary importance */

    color: #cce7f4; /* Light tone for distinction */

    }

    

    /* Search Bar */

    .top-header .search-bar {

    position: absolute; /* Position the search bar above its normal flow */

    top: 10px; /* Adjust to move it closer to the top */

    right: 20px; /* Align towards the right */

    transform: translateY(-50%); /* Vertically center if necessary */

    max-width: 200px; /* Reduced width */

    width: 100%; /* Ensures responsiveness */

    }

    

    /* Hiding the search bar on mobile, tablet, and iPad Air */

    @media (max-width: 1024px) {

    .top-header .search-bar {

    display: none; /* Hide search bar on mobile/tablet/iPad Air */

    }

    

    /* Stack the logo and school name above each other on smaller screens */

    .top-header .container {

    flex-direction: column; /* Stack the logo above the school name */

    align-items: center; /* Center the content */

    }

    

    .top-header .logo {

    margin-bottom: 10px; /* Add space between the logo and school name */

    }

    

    .top-header .school-name {

    text-align: center; /* Keep text centered */

    }

    }

    

    .search-bar form {

    display: flex;

    position: relative;

    width: 100%;

    }

    

    .search-bar .form-control {

    flex-grow: 1;

    border: 1px solid #e0eff6; /* Light border for consistency */

    border-radius: 4px;

    padding: 8px 10px;

    padding-right: 7px; /* Space for the search icon */

    font-size: 0.9rem;

    outline: none;

    }

    

    .search-bar .btn-icon {

    position: absolute;

    right: 20px; /* Align icon to the right inside the textbox */

    top: 50%;

    transform: translateY(-50%);

    background: none;

    border: none;

    color: #007bff; /* Icon color */

    font-size: 1.2rem;

    cursor: pointer;

    padding: 0;

    }

    

    .search-bar .btn-icon:hover {

    color: #0056b3; /* Darker color on hover */

    }

    

    /*=====================================

    NAVBAR

    ======================================*/

     .navbar-nav .nav-link,
.navbar-nav .dropdown-item {
    font-size: 0.8rem !important; /* Reduce font size */
    font-weight: 900;
}

    

    /* Make all navbar items and dropdown list items uppercase */

    .navbar-nav .nav-link,

    .navbar-nav .dropdown-item {

    text-transform: uppercase;

    }

    

    .navbar {

    background-color: var(--secondary-color);

    padding: 10px 0;

    width: 100%; /* Ensure navbar doesn't overflow */
    font-size: 1rem !important;
    font-weight: 900 !important;

    }

    

    

    

    .navbar-nav .nav-link {

    color: #dee2e6;

    font-size: 0.8rem !important;
    font-weight: 900;

    margin-right: 15px;

    transition: color 0.3s;

    }

    

    .navbar-nav .nav-link:hover {

    color: var(--primary-color); /* Highlight on hover */

    }

    

    .navbar-nav .dropdown-menu {

    background-color: var(--secondary-color);

    border: none;

    animation: dropdownAnimation 0.3s ease-in-out;
    border-radius: none !important;

    }

    

    .nav-link i {

    margin-right: 8px; /* Space between icon and text */

    color: #fff; /* Icon color */

    }

    

    .nav-link:hover i {

    color: #ffcc00; /* Icon color change on hover */

    }

    

    

    .navbar-nav .dropdown-item {

    color: var(--text-color);

    }

    

    .navbar-nav .dropdown-item:hover {

    background: var(--primary-color);

    }

    

    /* Navbar dropdown hover effect */

    .navbar-nav .dropdown:hover .dropdown-menu {

    display: block;

    animation: dropdownAnimation 0.3s ease-in-out;

    }

    

    @keyframes dropdownAnimation {

    from {

    opacity: 0;

    transform: translateY(-10px);

    }

    to {

    opacity: 1;

    transform: translateY(0);

    }

    }

    

    /*=====================================

    HERO SECTION

  /* Hero Section Styles */

.hero-section {

    padding: 10px 40px; /* Internal spacing for the entire section */

   /* margin-top:10px; /* External spacing: adds top, bottom, left, and right margins */

    margin-right: 10px;

    margin-bottom: 10px;

    background-color:#e9ecef; /* Optional: White background for the section */

  }

  

  /* Notice and News Columns */

  .hero-notice, .hero-news {

    background-color: #002244; /* Light blue background */

    border-radius: 10px; 

    padding: 10px;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

  }

  

  .hero-notice h4,

  .hero-news h4 {

    font-size: 1.5rem;

    margin-bottom: 15px;

    color: #dc3545; /* Dark heading color */

    text-transform: uppercase;

    text-align: center;

  }

  

  .notice-content ul li,

  .news-content ul li {

    font-size: 1rem;

    margin: 10px 0;

    color: #dee2e6;/* Light grey font color */

  }

  

  /* Carousel Column */

  .hero-carousel {

    position: relative;

    overflow: hidden;

    border-radius: 10px;

  }

  

  .hero-carousel img {

    height: 70vh;

    object-fit: cover;

    position: relative;

    z-index: 1;

  }

  

  /* Add space between columns */

  .row.gx-4 > * {

    margin-top: 10px;

  }

  

  /* Media Queries for Responsiveness */

  @media (max-width: 768px) {

    .hero-notice, .hero-news {

      flex: 0 0 100%;

      margin-bottom: 20px;

    }

    .hero-carousel {

      flex: 0 0 100%;

    }

  }



      /*=====================================

    About section and Quick Links

    ======================================*/


.about-us-section {

    background-color: #495057; /* Dark grey background for the section */

    color: white; /* Default white text for the section */

    padding: 20px;

    margin-top: 30px;

    margin-bottom: 30px;

}



.about-us-heading {

    font-size: 1.8em; /* Adjust heading font size */

    color: #202170; /* Heading text color */

    display: flex; /* Align icon and text in a row */

    align-items: center; /* Vertically align icon with text */

    margin-bottom: 20px; /* Add space below the heading */

}



.about-us-heading i {

    margin-right: 10px; /* Space between icon and text */

    color: #202170; /* Icon color */

}





/* Container to hold the two columns */

.about-us-container {

    display: flex;

    gap: 10px; /* Gap between the columns */

    flex-wrap: wrap; /* Allow columns to stack on smaller screens */

}



/* Styling for each column */

.column {

    flex: 1;

    border: 1px solid #0d0c0c; /* Border for each column */

    padding: 15px 50px; /* Padding inside the columns */

    background-color: #f8f9fa; /* White background for columns */

    color: black; /* Black text for columns */
 
      a:hover {
        color: #0056b3 !important; /* Hover color */
    }
    
    a:hover i {
        transform: translateX(5px); /* Icon movement on hover */
    }

}



/* First column takes 2/3 of the width */

.column:first-child {

    flex: 2; /* First column takes 2/3 of the width */

}



/* Styling for the headings and horizontal lines */

h2 {

    margin-bottom: 10px;

}



hr {

    border: 1px solid #202170; /* Blue horizontal line */

    margin-bottom: 20px;

}



/* "Read More" link alignment */

.read-more {

    text-align: right;

}



/* Styling for the Quick Links list */

.quick-links-list {

    list-style: none; /* Remove default list styling */

    padding-left: 20px;

}



.quick-links-heading {

    font-size: 1.5em; /* Adjust heading font size */

    color: #202170; /* Heading text color */

    display: flex; /* Align icon and text in a row */

    align-items: center; /* Vertically align icon with text */

}



.quick-links-heading i {

    margin-right: 10px; /* Space between icon and text */

    color: #202170; /* Icon color */

}





.quick-links-list li {

    margin-bottom: 10px; /* Add space between list items */

    position: relative; /* Set position for pseudo-element */

}



.quick-links-list li::before {

    content: ">>"; /* Add '>>' before each list item */

    position: absolute;

    left: -20px; /* Adjust the position of the arrow */

    color: #171748; /* Default arrow color */

    font-weight: bold; /* Make the arrow stand out */

}




.quick-links-list a {

    color: black; /* Default text color */

    text-decoration: none; /* Remove underline */

}



.quick-links-list a:hover {

    color: red; /* Change text color to red on hover */

    text-decoration: underline; /* Optional: Add underline on hover */

}





/* Media query for smaller devices */

@media (max-width: 768px) {

    .about-us-container {

        flex-direction: column; /* Stack columns vertically */

    }



    .column {

        flex: none; /* Reset flex value */

        margin-bottom: 20px; /* Add space between stacked columns */

    }

}







/*=========================================================



    RECENT BLOGS SECTION



    =====================================================*/



        /* Recent Blogs Section CSS */

.recent-blogs-section {

    padding: 40px 20px;

    background-color: #ece3e3;

  }

  

  .recent-blogs-heading {

    font-size: 2rem;

    text-align: center;

    margin-bottom: 20px;

    color: #333;

  }

  

  .blogs-row {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: center;

  }

  

  .blog-item {

    width: 250px;

    text-align: center;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    overflow: hidden;

  }

  

  .blog-image {

    width: 100%;

    height: 150px;

    object-fit: cover;

  }

  

  .blog-title {

    font-size: 1rem;

    margin: 10px 0;

    padding: 0 10px;

    color: #555;

  }

  

  .see-more {

    width: 100%;

    text-align: center;

    margin-top: 20px;

  }

  

  .see-more-link {

    font-size: 1.2rem;

    color: orange;

    text-decoration: none;

    font-weight: bold;

  }

  

  .see-more-link:hover {

    text-decoration: underline;

  }

  

  /* Responsive Design */

  @media (max-width: 768px) {

    .blog-item {

      width: 200px;

    }

  }

  

  @media (max-width: 480px) {

    .blog-item {

      width: 150px;

    }

  

    .recent-blogs-heading {

      font-size: 1.5rem;

    }

  }



    

    /*=====================================

    FOOTER

    ======================================*/

 /* Footer Styles */

.footer {

    background-color: #003366; /* Dark blue background color */



  }



/* Desktop view */

@media (min-width: 768px) {

  .footer .container {

      padding-left: 90px;

  }

}



  .footer-heading {

    font-size: 1.2rem;

    font-weight: bold;

    text-transform: uppercase; /* Make headings capitalized */

    margin-bottom: 30px; /* Bottom margin for spacing */

  }

  

  .footer .list-unstyled li a {

    color: #ffffff; /* White color for links */

    font-size: 0.9rem;

    transition: color 0.3s ease-in-out;

  }

  

  .footer .list-unstyled li a:hover {

    color: orange; /* Lighter color on hover */

  }

  

  /* Footer bottom text */

  .footer .copyright-text {

    font-size: 0.9rem;

    color: #e0eff6; /* Lighter gray color for copyright text */

  }

  

  .footer-bottom {

    background-color: #002244; /* Slightly darker blue */

    color: #e0eff6; /* Light gray */

    text-align: center;

    padding: 1px 0;

    margin-bottom: 0; /* Remove bottom margin */

  }

  

  .footer .designer-text {

    color: #f3f9fb; /* Lighter text color */

    font-size: 0.8rem; /* Smaller font size */

  }



  .py-4{

    padding-bottom: 0px !important;

  }

  

  /* Footer column adjustments */

  @media (max-width: 767px) {

    .footer .container {

      text-align: center;

    }

  

    .footer .row {

      flex-direction: column;

    }

  

    .footer .col-md-3 {

      margin-bottom: 20px; /* Adjust spacing between columns on smaller screens */

    }

  }

    /*=====================================

    PREVENT HORIZONTAL SCROLLING

    ======================================*/

    html, body {

    width: 100%;

    overflow-x: hidden; /* Prevent horizontal scrolling */

    }

    

    .container, .navbar-nav, .navbar-collapse {

    max-width: 100%; /* Prevent overflow */

    }

    

    .navbar-nav .dropdown-menu {

    left: 0; /* Prevent the dropdown from going off-screen */

    right: auto;

    }

    

    .navbar {

    width: 100%;

    }

    

    body {

    overflow-x: hidden; /* Disables horizontal scrolling */

    }







    /*=================================================================

                            ABOUT US SECTION

   ===================================================================*/



/* Container and Breadcrumb Styling */

.container {

    width: 100%;

   /* padding: 20px; */

  }

  

  .breadcrumb {

    font-size: 1rem;

    margin-bottom: 20px;

  }

  

  .breadcrumb a {

    text-decoration: none;

    color: #007bff;

  }

  

  .breadcrumb a:hover {

    color: #0056b3;

  }

  

  .breadcrumb span {

    color: #333;

  }

  

  /* About Us Section Layout */

  .about-us-section {

    margin-top: 40px;

    background-color: #fff;

  }

  

  .about-us-content {

    display: flex;

    justify-content: space-between;

    gap: 13px; /* Space between the two columns */

  }

  

  /* Left Column (About the School) */

  .left-column {

    flex: 0 0 71.66%; /* 2/3 of the available space */

    background-color: #fff; /* White background */

    padding: 20px;

    border: 1px solid #333; /* Dark border */

    /* Remove the border-radius to keep sharp corners */

  }

  

  

  /* Left Column - School Image */

  .left-column img {

    width: 100%;

    height: auto;

    max-height: 350px; /* Restrict image height */

    object-fit: cover; /* Ensure image maintains aspect ratio */

    border-radius: 8px;

    margin-bottom: 20px;

  }

  

  /* Left Column - Text */

  .left-column h1 {

    font-size: 2rem;

    font-weight: bold;

    color: #333;

    margin-bottom: 15px;

  }

  

  .left-column p {

    font-size: 1rem;

    line-height: 1.6;

    color: #555; /* Slightly lighter text color for readability */

    margin-bottom: 20px;

  }

  

  /* Right Column (Recent Posts & Social Links) */

  .right-column {

    flex: 0 0 27.33%; /* 1/3 of the available space */

    display: flex;

    flex-direction: column; /* Stack the sections vertically */

    gap: 20px; /* Space between the sections */

  }

  

  /* Styling for the sections inside right-column */

  .right-column .recent-posts,

  .right-column .social-links {

    background-color: #fff; /* Light background for separation */

    border: 2px solid #333; /* Dark border */

    padding: 20px;

    border-radius: 3px; /* Rounded corners */

  }

  

  /* Right Column - Title Styling */

  .right-column h2 {

    font-size: 1.5rem;

    margin-bottom: 15px;

    font-weight: bold;

    color: #333; /* Dark text for readability */

  }

  

  /* Recent Posts List Styling */

  .right-column ul {

    list-style-type: none;

    padding-left: 0;

  }

  

  .right-column ul li {

    margin-bottom: 10px;

  }

  

  .right-column ul li a {

    text-decoration: none;

    color: #007bff; /* Link color */

    font-weight: bold;

  }

  

  .right-column ul li a:hover {

    color: #0056b3; /* Hover effect */

  }

  

  

  /* Recent Posts Section */

  .recent-posts {

    background-color: #f4f4f9; /* Light gray background */

    padding: 20px;

    border: 1px solid #ffc107 !important; /* Lighter border color */

    border-radius: 3px; /* Optional rounded corners */

  }

  

  /* Heading with icon */

  .recent-posts h2 {

    font-size: 24px;

    color: #2c3e50; /* Darker text color */

    margin-bottom: 10px;

  }

  

  .recent-posts h2 i {

    margin-right: 8px; /* Space between icon and text */

    color: #3498db; /* Blue color for the icon */

  }

  

  /* Horizontal line below heading */

  .recent-posts hr {

    border: 0;

    border-top: 2px solid #3498db; /* Blue color for the line */

    margin: 10px 0;

  }

  

  /* List of Recent Posts */

  .recent-posts ul {

    list-style-type: none;

    padding: 0;

    margin: 0;

  }

  

  .recent-posts ul li {

    margin: 10px 0;

    font-size: 18px;

  }

  

  /* Link styles for recent posts */

  .recent-posts ul li a {

    color: #2c3e50; /* Darker color for text */

    text-decoration: none;

    font-size: 18px;

    transition: color 0.3s, text-decoration 0.3s;

  }

  

  .recent-posts ul li a:hover {

    color: #3498db; /* Blue color on hover */

    text-decoration: underline; /* Underline effect on hover */

  }

  

  /* Social Links Section */

  .social-links {

      text-align: center;

      margin: 20px 0;

  }

  

  .social-links h2 {

      font-size: 1.5rem;

      color: #333;

      margin-bottom: 10px;

  }

  

  .social-links hr {

      width: 60px;

      height: 2px;

      background-color: #333;

      border: none;

      margin: 0 auto 20px auto;

  }

  

  .social-icons {

      display: flex;

      justify-content: center;

     /* gap: 10px; /* Reduced spacing between icons */

  }

  

  .social-icons a {

      text-decoration: none;

      font-size: 2rem; /* Icon size */

      color: #555; /* Default color (will be overridden below) */

      border-radius: 50%; /* Rounded corners for consistency */

      transition: transform 0.3s; /* Smooth hover effects */

      padding: 10px; /* Add padding around the icons */

  }

  

  /* High contrast platform colors */

  .social-icons .facebook {

      color: #3b5998;

  }

  

  .social-icons .twitter {

      color: #1da1f2;

  }

  

  .social-icons .instagram {

      color: #e1306c;

  }

  

  .social-icons .youtube {

      color: #ff0000;

  }

  

  .social-icons .gmail {

      color: #b62410;

  }

  

  /* Add hover effects */

  .social-icons a:hover {

      transform: scale(1.2); /* Slightly enlarge on hover */

      color: #000; /* High contrast hover effect */

  }

  

  

  

  

  /* Responsive Layout */

  @media (max-width: 768px) {

    .about-us-content {

      flex-direction: column;

      gap: 20px;

    }

  

    .left-column,

    .right-column {

      flex: 1 1 100%;

    }

  }

  











       /*=================================================================

                            ABOUT US SECTION

   ===================================================================*/

       /*=================================================================

                            ABOUT US SECTION

   ===================================================================*/

       /*=================================================================

                            ABOUT US SECTION

   ===================================================================*/