/*-----------------------------------------
  KLAMON DESIGN - Custom CSS Styles
  style2.css

  Table of Contents:
  1. General Styles
  2. Header Styles
  3. Hero Section
  4. About Section
  5. Portfolio Section
  6. Services Section
  7. Contact Form
  8. Footer
  9. Responsive Styles
-------------------------------------------*/

html {
  scroll-behavior: auto !important;
}


/*-----------------------------------------
  1. General Styles
-------------------------------------------*/
:root {
  /* Add any custom variables here */
  --transition-standard: all 0.3s ease;
}

/* Set the body background to white */
body {
  overflow-x: hidden;
  background-color: #FFFFFF !important;
}

.body-modern-agency {
  background-color: #FFFFFF !important;
}

/* Override any template background colors */
.body-wrapper {
  background-color: #FFFFFF !important;
}

.dark .body-wrapper {
  background-color: var(--black) !important;
}

/*-----------------------------------------
  2. Header Styles
-------------------------------------------*/
/* Header Contact Button */
.header-contact-btn {
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  background-color: var(--primary) !important;
  border-color: transparent !important;
  color: var(--white) !important;
  padding: 10px 20px !important;
  border-radius: 40px !important;
  display: inline-block !important;
  line-height: 1 !important;
  transition: all 0.3s !important;
}

.header-contact-btn:hover {
  background-color: var(--primary) !important;
  opacity: 0.9 !important;
}

.dark .header-contact-btn {
  color: var(--black) !important;
}

/* Ensure proper vertical alignment in the header */
.main-menu > ul > li > a.header-contact-btn {
  padding: 10px 20px !important;
  margin-top: 0px !important;
}

/* Increase hamburger button size */
.header__navicon button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

/* Make the hamburger icon itself larger */
.header__navicon button i {
  font-size: 28px; /* Increase from default size */
  color: var(--primary);
}

/* Add some hover effect for better user experience */
.header__navicon button:hover {
  transform: scale(1.05);
}

/* Ensure good contrast in dark mode */
.dark .header__navicon button i {
  color: var(--white);
}

/* Fix for offcanvas menu - ensuring "About" link is styled properly */
.offcanvas-3__menu li a {
  display: inline-block;
  width: 100%;
}

.header-area.sticky {
    background-color: #fff;
}

/*-----------------------------------------
  3. Hero Section
-------------------------------------------*/
/* Custom adjustments for hero section spacing and alignment */
.hero-area {
  position: relative;
  margin-top: 100px; /* Create fixed space below header */
  padding-top: 40px; /* Additional padding inside the hero area */
}

/* Fix header positioning to ensure it stays above content */
.header-area {
  position: fixed !important; /* Force fixed positioning */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000 !important; /* Very high z-index to stay on top */
  background-color: #FFFFFF; /* Add background to prevent content showing through */
}

.dark .header-area {
  background-color: var(--black);
}

/* Ensure the header has height */
.header-area .header-area__inner {
  height: 100px !important;
  min-height: 100px !important;
}

.hero-area-inner {
  padding-top: 60px !important; /* Override any other styles */
  padding-bottom: 80px !important; /* Ensure good spacing at bottom */
  min-height: 400px; /* Minimum height to prevent squishing */
  position: relative;
  z-index: 1; /* Ensure hero content stays above other elements */
}

/* Fix the heading alignments */
.hero-area .section-title {
  margin-top: 0;
  line-height: 1.2;
  position: relative;
  z-index: 2; /* Keep the title above other elements */
  /* Basic styles for larger screens - mobile adjustments in responsive section */
  font-weight: 600;
}

/* Fix for "Exceptional Service" spacing */
.hero-area .section-content .content-end {
  margin-top: 50px !important; /* Add more spacing above Exceptional Service section */
}

.hero-area .section-content .text-wrapper .title {
  margin-bottom: 15px; /* Add space between title and text */
}

.heading-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.05em; /* Small gap between lines */
}

.heading-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.web-design, .seo-business, .automation-text {
  white-space: nowrap;
}

.automation-line {
  position: relative;
}

/* Replace the "O" in AUTOMATION with the image */
.automation-text {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Fix the O replacement container */
.o-replacement {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
  height: 1em;
  width: auto;
  margin: 0;
}

/* Style the O image to match text */
.o-image {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.02em; /* Fine-tune vertical alignment - adjust as needed */
  height: 1.05em; /* Match surrounding text height */
  width: auto;
}

/* Remove any existing .shape-2 setting that might interfere */
.shape-2 {
  display: none !important;
}

/* Fix dark mode */
.dark .o-image.show-light {
  display: none;
}

.dark .o-image.show-dark {
  display: inline-block;
}

/* Responsive adjustments */
@media only screen and (max-width: 991px) {
  .hero-area {
    margin-top: 80px;
    padding-top: 30px;
  }

  .header-area .header-area__inner {
    height: 80px !important;
    min-height: 80px !important;
  }

  .hero-area-inner {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    min-height: 350px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-area {
    margin-top: 70px;
    padding-top: 20px;
  }

  .header-area .header-area__inner {
    height: 70px !important;
    min-height: 70px !important;
  }

  .hero-area-inner {
    padding-top: 30px !important;
    padding-bottom: 50px !important;
    min-height: 300px;
  }

  .section-title {
    font-size: 2.5rem; /* Reduce font size on smaller screens */
  }

  .automation-line {
    margin-top: 0.25em; /* Add slight spacing when wrapping */
  }

  .o-image {
    height: 1em;
    top: -0.03em;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 2rem; /* Further reduce on very small screens */
  }

  /* Force line breaks at appropriate points */
  .heading-container {
    gap: 0.1em;
  }

  .o-image {
    height: 0.9em;
  }
}

/* Hero Section Styling Fixes */
.heading-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 60px;
  gap: 0.05em; /* Small gap between lines */
}

.heading-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
}

.web-design, .seo-business, .automation-text {
  white-space: nowrap;
  display: inline-block;
  font-size: 130px;
  line-height: 0.92;
  font-weight: 500;
}

@media only screen and (max-width: 1919px) {
  .web-design, .seo-business, .automation-text {
    font-size: 100px;
  }

  .heading-container {
    margin-top: 50px;
  }
}

@media only screen and (max-width: 1399px) {
  .web-design, .seo-business, .automation-text {
    font-size: 80px;
  }

  .heading-container {
    margin-top: 40px;
  }
}

@media only screen and (max-width: 1199px) {
  .web-design, .seo-business, .automation-text {
    font-size: 70px;
  }
}

@media only screen and (max-width: 991px) {
  .web-design, .seo-business, .automation-text {
    font-size: 60px;
  }

  .heading-container {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .web-design, .seo-business, .automation-text {
    font-size: 50px;
  }
}

@media (max-width: 575px) {
  .web-design, .seo-business, .automation-text {
    font-size: 40px;
  }

  .heading-container {
    margin-top: 20px;
    gap: 0.1em; /* Slightly larger gap for small screens */
  }
}

/* Fix the O replacement container */
.o-replacement {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
  height: 1em;
  width: auto;
  margin: 0;
}

/* Style the O image to match text */
.o-image {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.02em; /* Fine-tune vertical alignment */
  height: .85em; /* Match surrounding text height */
  width: auto;
}

/* Shape positioning */
.shape-1 {
  margin-right: 10px;
  height: 60px;
  width: auto;
}

@media only screen and (max-width: 1399px) {
  .shape-1 {
    height: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .shape-1 {
    height: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .shape-1 {
    height: 30px;
  }
}

/* Fix dark mode */
.dark .o-image.show-light {
  display: none;
}

.dark .o-image.show-dark {
  display: inline-block;
}

/* Fixed positioning for the hero section */
.hero-area {
  position: relative;
  padding-top: 0; /* Remove top padding */
  padding-bottom: 0; /* Remove bottom padding */
}

.hero-area-inner {
  padding-top: 100px !important; /* Set top padding to match original template */
  padding-bottom: 100px !important; /* Set bottom padding for proper spacing */
}

@media only screen and (max-width: 1399px) {
  .hero-area-inner {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

@media only screen and (max-width: 991px) {
  .hero-area-inner {
    padding-top: 150px !important;
    padding-bottom: 70px !important;
  }
}

@media only screen and (max-width: 767px) {
  .hero-area-inner {
    padding-top: 130px !important;
    padding-bottom: 60px !important;
  }
}

/*New code starts here */
@media only screen and (min-width: 992px) {
  .hero-area .section-content .content-end .text-wrapper {
    max-width: 33%; /* Makes the text wrapper about 1/3 of the page width */
    min-width: 400px; /* Ensures it doesn't get too small on medium screens */
  }
}

/* For medium screens, we'll use a larger percentage but still constrained */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .section-content .content-end .text-wrapper {
    max-width: 50%; /* Makes the text wrapper about half of the page width */
    min-width: 320px; /* Ensures a minimum readable width */
  }
}

/* Fix excessive white space above "WEB DESIGN" on mobile */

/* Reduce body padding on mobile */
@media only screen and (max-width: 991px) {
  body {
    padding-top: 80px; /* Reduce from 100px */
  }
}

@media only screen and (max-width: 767px) {
  body {
    padding-top: 70px; /* Further reduce for mobile */
  }
}

/* Reduce hero section top padding on mobile */
@media only screen and (max-width: 991px) {
  .hero-area-inner {
    padding-top: 40px !important; /* Significantly reduce from 150px */
    padding-bottom: 70px !important;
  }

  /* Reduce heading container top margin */
  .heading-container {
    margin-top: 20px; /* Reduce from 30px */
  }
}

@media only screen and (max-width: 767px) {
  .hero-area-inner {
    padding-top: 30px !important; /* Further reduce for smaller screens */
    padding-bottom: 60px !important;
  }

  .heading-container {
    margin-top: 15px; /* Further reduce margin */
  }
}

@media only screen and (max-width: 575px) {
  .hero-area-inner {
    padding-top: 20px !important; /* Minimal padding for very small screens */
    padding-bottom: 50px !important;
  }

  .heading-container {
    margin-top: 10px; /* Minimal margin for very small screens */
  }
}

/* Alternative approach - if you want even tighter spacing */
@media only screen and (max-width: 480px) {
  body {
    padding-top: 60px; /* Very minimal body padding */
  }

  .hero-area-inner {
    padding-top: 15px !important; /* Very tight top padding */
  }

  .heading-container {
    margin-top: 5px; /* Very minimal margin */
  }
}

/*-----------------------------------------
  4. About Section
-------------------------------------------*/
.about-area {
  background-color: #f8f8f8; /* Light grey background */
}

.dark .about-area {
  background-color: #1a1a1a; /* Darker background for dark mode */
}

/* Optional: Add subtle styling to enhance the section */
.about-area-inner {
  padding-bottom: 60px; /* Ensure consistent padding at bottom */
}

/* Optional: Add a subtle border at the bottom */
.about-area::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(0,0,0,0.05);
  margin: 0 auto;
  width: 100%;
}

.dark .about-area::after {
  background: rgba(255,255,255,0.05);
}

/* Explicitly restore the About section grid layout */
.about-area .section-content {
  display: grid !important;
  gap: 30px 60px !important;
  grid-template-columns: auto 1020px !important;
}

.about-area .section-title-wrapper {
  margin-bottom: 0 !important;
}

.about-area .section-title {
  font-size: 36px !important;
  line-height: 1.3 !important;
}

@media only screen and (max-width: 991px) {
  .about-area .section-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  #kla-who{
    font-size:28px !important;
  }
}

@media only screen and (max-width: 1919px) {
  .about-area .section-content {
    grid-template-columns: auto 850px !important;
  }
}

@media only screen and (max-width: 1399px) {
  .about-area .section-content {
    grid-template-columns: auto 780px !important;
  }
}

@media only screen and (max-width: 1199px) {
  .about-area .section-content {
    grid-template-columns: auto !important;
  }
}

/* Add more top padding to the About Us section */
.about-area {
    padding-top: 80px; /* Adding top padding to the section */
}

/* Keep existing responsive behavior but adjust top padding for different screen sizes */
@media only screen and (max-width: 991px) {
    .about-area {
        padding-top: 60px; /* Slightly less padding on medium screens */
    }
}

@media only screen and (max-width: 767px) {
    .about-area {
        padding-top: 40px; /* Even less padding on mobile screens */
    }
}

/* Additional styling to fix positioning of "Who we are" subtitle */
#kla-who {
    margin-bottom: 20px; /* Add some space below the subtitle */
    display: block; /* Ensure proper block display */
}

/*-----------------------------------------
  5. Portfolio Section
-------------------------------------------*/
.portfolio-area {
  overflow: hidden !important;
  position: relative;
}

.portfolio-area .section-header {
  text-align: center;
  margin-bottom: 50px;
}

.portfolio-area .section-title {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 15px;
}

.portfolio-area .text {
  font-size: 18px;
  color: var(--secondary);
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 0 auto;
  max-width: 1280px;
}

/* Portfolio Item */
.portfolio-item {
  position: relative;
}

.portfolio-box {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  height: 100%;
}

.portfolio-box .thumb {
  width: 100%;
  height: 0;
  padding-bottom: 66.67%; /* 2:3 aspect ratio */
  position: relative;
  overflow: hidden;
}

.portfolio-box .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.portfolio-box:hover .thumb img {
  transform: scale(1.05);
}

/* Portfolio Content - Overlay */
.portfolio-box .portfolio-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.portfolio-box:hover .portfolio-content {
  opacity: 1;
  visibility: visible;
}

.portfolio-box .portfolio-icon {
  position: absolute;
  right: 30px;
  top: 30px;
}

.portfolio-box .portfolio-title {
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 10px;
}

.portfolio-box .portfolio-meta {
  font-size: 14px;
  display: inline-block;
  color: var(--black-2);
}

/* Dark Mode */
.dark .portfolio-box .portfolio-content {
  background-color: rgba(18, 18, 18, 0.9);
}

.dark .portfolio-box .portfolio-title {
  color: var(--white);
}

.dark .portfolio-box .portfolio-meta {
  color: var(--white-2);
}

/*-----------------------------------------
  6. Services Section
-------------------------------------------*/
/* Klamon custom services section styles */
.klamon-service-area {
  padding: 80px 0;
  background-color: #f8f8f8; /* Light grey background - same as About section */
}

.dark .klamon-service-area {
  background-color: #1a1a1a; /* Darker background for dark mode */
}

/* Add subtle styling to enhance the section */
.klamon-service-area::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(0,0,0,0.05);
  margin: 0 auto;
  width: 100%;
}

.dark .klamon-service-area::after {
  background: rgba(255,255,255,0.05);
}

.klamon-section-spacing {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media only screen and (max-width: 991px) {
  .klamon-section-spacing {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .klamon-section-spacing {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.klamon-section-title {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 50px;
  text-align: center;
}

@media only screen and (max-width: 991px) {
  .klamon-section-title {
    font-size: 36px;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .klamon-section-title {
    font-size: 30px;
    margin-bottom: 30px;
  }
}

.klamon-services-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

@media only screen and (max-width: 991px) {
  .klamon-services-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.klamon-service-box {
  padding: 40px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.dark .klamon-service-box {
  background-color: #232323;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Disable hover state changes */
.klamon-service-box:hover {
  transform: translateY(0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.dark .klamon-service-box:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.klamon-number {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  display: block;
  margin-bottom: 20px;
}

.klamon-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--primary);
}

@media only screen and (max-width: 767px) {
  .klamon-title {
    font-size: 24px;
  }
}

.klamon-text {
  color: var(--secondary);
  margin-bottom: 20px;
}

.klamon-feature-list ul {
  padding-left: 0;
}

.klamon-feature-list ul li {
  margin-bottom: 10px;
  color: var(--primary);
}

.klamon-icon {
  position: absolute;
  top: 40px;
  right: 40px;
}

@media only screen and (max-width: 767px) {
  .klamon-icon {
    top: 30px;
    right: 30px;
  }
}

.klamon-has-fade-anim {
  opacity: 1;
  visibility: visible;
}


/*-----------------------------------------
  7. Brand Partners clients-area
-------------------------------------------*/
.clients-area {
  padding: 80px 0;
  background-color: #fff;
}

.clients-area .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

.clients-area .clients-title-wrapper {
  flex: 0 0 40%;
}

.clients-area .clients-text-wrapper {
  flex: 0 0 40%;
  padding-top: 8px;
}

.clients-area .section-title {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
}

.clients-area .clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
}

.clients-area .client-item {
  border: 1px solid #f0f0f0;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
}

.clients-area .client-item img {
  max-width: 80%;
  max-height: 60px;
  transition: opacity 0.3s;
  opacity: 0.8;
}

.clients-area .client-item:hover img {
  opacity: 1;
}

/* Responsive Styles */
@media only screen and (max-width: 1199px) {
  .clients-area .section-title {
    font-size: 42px;
  }

  .clients-area .client-item {
    height: 130px;
  }
}

@media only screen and (max-width: 991px) {
  .clients-area .section-header {
    flex-direction: column;
  }

  .clients-area .clients-title-wrapper,
  .clients-area .clients-text-wrapper {
    flex: 0 0 100%;
    margin-bottom: 30px;
  }

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

  .clients-area .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .clients-area {
    padding: 50px 0;
  }

  .clients-area .section-title {
    font-size: 32px;
  }

  .clients-area .section-header {
    margin-bottom: 40px;
  }

  .clients-area .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .clients-area .client-item {
    height: 120px;
    padding: 30px 15px;
  }
}

/*-----------------------------------------
  7. Testimonials
-------------------------------------------*/
/* Testimonials Section CSS */
.testimonial-area {
  background-color: #f9f9f9;
  padding: 100px 0;
  text-align: center;
}

@media only screen and (max-width: 991px) {
  .testimonial-area {
    padding: 80px 0;
  }
}

@media only screen and (max-width: 767px) {
  .testimonial-area {
    padding: 60px 0;
  }
}

.testimonial-area .section-title {
  font-size: 48px;
  text-align: center;
  margin-bottom: 60px;
  font-weight: 600;
  position: relative;
}

@media only screen and (max-width: 991px) {
  .testimonial-area .section-title {
    font-size: 42px;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .testimonial-area .section-title {
    font-size: 36px;
    margin-bottom: 30px;
  }
}

/* Yellow quote mark styling */
.testimonial-area .section-title:after {
  content: '';
  display: block;
  background-image: url('assets/imgs/icon/yellow-quote.png');
  width: 40px;
  height: 30px;
  margin: 25px auto 0;
}

.testimonial-item {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
}

@media only screen and (max-width: 767px) {
  .testimonial-item {
    padding: 0 15px;
  }
}

.testimonial-item .text {
  font-size: 24px;
  line-height: 1.6;
  margin-bottom: 50px;
  color: #333;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 991px) {
  .testimonial-item .text {
    font-size: 20px;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .testimonial-item .text {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
  }
}

.testimonial-item .meta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

@media only screen and (max-width: 767px) {
  .testimonial-item .meta {
    margin-top: 30px;
  }
}

.testimonial-item .meta img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

@media only screen and (max-width: 767px) {
  .testimonial-item .meta img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
}

.testimonial-item .name {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
}

@media only screen and (max-width: 991px) {
  .testimonial-item .name {
    font-size: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .testimonial-item .name {
    font-size: 18px;
    margin-bottom: 3px;
  }
}

.testimonial-item .post {
  font-size: 16px;
  color: #666;
}

@media only screen and (max-width: 767px) {
  .testimonial-item .post {
    font-size: 14px;
  }
}

/* Pagination dots at bottom */
.testimonial-pagination {
  text-align: center;
  margin-top: 50px;
}

@media only screen and (max-width: 767px) {
  .testimonial-pagination {
    margin-top: 30px;
  }
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #ddd;
  opacity: 1;
  margin: 0 5px;
}

.swiper-pagination-bullet-active {
  background: #000;
  width: 25px;
  border-radius: 5px;
}

/* Swiper initialization for testimonials */
.testimonial-active {
  overflow: visible;
}


/* Testimonials Section CSS - Add to your style2.css file */
.testimonial-area {
  background-color: #f9f9f9;
  padding: 100px 0;
  text-align: center;
}

.testimonial-area .testimonial-area-inner {
  padding: 0;
}

.testimonial-area .section-title {
  font-size: 48px;
  text-align: center;
  margin-bottom: 60px;
  font-weight: 600;
  position: relative;
}

/* Yellow quote mark styling */
.testimonial-area .section-title:after {
  content: '';
  display: block;
  background-image: url('assets/imgs/icon/yellow-quote.png');
  width: 40px;
  height: 30px;
  margin: 25px auto 0;
}

.testimonial-item {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.testimonial-item .text {
  font-size: 24px;
  line-height: 1.6;
  margin-bottom: 50px;
  color: #333;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-item .meta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.testimonial-item .meta img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.testimonial-item .name {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
}

.testimonial-item .post {
  font-size: 16px;
  color: #666;
}

/* Pagination dots styling - make sure these are visible */
.testimonial-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 50px;
  position: relative;
  z-index: 10;
}

.testimonial-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #ddd;
  opacity: 1;
  display: inline-block;
  border-radius: 50%;
}

.testimonial-pagination .swiper-pagination-bullet-active {
  background: #000;
  width: 25px;
  border-radius: 5px;
}


/* Make quote image yellow */
.testimonial-area .section-title:after {
  content: '';
  display: block;
  background-image: url('../imgs/icon/quote-2.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  margin: 20px auto 0;
  filter: brightness(0) saturate(100%) invert(96%) sepia(42%) saturate(7466%) hue-rotate(325deg) brightness(103%) contrast(104%);
}



/*-----------------------------------------
  7. Contact Form
-------------------------------------------*/
.contact-form-wrapper {
  margin-top: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form {
  width: 100%;
}

.contact-form .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.contact-form .form-group {
  flex: 1;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 18px 25px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 40px;
  font-size: 16px;
  color: var(--primary);
  font-family: var(--font_plusjakartasans);
  transition: all 0.3s;
}

.contact-form textarea {
  border-radius: 25px;
  min-height: 150px;
  resize: vertical;
  margin-bottom: 20px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.contact-form .form-submit {
  text-align: center;
  margin-top: 30px;
}

.contact-form .wc-btn-primary {
  min-width: 200px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Form validation styles */
.contact-form input.error,
.contact-form textarea.error {
  border-color: #dc3545;
}

.form-success-message {
  background-color: var(--primary);
  color: var(--white);
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  margin-top: 20px;
  display: none;
}

.dark .form-success-message {
  background-color: #2c2c2f;
}

/* Dark mode adjustments */
.dark .contact-form input,
.dark .contact-form textarea {
  color: var(--white);
}

/* Contact section header centering */
.cta-area .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 50px;
}

.cta-area .section-title-wrapper {
  margin-bottom: 20px;
}

.cta-area .section-title {
  text-align: center;
  font-size: 42px;
  margin-bottom: 15px;
}

.cta-area .shape-arrow {
  margin-top: 20px;
  animation: bounce 2s infinite;
}

/* Simple bounce animation for the arrow */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
  60% {
    transform: translateY(-7px);
  }
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
  .cta-area .section-title {
    font-size: 32px;
  }

  .cta-area .section-header {
    margin-bottom: 30px;
  }
}

/*-----------------------------------------
  8. Footer
-------------------------------------------*/
/* Footer Redesign - Black background with white text */
.footer-area {
  background-color: #121212;
  color: #ffffff;
  padding: 30px 0;
}

.footer-area .copyright-area-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-area .copyright-text p {
  color: #ffffff;
  margin: 0;
}

.footer-area .footer-nav-list {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.footer-area .footer-nav-list li {
  list-style: none;
}

.footer-area .footer-nav-list li a {
  color: #ffffff;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.footer-area .footer-nav-list li a:hover {
  opacity: 1;
  color: #ffffff;
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
  .footer-area .copyright-area-inner {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .footer-area .footer-nav-list {
    justify-content: center;
  }
}


/*-----------------------------------------
  9. Responsive Styles
-------------------------------------------*/

/*-----------------------------------------
  9.1 Desktop Adjustments (1200px+)
-------------------------------------------*/
@media only screen and (min-width: 1200px) {
  /* Add any desktop-specific styles here */
}

/*-----------------------------------------
  9.2 Tablet Adjustments (768px - 1199px)
-------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .main-menu > ul > li > a.header-contact-btn {
    margin-top: 20px !important;
  }

  /* Tablet specific hero section adjustments */
  .hero-area .section-title {
    font-size: 70px;
  }

  /* Portfolio adjustments for tablets */
  .portfolio-grid {
    gap: 25px;
  }

  .portfolio-box .portfolio-content {
    padding: 25px;
  }

  .portfolio-box .portfolio-title {
    font-size: 22px;
  }
}

/*-----------------------------------------
  9.3 Mobile Adjustments (481px - 767px)
-------------------------------------------*/
@media only screen and (max-width: 991px) {
  /* Header adjustments */
  .header-area .header-area__inner {
    height: 80px;
    padding: 0 15px;
  }

  .header__logo img {
    max-width: 120px;
  }

  /* Hero section */
  .hero-area-inner {
    padding-top: 130px;
    padding-bottom: 60px;
  }

  .hero-area .section-title {
    font-size: 60px;
    line-height: 1.1;
  }

  .hero-area .section-title .shape-1,
  .hero-area .section-title .shape-2 {
    margin-top: -14px;
    height: 45px;
  }

  .hero-area .section-content .content-end {
    display: flex;
    flex-direction: column;
    margin-inline-start: 0;
    margin-top: 40px !important; /* Keep important to ensure it applies */
    gap: 30px;
  }

  .hero-area .section-content .text-wrapper {
    max-width: 100%;
  }

  .hero-area .section-content .btn-wrapper {
    align-self: flex-start;
  }

  .hero-area .section-content .circle-text {
    margin-inline: 0;
  }

  /* Portfolio adjustments */
  .portfolio-grid {
    gap: 20px;
  }

  .portfolio-box .portfolio-title {
    font-size: 20px;
  }

  .portfolio-box .portfolio-content {
    padding: 20px;
  }

  .portfolio-box .portfolio-icon {
    right: 20px;
    top: 20px;
  }

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

  .portfolio-area .section-header {
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  /* Hamburger button adjustments */
  .header__navicon button {
    width: 44px;
    height: 44px;
  }

  .header__navicon button i {
    font-size: 24px;
  }

  /* Hero section */
  .hero-area .section-title {
    font-size: 40px;
    line-height: 1.1;
  }

  .hero-area .section-title .shape-1,
  .hero-area .section-title .shape-2 {
    margin-top: -10px;
    height: 30px;
  }

  .hero-area .section-content .text-wrapper .title {
    font-size: 20px;
  }

  .hero-area .section-content .text-wrapper .text {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 15px;
  }

  .hero-area .section-content .circle-text {
    width: 110px;
    height: 110px;
  }

  /* Contact form adjustments */
  .contact-form .form-row {
    flex-direction: column;
    gap: 15px;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 15px 20px;
  }

  .contact-form-wrapper {
    margin-top: 30px;
  }

  /* Portfolio adjustments for mobile */
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .portfolio-area .section-title {
    font-size: 30px;
  }

  .portfolio-area .text {
    font-size: 16px;
  }

  .portfolio-area .section-header {
    margin-bottom: 30px;
  }
}

/*-----------------------------------------
  9.4 Very Small Screens (480px and below)
-------------------------------------------*/
@media only screen and (max-width: 480px) {
  .hero-area .section-title {
    font-size: 32px;
  }

  .hero-area .section-title .shape-1,
  .hero-area .section-title .shape-2 {
    margin-top: -8px;
    height: 24px;
  }

  .contact-form .wc-btn-primary {
    min-width: 180px;
    padding: 0 15px;
  }

  /* Portfolio adjustments for very small screens */
  .portfolio-box .portfolio-content {
    padding: 15px;
  }

  .portfolio-box .portfolio-icon {
    right: 15px;
    top: 15px;
  }

  .portfolio-box .portfolio-title {
    font-size: 18px;
  }
}

/* Additional adjustment for extra small screens */
@media only screen and (max-width: 400px) {
  .hero-area .section-title {
    font-size: 28px;
  }
}

/* Additional spacing classes */
.section-spacing {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media only screen and (max-width: 991px) {
  .section-spacing {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .section-spacing {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.mb-50 {
  margin-bottom: 50px;
}

.mt-3 {
  margin-top: 15px;
}

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


/* Add to style2.css or update the existing header styles */

/* Ensure header uses flexbox for proper alignment */
.header-area__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  padding: 0 15px;
}

/* Logo positioning */
.header__logo {
  flex-shrink: 0;
}

/* Navigation positioning */
.header__nav.pos-right {
  margin-left: auto; /* Force to right side */
  display: flex;
  align-items: center;
}

/* Ensure menu is displayed horizontally */
.main-menu > ul {
  display: flex;
  align-items: center;
  gap: 30px; /* Space between menu items */
}

/* Mobile adjustments */
@media only screen and (max-width: 1199px) {
  .header__nav.pos-right {
    display: none; /* Hide main navigation on mobile */
  }

  .header__navicon {
    display: block; /* Show hamburger menu on mobile */
  }
}

@media only screen and (min-width: 1200px) {
  .header__navicon {
    display: none; /* Hide hamburger on desktop */
  }
}


/*Consistent Header Styles*/

/* Consistent heading styles across all sections */
/* Consistent heading styles with specific exceptions */
.portfolio-area .section-title,
.testimonial-area .section-title,
.klamon-section-title {
  font-family: var(--font_plusjakartasans);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 50px;
  color: var(--primary);
}

/* Special styling for "Who we are" */
#kla-who {
  font-family: var(--font_plusjakartasans);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 30px;
  color: var(--primary);
}

/* Special styling for "Our brand partners" */
.clients-area .section-title {
  font-family: var(--font_plusjakartasans);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  margin-bottom: 40px;
  color: var(--primary);
}

/* Center heading containers except for clients area */
.portfolio-area .section-header,
.about-area .subtitle-wrapper,
.testimonial-area .section-heading {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Left align clients area heading container */
.clients-area .section-title-wrapper {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Responsive adjustments */
@media only screen and (max-width: 991px) {
  .portfolio-area .section-title,
  .testimonial-area .section-title,
  .klamon-section-title {
    font-size: 34px;
    margin-bottom: 35px;
  }

  #kla-who {
    font-size: 22px;
    margin-bottom: 25px;
  }

  .clients-area .section-title {
    font-size: 28px;
    margin-bottom: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .portfolio-area .section-title,
  .testimonial-area .section-title,
  .klamon-section-title {
    font-size: 30px;
    margin-bottom: 30px;
  }

  #kla-who {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .clients-area .section-title {
    font-size: 26px;
    margin-bottom: 30px;
  }
}

/*Scrolling fix */
/* Fix for sections being hidden under fixed header */
section[id] {
  scroll-margin-top: 120px; /* Adjust based on your header height */
}

/* Specifically for the about section */
#about-us {
  scroll-margin-top: 120px;
}

/* Ensure header stays fixed properly */
.header-area {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999 !important;
  background-color: #FFFFFF;
  transition: all 0.3s ease;
}

/* Add padding to body to prevent content from going under header */
body {
  padding-top: 100px; /* Match your header height */
}

/* Ensure animated elements are visible by default */
.has_fade_anim {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* When animation is triggered */
.has_fade_anim.animated {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fallback for when JavaScript is disabled */
.no-js .has_fade_anim {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Specific fix for the about section subtitle */
#kla-who {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force visibility for critical content */
.section-subtitle,
.section-title,
.text-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
}


/* Fix for star icon visibility */
.shape-1 {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-right: 10px;
  height: 60px;
  width: auto;
  vertical-align: middle;
}

/* Ensure the star is properly aligned within the line */
.web-design-line {
  display: flex;
  align-items: center;
}

/* Make sure the fade animation doesn't hide the star */
.shape-1.has_fade_anim {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Responsive adjustments for the star */
@media only screen and (max-width: 1399px) {
  .shape-1 {
    height: 50px;
  }
}

@media only screen and (max-width: 991px) {
  .shape-1 {
    height: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .shape-1 {
    height: 30px;
  }
}

/* Ensure the image is visible regardless of animation state */
.show-light {
  display: inline-block !important;
}

/* Dark mode visibility */
.dark .show-light {
  display: none !important;
}

.dark .show-dark {
  display: inline-block !important;
}

/* Fix for contact form visibility */
.contact-form-wrapper {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.contact-form {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure form elements are visible */
.contact-form .form-row,
.contact-form .form-group,
.contact-form input,
.contact-form textarea,
.contact-form button {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix for fade animation that might be hiding the form */
.contact-form-wrapper.has_fade_anim {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure the contact section is visible */
#contact {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.cta-area {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Form message styles */
.form-error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 15px;
  margin-top: 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #f5c6cb;
}

/* Honeypot field - make sure it's invisible */
input[name="_gotcha"] {
  position: absolute !important;
  left: -5000px !important;
  height: 0 !important;
  width: 0 !important;
}

/* Full-screen Mobile Navigation Fixes */

/* Make navigation cover the entire screen including header */
.fullscreen-nav {
  position: fixed;
  top: 0 !important; /* Start from very top */
  left: 0;
  width: 100%;
  height: 100vh !important; /* Full viewport height */
  background-color: #000;
  z-index: 99999 !important; /* Higher than header */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Prevent scrolling */
}

.fullscreen-nav.active {
  opacity: 1;
  visibility: visible;
}

.fullscreen-nav-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Center the navigation menu properly */
.fullscreen-nav-menu {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.fullscreen-nav-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
}

.fullscreen-nav-menu ul li {
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
  text-align: center;
  width: 100%;
}

.fullscreen-nav.active .fullscreen-nav-menu ul li {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation for menu items */
.fullscreen-nav.active .fullscreen-nav-menu ul li:nth-child(1) {
  transition-delay: 0.1s;
}

.fullscreen-nav.active .fullscreen-nav-menu ul li:nth-child(2) {
  transition-delay: 0.2s;
}

.fullscreen-nav.active .fullscreen-nav-menu ul li:nth-child(3) {
  transition-delay: 0.3s;
}

.fullscreen-nav.active .fullscreen-nav-menu ul li:nth-child(4) {
  transition-delay: 0.4s;
}

.fullscreen-nav.active .fullscreen-nav-menu ul li:nth-child(5) {
  transition-delay: 0.5s;
}

/* Center menu item text */
.fullscreen-nav-menu ul li a {
  display: block;
  font-size: 36px;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  padding: 15px 20px;
  text-decoration: none;
  text-align: center;
  font-family: var(--font_plusjakartasans);
  width: 100%;
}

.fullscreen-nav-menu ul li a:hover {
  color: #ccc;
  transform: translateY(-3px);
}

/* Close button positioning - make it more prominent */
.close-fullscreen-nav {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-fullscreen-nav:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.close-fullscreen-nav span {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #fff;
  transform-origin: center;
}

.close-fullscreen-nav span:first-child {
  transform: rotate(45deg);
}

.close-fullscreen-nav span:last-child {
  transform: rotate(-45deg);
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
  .close-fullscreen-nav {
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }

  .fullscreen-nav-menu ul li a {
    font-size: 28px;
    padding: 12px 15px;
    letter-spacing: 1px;
  }

  .fullscreen-nav-menu ul li {
    margin-bottom: 30px;
  }

  .close-fullscreen-nav span {
    width: 18px;
  }
}

@media only screen and (max-width: 480px) {
  .fullscreen-nav-menu ul li a {
    font-size: 24px;
    padding: 10px 15px;
  }

  .fullscreen-nav-menu ul li {
    margin-bottom: 25px;
  }

  .close-fullscreen-nav {
    width: 40px;
    height: 40px;
  }

  .close-fullscreen-nav span {
    width: 16px;
  }
}

/* Ensure body doesn't scroll when menu is open */
body.menu-open {
  overflow: hidden;
  height: 100vh;
}

/* Force hide fullscreen navigation on load */
#fullscreen-nav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Show only when active class is applied */
#fullscreen-nav.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide old mobile navigation */
.offcanvas-3__area {
  display: none !important;
}