/*

MGSLG
*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
  color: #98642c;
}

a:hover {
	color: #FC3;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none; /* For Firefox */
}

/* Hide scrollbar for WebKit-based browsers (Chrome, Safari, etc.) */
body::-webkit-scrollbar {
  display: none;
}
::selection {
  background: #f5a425;
  color: #fff;
}

::-moz-selection {
  background: #f5a425;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

/* Twitter icon */
.fa.fa-twitter{
	font-family:sans-serif;
}
.fa.fa-twitter::before{
	content:"𝕏";
	font-size:1.2em;
}

/* Twitter icon */
fa-brands fa-linkedin{
	font-family:sans-serif;
}
.fa.fa-twitter::before{
	content:"𝕏";
	font-size:1.2em;
}

/* header Button Styling */
.header-button {
  font-size: 11px;
  color: #98642c;
  background-color: #F5A700; /* Background color for the button */
  padding: 5px 10px; /* Padding for the button */
  display: inline-flex; /* Ensures alignment with other inline elements */
  align-items: center; /* Vertically center the content */
  border-radius: 6px; /* Rounded corners */
  font-weight: 600; /* Font weight */
  transition: all .3s; /* Smooth transition for hover effects */
}

/* Style for the link inside .header-button */
.header-button a {
  color: #ffffff; /* Text color for the button link */
  text-decoration: none; /* Remove underline */
}

.header-button:hover {
  background-color: #F5A700; /* Slightly darker shade on hover */
}

.header-button a:hover {
  color: #98642c; /* Change text color on hover */
}

/* Button Styling *
.header-button {
  font-size: 11px;
  color: 	#98642c;
  background-color: #FFFFFF;
  padding: 5px 10px;
  display: inline-flex; /* Ensures alignment with other inline elements *
  align-items: center; /* Vertically center the content *
  border-radius: 6px;
  font-weight: 600;
  text-transform: capitalize;
  text-decoration: none; /* Remove underline *
  transition: all .3s;
}

.header-button:hover {
  background-color: #F5A700; /* Slightly darker shade on hover *
}
a {
  color: #98642c; /* Text color *
  text-decoration: none; /* Remove underline *
}

a:hover {
  color: #FFFFFF; /* Change color on hover *
}*/

/*caption button*/
.main-button-red a {
  font-size: 13px;
  color: #fff;
  background-color:  #F5A700;
  padding: 12px 30px;
  margin: 0 auto;
  padding-right: 20px;
  text-align: center;
  display: inline-block;
  border-radius: 6px;
  font-weight: 500;
  text-transform: capitalize;
  transition: all .3s;
  z-index:2;
}

.main-button-red a:hover {
  opacity: 0.9;
}


.main-button-yellow a {
  font-size: 13px;
  color: #fff;
  background-color: #f5a425;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-yellow a:hover {
  opacity: 0.9;
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250,250,250,0.15);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/
/* Header Styling with Curved Side */
.sub-header {
  background-color: #98642c;
  position:fixed;
  width: 100%;
  z-index: 1111;
  height: 70px;
  padding-top: 10px;
  margin-top: -25px;
  border-bottom-left-radius: 50px; /* Curves the top-right corner */
}

.sub-header .left-content p {
  color: #fff;
  padding: 2px 0px;
  font-size: 13px;
}

.sub-header .right-icons {
  text-align: right;
  padding: 4px 0px;
}

.sub-header .right-icons ul li {
  display: inline-block;
  margin-left: 15px;
}

.sub-header .right-icons ul li a {
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.sub-header .right-icons ul li a:hover {
  color: #f5a425;
}

.sub-header .left-content p em {
   font-style: normal;
   color: #f5a425;
}

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #fb5849!important;
}

.background-header .nav li a.active {
  color: #fb5849!important;
}

.header-area {
  background-color: rgb(255,255,255);
  position: fixed;
  top: 30px; 
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 50px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 50px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 50px;
}

/* Add logo image styling here */
.background-header .logo img {
  width: auto; /* Desired width */
  min-height: auto; /* Maintain aspect ratio */
  max-height: auto; /* Keep height consistent with header */
}
.background-header .nav {
  margin-top: 10px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-transform: capitalize;
  color: #090707;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #f5a425!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #f5a425!important;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 12px;
}

.background-header .main-nav .nav li.has-sub:after {
  color: #1e1e1e;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #f5a425!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 90px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #f5a425;
}

@media screen and (min-width: 992px) {
  .sub-header {
    display: block !important;
  }
  .sub-header .left-content,
  .sub-header .right-icons {
  display: block !important;
}
  
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }
  .header-area .main-nav:before {
    display: block;
  }
   .sub-header .main-nav .nav.show {
    display: block;
  }
}

@media screen and (max-width: 991px) {
  .header-area .main-nav .nav {
    display: block;
  }

  .header-area .main-nav .nav.show {
    display: block;
  }
  
  .sub-header .main-nav .nav.show {
    display: block;
  }

}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #f5a425!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #f5a425!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
banner
---------------------------------------------
*/

.main-banner {
  position: relative;
  overflow: hidden;
  margin-top: -7px;
  margin-bottom: -7px;
  height: 95vh; /* Ensures full height of the viewport */
}

#bg-video {
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  z-index: -1;
}

#bg-video::-webkit-media-controls {
  display: none !important;
}

.carousel-item {
  position: relative;
  margin-top: -500px;
}


.video-overlay-black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Black with 60% opacity */
  z-index: 1; /* Places it above the video */
}

.video-overlay {
  z-index: 2; /* Ensures it appears above the black cover */
}

.main-banner .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the caption horizontally and vertically */
  text-align: center; /* Centers the text inside the caption */
  width: 90%; /* Adjusted for better responsiveness */
  max-width: 600px; /* Ensures it stays in a manageable width */
  padding: 0 20px; /* Adds padding to avoid text touching edges on small screens */
  z-index: 1;
}

.main-banner .caption h6 {
  margin-top: 0;
  font-size: 14px; /* Adjusted font size for better readability on small screens */
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}
.main-banner .caption h2 {
  margin: 0;
  font-size: 38px;
  padding: 20px;
  text-transform: none;
  font-weight: 600;
  color: #ffffff; /* Base text color */
  letter-spacing: 1px;
  
  /* Stronger emboss effect using two shadows */
  text-shadow: 
    10px 10px 20px rgba(0, 0, 0, 0.8),  /* Dark shadow for the embossed effect */
    -5px -5px 10px rgba(214, 205, 205, 0.6); /* Highlight at the top-left for light reflection */
}

.main-banner .caption p {
  color: #ffffff;
  font-size: 12px;
  max-width: 100%;
  text-shadow: 
    2px 2px 5px rgba(0, 0, 0, 0.9),  /* Darker shadow for a more defined emboss */
    -1px -1px 3px rgba(255, 255, 255, 0.5); /* Light highlight for a lifted effect */
  margin: 0 auto;
}

.main-banner .caption .main-button-red {
  margin-top: 20px;
}

/* Media Query for Tablets and Smaller Screens */
@media screen and (max-width: 1024px) {
  .main-banner .caption h6 {
    font-size: 16px; /* Adjusted for tablet screens */
  }

  .main-banner .caption h2 {
    font-size: 32px; /* Adjusted for tablet screens */
  }

  .main-banner .caption p {
    font-size: 14px; /* Adjusted for tablet screens */
  }

  .main-banner .caption .main-button-red {
    margin-top: 20px; /* Reduced margin for tablets */
  }
}

/* Media Query for Mobile Devices */
@media screen and (max-width: 767px) {
  .main-banner {
    height: auto; /* Allows the banner to adjust height based on content */
  }

  .main-banner .caption {
    width: 90%; /* Ensures caption width adapts to mobile screens */
    padding: 0 15px; /* Adjusted padding for mobile */
  }

  .main-banner .caption h6 {
    font-size: 12px; /* Smaller font size for mobile */
  }

  .main-banner .caption h2 {
    font-size: 24px; /* Smaller font size for mobile */
    padding: 15px; /* Reduced padding for mobile */
  }

  .main-banner .caption p {
    font-size: 12px; /* Smaller font size for mobile */
  }

  .main-banner .caption .main-button-red {
    margin-top: 15px; /* Reduced margin for mobile */
  }
}







/* Home page aboutus Start */
.aboutus {
  padding: 5rem 0;
  
}
.aboutus-title {
  font-size: 32px;
  color: black;
  line-height: 50px;
  font-weight: 200px;
  letter-spacing: 0.5px;
  margin-top: -160px;
  margin-bottom: 2px; /* Reduce the margin to make room for the line */
  text-align: center; /* Centers the title */
}

.line-with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.line-with-icon .line {
  width: 80px; /* Shorter line width */
  height: 2px;
  background-color: #f5a425; /* Line color */
}

.line-with-icon i {
  font-size: 24px; /* Graduation cap size */
  color: black; /* Icon color */
  margin: 0 10px; /* Space around the icon */
}

.aboutus-item-title {
  font-size: 16px;
  color: black; /* Default color */
  line-height: 50px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 15px;
  margin-bottom: 10px; /* Reduce the margin to make room for the line */
  text-align: center; /* Centers the title */
  text-transform: uppercase; /* Change text to uppercase */
  transition: color 0.3s ease; /* Smooth transition for color change */
}

/* Change color on hover */
.aboutus-item-title:hover {
  color: #fff; /* Hover color */
}

.aboutus-item {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.3);
  background-color: #fff; /* Light background color */
  border-radius: 0.25rem;
}


.aboutus-item .aboutus-img {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.aboutus-item .aboutus-img img {
  transition: transform 0.5s ease;
}

.aboutus-item:hover .aboutus-img img {
  transform: scale(1.2);
}

.aboutus-item .aboutus-content {
  position: relative;
  padding: 2rem;
}

.aboutus-item .aboutus-content::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background:  #c6bdac; /* Dark background color */
  transition: 0.5s;
  z-index: 1;
}

.aboutus-item:hover .aboutus-content::after {
  width: 100% !important;
  height: 100% !important;
}

.aboutus-item .aboutus-content .aboutus-content-inner {
  position: relative;
  transition: 0.5s;
  z-index: 2;
}

/*aboutus Button Styling */
.aboutus-button {
  background-color: #F5A700;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1rem;
  transition: all .3s; /* Smooth transition for hover effects */
}

/* Style for the link inside .header-button */
.aboutus-button a {
  color: #98642c; /* Text color for the button link */
  text-decoration: none; /* Remove underline */
}

.aboutus-button:hover {
  background-color: #98642c; /* Slightly darker shade on hover */
  color: #FFFFFF;
}

.aboutus-button a:hover {
  color: #FFFFFF; /* Change text color on hover */
}

.aboutus-item:hover .aboutus-content .aboutus-content-inner {
  color: #fff !important; /* White text color */
}

.aboutus-item:hover .aboutus-content .aboutus-content-inner a.h4 {
  color: #fff !important; /* White text color */
}

.aboutus-item:hover .aboutus-content .aboutus-content-inner a.h4:hover {
  color:  #F5A700 !important; /* Primary color */
}

.aboutus-item .aboutus-content a.btn-light {
  background-color:  #F5A700; /* Primary color */
  color: #fff; /* White text color */
  transition: 0.5s ease;
}

.aboutus-item .aboutus-content a.btn-light:hover {
  background-color: #98642c; /* Dark background color */
  color: #f7fafb; /* Light color */
}
/*  Homepage Aboutus End */

/* Container for the programmes */
.container {
  padding: 2rem 0;
}



/*########Template Styles######*/

.template {
  padding: 5rem 0;
  
}
.template-title {
  font-size: 32px;
  color: black;
  line-height: 50px;
  font-weight: 200px;
  letter-spacing: 0.5px;
  margin-top: 50px;
  margin-bottom: 2px; /* Reduce the margin to make room for the line */
  text-align: center; /* Centers the title */
}

.line-with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.line-with-icon .line {
  width: 80px; /* Shorter line width */
  height: 2px;
  background-color: #f5a425; /* Line color */
}

.line-with-icon i {
  font-size: 24px; /* Graduation cap size */
  color: black; /* Icon color */
  margin: 0 10px; /* Space around the icon */
}



/* ###############Tenders Section Start new ##################  */
/* Styling for each tender item */
.tender-item {
  border: 1px solid #ccc; /* Border color */
  padding: 6px;
  background-color: #fff;
  box-shadow: black;
  display: flex;
  border-radius: 5px;
  margin-top: 10px;
  justify-content: center; /* Distributes the items evenly */
  flex-wrap: wrap; /* Ensures items wrap if the screen is too small */
}

.tender-title{
  font-size: 32px;
  color: black;
  line-height: 50px;
  font-weight: 200px;
  letter-spacing: 0.5px;
  margin-top: 20px;
  margin-bottom: 2px; /* Reduce the margin to make room for the line */
  text-align: center; /* Centers the title */
}

.tender-item h4 {
  margin-bottom: 1rem;
  font-size: 18px;
}

.tender-item p {
  margin-bottom: 1rem;
  color: #666;
  text-align: center;
}

.tender-item .btn-primary {
  background-color: #F5A700;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1rem;
}

.tender-item .btn-primary:hover {
  background-color: #98642c;
}

.tender-item .btn-primary {
  background-color: #F5A700;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 1rem;
}


.tender-item .btn-primary:hover {
  background-color: #98642c;
}

.modal-tender-content .btn {
  background-color: #f5a700;
  color: white;
}

.modal-tender-content .btn:hover {
  background-color: #98642c;
  color: #FFFFFF;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
}

.filter-section {
  margin-bottom: 20px;
}

.tender-flex-container {
  display: flex;
  gap: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 50px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}

td a {
  color: #007bff;
  text-decoration: none;
}

td a:hover {
  text-decoration: underline;
}

.tender-notices {
  width: 30%;
}

.tender-item {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

.tender-item h4 {
  color: #333;
}

.tender-item p {
  color: #555;
}

.btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
}

.btn:hover {
  background-color: #0056b3;
}

.status {
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
}

.status-open { 
 color:     #34B78E; 
}
.status-closed {
   color:  #F97411;
   }
.status-awarded { 
  color:     #0039B9;
 }
.status-cancelled {
   color:  #F97411;
   }

/* Responsive adjustments */
@media (max-width: 768px) {
  .tender-item {
    margin-bottom: 1rem;
  }
}

/* Responsive adjustments */
.header-area .main-nav .nav {
    display: none;
  }

  .header-area .main-nav .nav.show {
    display: block;
  }
 
  .sub-header .left-content,
  .sub-header .right-icons {
  display: none;
}
.sub-header {
  display: none;
}

  .main-nav .nav .sub-menu {
    display: none ;
  }

  .header-area .main-nav .nav li ul.sub-menu li a {
    color: #1f272b;
  }
}


/* ############### Tenders Section end new ##################  */
/* //////Template style end#######




/* animation of all sections*

@keyframes bump {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02); /* Bump size *
  }
}*/

section {
  animation: bump 5s ease-in-out infinite; /* Slow and smooth effect */
  transition: transform 0.3s; /* Optional: for smoother scaling */
}


/* Footer Styling */
/* Footer Styles */
body {
  
  margin: 0;
  
  font-family: Arial, sans-serif;
}




/* Footer Styles */
footer {
  background-color: black;
  color: #FFFFFF;
  padding: 20px 0;
  position: absolute;
  text-align: left;
  width: 100%; /* Ensure full width */
  left: 0;     /* Align to the left */
  right: 0;    /* Align to the right */
}



.footer-container {
  justify-content: space-around;
  flex-wrap: wrap;
  display:flex;
  color:#FFFFFF;
  max-width: 2200px; /* Optional: set a max-width for content */
  margin: 0 auto;    /* Center the content if max-width is applied */
  
}

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

.footer-column h4 {
  margin-bottom: 10px;
  width: 100%; /* Ensure the heading takes up the full column width */
  white-space: normal; /* Allow wrapping if the text is too long */
  overflow-wrap: break-word; /* Break words to avoid overflow */
  text-align: left; /* Align to the left to fit better in the column */
  position: relative; /* Required for positioning the underline */
}

.footer-column h4::after {
  content: "";
  display: block;
  width: 20px; /* Set the length of the underline */
  height: 3px; /* Set the thickness of the underline */
  background-color: #F5A700; /* Color of the underline */
  position: absolute;
  bottom: -5px; /* Position the underline slightly below the heading */
  left: 0; /* Align the underline to the left of the heading */
}



.footer-column p {
  margin: 5px 0;
  color:#FFFFFF;
  transition: color 0.3s;
}

.footer-column p:hover {
  color: #F5A700;
}

.footer-column a {
  margin: 5px 0;
  color:#FFFFFF;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: #F5A700;
}

/* Brown line at the end */

.footer-line {
  background-color: #98642c;
  margin-top: 10px;
  height: 100px;
  padding: 20px 0; /* Adjust padding as needed */
  text-align: center; /* Centers the entire content */
}

.footer-line p {
  color: white; /* White text color for copyright text */
  margin-top: -50px; /* Space between icons and copyright text */
  justify-content: center; /* Aligns icons horizontally centered */
  
}

.footer-line ul {
  list-style: none;
  padding: 0;
  display: flex; 
  margin-left: 100px;
  justify-content: left;
}

.footer-line ul li {
  margin-right: 20px; /* Space between the icons */
}

.footer-line ul li a {
  display: inline-block;
  border-radius: 50%; /* Makes the background round */
  padding: 10px; /* Adds space around the icon */
}

.footer-line ul li a i {
  color: white; /* Makes the icons white */
  font-size: 24px; /* Adjust the size of the icons */
}

.footer-line ul li a:hover i {
  color: #F5A700; /* Changes icon color on hover */
}

.footer-column a {
  margin: 5px 0;
  color:#FFFFFF;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: #F5A700;
}
@media (max-width: 767px) {
  /* Hide copyright text */
  .footer-line p {
    display: none !important;
  }

  /* Show social icons and center them */
  .footer-line ul {
    margin-left: 0 !important;
    justify-content: center !important;
  }
}

/* Floating top arrow */
.top-arrow {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 50px;
  right: 20px;
  background-color: white; /* Square button background color */
  color: #F5A700;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px; /* Optional: slight rounding for button shape */
  opacity: 0;
  transition: opacity 0.3s ease;
  border: none; /* Ensure no border */
  box-shadow: none; /* Ensure no shadow effect */
}
@media (max-width: 767px) {

  .footer-line p {
    display: none;
  }
.top-arrow.visible {
  opacity: 1;
}

/* Arrow styling */
.top-arrow::before, .top-arrow::after {
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #F5A700; /* Color of arrow */
  position: absolute;
  top: 12px;
}

/* Hover effect */
.top-arrow:hover {
  background-color: #F5A700; /* Background color change on hover */
}

.top-arrow:hover::before,
.top-arrow:hover::after {
  border-bottom-color: white; /* Arrow color change on hover */
}