body {
  font-family:  sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fff;
 
}
.logo-and-nav {
  display: flex;
  align-items: center;
}

.logo {
  margin-right: 20px; /* Adjust space between logo and nav elements */
  /* Additional styling */
}

.navbar-nav {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-right: 5px;
  padding-left: 30px; 
  padding-right: 20px;
  /* Space between nav items */
}
.nav-bar {
  width: 5px; /* Width of the red bar */
  height: 30px; /* Height of the red bar, adjust to match your design */
  background-color: #C8102E; /* Red color, adjust the hex code for the color you want */
  margin-right: 10px;
  border-radius: 10px; /* Spacing between the bar and the text */
}

.nav-link {
  text-decoration: none;
  color: #333; /* Text color, adjust as needed */
font-family: Arial, sans-serif; /* Font family, adjust as needed */
font-size: 16px; /* Font size, adjust as needed */
position: relative;
padding: 5px 0;
  /* Additional link styling */
}







.navbar {
  display: flex;
  /* justify-content: flex-start; */
  align-items: flex-start;
  /* background-color: #E0E0E0; */
  padding: 10px 200px;
  margin-left: 20px;
}

.navbar-section {
  display: flex;
  align-items: center;
  margin-left: 40px;
}

.logo-image {
  height: 50px; /* Adjust the size as necessary */
}

.navbar-text {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}

.navbar-links {
  display: flex;
  align-items: space;
}

/* .nav-link {
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  margin-left: 16px; 
  font-size: 14px;
} */
.nav-link.active {
  border-bottom: 3px solid blue;
}

/* Adjusts for RTL layout */
html[dir="ltr"] .navbar-section, html[dir="ltr"] .nav-link {
  
  
}

/* Hover effect for links */
.nav-link:hover {
  text-decoration: underline;
}
.button{
  color: white;
  padding: 10px 20px;
  border-radius: 10%;
  background-color: cadetblue; 
}
/* bread crumbs */

.breadcrumb {
  border-top: 1px solid grey ;
  border-bottom: 1px solid grey ;
  background-color: #e5e5e5fd;
  padding-left: 260px;
  padding-top: 20px; 
  padding-bottom: 20px; 
  display: flex;
  align-items: center;
  font-size: 14px;
}

.breadcrumb-item {
  text-decoration: none;
  color: black;
  font-weight: 700;
  margin-right: 5px;
}

.breadcrumb-item.active {
  color: grey;
  
}

.breadcrumb-separator {
  margin-right: 5px;
}

/* image faded */
.content-header {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  padding: 0px 110px;
  padding-bottom: 20px;
  margin-left: 90px;
}

.content-text {
  margin-left: 45px;
  z-index: 2;
  flex: 1;
}

.content-text h1 {
  color: #C8102E;
  margin: 0;
    
}

.content-text .subtitle {
  margin-left: 2px;
  margin-top: 5;
  color: #666; 
}

.content-image {
  flex: 1; /* Allows the image to take up the remaining space */
  display: flex;
  justify-content: flex-end; /* Aligns the image to the right */
  align-items: center; /* Aligns the image vertically */
  position: relative;
  min-height: 100px;
  /* padding-left: 20px; */
  margin-right: 100px;
  /* Ensures the container has at least 100px height */
}

.content-image img {
  width: 100%;
  max-height: 300px; /* Sets the image height */
  width: auto; /* Keeps the aspect ratio of the image */
  position: relative;
  z-index: 1;
}

.content-image::before {
  content: '';
  position: absolute;
  left: -10px; /* Starts the fade effect 50px from the left edge of the image */
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
  z-index: 2;
}

.content_text{
  padding-top: 20px;
  padding-right: 160px;
  padding-left: 230px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  font-size: medium;
}
/* related topics */
.tabs {
  font-family: Arial, sans-serif;
}

.tab-headers {
  display: flex;
  flex-wrap: wrap;
  background: #f0f0f0;
  margin-top: 50px;
  margin-left: 200px;
  margin-right: 120px;
  padding: 20px;
  justify-content: space-between;
}

.tab {
  padding: 10px;
  cursor: pointer;
  margin: 5px;
}

.tab.active {
  border-bottom: 4px #00f solid;
}

.content {
  display: none;
  border: 1px solid #00f;
  padding: 20px;
  padding-left: 30px;
  margin-left: 212px;
  margin-right: 120px;
  height: 150px;
}

.content.active {
  display: block;
}

.content a {
  display: block;
  margin-bottom: 10px;
  color: #00f;
  text-decoration: none;
  font-weight: 500;
  font-size: large;
}

.content a:hover {
  text-decoration: underline;
}



/* footer */


.footer {
  text-align: left;
  background-color: #ECE9F0;
  padding: 20px;
  position: relative;
}


.footer-content {
  max-width: 1350px;
  margin: 0 auto;
  text-align: left;
}

.footer-section {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin: 0 1.5%;
}

.footer-heading {
  font-size: 24px;
  
  margin-bottom: 10px;
  margin-left: 40px;
}

.info_sec{
  list-style-type: none;
}

.info_sec li {
  line-height: 1.9;
}

.info_sec li a {
  color: #000;
  text-decoration: underline; /* Underline for links */
  display: block; /* Makes the entire list item clickable */
}

.info_sec li a:hover {
  color: #333;
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer-section {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
}


/* ... (previous styles) ... */
.footer-follow {
  text-align: center;
    position: relative;
    padding: 20px 0;
}

.footer-follow-hr {
  margin: 0 auto 20px;
    border: none;
    height: 3px;
    background-color: #fffbfb; /* Or any other color you prefer */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    
}

.footer-follow-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    padding-top: 20px; /* Space below the horizontal line */
}

.footer-follow-title {
    
    margin:0px ;
    margin-right: 20px; /* Space after the "Follow us" text */
    white-space: nowrap; /* Prevents the text from wrapping */
}

.footer-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.footer-logos img {
    margin: 0 15px; /* Space between logos */
}

.logo-gap {
    width: 50px; /* Width of the gap between the last two logos */
}

@media (max-width: 768px) {
    .footer-follow-content {
        flex-direction: column;
    }

    .footer-follow-title {
        margin-bottom: 20px; /* Space below the "Follow us" text on smaller screens */
        margin-right: 0;
    }

    .logo-gap {
        width: 25px; /* Smaller gap on smaller screens */
    }
}

.footer-follow {
    position: relative;
    padding: 20px 0px;
    background-color: #ECE9F0;
}

.footer-follow-hr {
    border: none;
    height: 1px;
    background-color: #c5bcbc; /* Or any other color you prefer */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 70%;
}

.footer-follow-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px; /* Space below the horizontal line */
    padding-left: 15px 140px;
    
}

.footer-follow-title {
  margin-bottom: 20px;
    margin-right: 20px; /* Space after the "Follow us" text */
    white-space: nowrap; /* Prevents the text from wrapping */
}

.footer-logos {
    display: flex;
    align-items: center;
    justify-content: center;
  
}

.footer-logos img {
    margin: 0 15px; /* Space between logos */
    height: 50px;
    max-width: 60%;
}

.logo-gap {
    width: 50px; /* Width of the gap between the last two logos */
}

@media (max-width: 768px) {
    .footer-follow-content {
        flex-direction: column;
    }

    .footer-follow-title {
        margin-bottom: 20px; /* Space below the "Follow us" text on smaller screens */
        margin-right: 0;
    }

    .logo-gap {
        width: 25px; /* Smaller gap on smaller screens */
    }
}


/* next contain foter center */
.footer {
  font-family: Arial, sans-serif;
  
  text-align: center;
  padding: 20px 0;
}

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

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  text-decoration: underline;
}

.footer-links a {
  color: #000;
  text-decoration: none;
  margin: 0;
}

.footer-links a:hover,
.footer-links a:focus {
  text-decoration: underline;
}

.footer-text {
  color: #333;
  margin: 5px 0;
  font-size: 14px;
}

.footer-text a {
  color: #0000EE;
  text-decoration: underline;
}

.hamburger-menu {
  display: none;
  cursor: pointer;
}

.hamburger-menu i {
  font-size: 24px; /* Adjust size as needed */
  color: #333; /* Adjust color as needed */
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {




  
}



@media (max-width: 768px) {

}
/* @media (max-width: 768px) {
.content-header, .breadcrumb, .tabs, .footer-follow-content {
    padding-left: 10px;
    padding-right: 10px;
}

.content-image img {
    width: 100%;
    height: auto;
}


} */
/* @media (max-width: 768px) {
.content-header {
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.content-text, .content-image {
    flex: none;
    width: 100%;
    margin: 10px 0;
}

.content-image img {
    max-width: 100%;
    height: auto;
}
} */
@media (max-width: 991px) {
.nav-link {
  display: block; /* Stack links vertically */
  width: 100%; /* Full width to the container */
  text-align: left; /* Center the text */
}
.nav-item {
  width: 100%; /* Full width for each nav item */
  justify-content: center; /* Center justify the nav links */
  margin-top: 10px;
}
.navbar-nav.show {
  display: flex;
  align-items: center;
}
.navbar-nav {
  display: none; /* Hide initially */
  flex-direction: column; /* Stack links vertically when shown */
  width: 100%; /* Full width */
  position: static; /* Positioned absolutely relative to its parent */
  
}
.navbar {
    padding: 10px;
    flex-direction: column; /* Align items in a row instead of column */
      /* Space out navbar items */
    align-items: center; /* Align items vertically */
}

.navbar-section {
  
      /* margin-bottom: 20px; Logo and title in a row */
      justify-content: flex-start; /* Space between logo and title */
      width: 100%;
}

.hamburger-menu {
  margin-top: 10px;
  display: block; /* Show the hamburger menu */
      position: absolute; /* Absolute position */
      top: 0; /* Align to the top */
      right: 0; /* Align to the right */
      padding: 10px; /* Padding for touch area */
      z-index: 10;/* Add padding to space out from the logo and text */
}

.breadcrumb {
    padding-left: 10px;
    padding-top: 10px; /* Add padding to separate from the navbar */
    flex-basis: 100%; /* Take full width */
    order: 1; /* Place breadcrumbs below navbar section */
}

.logo-image img {
  display: block; /* Display logo */
  margin: 0 auto; 
}
.navbar-text {
  text-align: center; /* Center text within navbar-section */
}
.nav-link button{
width: 50px !important;
}
.content-header{
padding: 20px 20px;
display: flex;



}
.content-text, .content-image {
flex: none;
width: 100%;
max-width: 100%;
padding: 10px 0; 
}
}
@media (max-width: 992px) {
h3 {
    font-size: 1.3em; /* Slightly smaller font size on tablets */
}
}

@media (max-width: 768px) {
.content_text {
    padding: 15px;
}

h3 {
    font-size: 1.2em; /* Even smaller font size on mobile */
}
}

@media (max-width: 480px) {
h3 {
    font-size: 1.1em; /* Smaller font size for very small devices */
}

p, ul, ol {
    font-size: 0.9em; /* Smaller font size for text */
}
}
@media (max-width: 768px) {
.tab-headers {
    flex-direction: column; /* Stack tabs vertically on smaller screens */
    align-items: center; /* Center-align the tabs */
}

.tab {
    width: 100%; /* Full width tabs for smaller screens */
    text-align: center; /* Center text within each tab */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.tab-contents .content {
    height:auto ;
    padding: 5px; /* Adjust padding for smaller screens */
}
}