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;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.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;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

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

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  font-weight: 300;
  color: #434343;
  ;
}

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

html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #30cf14;
  color: #fff !important;
}

::-moz-selection {
  background: #30cf14;
  color: #fff !important;
}

@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;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
}

.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #015401;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.section-heading h4 {
  color: #2a2a2a;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 25px;
}

.section-heading h4 em {
  font-style: normal;
  color: #015401;
}

.section-heading .line-dec {
  width: 50px;
  height: 2px;
  background-color: #015401;
}

.border-first-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #30cf14 !important;
  border: 1px solid #30cf14 !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.border-first-button a:hover {
  background-color: #30cf14;
  color: #fff !important;
}


/* 
---------------------------------------------
intro
--------------------------------------------- 
*/

.intro-banner {
  text-align: center;
  padding-top: 200px;
  margin-bottom: 100px;
  position: relative;
}

.intro-banner:after {
  content: '';
  background-image: url(../images/slider-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 262px;
  height: 625px;
  z-index: 1;
}

.intro-banner img {
  max-width: 152px;
  margin-bottom: 30px;
}

.intro-banner h1 {
  font-size: 36px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}

.intro-banner h4 {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 400;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.intro-banner a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #30cf14 !important;
  border: 1px solid #30cf14 !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
  position: relative;
  z-index: 2;
}

.intro-banner a:hover {
  background-color: #30cf14;
  color: #fff !important;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.pre-header {
  background-color: #015401;
  height: 60px;
  padding: 15px 0px;
}

.pre-header ul li {
  display: inline-block;
}

.pre-header ul.info li {
  margin-right: 45px;
}

.pre-header ul.info li a {
  color: #ffffff;
  font-size: 14px;
  transition: all .3s;
}

.pre-header ul.info li a:hover {
  color: #30cf14;
}

.pre-header ul.info li a i {
  font-size: 18px;
  margin-right: 8px;
}

.pre-header ul.social-media {
  text-align: right;
}

.pre-header ul.social-media li {
  margin-left: 5px;
}

.pre-header ul.social-media li a {
  background-color: #ffffff;
  color: #015401;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  transition: all .3s;
}

.pre-header ul.social-media li a:hover {
  background-color: #30cf14;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {

  .pre-header {
    height: 80px;
  }

  .pre-header ul.social-media li a {
    width: 30px;
    /* Smaller size for mobile */
    height: 30px;
    font-size: 14px;
    /* Adjust font size for mobile */
  }

  .pre-header ul.social-media {
    flex-wrap: nowrap;
    /* Prevent wrapping */
    justify-content: center;
    /* Keep icons centered */
  }

  .pre-header ul.info li {
    margin-right: 10px;
    /* Adjust spacing for info list */
  }
}

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

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}

.background-header .main-nav .nav li:hover a {
  color: #30cf14;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #30cf14;
  content: '';
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  background-color: #fff;
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.03);
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -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: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  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;
}

.header-area .main-nav .logo {
  line-height: 100px;
  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: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !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: 20px;
  padding-right: 20px;
}

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

.header-area .main-nav .nav li:last-child a,
.background-header .main-nav .nav li:last-child a {
  padding: 0px 20px !important;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.background-header .main-nav .nav li:last-child a:hover {
  color: #fff !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -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: #30cf14 !important;
}

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

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

   .main-nav .nav li.submenu ul {
      min-width: 230px;
      /* Increase this value */
      white-space: nowrap;
      /* Prevents text from wrapping */
    }

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

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

.header-area .main-nav .nav li.submenu ul 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.submenu ul li a:hover {
  background: #fff;
  color: #30cf14 !important;
  padding-left: 25px;
}

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

.header-area .main-nav .nav li.submenu:hover ul {
  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: #2a2a2a;
  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: #2a2a2a;
}

.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: #2a2a2a;
  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: #2a2a2a;
}

.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: #2a2a2a;
}

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

.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: #2a2a2a;
}

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

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

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

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

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }

  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {

  .header-area .main-nav .nav li:last-child,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }

  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }

  .background-header .nav li a.active:after {
    display: none;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }

  .header-area .main-nav .logo {
    color: #1e1e1e;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #30cf14 !important;
    opacity: 1;
  }

  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }

  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.03);
  }

  .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;
  }

  .background-header .nav {
    margin-top: 80px;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

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

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    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: #30cf14 !important;
  }

  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    overflow: hidden;
  }

  .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.submenu ul.active {
    height: auto !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    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;
  }

  /* Scrollbar styling for mobile submenu */
  .header-area .main-nav .nav li.submenu ul::-webkit-scrollbar {
    width: 4px;
  }

  .header-area .main-nav .nav li.submenu ul::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .header-area .main-nav .nav li.submenu ul::-webkit-scrollbar-thumb {
    background: #30cf14;
    border-radius: 2px;
  }

  .header-area .main-nav .nav li.submenu ul::-webkit-scrollbar-thumb:hover {
    background: #015401;
  }
}

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

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: #fff;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #30cf14;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #30cf14;
  border-radius: 50%;
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 226px 0px 120px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  background-image: url(../images/slider-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 60px;
  width: 262px;
  height: 625px;
  z-index: 1;
}

.main-banner:before {
  content: '';
  background-image: url(../images/slider-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 60px;
  width: 1159px;
  height: 797px;
  z-index: -1;
}

.main-banner .left-content {
  margin-right: 15px;
}

.main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  color: #30cf14;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 50px;
  color: #2a2a2a;
  margin-bottom: 20px;
}

.main-banner .left-content p {
  margin-bottom: -80px;
  margin-right: 45px;
}

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 20;
  margin-top: -50px;
  /* Adjust the value to move the image up */
}

.main-banner .right-image img {
  max-width: 470px;
}


/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .main-banner .left-content p {
    text-align: center;
    margin: 10px 0;
    /* Adjust vertical spacing */
  }

  .main-banner .left-content p {
    padding: 0 20px;
    /* Add some padding for better readability */
  }

  .main-banner .left-content h6 {
    margin-top: -55px;
  }

}

/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/

#about {
  padding-top: 70px;
  padding-bottom: 80px;
}

.about-right-content p {
  font-weight: 400;
  font-size: 15px;
  text-align: justify;
}

.about-left-image img {
  margin-right: 45px;
}

.about-right-content p {
  margin-top: 20px;
  margin-bottom: 45px;
}

@media only screen and (max-width: 768px) {
  .about-right-content p {
    text-align: center;
    margin: -40px auto 50px auto;
    /* Adjust vertical position and center horizontally */
    display: block;
    max-width: 90%;
    /* Ensure it fits well on smaller screens */
  }
}

.about-left-video {
  margin: 0;
  padding: 0;
  border: none;
  /* Remove any default borders */
  outline: none;
  /* Remove outlines */
  overflow: hidden;
  /* Ensure no overflow */
  position: relative;
}

.about-left-video video {
  display: block;
  /* Removes any extra space below the video */
  object-fit: cover;
  /* Ensures the video fills the container */
  width: 90%;
  height: 100%;
  border: none;
  /* Remove border on the video itself */
  outline: none;
  /* Remove outline */
  box-shadow: none;
  /* Remove any shadow around the video */
}

/* Adding a white border under the video */
.about-left-video {
  border-bottom: 5px solid white;
  /* You can adjust the thickness here */
}

@media (max-width: 992px) {
  .about-left-video {
    display: none;
    /* Hide the content */
  }
}

@media (max-width: 768px) {
  .about-left-video {
    display: none;
    /* Hide the content */
  }
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

.skill-item {
  text-align: center;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}

.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}

.progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress .progress-left {
  left: 0;
}

.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.first-skill-item .progress .progress-bar {
  border-color: #30cf14;
}

.second-skill-item .progress .progress-bar {
  border-color: #015401;
}

.third-skill-item .progress .progress-bar {
  border-color: #9bf556;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progress .progress-right {
  right: 0;
}

.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 25px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}

.progress .progress-value div {
  margin-top: 10px;
}

.progress .progress-value span {
  font-size: 18px;
  text-transform: none;
  color: #afafaf;
  font-weight: 300;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}

.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}

.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}

.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}

.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}

@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}

@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}

@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}

@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}

.progress {
  margin-bottom: 1em;
}

/* ------- Vision and Mission ------- */
.card {
  border: none;
  background: white;
  /* Subtle gradient for a classy look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Light shadow for depth */
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Card Title Styling */
.card-title {
  font-size: 1.5rem;
  color: #015401;
  /* Professional blue for the title */
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

/* Card Text Styling */
.card-text {
  color: #555;
  /* Neutral text color for readability */
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}

.card:hover {
  transform: scale(1.05);
  /* Slight zoom effect on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  /* More prominent shadow on hover */
  background: white;
}

/* 
---------------------------------------------
services
--------------------------------------------- 
*/

.our-services {
  padding-top: 90px;
  overflow: hidden;
  position: relative;
}

.our-services:before {
  content: '';
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0px;
  width: 414px;
  height: 861px;
  z-index: 1;
}

.our-services:after {
  content: '';
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 677px;
  height: 759px;
  z-index: 1;
}

.our-services .section-heading {
  margin-bottom: 80px;
}

.our-services .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  position: relative;
  z-index: 2;
}

.our-services .item {
  position: relative;
  z-index: 222;
}

.services-item {
  border-radius: 25px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin: 15px;
}

.services-item .thumb {
  position: relative;
  border-radius: 50px;
}

.services-item:hover .down-content h4,
.services-item:hover .down-content span {
  color: #30cf14;
}

.services-item .thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
  overflow: hidden;
}

.services-item .down-content {
  background-color: #fff;
  text-align: center;
  padding: 18px 0px;
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
}

.services-item .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 8px;
  transition: all .3s;
}

.services-item .down-content span {
  font-size: 15px;
  color: #afafaf;
  transition: all .3s;
}

.our-services .owl-nav {
  display: inline-block !important;
  position: absolute;
  top: 250px;
  max-width: 1320px;
}

/* .our-services .owl-nav .owl-prev {
  margin-right: -1150px;
}

.our-services .owl-nav .owl-next {
  position: absolute;
  left: calc(100% - -1450px); 
}

.our-services .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  font-size: 30px;
  background-color: #eee;
  border-radius: 50%;
  color: #fff;
  transition: all 0.5s;
}

.our-services .owl-nav span:hover {
  color: #fff;
  background-color: #30cf14;
} */

.image-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  /* Semi-transparent background */
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  /* Optional */
  background-color: transparent;
  /* Ensure no solid color behind the image */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  /* Optional */
}

/* Close Button */
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  /* Smaller size for X */
  color: #fff;
  cursor: pointer;
  z-index: 2;
  /* Ensure the close button is always on top */
  background: rgba(0, 0, 0, 0.6);
  /* Semi-transparent background for better visibility */
  padding: 3px 8px;
  /* Smaller padding */
  border-radius: 5px;
  user-select: none;
}

/* Close Button Hover */
.close:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
}

/* Responsive Design */
@media (max-width: 768px) {
  .image-modal {
    padding-top: 60%;
    /* Add padding to create the 10% view effect */
  }

  .modal-content {
    max-width: 95%;
    max-height: 85%;
  }

  .close {
    top: 5px;
    right: 5px;
    font-size: 18px;
    /* Even smaller on mobile */
    padding: 2px 6px;
    /* Adjust padding for mobile */
  }
}

/* 
---------------------------------------------
services mix
--------------------------------------------- 
*/

.section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.section-heading .line-dec {
  margin: 0 auto;
}

.show-up {
  position: relative;
  z-index: 200;
}


.thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
}

.post-item {
  margin-bottom: 62px;
}

.last-post-item {
  margin-bottom: 0px;
}

.post-item .thumb {
  display: inline-block;
  /* float: left; */
  margin-right: 30px;
}

.post-item .thumb img {
  border-radius: 23px;
  display: inline-block;
}

.post-item .right-content {
  padding-top: 20px;
}

.post-item .right-content span.category {
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #015401;
  border-radius: 18px;
  display: inline-block;
}

.post-item .right-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.post-item .right-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}

/*** Team ***/
.team-item img {
  transition: .5s;
}

.team-item:hover img {
  transform: scale(1.1);
}

.team-item .team-social {
  position: absolute;
  width: 38px;
  top: 50%;
  left: -38px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  transition: .5s;
}

.team-item .team-social .btn {
  color: var(--primary);
  background: #FFFFFF;
}

.team-item .team-social .btn:hover {
  color: #FFFFFF;
  background: var(--primary);
}

.team-item:hover .team-social {
  left: 0;
}

/* ---------------------------------------------
    contact
--------------------------------------------- */
.contact-us {
  padding-top: 130px;
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  align-items: center;
  /* Center items horizontally */
}

.contact-us .section-heading .line-dec {
  margin: 0 auto;
}

.contact-us .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.contact-box {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
  width: 350px;
  height: 190px;
  box-sizing: border-box;
}

.contact-box h3 {
  font-weight: bold;
}

.contact-box p {
  color: #333;
  margin: 5px 0;
}

/* Logo Styling */
.contact-logo {
  max-width: 300px;
  margin: auto;
  display: block;
}

/* Responsive Styling */
@media (max-width: 1024px) {
  .contact-box {
    width: 100%;
    height: auto;
    padding: 15px;
  }

  .contact-logo {
    max-width: 35%;
  }
}

@media (max-width: 768px) {
  .contact-us {
    padding-top: 100px;
  }

  .contact-box {
    width: 100%;
    height: auto;
    padding: 15px;
  }

  .contact-logo {
    max-width: 80%;
  }
}

.col-lg-6.offset-lg-3 {
  margin-bottom: -40px;
  /* Reduce as needed */
  padding-bottom: 0;
  /* Remove padding if unnecessary */
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background-image: url(../images/footer.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
}

footer p {
  text-align: center;
  margin: 20px 0px;
  color: #fff;
}

footer p a {
  color: #fff;
  transition: all .5s;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }

  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 992px) {
  .intro-banner:before {
    display: none;
  }

  form#contact {
    overflow: hidden;
  }

  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }

  .main-banner .left-content {
    margin-right: 0px;
  }

  .main-banner {
    text-align: center;
    padding: 226px 0px 30px 0px;
  }

  .main-banner:before {
    display: none;
  }

  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }

  .features-item {
    margin-bottom: 45px;
  }

  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }

  .skill-item {
    margin-bottom: 30px;
  }

  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;
    ;
  }

  .project .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }

  .service-item {
    text-align: center;
  }

  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }

  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }

  .post-item {
    margin-bottom: 70px;
  }

  .our-services .owl-nav {
    display: none !important;
  }

  .contact-info {
    margin-top: 60px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }

  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }

  .main-banner .info-stat {
    margin-bottom: 15px;
  }

  .service-item {
    text-align: center;
    padding: 30px;
  }

  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .service-item .right-content {
    display: inline-block;
  }

  .project .naccs .menu div .thumb {
    padding: 5px;
  }

  .project .icon img {
    margin: 0px;
  }

  .project ul.nacc li.active {
    padding: 45px;
  }

  .project .naccs .menu div {
    font-size: 0px;
  }

  .project ul.nacc li .right-image img {
    float: none;
  }

  .our-services .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }

  .our-services .section-heading .line-dec {
    margin: 0 auto;
  }

  .our-project .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }

  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }

  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }

  .post-item {
    margin-bottom: 30px;
  }

  .post-item .thumb img {
    max-width: 140px;
  }

  .post-item .right-content p {
    display: none;
  }

  .about-us .about-item {
    margin-top: 15px;
  }

  form#contact {
    padding: 30px;
  }
}

/* ---------------------------------------------
  Project System Section
  --------------------------------------------- */

  
.systems-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 24px;
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
}

.section-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #0078d4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.section-title {
  font-size: 48px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 24px;
  line-height: 1.2;
}

.section-description {
  font-size: 20px;
  color: #605e5c;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
  margin-bottom: 64px;
}

.system-panel {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  border: 1px solid #edebe9;
  cursor: pointer;
  position: relative;
}

.system-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-color);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.system-panel:hover::before {
  transform: scaleX(1);
}

.system-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.panel-color {
  --accent-color: #107c10;
}

.panel-header {
  padding: 32px 32px 24px;
  position: relative;
}

.panel-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.panel-title {
  font-size: 25px;
  font-weight: 600;
  color: #323130;
  margin-bottom: 8px;
  line-height: 1.2;
}

.panel-subtitle {
  font-size: 16px;
  color: #605e5c;
  font-weight: 400;
  margin-bottom: 16px;
}

.platform-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.platform-badge {
  background: #f3f2f1;
  color: #323130;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.panel-description {
  font-size: 15px;
  color: #605e5c;
  line-height: 1.5;
  margin-bottom: 10px;
}

.panel-content {
  padding: 0 32px;
}

.capabilities-list {
  list-style: none;
  margin-bottom: 32px;
}

.capabilities-list li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 15px;
  color: #323130;
}

.capabilities-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 16px;
  height: 16px;
  background: var(--accent-color);
  border-radius: 50%;
  opacity: 0.1;
}

.capabilities-list li::after {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 12px;
  width: 8px;
  height: 8px;
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 600;
}

.panel-footer {
  padding: 0 32px 32px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.see-more-container {
  text-align: center;
  margin-top: 40px;
  padding: 0 20px;
  margin-bottom: 40px;
}

.see-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #2f9917;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(48, 207, 20, 0.3);
}

.see-more-btn:hover {
  background: #28b012;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(48, 207, 20, 0.4);
}

.see-more-btn i {
  transition: transform 0.3s ease;
  font-size: 14px;
}

.see-more-btn.active i {
  transform: rotate(180deg);
}

/* Hidden projects styles */
.hidden-projects {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease-in-out;
}

.hidden-projects.show {
  max-height: 6000px;
}

.hidden-projects .projects-grid {
  padding-top: 30px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .see-more-btn {
    padding: 12px 30px;
    font-size: 14px;
  }
}

/* --- Learn Button with Arrow --- */
.learn-button {
  background: var(--accent-color);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: none;
  display: flex;
  align-items: center;
}

.learn-button::after {
  content: '→';
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.learn-button:hover {
  background: var(--accent-color);
  filter: brightness(1.1);
  transform: translateY(-1px);
  color: black;
}

.learn-button:hover::after {
  transform: translateX(4px);
}

.contact-button {
  background: #0078d4;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 16px;
}

.contact-button:hover {
  background: #106ebe;
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .systems-section {
    padding: 40px 16px;
  }

  .section-title {
    font-size: 36px;
  }

  .section-description {
    font-size: 18px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .panel-header,
  .panel-content,
  .panel-footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .panel-header {
    padding-top: 24px;
    padding-bottom: 20px;
  }

  .panel-footer {
    padding-bottom: 24px;
  }

  .contact-button {
    margin-left: 0;
    margin-top: 16px;
  }
}