/*

Breezed Template

https://templatemo.com/tm-543-breezed

*/

/* ---------------------------------------------
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
--------------------------------------------- 
*/
/* Imports Google Fonts (Poppins) for use in the template. */
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
/* Resets default browser styles for common HTML elements to ensure consistent rendering across different browsers. */
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;
}

/* Clears floats to prevent layout issues. */
.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%;
}

/* Removes default padding, margin, and list-style from unordered and ordered lists. */
ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Ensures HTML5 structural elements behave as block-level elements in older browsers. */
header, nav, section, article, aside, footer, hgroup {
  display: block;
}

/* Applies border-box model globally for easier box model calculations. */
* {
  box-sizing: border-box;
}

/* Sets base font family, weight, background color, and font size for the entire document. Also applies anti-aliasing for smoother text rendering. */
html, body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(25, 50, 75, 0.8) 0%, rgb(90, 90, 90) 100%);
  z-index: -1;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/assets/images/River.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -2;
}

/* Removes text decoration from all anchor tags. */
a {
  text-decoration: none !important;
}

/* Resets top and bottom margins for heading elements. */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* Resets bottom margin for unordered lists. */
ul {
  margin-bottom: 0px;
}

/* Sets font size, line height, and color for paragraph text. */
p {
  font-size: 14px;
  line-height: 25px;
  color: #777;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
/* Sets background and font family for the entire document. */
html,
body {
  background-color: transparent;
  font-family: 'Raleway', sans-serif;
}

/* Styles the text selection color. */
::selection {
  background: #0073bb;
  color: #fff;
}

::-moz-selection {
  background: #0073bb;
  color: #fff;
}

/* Adjusts layout for smaller screens (max-width: 991px) to fix mobile top/bottom margins and prevent horizontal overflow. */
@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;
  }
}

/* Mobile-first responsive typography */
@media (max-width: 640px) {
  html, body {
    font-size: 14px;
  }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.1rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.9rem; }
  p { 
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* Styles for a stroked button with transparent background and white border. */
a.main-stroked-button {
  font-size: 13px;
  border-radius: 25px;
  padding: 11px 25px;
  background-color: transparent;
  border: 2px solid #fff;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -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;
  min-height: 44px; /* Touch-friendly size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile button adjustments */
@media (max-width: 640px) {
  a.main-stroked-button,
  a.main-filled-button,
  button.main-button {
    font-size: 14px;
    padding: 12px 20px;
    min-height: 48px;
  }
}

/* Hover effect for the stroked button. */
a.main-stroked-button:hover {
  background-color: #fff;
  color: #0073bb;
}

/* Styles for a filled button with white background and blue text. */
a.main-filled-button {
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #fff;
  text-transform: uppercase;
  color: #1e1e1e;
  font-weight: 600;
  letter-spacing: 1px;
  -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;
}

/* Hover effect for the filled button. */
a.main-filled-button:hover {
  color: #fff;
  background-color: #0073bb;
}

/* Styles for a button with an icon, dark background, and white text. */
a.main-button-icon {
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #1e1e1e;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -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;
}

/* Styles for the icon within the button. */
a.main-button-icon i {
  margin-left: 5px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

/* Hover effect for the icon within the button. */
a.main-button-icon:hover i {
  padding-left: 5px;
}

/* Styles for a standard button with white background and dark text. */
button.main-button {
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  border-radius: 25px;
  padding: 10px 25px;
  background-color: #fff;
  text-transform: uppercase;
  color: #1e1e1e;
  font-weight: 600;
  letter-spacing: 1px;
  -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;
}

/* Hover effect for the standard button. */
button.main-button:hover {
  color: #fff;
  background-color: #0073bb;
}

/* Styles for a button with an icon, dark background, and white text. */
button.main-button-icon {
  border: none;
  outline: none;
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #1e1e1e;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -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;
}

/* Styles for the icon within the button. */
button.main-button-icon i {
  margin-left: 5px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

/* Hover effect for the icon within the button. */
button.main-button-icon:hover i {
  padding-left: 5px;
}

/* Styles for a text-based button with an icon. */
a.text-button-icon {
  text-transform: uppercase;
  color: #1e1e1e;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  -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;
}

/* Styles for the icon within the text button. */
a.text-button-icon i {
  margin-left: 5px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

/* Hover effect for the text button. */
a.text-button-icon:hover {
  color: #0073bb;
}

/* Hover effect for the icon within the text button. */
a.text-button-icon:hover i {
  padding-left: 5px;
}

/* Styles for subheadings within a section heading. */
.section-heading h6 {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  margin-top: 0px;
  margin-bottom: 0px;
}

/* Styles for main headings within a section heading. */
.section-heading h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-top: 20px;
  margin-bottom: 0px;
}


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

/* Styles for the header when it has a background (e.g., after scrolling). */
.background-header {
  background-color: rgba(0, 0, 0, 0.1);
  height: 60px!important; /* Consistent height with .header-area */
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2)!important;
}

/* Sets color for logo and navigation links in the background header state. */
.background-header .logo,
.background-header .main-nav .nav li a {
  color: #ffffff!important;
}

/* Hover effect for navigation links in the background header state. */
.background-header .main-nav .nav li:hover a {
  color: #ffffff!important; /* Set to white */
  opacity: 0.8; /* Slight fade on hover */
}

/* Active link color in the background header state. */
.background-header .nav li a.active {
  color: #ffffff!important; /* Set to white when active in background-header state */
  opacity: 1;
}

/* General styles for the header area. */
.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 80px; /* Adjusted header height for larger logo */
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
} 

/* Styles for the main navigation container. */
.header-area .main-nav {
  min-height: 80px; /* Adjusted min-height for larger logo */
  background: transparent;
}

/* Styles for the logo within the main navigation, including vertical alignment. */
.header-area .main-nav .logo {
  line-height: 200px; /* Adjusted for larger 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;
}

/* Styles for the logo image to center it vertically. */
.header-area .main-nav .logo img {
  height: 175px;
  width: auto;
  vertical-align: middle;
  margin-top: -37.5px;
}

/* Styles for the navigation menu. */
.header-area .main-nav .nav {
  float: right;
  margin-top: 40px; /* Adjusted for vertical centering */
  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;
}

/* Padding for individual navigation list items. */
.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

/* Styles for the search icon within the navigation. */
.header-area .main-nav .nav .search-icon {
  float: right;
  margin-left: 15px;
}

/* Styles for individual navigation links. */
.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #000000;
  text-transform: uppercase;
  -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: 50px;
  line-height: 25px;
  border: transparent;
  letter-spacing: 1px;
}

/* Sets initial color for navigation links. */
.header-area .main-nav .nav li a {
  color: #ffffff; /* Set to white for transparent header */
}

/* Hover color for non-active links. */
.header-area .main-nav .nav li:hover a {
  color: #ffffff; /* Consistent hover color */
  opacity: 0.8; /* Slight fade on hover */
}

/* Active page highlight color. */
.header-area .main-nav .nav li a.active {
  color: #ffffff; /* Consistent active color */
  opacity: 1; /* No fading on active */
}

/* Hover and active link colors when the header has a background. */
.background-header .main-nav .nav li:hover a {
  color: #ffffff!important; /* White when hovered in background-header state */
  opacity: 0.8;
}

/* Styles for submenu items. */
.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 35px;
}

/* Adds a dropdown arrow icon to submenu items. */
.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 18px;
  top: 12px;
}

/* Styles for the submenu arrow in the background header state. */
.background-header .main-nav .nav li.submenu:after {
  color: #7a7a7a;
}

/* Styles for the submenu dropdown. */
.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: 40px;
  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;
}

/* Resets padding for submenu list items. */
.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

/* Styles for submenu links. */
.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #fff;
  color: #7a7a7a!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;
  border-bottom: 1px solid #f5f5f5;
}

/* Hover effect for a decorative line on submenu links. */
.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

/* Shows the submenu on hover. */
.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;
}

/* Styles for the mobile menu trigger (hamburger icon). */
.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 100px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none; /* Hidden by default, shown on mobile */
}

/* Styles for the lines of the hamburger icon. */
.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;
}

/* Styles for hamburger icon lines in the background header state. */
.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;
}

/* Styles for the before/after pseudo-elements of the hamburger icon. */
.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%;
}

/* Styles for before/after pseudo-elements in the background header state. */
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

/* Adds content to the before/after pseudo-elements. */
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

/* Positions the middle line of the hamburger icon. */
.header-area .main-nav .menu-trigger span {
  top: 16px;
}

/* Positions the top line of the hamburger icon. */
.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;
}

/* Positions the bottom line of the hamburger icon. */
.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;
}

/* Transforms the hamburger icon into a close icon when active. */
.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%;
}

/* Styles for the top line of the active hamburger icon in the background header state. */
.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

/* Transforms the bottom line into part of the 'X' when active. */
.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;
}

/* Styles for the bottom line of the active hamburger icon in the background header state. */
.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

/* Styles for the sticky header. */
.header-area.header-sticky {
  min-height: 100px; /* Consistent min-height for sticky header */
}

/* Adjusts navigation margin for sticky header. */
.header-area.header-sticky .nav {
  margin-top: 40px !important;
}

/* Active link color for sticky header. */
.header-area.header-sticky .nav li a.active {
  color: #1e1e1e; /* Set to black for sticky header active link */
}

/* Adjusts navigation padding for smaller screens (max-width: 1200px). */
@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

/* Styles for mobile navigation (max-width: 767px). */
@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #fff;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #fff!important;
    opacity: 0.8;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: transparent;
    padding: 0px 15px;
    height: 70px;
    box-shadow: none;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
  }
  /* Add background when scrolled on mobile */
  .header-area.background-header {
    background-color: rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 15px;
  }
  .header-area .main-nav .logo img {
    height: 50px !important;
    margin-top: 10px !important;
  }
  .header-area .menu-trigger {
    display: block !important;
    top: 20px !important;
    right: 20px !important;
  }
  .header-area .main-nav .menu-trigger span,
  .header-area .main-nav .menu-trigger span:before,
  .header-area .main-nav .menu-trigger span:after {
    background-color: #fff !important;
  }
  .header-area .main-nav {
    overflow: visible;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0;
    padding: 20px 0;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -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 .nav.mobile-menu-open {
    display: block !important;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: none;
  }
  .header-area.header-sticky .nav {
    margin-top: 0 !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px 20px !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 16px !important;
    text-align: left;
  }
  .header-area .main-nav .nav li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    opacity: 0.8;
  }
  .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;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 14px;
    font-weight: 400;
    padding-left: 40px !important;
  }
  .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;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #fff;
    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;
  }
  
  /* Adjust content for fixed header */
  body {
    padding-top: 70px;
  }
}

/* Ensures navigation is displayed as flexbox on larger screens. */
@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/
/* ==== Main CSS === */
/* Styles for image containers to ensure images fill their space. */
.img-fill{
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center
}

/* Ensures images within .img-fill cover the entire area. */
.img-fill img {
  min-height: 100%;
  min-width: 100%;
  position: relative;
  display: inline-block;
  max-width: none;
}

/* Global box-sizing and font smoothing for consistent rendering. */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grid container with padding and max-width for content alignment. */
.Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}

/* Resets margins and padding for block boxes and slick sliders. */
.blocks-box,
.slick-slider {
  margin: 0;
  padding: 0!important;
}

/* Styles for individual slides in a slick slider. */
.slick-slide {
  float: left /* If RTL Make This Right */ ;
  padding: 0;
}

/* ==== Slider Style === */
/* Sets height and background for slider items. */
.Modern-Slider .item .img-fill{
  height:95vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* Ensure positioning context for pseudo-element */
}

.Modern-Slider .item .img-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 115, 187, 0.7), rgba(255, 255, 255, 1)); /* Blue (0.7 opacity) to white (0 opacity) gradient */
  z-index: 1; /* Ensure it's above the image but below text content */
}

/* Ensures content within slider info div is vertically aligned. */
.Modern-Slider .item .info > div{
  display:inline-block!important;
  vertical-align:middle;
}

/* Styles for the next arrow button in the slider. */
.Modern-Slider .NextArrow{
  position:absolute;
  top:50%;
  right:30px;
  border:0 none;
  background-color: transparent;
  text-align:center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color:#FFF;
  z-index:5;
  outline: none;
}

/* Sets the content for the next arrow icon. */
.Modern-Slider .NextArrow:before{
  content:'\f105';
}

/* Styles for the previous arrow button in the slider. */
.Modern-Slider .PrevArrow {
  position:absolute;
  top:50%;
  left:30px;
  border:0 none;
  background-color: transparent;
  text-align:center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color:#FFF;
  z-index:5;
  outline: none;
}

/* Sets the content for the previous arrow icon. */
.Modern-Slider .PrevArrow:before{
  content:'\f104';
}

/* Styles for a scroll-down indicator. */
.scroll-down {
  position: absolute;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  z-index: 10;
}

/* Styles for the scroll-down button. */
.scroll-down a {
  display: inline-block;
  background-color: #5fb759;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

/* Hides slick slider dots. */
ul.slick-dots {
  display: none!important;
}

/* Styles for text content within slider items. */
.Modern-Slider .text-content {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* Ensure it's above the blue filter (z-index: 1) */
}

/* Styles for h3 headings within slider items, with fade-out animation. */
.Modern-Slider .item h3 {
  margin-bottom: 25px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  color:#FFF;
  animation:fadeOutRight 1s both;
}

/* Styles for h5 headings within slider items, with fade-out animation. */
.Modern-Slider .item h5 {
  margin-bottom: 50px;
  font-size: 36px;
  font-weight: 100;
  letter-spacing: 2.5px;
  color:#FFF;
  overflow:hidden;
  animation:fadeOutLeft 1s both;
}

/* Margins for links within slider items. */
.Modern-Slider .item a {
  margin: 0 5px;
}

/* Fade-in animation for h3 when slider item is active. */
.Modern-Slider .item.slick-active h3{
  animation:fadeInDown 1s both 1s;
}

/* Fade-in animation for h5 when slider item is active. */
.Modern-Slider .item.slick-active h5{
  animation:fadeInLeft 1s both 1.5s;
}

/* Fast swipe-in animation for active slider items. */
.Modern-Slider .item.slick-active{
  animation:Slick-FastSwipeIn 1s both;
}

/* Styles for button container within slider. */
.Modern-Slider .buttons {
  position: relative;
}

/* Sets background for the modern slider. */
.Modern-Slider {background:#000;}

/* Styles for the scroll-down arrow at the bottom of the slider */
.scroll-down-arrow {
  position: absolute;
  bottom: 30px; /* Adjust as needed to position it above the next section */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
}

.scroll-down-arrow a {
  display: block;
  color: rgba(255, 255, 255, 0.7); /* Subtle white color */
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.scroll-down-arrow a:hover {
  color: #fff; /* Brighter white on hover */
}

.scroll-down-arrow p {
  margin-bottom: 5px;
  font-size: 16px; /* Ensure consistency with the link's font size */
  color: inherit; /* Inherit color from parent link */
}

.scroll-down-arrow i {
  font-size: 40px; /* Large V-shaped arrow */
  display: block;
  line-height: 1;
  color: inherit; /* Inherit color from parent link */
}


/* ==== Slick Slider Css Ruls === */
/* Base styles for slick slider. */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
/* Styles for the slick list (viewport). */
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
/* Focus and dragging styles for slick list. */
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
/* 3D transform for slick track and list for performance. */
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
/* Styles for the slick track (contains all slides). */
.slick-track{position:relative;top:0;left:0;display:block}
/* Clearfix for slick track. */
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
/* Hides track during loading. */
.slick-loading .slick-track{visibility:hidden}
/* Styles for individual slick slides. */
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
/* Prevents image dragging on slides. */
.slick-slide.dragging img{pointer-events:none}
/* Displays slides once initialized. */
.slick-initialized .slick-slide{display:block}
/* Hides slides during loading. */
.slick-loading .slick-slide{visibility:hidden}
/* Styles for vertical slick slides. */
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

/*
---------------------------------------------
about
---------------------------------------------
*/

/* Section padding and positioning for the about section. */
#about {
  padding: 120px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

/* Bottom border and padding for the container within the about section. */
#about .container {
  padding-bottom: 80px;
}

/* Margin for section heading in about section. */
#about .section-heading {
  margin-bottom: 10px;
}

/* Color for subheading in about section. */
#about .section-heading h6 {
  color: #5fb759;
}

/* Top margin for service items. */
#about .service-item {
  margin-top: 30px;
}

/* Styles for images within service items. */
#about .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

/* Styles for h4 headings within service items. */
#about .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

/* Styles for a main button with icon in about section. */
#about a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

/* Top margin for right text content in about section. */
#about .right-text-content {
  margin-top: 40px;
}

/* Styles for paragraph text in right text content. */
#about .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}


/*
---------------------------------------------
features
---------------------------------------------
*/

/* Padding for the features section. */
#features {
  padding-top: 80px;
  padding-bottom: 70px;
}

/* Bottom margin for individual feature items. */
#features .features-item {
  margin-bottom: 50px;
}

/* Floats feature icons to the left. */
.features-item .features-icon {
  float: left;
}

/* Left margin for feature content. */
#features .features-content {
  margin-left: 75px;
}

/* Styles for h4 headings within feature content. */
.features-item .features-content h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  margin-bottom: 15px;
}

/* Bottom margin for paragraph text within feature content. */
.features-item .features-content p {
  margin-bottom: 15px;
}



/*
---------------------------------------------
subscribe
---------------------------------------------
*/

/* Padding and background image for the subscribe section. */
#subscribe {
  padding: 80px 0px;
  background-image: url(../images/slide-02.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Centered text and white color for section heading in subscribe. */
#subscribe .section-heading {
  text-align: center;
  color: #fff;
  margin-bottom: 25px;
}

/* Centered text, font size, line height, and color for paragraph in subscribe. */
#subscribe p {
  text-align: center;
  font-size: 16px;
  line-height: 27px;
  color: #fff;
  margin-bottom: 40px;
}

/* Styles for input fields in the subscribe form. */
#subscribe input {
  width: 100%;
  height: 38px;
  border-radius: 19px;
  border: 1px solid #fff;
  background-color: transparent;
  padding: 0px 20px;
  font-size: 13px;
  color: #fff;
  outline: none;
}

/* Placeholder text color for subscribe form inputs. */
.subscribe-form ::-webkit-input-placeholder { /* Edge */
  color: #fff;
}

.subscribe-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

.subscribe-form ::placeholder {
  color: #fff;
}

/* Adjusts fieldset alignment for mobile in subscribe section. */
@media (max-width: 767px) {
  #subscribe fieldset {
    text-align: center;
    margin-bottom: 20px;
  }
}

/*
--------------------------------------------
testimonials
--------------------------------------------
*/
/* Padding and background image for the testimonials section. */
#testimonials {
  margin-top: 120px;
  padding: 80px 0px;
  padding: 120px 0px;
  background-image: url(../images/slide-03.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Centered text and white color for section heading in testimonials. */
#testimonials .section-heading {
  text-align: center;
  color: #fff;
  margin-bottom: 60px;
}

/* Styles for individual testimonial items. */
#testimonials .item {
  position: relative;
  text-align: center;
}

/* Styles for h4 headings within testimonial items. */
#testimonials .item h4 {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  margin-top: 22px;
  margin-bottom: 7px;
}

/* Styles for span elements (e.g., job titles) within testimonial items. */
#testimonials .item span {
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Styles for member thumbnail container. */
#testimonials .item .member-thumb {
  position: relative;
}

/* Styles for a hover effect overlay on member thumbnails. */
#testimonials .item .hover-effect {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.95);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

/* Centers content within the hover effect. */
#testimonials .item .hover-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* Shows the hover effect on item hover. */
#testimonials .item:hover .hover-effect {
  opacity: 1;
  visibility: visible;
}

/* Styles for social media icons within the hover effect. */
#testimonials .item .hover-effect ul li {
  display: inline-block;
  margin: 0px 5px;
}

/* Styles for social media links within the hover effect. */
#testimonials .item .hover-effect ul li a {
  width: 32px;
  height: 32px;
  display: inline-block;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 50%;
  color: #5fb759;
  -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;
}

/* Hover effect for social media links. */
#testimonials .item .hover-effect ul li a:hover {
  color: #fff;
  background-color: #5fb759;
}

/* Bottom padding for owl carousel in testimonials. */
#testimonials .owl-carousel {
  padding-bottom: 60px;
}

/* Positions owl carousel dots. */
.owl-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

/* Styles for individual owl carousel dots. */
.owl-dots .owl-dot {
  outline: none;
  height: 10px;
}

/* Styles for the dot indicator itself. */
.owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  margin: 0px 5px;
  outline: none;
  -webkit-transition: all 0.2s ease 0s;
  -moz-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
}

/* Styles for the active owl carousel dot. */
.owl-dots .active span {
  width: 10px;
  height: 10px;
  margin-bottom: -1px;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

/* Bottom margin for section heading in contact us. */
#contact-us .section-heading {
  margin-bottom: 50px;
}

/* Color for subheading in contact us. */
#contact-us .section-heading h6 {
  color: #5fb759;
}

/* Bottom margin for list items in left text content. */
#contact-us .left-text-content ul li {
  margin-bottom: 30px;
}

/* Font styles for list items in left text content. */
#contact-us .left-text-content ul li {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Right margin for images within list items. */
#contact-us .left-text-content ul li img {
  margin-right: 15px;
}

/* Padding and background image for the contact us section. */
#contact-us {
  padding: 120px 0px;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Top margin for the contact form. */
#contact {
  margin-top: 40px;
}

/* Styles for input and textarea fields in the contact form. */
.contact-form input,
.contact-form textarea {
  color: #7a7a7a;
  font-size: 15px;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 46px;
  outline: none;
  padding-top: 3px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}

/* Specific styles for textarea in contact form. */
.contact-form textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}

/* Placeholder text color for contact form inputs. */
.contact-form ::-webkit-input-placeholder { /* Edge */
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}


/* 
---------------------------------------------
footer
--------------------------------------------- 
*/

/* Padding and background gradient for the footer. */
footer {
  padding: 80px 0px;
  background-color: rgba(0, 0, 0, 0.1);
}

/* Styles for paragraph text in left footer content. */
footer .left-text-content p {
  color: #fff;
  font-size: 14px;
}

/* Styles for links in left footer content. */
footer .left-text-content a {
  color: #fff;
}

/* Floats right text content to the right in the footer. */
footer .right-text-content {
  float: right;
}

/* Styles for paragraph text in right footer content. */
footer .right-text-content p {
  color: #fff;
  font-size: 14px;
  margin-right: 15px;
  text-transform: uppercase;
}

/* Displays social media list items inline. */
footer .right-text-content ul li {
  display: inline-block;
}

/* Styles for social media links in the footer. */
footer .right-text-content ul li a {
  width: 32px;
  height: 32px;
  display: inline-block;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 50%;
  color: #5fb759;
  -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;
}

/* Hover effect for social media links in the footer. */
footer .right-text-content ul li a:hover {
  background-color: #5fb759;
  color: #fff;
}

/* Adjusts footer layout for smaller screens (max-width: 992px). */
@media (max-width: 992px) {
  footer .left-text-content p {
    text-align: center;
    margin-bottom: 30px;
  }
  footer .right-text-content {
    float: none;
    text-align: center;
  }
}


/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/
/* Styles for the preloader overlay. */
#preloader {
  overflow: hidden;
  background-image: linear-gradient(145deg, #339b9e 0%, #68cc98 100%);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 99999;
  color: #fff;
}

/* Styles for the preloader animation container. */
#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

/* Styles for individual animated circles in the preloader. */
#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

/* Animation delays for the preloader circles. */
#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

/* Keyframes for the jumper animation (scaling and opacity). */
@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* 
---------------------------------------------
search
--------------------------------------------- 
*/

/* Styles for the search overlay. */
#search {
  z-index: 9999;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translate(0px, -100%) scale(0, 0);
  -moz-transform: translate(0px, -100%) scale(0, 0);
  -o-transform: translate(0px, -100%) scale(0, 0);
  -ms-transform: translate(0px, -100%) scale(0, 0);
  transform: translate(0px, 0px) scale(1, 1);
  opacity: 1;
}
/* Styles for the search input field. */
#search input {
  position: absolute;
  top: 50%;
  width: 100%;
  color: white;
  background: rgba(0, 0, 0, 0);
  font-size: 60px;
  font-weight: 200;
  text-align: center;
  border: 0px;
  margin: 0px auto;
  margin-top: -51px;
  padding-left: 30px;
  padding-right: 30px;
  outline: none;
}
/* Styles for the main button within the search overlay. */
#search .main-button {
  color: #fff;
  position: absolute;
  text-transform: uppercase;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 25px;
  letter-spacing: 1px;
  transform: translateX(-15%);
  top: 50%;
  left: 50%;
  margin-top: 61px;
  margin-left: -45px;
  background-color: #5fb759;
  border: black;
}
/* Styles for the close button in the search overlay. */
#search .close {
  border-radius: 50%;
  position: fixed;
  top: 15px;
  right: 15px;
  color: #fff;
  background-color: #5fb759;
  outline: none;
  opacity: 1;
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 28px;
}
/* Shows the search overlay when it has the 'open' class. */
#search.open {
  -webkit-transform: translate(0px, 0px) scale(1, 1);
  -moz-transform: translate(0px, 0px) scale(1, 1);
  -o-transform: translate(0px, 0px) scale(1, 1);
  -ms-transform: translate(0px, 0px) scale(1, 1);
  transform: translate(0px, 0px) scale(1, 1);
  opacity: 1;
}


/* 
---------------------------------------------
portfolio
--------------------------------------------- 
*/

/* Top margin for filters in the projects section. */
#projects .filters {
  margin-top: 50px;
}
/* Resets padding for filter lists. */
#projects .filters ul {
  padding: 0;
}
/* Styles for individual filter list items. */
#projects .filters ul li {
  list-style: none;
  display: block;
  padding: 15px 0px;
  cursor: pointer;
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: #9a9a9a;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/* Styles for active and hovered filter items. */
#projects .filters ul li.active,
#projects .filters ul li:hover {
  color: #5fb759;
}
/* Top margin for filter content. */
#projects .filters-content {
  margin-top: 50px;
}
/* Styles for showing filter content. */
#projects .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}
/* Styles for hiding filter content. */
#projects .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}

/* Bottom margin for all filter items. */
#projects .filters-content .all {
  margin-bottom: 30px;
}

/* Styles for individual project items. */
#projects .filters-content .item {
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/* Hover effect for project items. */
#projects .filters-content .item:hover {
  opacity: 0.75;
}
/* Padding and box shadow for project item inner content. */
#projects .filters-content .item .p-inner {
  padding: 20px 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
/* Styles for h5 headings within project items. */
#projects .filters-content .item .p-inner h5 {
  font-size: 15px;
}
/* Styles for category text within project items. */
#projects .filters-content .item .p-inner .cat {
  font-size: 13px;
}
/* Ensures images within project items take full width. */
#projects .filters-content .item img {
  width: 100%;
}

/* Top padding for the projects section. */
#projects {
  padding-top: 120px;
}

/* Bottom margin for section heading in projects. */
#projects .section-heading {
  margin-bottom: 60px;
}

/* Color for subheading in projects. */
#projects .section-heading h6 {
  color: #5fb759;
}

.content-wrapper {
	width: 50%;
	margin: 0 auto;
}

/* Adjusts filter list items for smaller screens (max-width: 992px). */
@media (max-width: 992px) {
  #projects .filters ul li {
    display: inline-block;
    margin-right: 10px;
    padding: 0px;
  }
  #projects .section-heading {
    margin-bottom: 0px;
  }
}

@media (max-width: 767px) {
  .content-wrapper {
    width: 100%;
  }
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
  .header-area {
    height: 60px !important;
  }
  .header-area .main-nav .logo img {
    height: 45px !important;
    margin-top: 7px !important;
  }
  .header-area .main-nav .nav {
    top: 60px;
  }
  .Modern-Slider .item .img-fill {
    height: 100vh !important;
  }
  .Modern-Slider .text-content {
    width: 95% !important;
    padding: 0 10px;
  }
  .Modern-Slider .item h5 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  .Modern-Slider .item h3 {
    font-size: 14px !important;
  }
  
  /* Ensure sections have proper spacing on mobile */
  section {
    padding: 40px 0 !important;
  }
  
  /* Mobile-friendly form inputs */
  input, textarea, select {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Responsive tables */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Landscape mobile adjustments */
@media (max-width: 767px) and (orientation: landscape) {
  .header-area {
    height: 50px !important;
  }
  .header-area .main-nav .logo img {
    height: 40px !important;
    margin-top: 5px !important;
  }
  .header-area .main-nav .nav {
    top: 50px;
    max-height: calc(100vh - 50px);
  }
  .Modern-Slider .item .img-fill {
    height: 100vh !important;
  }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  /* Make all interactive elements larger for touch */
  a, button, input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Add more spacing between clickable elements */
  .nav li {
    margin-bottom: 5px;
  }
}