.card-custom {
      border-radius: 30px;
      box-shadow: 0 0 30px rgba(0,0,0,0.05);
      z-index: 1;
    }
    .graph-box {
      background: linear-gradient(135deg, #fce3e3, #d2d8f8);
      border-radius: 30px;
      padding: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
    }

    .ser-img{
      border-radius: 30px;
    }

    .chart-placeholder {
      width: 100%;
      height: 100%;
      background: url('https://via.placeholder.com/600x400?text=Chart') no-repeat center center;
      background-size: contain;
    }
    .badge-light-purple {
      background-color: #edeaff;
      color: #6a67ce;
    }
    .icon-dot {
      height: 10px;
      width: 10px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
    }

    @media (max-width: 768px) {
  .logos {
    width: 150px !important;
  }
}
.service-item {
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}



  #main-slider {
    max-width: 800px;
    margin: auto;
  }

  .slider-img {
    width: 100%;
    height: 400px; /* You can adjust this for your design */
    object-fit: cover;
    border-radius: 10px;
  }

  @media (max-width: 768px) {
    .slider-img {
      height: 250px;
    }
  }


  #branding-slider {
    max-width: 600px;
    margin: auto;
  }

  .square-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
    border-radius: 10px;
  }

  .slider-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /* splide section    */
  .our-work-section {
      padding: 30px 0;
    }
    .our-work-section > h1 {
      text-align: center;
      margin-bottom: 40px;
      font-size: 2.5rem;
      color: #2c3e50;
    }
    .category-group {
      margin-bottom: 50px;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .category-group > h2 {
      font-size: 1.8rem;
      margin-bottom: 10px;
      color: #3498db;
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
    }
    .category-group > h3 {
      font-size: 1.3rem;
      margin-top: 20px;
      margin-bottom: 15px;
      color: #555;
    }

    /* Splide Slide Styling for 9:16 Aspect Ratio */
    .splide__slide.reel-item {
      height: 320px; /* Base height for mobile-first approach */
      aspect-ratio: 9 / 16;
      background-color: #222; /* Darker background for videos */
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    .splide__slide.reel-item:hover {
        transform: scale(1.03);
    }

    .splide__slide.reel-item img,
    .splide__slide.reel-item video { /* Applied to both img and video in slide */
      width: 100%;
      height: 100%;
      object-fit: cover; /* Cover the 9:16 area, will crop if aspect ratio mismatches */
      display: block;
    }

    /* Responsive heights for slides */
    @media (min-width: 600px) {
        
      .splide__slide.reel-item {
        height: 380px;
      }
    }
    @media (min-width: 992px) {
      .splide__slide.reel-item {
        height: 450px;
      }
      
    }
    @media (min-width: 1200px) {
      .splide__slide.reel-item {
        height: 480px;
      }
    }

    /* Full-screen Modal Styling */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .modal-overlay.active {
      display: flex;
      opacity: 1;
    }
    .modal-content-wrapper {
      position: relative;
      max-width: 90vw;  /* Max width of content area */
      max-height: 90vh; /* Max height of content area */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* THIS IS KEY FOR MODAL VIDEO/IMAGE DISPLAY */
    .modal-content-wrapper img,
    .modal-content-wrapper video {
      display: block;
      max-width:90vw;   /* Max width relative to wrapper */
      max-height: 90vh;  /* Max height relative to wrapper */
      border-radius: 5px;
      box-shadow: 0 0 30px rgba(0,0,0,0.5);
      object-fit:scale-down; /* Ensures whole image/video is visible, letterboxing if needed */
    }

   
    @media (max-width: 600px) {
        .modal-close-btn {
            top: 10px;
            right: 10px;
            background-color: rgba(0,0,0,0.5);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content-wrapper { /* Allow full screen on small devices */
            max-width: 100vw;
            max-height: 100vh;
        }
    }

    .splide__arrow {
        background: rgba(0,0,0,0.4);
        color: white;
        width: 2.5em;
        height: 2.5em;
    }
    .splide__arrow:hover {
        background: rgba(0,0,0,0.6);
    }
    .splide__arrow svg {
        fill: white;
        width: 1em;
        height: 1em;
    }

    /* Full-screen Modal Styling */
/* ... (other modal styles remain the same) ... */

.modal-content-wrapper {
  position: relative; /* This is important for the absolute positioning of the button */
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #333; */ /* Optional: for visual debugging of wrapper area */
}

.modal-close-btn {
  position: absolute;
  top: 15px;        /* Position it a bit down from the top edge of modal-content-wrapper */
  right: 15px;       /* Position it a bit left from the right edge of modal-content-wrapper */
  width: 35px;       /* Give it a fixed size */
  height: 35px;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
  border: none;
  border-radius: 50%; /* Make it circular */
  color: #fff;
  font-size: 20px;   /* Adjust font size to fit the button */
  font-weight: bold;
  line-height: 35px; /* Vertically center the '×' (should match height) */
  text-align: center; /* Horizontally center the '×' */
  cursor: pointer;
  z-index: 1010;     /* Ensure it's above other content within the modal wrapper. 
                       modal-overlay is 1000. */
  display: flex;     /* Using flex for better centering */
  align-items: center;
  justify-content: center;
  padding: 0; /* Remove padding if using fixed width/height and flex centering */
  transition: background-color 0.2s ease;
}

.modal-close-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Remove the specific @media (max-width: 600px) styles for modal-close-btn 
   as the above style will now apply to all screen sizes. 
   Or, if you need minor adjustments for mobile, you can keep it but base it on this new style.
*/

/* Ensure modalMediaContent doesn't accidentally get a higher z-index */
#modalMediaContent {
    position: relative; /* Or leave as static, but ensure no z-index that competes */
    z-index: 1; /* Default, clearly below the close button's z-index: 1010 */
}

/* (Keep the rest of your CSS and HTML/JS the same) */

.product-design li{
    width: 40% !important;
    max-height: 350px;
}

@media screen and (max-width: 768px) {
    .product-design li{
        width: 95% !important;
    }
    
}



/* career css */
/* --- Modern & Responsive Careers Section --- */

.careers-section {
  padding: 80px 0;
  background-color: #f8f9fa; /* A light, clean background */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.careers-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 25px;
}

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

.careers-section .section-heading h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
}

.careers-section .section-heading p {
  font-size: 1.1rem;
  color: #7f8c8d;
  max-width: 600px;
  margin: 0 auto;
}

.career-cards-container {
  display: grid;
  /* This creates a responsive grid that automatically fits cards */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 30px;
}

.career-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.career-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.career-card .card-icon {
  font-size: 1.8rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #eaf2ff; /* Light blue background for icon */
  color: #4b8ef1; /* Your brand's blue color */
}

.career-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
}

.career-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #34495e;
  margin-bottom: 15px;
}

.career-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  flex-grow: 1; /* Pushes the button to the bottom */
}

.career-card ul li {
  color: #7f8c8d;
  margin-bottom: 10px;
  line-height: 1.6;
  padding-left: 28px;
  position: relative;
}

.career-card ul li::before {
  content: '\f00c'; /* Font Awesome checkmark icon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 4px;
  color: #27ae60; /* A nice green for the checkmark */
  font-size: 0.9rem;
}

.career-card .card-cta {
  font-size: 0.95rem;
  color: #7f8c8d;
  font-style: italic;
  margin-top: auto; /* Pushes button down if ul isn't long enough */
  margin-bottom: 25px;
}

.apply-button {
  display: inline-block;
  background-color: #4b8ef1;
  color: #ffffff;
  padding: 12px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.3s ease;
}

.apply-button:hover {
  background-color: #3a7bd5; /* A slightly darker blue on hover */
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .careers-section .section-heading h2 {
    font-size: 2rem;
  }
  
}

@media (max-width: 400px) {
  .career-cards-container {
    /* On very small screens, let cards be full width */
    grid-template-columns: 1fr;
  }
}

.box-item h4 p{
    /* color: #4b8ef1; */
    color: black;
    font-size: 20px;
    font-weight: 700;
  }






  /* --- Modern Services Section --- */

.services-section {
  padding: 0px 20px;
  background-color: #f7f9fc; /* A very light off-white/grey background */
  /* font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
}

.services-wrapper {
  /* max-width: 1100px; */
  margin: 0 auto;
  padding: 50px;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(45, 53, 64, 0.08);
  position: relative;
  overflow: hidden; /* This is crucial for the glow effect */
  z-index: 1;
}

/* The purple glow effect in the background */
.glow-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(190, 120, 255, 0.2), transparent 65%);
  transform: translate(-50%, -50%);
  filter: blur(100px);
  z-index: -1; /* Place it behind the content */
  pointer-events: none; /* Make it unclickable */
}

/* Decorative "NEW!" Badge */
.new-badge {
  position: absolute;
  top: 40px;
  right: 120px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #8A63D2;
  transform: rotate(15deg);
  font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
}

.new-badge::after {
  content: 'v';
  display: block;
  text-align: center;
}

.section-title {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 800;
  color: #4A4E69;
  margin-bottom: 20px;
}

.section-divider {
  border: 0;
  height: 1px;
  background-color: #e0e0e0;
  max-width: 80%;
  margin: 0 auto 40px auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 45px 35px;
  margin-bottom: 50px;
}

.service-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  z-index: 2; /* Ensure items are above the glow */
}

.service-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dae9ff; /* Light purple background for icons */
  color: #4b8ef1; /* Main purple color */
  font-size: 1.3rem;
  position: relative;
}

/* This creates the subtle secondary circle behind the icon */
.service-icon::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b8d5ff;
  border-radius: 50%;
  opacity: 0.3;
  transform: scale(1.3);
  z-index: -1;
}

.service-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #22223b;
  margin: 0 0 8px 0;
}

.service-content p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

.services-cta {
  text-align: center;
  margin-top: 30px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #9ac2ff;
}

.services-cta span {
  color: #555;
  margin-right: 5px;
}

.services-cta a {
  color: #4A4E69;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --- Responsive Design --- */

@media (max-width: 992px) {
  .services-wrapper {
    padding: 40px;
  }
  .section-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr; /* Switch to a single column */
    gap: 40px;
  }
  .new-badge {
    top: 20px;
    right: 30px;
    font-size: 1rem;
  }
  .section-title {
    font-size: 2.2rem;
  }
  .services-wrapper {
    padding: 30px 25px;
  }
}

@media (max-width: 480px) {
  .service-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .services-cta {
    font-size: 0.9rem;
  }
}






/* portfoliyo section */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bs-primary: #2c3e50;
    --bs-primary-rgb: 44, 62, 80;
    --bs-body-font-family: 'Inter', sans-serif;
    --navbar-height: 80px; /* Define navbar height as a variable */
}

body {
    background-color: #f7f8fa;
    font-family: var(--bs-body-font-family);
    color: #333;
}

.portfolio-section {
    background-color: #f7f8fa;
}

/* --- FILTER BAR STYLING --- */
.portfolio-filters-wrapper {
    background-color: rgba(247, 248, 250, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem;
    z-index: 101; /* High z-index */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    margin-bottom: 2.5rem; /* Space between bar and grid */
}

/* NEW CLASS: This class is added by JavaScript to make the bar sticky */
.is-sticky {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    width: 100%;
    
    /* Style overrides for the sticky state */
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-bottom: 1px solid #e5e7eb;
}
/* Re-applies a container to the content inside the fixed bar */
.is-sticky > div {
    max-width: 1140px;
    margin: 0 auto;
    padding: 1rem;
}

/* Placeholder to prevent content from jumping up */
.filter-placeholder {
    display: none;
}

#portfolio-search { border-radius: 50px; border: 1px solid #e5e7eb; background-color: #fff; transition: all 0.2s ease-in-out; }
#portfolio-search:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1); }
.portfolio-filters .nav-link { color: #4b5563; font-weight: 500; padding: 0.4rem 1rem; border-radius: 50px; transition: all 0.2s ease-in-out; }
.portfolio-filters .nav-link.active, .portfolio-filters .nav-link:hover { color: #fff; background-color: var(--bs-primary); }

/* --- PORTFOLIO CARD STYLING --- */
.portfolio-card { background-color: #ffffff; border: none; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; height: 100%; }
.portfolio-card:hover { transform: translateY(-6px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07); }
.card-media-wrapper { position: relative; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; }
.card-media-wrapper img, .card-media-wrapper video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.portfolio-card:hover .card-media-wrapper img { transform: scale(1.08); }
.portfolio-video, .portfolio-poster { position: absolute; top: 0; left: 0; }
.portfolio-poster { z-index: 2; transition: opacity 0.4s ease; }
.media-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; z-index: 3; pointer-events: none; }
.portfolio-card:hover .media-overlay { opacity: 1; }
.media-overlay i { color: rgba(255,255,255,0.8); font-size: 3rem; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }

/* --- CARD CONTENT & TYPOGRAPHY --- */
.card-body { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; }
.card-body .badge { font-size: 0.65rem; font-weight: 600; padding: 0.3em 0.7em; letter-spacing: 0.5px; text-transform: uppercase; align-self: flex-start; }
.card-title { font-weight: 600; font-size: 1.1rem; color: #1a1a1a; margin-bottom: 0.25rem; }
.card-text { font-size: 0.9rem; color: #6b7280; line-height: 1.5; margin-bottom: 0.5rem; }
.card-body .btn { margin-top: auto; border-radius: 50px; padding: 0.5rem 1rem; font-weight: 500; background-color: transparent; border: 1px solid #d1d5db; color: #333; }
.card-body .btn:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.read-more-btn { cursor: pointer; font-weight: 500; color: #6b7280; font-size: 0.9rem; }

/* Badge Colors */
.bg-reels-edit { background-color: #3b82f6 !important; }
.bg-invitation-design { background-color: #ec4899 !important; }
.bg-product-design { background-color: #10b981 !important; }

/* --- MODAL STYLING --- */
.modal-content { border-radius: 0.75rem; border: none; }
.modal-body video, .modal-body img { max-height: 85vh; }
.modal-dialog.modal-fullscreen-vertical { max-width: 450px; height: 90vh; margin: 1.75rem auto; }
.modal-dialog.modal-fullscreen-vertical .modal-content, .modal-dialog.modal-fullscreen-vertical .modal-body { height: 100%; }
.modal-dialog.modal-fullscreen-vertical .modal-body .ratio { height: 100%; width: 100%; --bs-aspect-ratio: 100%; }





.bg-youtube-thumbnail{
  background-color: orange;
}

.bg-menu-design{
  background-color: indianred;
}

.bg-youtube-edit{
  background-color: #ec4899 !important;
}