/* Base styles */
.top__bar{
  padding-top: 12px;;
}
.header {
  text-align: center;
  transition: all 0.5s;
  background-color: #cccc00;
}
.cover-photo{
    background-image: url('../img/engspan.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  background-position:center;
  height: 340px;
  margin: 0 auto;
}
.main{
  max-width: 1060px;
  margin: 0 auto;

}
.top_section{
  width: 100%;
  height: 450px;
  margin: 1px auto;
}

.fr_img-holder{
  /* Centers the image horizontally */
  width: 390px;
  float: left;
  height: 450px;
  
}
.font__img{
  display: block; /* Ensures the image behaves as a block element */
  width: 100%; /* Ensures the image does not exceed its container's width */
  height: 100%; /* Maintains the aspect ratio of the image */
}

.text_home_top{
 float: left;
 padding-top: 20px;
 padding-left: 40px;
 background-color: #cccc00;
 max-width: 660px;
 min-width: 300px;
 max-height: 800px;
 min-height: 300px;
}

.bullet-points {
  list-style-type: none;
  padding: 0;
}
.bullet-points li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.bullet-points li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #007bff; /* Change color as desired */
}

/*top bar*/
.topbar{

  text-align: center;
  height: 120px;
}
.topbar-inner{

  margin: 0 auto;
}

.topbar__left{
  max-width: 530px;
  float: left;
  height: 100px;
}

.topbar__right{
  max-width: 530px;
  float: left;
  height: 100px;
}
.top__bar {
  background-color: #196f3d ;
}
/*fles*/

.flex_container {
  display: flex; /* Use flexbox layout */
  max-width: 1120px;
  margin: 0 auto;
}

.flex_left {
  width: 60%; /* Take up 60% of the container's width */

  color: white;
  
}
.flex_left h1, .flex_left span{
  font-family: 'Roboto', sans-serif;
 /*/ font-size: 36px; /* Adjust the font size as needed */
padding-left: 10px;
}
.flex_left h1,.Mobile_logo h1{
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 34px;
}

.flex_left span{
  font-family: "Kalam", cursive;
  font-weight: 500;
  font-style: normal;
}

.flex_right {
  flex-grow: 1; /* Allow the right div to grow and take up remaining space */

  padding: 5px;
  color: white;
}
.flex_href {
  display: block;
}

.top__banner{
  background-color: lightgrey;
}


.flex_left_b {
  flex-grow: 1; /* Allow the right div to grow and take up remaining space */
  padding: 5px;
  font-size: 13px;
}
.flex_left_b a{
  text-align: center;
}

.flex_right_b {
  width: 60%; /* Take up 60% of the container's width */
  padding: 5px;
  font-size: 13px;
}
.flex_right_b span {
  text-align: right;
  padding: 0 3px;
}
.ban_font{
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.mflex{
  display: flex; /* Use flexbox layout */
  max-width: 100%;
  margin: 0 auto;
}

.Mobile__top_head{
  background-color: #196f3d;
  color: #fff;
  width: 100%;
}

.Mobile_logo{
  width: 85%;
  text-align: center;
}
.hanm{
  flex-grow: 1; /* Allow the right div to grow and take up remaining space */
}
/*module style*/
.sk_wid-ful {
  width: 100%;
}
.sk_wid-half{
  width: 50%;
}
.sk-blk {
  display: block;
}
.Mobile__top_head{
  display: none;
}

.card-holder{
  float: left;
}

.card {
  /* Base styles for the card */
  position: relative; /* Allows for absolute positioning of overlay */
  display: inline-block; /* Allows for multiple cards side-by-side */
  width: 400px; /* Adjust card width as needed */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
  border-radius: 4px;
  overflow: hidden; /* Ensures overlay stays within card bounds */
  margin: 5px;
  background-color: #cccc00;
}

.card img {
  /* Styles for the card image */
  width: 100%; /* Fills the card width */
  height: 250px; /* Adjust image height as needed */
  object-fit: cover; /* Ensures image fills available space proportionally */
}

.card-title {
  /* Styles for the card title */
  padding: 1rem; /* Padding for title content */
  text-align: center; /* Center title text */
}

.card-overlay {
  /* Styles for the card overlay */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black overlay */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out; /* Smooth transition on hover */
  display: flex;
  justify-content: center;
  align-items: center;
}

.card:hover .card-overlay {
  /* Styles for overlay on hover */
  opacity: 1; /* Overlay becomes visible on hover */
}

.card-overlay .plus {
  /* Styles for the plus sign */
  font-size: 2rem; /* Adjust plus sign size as needed */
  color: white; /* White plus sign icon */
}






.main-nav {
  display: inline-flex; /* Navigation items inline on larger screens */
  justify-content: center; /* Centers navigation items horizontally */
  align-items: center; /* Centers navigation items vertically */
  padding: 0.5rem 1rem; /* Padding for content */
}

.main-nav li {
  list-style: none; /* Removes default bullet points */
  margin-right: 1rem; /* Spacing between navigation items */
  text-align: center; /* Center text within each link */
  display: inline-block;
}

.main-nav li:last-child {
  margin-right: 0; /* Removes margin for the last item */
}

.main-nav a {
  color: #000; /* Black text color */
  text-decoration: none; /* Removes underline on hover */
  padding: 0.5rem 1rem; /* Padding for link content */
  display: block; /* Makes links fill container height */
  margin: 0 auto;
  letter-spacing: 0.04em;
  transition: .01s;
  font-weight: 700;
  text-transform: uppercase;

  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.main-nav a:hover {
  /* Hover effect - creates a border at the bottom */
  border-bottom: 2px solid black;
  padding-bottom: calc(0.5rem - 2px); /* Adjust padding to account for border */
}

.foot__outer{
  background-color: #196f3d;
}

/*mobile*/


/* Hamburger Menu */
.hamburger {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 20px auto;
  transition: box-shadow 0.3s ease;
}

.hamburger div {
  width: 100%;
  height: 4px;
  background-color: #fff;
  position: absolute;
  transition: all 0.5s;
}

.hamburger div:nth-child(1) {
  top: 0px;
}

.hamburger div:nth-child(2) {
  top: 8px;
}

.hamburger div:nth-child(3) {
  top: 16px;
}

/* Hamburger Animation */
.hamburger.open div:nth-child(1) {
  transform: rotate(-45deg);
  top: 8px;
}

.hamburger.open div:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.hamburger.open div:nth-child(3) {
  transform: rotate(45deg);
  top: 8px;
}

/* Material Design Hover Effect */
.hamburger:hover {
  cursor: pointer;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.418);
}


 /* Responsive Styles */
  
 @media (max-width: 1199.98px) {
  /* Styles for Extra Large Screens (XL) & Beyond: Desktops  */
  .fr_img-holder{
    /* Centers the image horizontally */
    width: 300px;

    
  }
 
}

@media (max-width: 991.98px) {
  .main-nav {
    display: flex; /* Navigation becomes a flexbox for vertical stacking */
    flex-direction: column; /* Stacks items vertically */
    justify-content: center; /* Centers items vertically */
    align-items: center; /* Centers items horizontally */
    padding: 1rem; /* Adjust padding for smaller screens */
  }

  .main-nav li {
    margin-right: 0; /* Removes horizontal spacing */
    margin-bottom: 0.5rem; /* Adds vertical spacing for list items */
    display: list-item;
  }

  .main-nav a {
    text-align: left; /* Left-align text on smaller screens */
  }
  .top__banner, .top__bar{
    display: none;
  }
   .Mobile__top_head{
    display: flex;
  }
  /* Styles for Large Screens (LG): Laptops */

  .mhide {
    display: none;
    transition: all 0.5s;
  }

  .fr_img-holder{
    /* Centers the image horizontally */
    width: 200px;
  }

}
@media (max-width: 922px) {
  .fr_img-holder{
    /* Centers the image horizontally */
    display: none;
  }

}

@media (max-width: 767.98px) {
  .top__bar{
    display: none;
  }
  /* Styles for Medium Screens (MD): Tablets in landscape */
  .header {
    text-align: center; /* Center header content */
  }

  .nav {
    text-align: center; /* Center navigation */
  }

  .mhide {
    display: none;
  }
  .flex_left h1,.Mobile_logo h1{
    font-weight: 650;
    font-size: 32px;
  }
}
  /* Styles for Extra Small & Small Screens (XS & SM): Up to tablets */
@media (max-width: 575.98px) {

.topbar {
  display: none;
}

  h1 {
    font-size: 1.5rem; /* Adjust heading size for better readability */
  }

  .content p {
    font-size: 0.8rem; /* Adjust paragraph size for phones */
  }
  .flex_left h1,.Mobile_logo h1{
    font-weight: 550;
    font-size: 24px;
  }
  .mhide {
    display: none;
  }
}


.bttm-container {
  display: flex;
  justify-content: center; /* Center the content wrapper horizontally */
  width: 100%; /* Container takes up full width */
}

.content-wrapper {
  display: flex; /* Make inner divs behave as flex items */
  flex-wrap: wrap; /* Allow content to wrap on smaller screens */
  width: 80%; /* Set a maximum width for the content area */
  margin: 20px auto; /* Add margin for better spacing */
}

.inner-div {
  background-color: #f1f1f1; /* Light gray background color */
  padding: 20px;
  margin: 10px; /* Add margin between divs */
  text-align: center; /* Center text within each div */
  flex: 1 0 auto; /* Makes divs equal width and allows them to shrink */
}

/* Media query for responsive behavior below 992px */
@media (max-width: 992px) {
  .inner-div {
    flex: unset; /* Remove flex properties for smaller screens */
    width: 100%; /* Make each div take up 100% width on smaller screens */
  }
}



.main_container {
  display: flex;
  justify-content: center; /* Center the content wrapper horizontally */
  width: 100%; /* Container takes up full width */
}

.main_content-wrapper {
  display: flex; /* Make outer divs behave as flex items */
  flex-wrap: wrap; /* Allow content to wrap on smaller screens */
  width: 80%; /* Set a maximum width for the content area */
  margin: 20px auto; /* Add margin for better spacing */
}

.main_outer-div {
  background-color: #f1f1f1; /* Light gray background color for outer divs */
  padding: 20px;
  margin: 10px; /* Add margin between outer divs */
  display: flex; /* Make inner divs behave as flex items within the outer div */
  justify-content: center; /* Center inner divs horizontally within outer divs */
  align-items: center; /* Center inner divs vertically within outer divs */
}

.main_inner-div {
  background-color: #e0e0e0; /* Slightly darker gray for inner divs */
  padding: 10px;
  text-align: center; /* Center text within each inner div */
  flex: 1 0 auto; /* Makes inner divs equal width and allows them to shrink */
}

/* Media query for responsive behavior below 992px */
@media (max-width: 992px) {
  .main_outer-div {
    flex: unset; /* Remove flex properties for smaller screens */
    width: 100%; /* Make each outer div take up 100% width on smaller screens */
  }
}