/*
Theme Name: Most
Theme URI: https://themeforest.net/user/madsparrow/portfolio
Author: Mad Sparrow
Author URI: https://themeforest.net/user/madsparrow
Description: Most Creative Agency and Portfolio Theme – It is a modern, stylish and versatile WordPress theme, ideal for creative agencies, portfolio designers, photographers, freelancers and startups. The theme offers unique animations, responsive design, SEO optimization, and powerful settings to create impressive websites without programming skills.
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, custom-menu, post-formats, sticky-post, translation-ready, editor-style, featured-images, footer-widgets, theme-options, threaded-comments
Text Domain: most
Requires PHP: 7.4
Tested up to: 6.7
*/

body {
  /* font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    sans-serif; */
  background: #f3f5f6;
  /* line-height: 1.6;
  color: #333;
  padding: 40px 0; */
}

.header-btn {
  display: inline-block;
  margin-left: 25px;
  padding: 10px 20px;
  background-color: #11354d;
  color: #ffffff;
  text-decoration: none;
  border-radius: 23px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
/* .home .hero-slider .header-btn{
    background-color:#FFD400 !important;
    color:#000 !important;
} */
.header-btn:hover {
  background-color: #11354d !important;
  color: #f1f5f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
body[data-theme="dark"] .header-btn {
  background-color: #60a5fa !important;
  color: #f1f5f9 !important;
}
/* Hide button on mobile devices */
@media (max-width: 768px) {
  .header-btn {
    display: none !important;
  }
}

/* ---------single project page styles--------- */
.project-single {
  position: relative;
  z-index: 1;
  /* padding-bottom: 150px;  */
}
/* Fix footer overlap on single project page */
@media (max-width: 1024px) {
  .project-single + .ms-footer,
  .single .ms-footer {
    position: relative !important;
    bottom: auto !important;
  }
}
.project-overview {
  padding: 100px 100px 80px 100px;
  max-width: 100%;
  background: #ffffff;
}

/* Dark mode for project overview */
body[data-theme="dark"] .project-overview {
  background: #101010 !important;
}
.project-overview h2 {
  color: #262626;
}
.description img {
  width: 25px; /* adjust icon size */
  height: auto; /* maintain aspect ratio */
}
/* .container {
  max-width: 100%;
  background: #1a8dc6;

  margin: 0 auto;
  padding: 0 20px;
} */

.project-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 120px 0;
  color: #fff;
  width: 100%;
  min-height: 55vh;
}

@media (max-width: 767px) {
  .project-hero {
    width: 100%;
    min-height: 40vh;
  }
}

.explore-project-button {
  background-color: #11354d;
  border-radius: 999px;
  padding: 13px 30px;
  border: none;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.6s ease,
    color 0.6s ease;
  margin-bottom: 20px;
  word-spacing: 2px;
}

.explore-project-button:hover {
  background-color: #11354d;
  color: #fff;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* shadow around button */
  transition: all 0.3s ease; /* smooth effect */
}
.project-hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: linear-gradient(
    180deg,
     rgba(193, 212, 233, 0.6) 0%,
     rgba(21, 56, 80, 0.8) 100%
  
  ); */
  /* background: linear-gradient(
  180deg,
  rgba(193, 212, 233, 0.3) 0%,   
  rgba(21, 56, 80, 0.4) 100%     
); */
  background: linear-gradient(
    180deg,
    rgba(193, 212, 233, 0) 0%,
    rgba(193, 212, 233, 0.3) 45%,
    #11354d 100%
  );

  /* Dark mode overlay gradient */
  body[data-theme="dark"] .project-hero .overlay {
    background: linear-gradient(
      180deg,
      rgba(193, 212, 233, 0.6) 0%,
      rgba(28, 28, 28, 1) 100%
    );
  }

  z-index: 1;
}

.project-hero h1 {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
}

.project-hero h1::first-letter {
  text-transform: uppercase;
}

.project-hero .tagline {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  width: 60%;
  margin-top: 15px;
}
.hero-content {
  /* position: relative;
  z-index: 100; */
  position: absolute;
  bottom: 50px;
  left: 100px;
  color: #fff;
  z-index: 2;
}
/* .project-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 28px;
  background: #ffffff;
  color: #111;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s ease;
  margin-bottom: 20px;
}

.project-btn:hover {
  background: #f3f4f6;
  transform: translateY(-2px);
} */
.project-details {
  /* padding: 40px 0; */
  padding: 100px 100px 60px 100px;
  max-width: 100%;
  background: #ffffff;
}

body[data-theme="dark"] .project-details {
  background: #101010 !important;
}
body[data-theme="dark"] .project-details h3 {
  color: #f1f5f9 !important; /* your desired font color */
}

.project-details ul {
  list-style: none;
  padding: 0;
}

.project-details li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
/* .project-bottom {
  padding: 60px 0;
  background: #f9fafb;
} */

.description {
  background-color: #ffffff;
  border: 1px solid #e8ebee;
  border-radius: 16px;
  padding: 30px 25px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  margin-top: 40px;
}
/* Dark mode for project overview */
body[data-theme="dark"] .description {
  background-color: #18181b !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.6) !important;
}

.description h4 {
  margin-bottom: 18px;
  font-weight: 700;
  margin-top: 15px;
}
.description-text {
  color: #475569; /* your desired font color */
  font-size: 15px; /* optional */
  font-weight: 500;
  line-height: 1.6; /* optional for readability */
}
/* Dark mode for project overview */
body[data-theme="dark"] .description-text {
  color: #94a3b8 !important; /* your desired font color */
}
body[data-theme="dark"] .project-gallery h3 {
  color: #f1f5f9 !important; /* your desired font color */
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 15px;
}

/* Headings */
h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #1a1a1a;
  letter-spacing: -0.5px;
}
.project-overview h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #1a1a1a;
  letter-spacing: -0.5px;
}

/* Dark mode h3 color */
body[data-theme="dark"] .project-overview h3 {
  color: #f1f5f9 !important;
}

/* Key Features Section */
.key-features {
  display: flex;
  flex-direction: column;
  /* gap: 25px; */
}
/* Feature item container with image + text */
.feature-item-wrapper {
  display: flex;
  align-items: center; /* Vertically center image and text */
  gap: 15px; /* Space between image and text */
  margin: 10px 0; /* Top and bottom spacing */
}

/* Image container */
.feature-item-wrapper .feature-image {
  flex-shrink: 0; /* Prevent image from shrinking */
  display: block;
  max-width: 50px; /* Adjust image width */
  height: auto; /* Maintain aspect ratio */
}
.feature-image {
  border-radius: 10px;
  overflow: hidden;
}

/* Text content */
.feature-item-wrapper .feature-item {
  display: flex;
  flex-direction: column; /* Stack heading and paragraph */
  justify-content: center; /* Center vertically */
}

/* Heading */
.feature-item-wrapper .feature-item h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
  color: #2d2d2d;
}

body[data-theme="dark"] .feature-item-wrapper .feature-item h4 {
  color: #f1f5f9 !important; /* your desired font color */
}
body[data-theme="dark"] .feature-item-wrapper .feature-item p {
  color: #94a3b8 !important; /* your desired font color */
}
/* Paragraph */
.feature-item-wrapper .feature-item p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}
.feature-item {
  /* border-bottom: 1px solid #eaeaea; */
  padding-bottom: 20px;
}

.feature-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.feature-item h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #2d2d2d;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.feature-item p {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
}

/* Services Provided Section - Box Grid Style */

/* .services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 5px;
}

.service-box {
  flex: 0 0 calc(50% - 10px); 
  background-color: transparent;
  border-radius: 8px;
  padding: 25px 15px;
  text-align: start;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid #eaeaea;
}

.service-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

.service-box i {
  color: #11354d;
  font-size: 32px;
  margin-bottom: 15px;
  display: block;
}

.service-box span {
  font-size: 16px;
  font-weight: 500;
  color: #444;
  display: block;
}
body[data-theme="dark"] .service-box span {
  color: #94a3b8 !important; 
}
body[data-theme="dark"] .service-box:hover {
  background-color: #242424;
}

body[data-theme="dark"] .service-box {
  border: 1px solid #11354d1a;
  background-color: #18181b;
} */

.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 5px;
}

.service-box {
  flex: 0 0 calc(50% - 10px);
  background-color: transparent;
  border-radius: 8px;
  padding: 25px 15px;
  text-align: start;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid #11354d1a;
}

.service-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

.service-box span {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
  display: block;
}

body[data-theme="dark"] .service-box span {
  color: #94a3b8 !important;
}

body[data-theme="dark"] .service-box:hover {
  background-color: #242424;
}

body[data-theme="dark"] .service-box {
  border: 1px solid #11354d1a;
  background-color: #18181b;
}

/* Responsive Design */
@media (max-width: 768px) {
  .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .col-md-6:first-child {
    margin-bottom: 40px;
  }

  h3 {
    font-size: 24px;
  }

  .service-box {
    flex: 0 0 100%; /* Full width on mobile */
  }
}

/* Add some spacing between sections */
/* .project-details {
  background: #fff;
  padding: 50px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
} */

/* Bold styling for feature headings to match image */
/* .feature-item h4 {
  font-weight: 700;
  font-size: 16px;
} */

/* Subtle text styling for descriptions */
/* .feature-item p {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
} */

.project-gallery {
  padding: 80px 100px 60px 100px;
  max-width: 100%;
  background: #f3f5f6;
}

/* Dark mode for project overview */
body[data-theme="dark"] .project-gallery {
  background: #242424 !important;
}

.swiper {
  margin-top: 30px;
}
/* .visual-showcase-first {
  display: flex;
} */

/* Visual Showcase Header */
.visual-showcase-first {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
  flex-wrap: wrap;
  gap: 20px;
}

.visual-showcase-first h3 {
  font-size: 32px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.visual-showcase-first p {
  font-size: 16px;
  color: #666;
}

/* Navigation Arrows Container */
.visual-showcase-first > div:last-child {
  display: flex;
  gap: 15px;
}

/* Swiper Navigation Arrows */
.swiper-button-next,
.swiper-button-prev {
  position: static !important; /* Override Swiper default positioning */
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0;
  color: #333;
  transition: all 0.3s ease;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 18px;
  font-weight: 600;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #11354d;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3);
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Swiper Container */
.visual-slider {
  width: 100%;
  overflow: hidden;
  padding: 10px 0 30px;
}

/* Swiper Slides - Fixed size cards */
.swiper-slide {
  height: auto;
  padding: 10px; /* Space for shadow */
}

/* Image Card - Fixed size container */
.image-card {
  width: 100%;
  height: 280px; /* Fixed height for all cards */
  border-radius: 16px;
  overflow: hidden; /* Ensures image stays within rounded corners */
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.1),
    0 5px 15px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  background-color: #f0f0f0; /* Placeholder background while loading */
}

.image-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Images - Object fit cover for consistent sizing */
.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintains aspect ratio while covering the area */
  display: block;
  transition: transform 0.5s ease;
}

.image-card:hover img {
  transform: scale(1.05); /* Subtle zoom effect on hover */
}

/* Remove the nth-child variations to keep all cards same size */
/* .swiper-slide:nth-child(even) .image-card {
            height: 260px;
        }

        .swiper-slide:nth-child(3n) .image-card {
            height: 300px;
        } */

/* Responsive Design */
@media (max-width: 768px) {
  .visual-showcase-first {
    flex-direction: column;
    align-items: flex-start;
  }

  .visual-showcase-first h3 {
    font-size: 28px;
  }

  .image-card {
    height: 220px; /* Smaller on mobile */
  }
}

/* Add pagination styling if needed */
.swiper-pagination {
  position: relative;
  margin-top: 30px;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #ccc;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #11354d;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 15px;
}

/* Challenges & Solutions Section */
.project-bottom {
  /* padding: 60px 0; */
  /* padding: 40px 0; */
  padding: 90px 100px 140px 100px;
  max-width: 100%;
  background: #ffffff;
}
body[data-theme="dark"] .project-bottom {
  background: #101010;
}

body[data-theme="dark"] .project-bottom h3 {
  color: #f1f5f9;
}

h3 {
  font-size: 32px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 30px;
  letter-spacing: -0.5px;
}

/* Numbered List Styling */
.challenges-list,
.solutions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.challenge-item,
.solution-item {
  /* margin-bottom: 30px;
  padding-left: 50px;
  position: relative; */

  display: flex;
  align-items: start; /* vertical center */
  gap: 12px;
  margin-bottom: 12px;
}

.challenge-item:last-child,
.solution-item:last-child {
  margin-bottom: 0;
}

/* Number Badge */
.item-number {
  font-weight: 600;
  font-size: 16px;
  color: #153850;
  min-width: 30px;

  font-size: 16px;
  font-weight: 600;
}

body[data-theme="dark"] .item-number {
  color: #60a5fa;
}

/* Challenge Text */
.challenge-text,
.solution-text {
  font-size: 15px;
  color: #475569;
  line-height: 1.5;
}
body[data-theme="dark"] .challenge-text {
  color: #94a3b8;
}
body[data-theme="dark"] .solution-text {
  color: #94a3b8;
}
/* Solutions section specific styling (optional) */
/* .solution-item .item-number {
  background-color: #2196f3; /
} */

/* Responsive Design */



@media (max-width: 768px) {
  .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .col-md-6:first-child {
    margin-bottom: 40px;
  }

  h3 {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .challenge-item,
  .solution-item {
    padding-left: 45px;
  }

  .item-number {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

/* ---------home page styles--------- */
/* 
.home-projects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px 0;
}
.project-card-large {
  flex: 1 1 calc(50% - 10px); 
  min-width: 280px;
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.project-grid-small {
  flex: 1 1 calc(50% - 10px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  min-width: 280px;
}
.project-card-small {
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


.project-thumbnail {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.project-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-card-large .project-thumbnail {
  height: 260px;
}
.project-content {
  padding: 15px;
}
.project-title {
  margin: 0 0 10px;
  font-size: 1.2em;
  color: #101010 !important;
}
.project-card-large .project-title {
  font-size: 1.8em;
}

.project-excerpt {
  margin: 0 0 15px;
  color: #555;
}
.project-link {
  display: inline-block;
  color: #101010 !important;
  text-decoration: none;
  font-weight: 500;
}
.project-link:hover {
  text-decoration: underline;
  color: #2a2a2a !important;
}
@media (max-width: 600px) {
  .home-projects-grid {
    flex-direction: column;
  }
  .project-grid-small {
    grid-template-columns: 1fr;
  }
} */

//our packages start



.compare-packages-wrapper {
  width: 100%;
}

.compare-packages-table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  table-layout: fixed;
}

/* Dark mode for compare packages table headers */
body[data-theme="dark"] .compare-packages-table {
  border: 1px solid #1e293b;
}

.compare-packages-table th,
.compare-packages-table td {
  border: 1px solid #e2e8f0;
  padding: 16px;
  text-align: center;
  vertical-align: middle;
}
body[data-theme="dark"] .compare-packages-table th,
body[data-theme="dark"] .compare-packages-table td {
  border: 1px solid #1e293b;
}

/* Dark mode for compare packages table headers */
body[data-theme="dark"] .compare-packages-table th,
.compare-packages-table td {
  /* border: 1px solid #1E293B; */
}

.compare-packages-table th {
  background: #f8fafc;
  color: #1a1a1a;
  font-weight: 700;
}

/* Dark mode for compare packages table headers */
body[data-theme="dark"] .compare-packages-table th {
  background: #171f2e; /* Dark background */
  color: #f1f5f9; /* Light text color */
}

.compare-packages-table td {
  color: #1a1a1a;
  font-weight: 400;
}

.compare-packages-table td span.table-details {
  color: #1a1a1a;
}

body[data-theme="dark"] .compare-packages-table td span.table-details {
  color: #60a5fa;
}

body[data-theme="dark"] .compare-packages-table td {
  color: #f1f5f9; /* Light text color */
}

.compare-packages-table td:first-child,
.compare-packages-table th:first-child {
  text-align: left;
}

.compare-packages-table .check {
  font-size: 18px;
  color: #11354d;
  font-weight: 500;
}

.compare-packages-table .dash {
  font-size: 18px;
  color: #cbd5e1;
  font-weight: 500;
}

body[data-theme="dark"] .compare-packages-table .check {
  color: #60a5fa;
}
body[data-theme="dark"] .compare-packages-table .dash {
  color: #334155;
}

@media (max-width: 768px) {
  .compare-packages-table th,
  .compare-packages-table td {
    padding: 12px;
    /* font-size: 13px; */
  }
}

//our packages end





/* Slider container */
.projects-slider-container {
  width: 100%;
  position: relative;
  padding-bottom: 60px; /* space for navigation buttons */
}

.recent-projects-slider {
  width: 100%;
  overflow: hidden;
}

.recent-projects-slider .swiper-wrapper {
  display: flex;
  gap: 10px;
}

/* Image box */
.project-image-box {
  width: 100%;
  aspect-ratio: 16 / 9; /* landscape ratio */
  overflow: hidden;
  border-radius: 10px;
}

.project-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text box below image */
.project-text-box {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-item-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 5px;
}

.project-item-description {
  font-size: 14px;
  color: #555;
  margin: 0;
}

body[data-theme="dark"] .project-item-description {
  color: #94a3b8;
}

/* Navigation buttons */
.recent-projects-next,
.recent-projects-prev {
  position: static !important; /* override Swiper default */
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 10px; /* spacing */
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Add arrows inside buttons */
.recent-projects-prev::after,
.recent-projects-next::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}

/* Rotate arrows for left/right */
.recent-projects-prev::after {
  transform: rotate(-135deg);
}
.recent-projects-next::after {
  transform: rotate(45deg);
}

/* Hover effect */
.recent-projects-next:hover,
.recent-projects-prev:hover {
  background: #11354d;
}

.recent-projects-next:hover::after,
.recent-projects-prev:hover::after {
  border-color: #fff; /* arrow turns white on hover */
}

/* Disabled buttons */
.recent-projects-next.swiper-button-disabled,
.recent-projects-prev.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Optional flex wrapper if needed */
.prev-next {
  display: flex !important;
  justify-content: flex-start;
  width: 100%;
  margin-top: 20px;
}

/* Gallery Grid */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

/* Gallery Card */
.grid-items {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Image Style (Landscape 16:9) */
.grid-items img {
  width: 100%;
  height: 100%;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Hover Zoom Effect */
.grid-items:hover img {
  transform: scale(1.05);
}

/* Load More Button Container */
.load-more-container {
  text-align: center;
  margin-top: 30px;
}

/* Load More Button */
#load-more-gallery {
  background-color: #153850;
  color: #ffffff;
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

#load-more-gallery:hover {
  background-color: #0f2f44;
}

/* Tablet */
@media (max-width: 992px) {
  .grid-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 576px) {
  .grid-gallery {
    /* grid-template-columns: 1fr; */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* default: 3 columns */
    gap: 15px; /* space between images */
  }
}

/* work page css start */
/* Wrapper */
.work-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 60px 20px !important;
}

/* Dropdown */
.project-filter {
  position: relative;
  margin-bottom: 20px;
}
#project-filter-btn {
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#project-filter-btn .arrow {
  transition: transform 0.3s ease;
}
#project-filter-btn .arrow.rotate {
  transform: rotate(180deg);
}

.project-dropdown {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
  width: 200px;
  z-index: 10;
}
.project-dropdown li {
  padding: 10px 15px;
  cursor: pointer;
}
.project-dropdown li:hover {
  background: #f0f0f0;
}

/* Grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Project Card */
.project-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: transparent; /* keep card background unchanged */
  box-shadow: none; /* no shadow effect */
  transition: none; /* no card transition */
}
.project-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s ease; /* smooth and slow zoom */
}
/* Subtle zoom of the image only */
.project-card:hover img {
  transform: scale(1.05); /* gentle zoom */
}
#load-more {
  display: block;
  margin: 40px auto 0 auto;
  background: transparent;
  color: #1a1a1a;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-size: 18px;
  font-weight: 400;
  padding: 0;
  transition: all 0.3s ease; /* smooth transition for hover */
}

#load-more:hover {
  color: #11354d;
  /* background-color: #f6f6f6;
  border-radius: 16px;
  padding: 10px 20px;
  text-decoration: none;  */
}
.project-filter select {
  padding: 10px 20px;
  border-radius: 30px;
  /* border: 1px solid #ddd; */
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='12' height='12' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E")
    no-repeat right 20px center;
  background-size: 12px;
  background-color: #11354d;
}
/* .project-filter {
  display: inline-block !important;
  position: relative;
}

.project-filter select {
  width: auto; 
  min-width: 120px; 
  max-width: 100%; 
  background-color: #11354d;
  color: #ffffff;
  padding: 13px 35px 13px 15px; 
  border-radius: 999px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  appearance: none; 
  -webkit-appearance: none;
  -moz-appearance: none;
}
.project-filter::after {
  content: '▼'; 
  position: absolute;
  top: 50%;
  right: 15px; 
  transform: translateY(-50%);
  pointer-events: none;
  color: #ffffff;
  font-size: 12px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start; 
}

.project-card {
  width: 100%;
  aspect-ratio: 1 / 1; 
  overflow: hidden;
  position: relative;
  display: block;
}

.project-link {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0; 
}

.project-card a {
  display: block;
  width: 100%;
  height: 100%;
}

.project-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; 
  display: block !important; 
}
.project-filter select option {
  background: #2b2b2b;
  color: #f1f5f9;
}

.project-filter select option:first-child {
  background-color: #11354d;
  color: #ffffff !important;
}

body[data-theme="dark"] .project-filter select {
  background-color: #61a5fa !important;
  color: #ffffff !important;
} */

/* work page css end */

/* Tablet */
@media (max-width: 1024px) {
  .project-overview {
    padding: 70px 50px 60px 50px;
  }
  .project-gallery {
    padding: 70px 50px 60px 50px;
  }
  .project-details {
    padding: 70px 50px 60px 50px;
  }
  .project-bottom {
    padding: 70px 50px 80px 50px;
  }
  .hero-content {
    bottom: 40px;
    left: 50px;
  }
  .challenge-item,
  .solution-item {
    padding-left: 0px;
  }
  .item-number {
    display: flex;
    align-items: center; /* vertical center */
  }
}

/* Mobile */
@media (max-width: 600px) {
  .project-overview {
    padding: 40px 20px;
  }
  .project-gallery {
    padding: 40px 20px;
  }
  .project-details {
    padding: 40px 20px 20px 20px;
  }
  .project-bottom {
    padding: 40px 20px 50px 20px;
    margin-bottom: 40px;
  }
  .challenge-item,
  .solution-item {
    padding-left: 0px;
  }
  .item-number {
    display: flex;
    align-items: center; /* vertical center */
  }
  .hero-content {
    bottom: 0px;
    left: 0px;
    padding: 20px;
  }
  .project-hero .tagline {
    width: 100%;
    margin-top: 15px;
  }
  .project-hero h1 {
    font-size: 35px;
    font-weight: 700;
  }

  .explore-project-button {
    margin-bottom: 15px;
  }

  .description .description-text {
    text-align: justify;
  }
  .description {
    padding: 25px 20px;
  }

  .challenge-item,
  .solution-item {
    gap: 0px;
    margin-bottom: 12px;
  }

  .project-hero .overlay {
    background: linear-gradient(
      180deg,
      rgba(193, 212, 233, 0) 0%,
      rgba(193, 212, 233, 0.3) 10%,
      #11354d 100%
    );

    body[data-theme="dark"] .project-hero .overlay {
      background: linear-gradient(
        180deg,
        rgba(193, 212, 233, 0.6) 0%,
        rgba(28, 28, 28, 1) 100%
      );
    }
  }
}

@media (min-width: 2560px) {
  .description-text {
    font-size: 30px;
  }
  .project-hero .tagline {
    font-size: 40px;
  }
  .project-hero h1 {
    font-size: 65px;
  }
  h3 {
    font-size: 40px;
  }
  .challenge-text,
  .solution-text {
    font-size: 30px;
  }
  .feature-item-wrapper .feature-item h4 {
    font-size: 30px;
  }
  .feature-item-wrapper .feature-item p {
    font-size: 26px;
  }
  .service-box span {
    font-size: 26px;
  }
  .item-number {
    font-size: 26px;
  }
  .description h4 {
    font-size: 32px;
  }
  .project-hero .tagline {
    width: 100%;
  }
  .explore-project-button {
    padding: 18px 40px;

    font-size: 26px;
  }
}

/* about us slider start */

.about-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.about-slide {
  display: none;
  width: 100%;
}

.about-slide.active {
  display: block;
  animation: fadeIn 0.8s ease-in-out;
}

.about-slide-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* ✅ 60% IMAGE */
.about-img {
  width: 60%;
  aspect-ratio: 740 / 493; /* keeps exact ratio */
  overflow: hidden;
  flex-shrink: 0;
  padding: 20px 100px 20px 0px;
}

.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps nice fill */
  display: block;
}

/* ✅ 40% CONTENT */
.about-content {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 50px 0px 50px 50px;
}

.about-content h1 {
  font-size: 60px;
  font-weight: 900;
  line-height: 60px;
  color: #1a1a1a;
  margin-bottom: 20px;
}

.about-content p {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #1a1a1ab2;
  margin-bottom: 20px;
}

.about-content button {
  background-color: #187386;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 5px;
  border-radius: 50px;
}

.about-content button:hover {
  opacity: 0.9;
}

/* simple fade */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .about-slide-inner {
    flex-direction: column;
	gap: 15px;

  }

  .about-img {
    height: auto;
  }

  .about-img img {
    height: auto;
  }

  /* ✅ 40% CONTENT */
  .about-content {
    width: 100%;
    align-items: flex-start;
    padding: 10px;
  }
  .about-img {
    width: 100%;
    align-items: flex-start;

    padding: 10px;
  }

  .about-content h1 {
    font-size: 25px;
    font-weight: 900;
    margin-bottom: 10px;
  }
	
}

/* about us slider end */

/* Target your button */
.header-cta .header-btn {
  background-color: #ffffff; /* white background */
  color: #000000; /* black text */
  padding: 10px 18px;
  border-radius: 999px; /* pill-shaped */
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

/* Hover effect */
.header-cta .header-btn:hover {
  background-color: #f1f1f1; /* light gray on hover */
  color: #000000;
}

/* Optional: push to right inside the switcher */
.ms_theme_mode .header-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Default: show both just in case */
.description_icon_dark,
.description_icon_light {
  display: inline-block; /* or block depending on your layout */
}

/* Dark mode: hide light icon, show dark icon */
body[data-theme="dark"] .description_icon_light {
  display: none;
}

body[data-theme="dark"] .description_icon_dark {
  display: inline-block;
}

/* Light mode: hide dark icon, show light icon */
body[data-theme="light"] .description_icon_dark {
  display: none;
}

body[data-theme="light"] .description_icon_light {
  display: inline-block;
}

/* product page slider css */
.product-content {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .product-content {
    padding: 10px;
    line-height: 1.4;
  }
}