/**
* Template Name: HMD Hermada - v1.0.0
* Updated: Feb 12, 2026 with Bootstrap v5.3.3
* Author: Ken Sonza
*/

/* ========================================
Base HTML (base.html)
======================================== */

/* Let's Talk Side Button*/
.lets-talk-alert {
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 6px;
  font-weight: 500;
  display: none;
}

.lets-talk-success {
  background-color: #fdfdfd;
  color: #dec55d;
  border: 1px solid #f4c300;
}

.lets-talk-error {
  background-color: #fdfdfd;
  color: #a71d2a;
  border: 1px solid #dc3545;
}

/* ========================================
Index HTML (index.html)
======================================== */

/* COMMON & SHARED STYLES: Description: Core layout for service details and containers */
.service-details-wrapper, 
.service-details-wrapper .container {
  display: flex;
  justify-content: center;
}

.service-details-wrapper {
  border-radius: 16px;
}

.service-details-wrapper .container {
  max-width: 1340px;
  width: 100%;
  margin: 0 auto;
  flex-direction: column;
  padding: 0 15px;
}

/* Service Details Content Styling */
.service-details {
  display: none;
  animation: fadeUp 0.4s ease;
  padding: 10px 0;
  border-radius: 0px;
}

.service-details.active { 
  display: block; 
}

.service-details h2 {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.service-details p {
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 25px;
  /* Alignment logic: centers the block while keeping text left-aligned to match the UL */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* LIST STYLING Description: Standard and nested list formatting */
.service-details ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 10px;
}

.service-details ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 6px;
  font-size: 14.5px;
  line-height: 1.35;
  color: #333;
}

/* Shared bullet positioning for primary and nested lists */
.service-details ul li::before,
.service-details ul li ul li::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #dec55d;
}

/* Primary list bullet symbol */
.service-details ul li::before {
  content: "▶"; 
  font-size: 10px;
}

/* Nested list styling (unordered list within a list item) */
.service-details ul li ul {
  margin: 8px 0 0 15px !important;
}

.service-details ul li ul li {
  font-size: 13.5px;
  color: #555;
  padding-left: 20px;
  margin-bottom: 4px;
}

/* Nested list bullet symbol */
.service-details ul li ul li::before {
  content: "▹";
  font-size: 14px;
}

/* INTERACTIVE STATES Description: Hover and active behaviors for items and accordions */
.service-item.active,
.service-accordion.active {
  background-color: #dec55d;
}

.service-item, 
.service-accordion {
  cursor: pointer;
}

.service-item {
  border-radius: 0px;
  position: relative;
  pointer-events: auto;
}

/* ANIMATIONS */

@keyframes fadeUp {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* RESPONSIVE LAYOUTS (DESKTOP and TABLET) */
/* TABLET (iPad Mini & Air) */
@media (min-width: 768px) and (max-width: 1024px) {
  section#services { padding-top: 15px !important; }

  .services .container {
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .services .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 0 20px 0 !important;
  }

  .services .row > [class*="col-"] {
    flex: 1 1 0 !important;
    max-width: 18.5% !important;
    padding: 0 !important;
    display: flex !important;
  }

  .service-item {
    width: 100% !important;
    height: 145px !important;
    padding: 10px 5px !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    border-radius: 0px;
    text-align: center;
  }

  .service-item .icon img {
    width: 45px !important;
    height: 45px !important; 
    object-fit: contain;
    margin: 15px 0 10px 0 !important;
  }

  .service-item h3 {
    font-size: 8px !important;
    line-height: 1.2;
    margin: 0 !important;
    font-weight: 700;
    word-break: break-word;
  }
}

/* DESKTOP (>1024px) - UPDATED VERSION */
@media (min-width: 1025px) {
  .service-details-wrapper .container { padding: 0 15px; }
  .service-details { padding: 30px 0; }
  
  /* Target all the paragraph inside the details to align the list */
  .service-details p {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left; /* Left-aligned for bullets alignment */
  }

  /* This is for normal list connected to Service Detail Section CSS */
  .service-details:not(#training):not(#team):not(#hr):not(#corporate):not(#talent):not(#branding) ul { /* in :not input the services id that not included in the normal list */
    display: block;
    column-count: 2;
    column-gap: 40px;
    max-width: 800px;
    margin: 0 auto !important;
    text-align: left;
  }
}
  
/* SERVICES SECTION – DESKTOP TUNING */
@media (min-width: 1025px) {
  /* Service card / button */
  .services .service-item {
    height: 180px;                      /* for balanced height */
    padding: 20px 15px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    transition: all 0.25s ease;
  }

  /* Icon wrapper spacing */
  .services .service-item .icon {
    margin-top: 1px;
    margin-bottom: 1px;
  }

  /* Logo / image size */
  .services .service-item .icon img {
    width: 50px;                        /* uniform size */
    height: 50px;
    object-fit: contain;
  }

  /* Title text */
  .services .service-item h3 {
    font-size: 12px;                   /* desktop-appropriate */
    line-height: 1;
    font-weight: 700;
    margin: 0;
    max-width: 155px;                  /* to avoid long text */
  }

  /* Hover (optional) */
  .services .service-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  }
}

/* WATERMARK LAYER (DESKTOP & TABLET ONLY) Description: Background image effect for service items */
@media (min-width: 768px) {

  .service-item {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #fff;
  }

  /* WATERMARK IMAGE PSEUDO-ELEMENT */
  .service-item::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image: var(--service-bg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 100%;              /* Optimized for iPad scaling */

    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 0;

    /* iPad Safari Compatibility */
    filter: grayscale(100%) brightness(1.15);
    pointer-events: none;
  }

  /* ACTIVE STATE (Optimized for touch devices) */
  .service-item.active::after {
    opacity: 0.22;                     /* Increased visibility for iPad */
  }

  /* HOVER STATE (Desktop functionality - safe for iPad) */
  .service-item:hover::after {
    opacity: 0.18;
  }

  /* Ensure content remains layered above the watermark */
  .service-item > * {
    position: relative;
    z-index: 2;
  }
}

/* SERVICE DETAILS SECTION LAYOUT - MOBILE (<768px) */
@media (max-width: 767px) {
  
  /* Reset container to block display for a natural vertical flow */
  .service-details-wrapper .container { 
    padding: 0; 
    display: block !important; 
  }

  /* Spacing adjustments for the details card relative to the button */
  .service-details { 
    padding: 0 16px !important; 
    margin-top: 5px !important;      /* Small gap from the button above */
    margin-bottom: 25px !important;  /* Creates space for the button below */
    height: auto !important;         /* Allow height to expand based on content */
    display: none; 
  }

  /* Hide the standard services row on mobile */
  .services .row { 
    display: none; 
  }

  /* Hide the Image and Side Description on Mobile */
  .image-side { 
    display: none !important; 
  }

  /* Revert Columns Wrapper from Flex to Block display */
  .columns-wrapper {
    display: block; 
    margin: 0;
    padding: 0;
    gap: 0;
  }

  /* Remove the vertical green line and left padding */
  .details-side {
    padding-left: 0 !important;
    border-left: none !important;
    flex: none;
    width: 100%;
  }

  /* Force List Grid into a single column layout */
  .list-grid {
    display: flex;
    flex-direction: column; /* Stacks the UL elements vertically */
    gap: 0;
  }

  .list-grid ul {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
  }

  .list-grid li {
    font-size: 14px;
    margin-bottom: 12px;
  }

  /* Accordion Component Styles */
  .service-accordion {
    background: #fdfdfd;
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: background 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  .service-accordion-header, 
  .service-accordion .left {
    display: flex;
    align-items: center;
  }

  .service-accordion-header { 
    justify-content: space-between; 
  }

  .service-accordion .left { 
    gap: 14px; 
  }

  .service-accordion img { 
    width: 42px; 
  }

  .service-accordion span { 
    font-weight: 700; 
    font-size: 16px; 
  }

  /* Interactive Chevron Icon */
  .chevron {
    font-size: 20px;
    transition: transform 0.3s ease;
  }

  /* Rotate chevron when accordion is active */
  .service-accordion.active .chevron { 
    transform: rotate(180deg); 
  }

  /* Hide headers within service details on mobile */
  .service-details h2 { 
    display: none; 
  }
}

/* SERVICE DETAIL SECTION Description: Main styling for individual service detail cards */
.service-detail-section {
  padding: 90px 20px;
}

.service-detail-card {
  max-width: 1340px;
  margin: auto;
  background: #fdfdfd;
  border-radius: 25px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.08);
  display: flex;
  gap: 35px;
  padding: 30px;
  /* Container protection and relative positioning for internal absolute elements */
  overflow: hidden; 
  position: relative;
}

/* IMAGE SECTION */
.service-image {
  position: relative;
  flex: 1;
}

.service-image img {
  width: 100%;
  border-radius: 0px;
  display: block;
}

/* Overlay tag on the image */
.image-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: #f4c400;
  color: #000;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  border-radius: 8px;
}

/* CONTENT SECTION */
.service-content {
  flex: 1.2;
}

.service-content h2 {
  font-size: 34px;
  margin-bottom: 10px;
}

.service-intro {
  color: #555;
  margin-bottom: 35px;
  padding-left: 16px;
  border-left: 4px solid #2ca44f;
  line-height: 1.6;
}

/* FEATURES GRID */
.service-features {
  display: grid;
  gap: 22px;
}

.feature-item {
  display: flex;
  gap: 18px;
  padding: 1px 20px;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.feature-item i {
  font-size: 26px;
  color: #f4c400;
  min-width: 32px;
  margin-top: 2px;
}

.feature-item h4 {
  margin: 0;
  font-size: 17px;
}

.feature-item p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #666;
}

/* Feature hover interaction */
.feature-item:hover {
  background: #fdfdfd;
  transform: translateY(-5px);
}

/* CALL TO ACTION (CTA) */
.service-cta {
  display: inline-block;
  margin-top: 30px;
  margin-left: 80px;
  padding: 14px 30px;
  background: #dec55d;
  color: #fff;
  font-weight: 600;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-cta:hover {
  background: #239043;
  transform: translateY(-2px);
}

/* RESPONSIVE DESIGN */
/* Tablet and Smaller Screens */
@media (max-width: 900px) {
  .service-detail-card {
    flex-direction: column;
    padding: 40px;
  }

  .service-content h2 {
    font-size: 28px;
  }
}

/* Mobile Screens */
@media (max-width: 480px) {
  .service-detail-card {
    padding: 20px;
  }

  .service-content h2 {
    font-size: 24px;
  }
}

/* COLLAGE SECTION STYLES (Professional Development Training) */
  .compact-collage {
    display: grid;
    /* Uses six columns to allow for flexible spanning across the layout */
    grid-template-columns: repeat(6, 1fr); 
    /* Smaller base row height to allow for more granular control of image height */
    grid-auto-rows: 90px; 
    gap: 10px;
    max-width: 900px;
    margin: auto;
  }

  .collage-item {
    background-color: #fdfdfd;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    /* LIFT EFFECT TRANSITION: Controls smooth movement and shadow on interaction */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  .training-img-1 { 
    grid-column: span 3;
    grid-row: span 2;
  }
  .training-img-2 { 
    grid-column: span 3; 
    grid-row: span 2; 
  }

  .training-img-3 { 
    grid-column: span 2; /* Spans 1/3 of the total width */
    grid-row: span 2; 
  }
  .training-img-4 { 
    grid-column: span 4; /* Spans 2/3 of the total width */
    grid-row: span 2; 
  }

  .training-img-5 { 
    grid-column: span 2; 
    grid-row: span 2; 
  }
  .training-img-6 { 
    grid-column: span 4; 
    grid-row: span 2; 
  }

  /* COLLAGE SECTION STYLES (Team Building) */
  .compact-collage-team-bulding { 
    display: grid;
    /* Matches the 6-column grid used in the Training section for consistency */
    grid-template-columns: repeat(6, 1fr); 
    /* Matches the 90px base height used in the Training section */
    grid-auto-rows: 90px; 
    /* Matches the 10px spacing used in the Training section */
    gap: 10px; 
    /* Matches the 900px container width used in the Training section */
    max-width: 900px; 
    margin: auto;
  }

  .collage-item-team-building {
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  .collage-item-team-building img {
    width: 100%;
    height: 100%;
    /* Prevents image distortion (stretching/squeezing) regardless of box dimensions */
    object-fit: cover; 
    display: block;
  }

  /* GRID SPAN ADJUSTMENTS FOR TEAM BUILDING IMAGES */

  /* Image 1: Red Shirts */
  .team-building-img-1 { 
    grid-column: span 3; /* 3 out of 6 columns = 50% width */
    grid-row: span 3;    
  }
  
  /* Image 2: Yellow Shirts */
  .team-building-img-2 { 
    grid-column: span 3; 
    grid-row: span 4;    /* Extended vertically to create an asymmetrical look */
  }
  
  /* Image 3: Blue Shirts */
  .team-building-img-3 { 
    grid-column: span 3; 
    grid-row: span 3;    
  }
  
  /* Image 4: Seminar Hall */
  .team-building-img-4 { 
    grid-column: span 3; 
    grid-row: span 2;    /* Fills the remaining space beneath Image 2 */
  }

  /* UNIVERSAL MOBILE VIEW (Training & Team Building) */
  @media (max-width: 650px) {
    /* Combined both containers to ensure consistent dimensions across services */
    .compact-collage, 
    .compact-collage-team-bulding {
      grid-template-columns: repeat(6, 1fr) !important; 
      /* Reduced row height to 55px for a more compact mobile screen fit */
      grid-auto-rows: 55px !important; 
      /* Reset fixed rows to allow dynamic content growth */
      grid-template-rows: unset !important; 
      gap: 5px !important;
      padding: 0 10px;
      max-width: 100%;
    }
  
    /* Maintain sharp edges (no border radius) on mobile */
    .collage-item, 
    .collage-item-team-building {
      border-radius: 0px !important;
    }
  }


  /* UNIVERSAL HOVER STATE & ZOOM RELAY FOR IMAGE SERVICES Description: Unified interaction effects for all collage items */
  .collage-item:hover, 
  .collage-item-team-building:hover {
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    /* Ensure the hovered item stays on top of adjacent images */
    z-index: 10;
  }

  /* Universal Image transition settings */
  .collage-item img, 
  .collage-item-team-building img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  /* Universal zoom-in effect for the image itself on hover */
  .collage-item:hover img, 
  .collage-item-team-building:hover img {
    transform: scale(1.05);
  }

  /* Fullscreen Zoom Overlay (Modal) */
  .zoom-overlay {
    display: none;
    position: fixed;
    /* High z-index to ensure it appears above all navigation and UI elements */
    z-index: 2000; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
  }

  .zoom-overlay img {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; 
    border-radius: 0px;
    animation: zoomIn 0.3s ease;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
  }

  /* Animation for the zoom overlay entry */
  @keyframes zoomIn {
    from { 
      transform: scale(0.8); 
      opacity: 0; 
    }
    to { 
      transform: scale(1); 
      opacity: 1; 
    }
  }

/* ========================================
About HTML (about.html)
======================================== */

/* GLOBAL CHECKMARK STYLE (Desktop, Tablet, Mobile) Description: Custom SVG checkmark bullet points for lists */
.about-text ul {
  list-style: none !important; /* Remove default bullets */
  padding-left: 0 !important;
  margin-top: 20px;
}

.about-text li {
  position: relative !important;
  padding-left: 35px !important; /* Allocation for the custom checkmark icon */
  margin-bottom: 15px !important;
  line-height: 1.6;
  font-size: 15px;
  color: #333;
}

.about-text li::before {
  /* Using SVG background to control color (#f5b400) and stroke thickness */
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important; /* Vertical alignment with the first line of text */
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5b400' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* ABOUT SECTION LAYOUT */
/* MAIN WRAPPER */
.about-wrapper {
  display: flex;
  width: 100%;
}

/* LEFT SIDE IMAGE */
.about-image {
  width: 45%;
  height: 70vh;
  overflow: hidden;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RIGHT SIDE CONTENT */
.about-content {
  width: 50%;
  padding: 100px 80px;
  position: relative;
}

/* VERTICAL YELLOW ACCENT LINE */
.about-content::before {
  content: "";
  position: absolute;
  left: 50px; /* Offset from the left edge */
  top: 40px;
  width: 2px;
  height: 85%;
  background: #f5b400;
}

.about-text {
  padding-left: 10px; /* Internal spacing to balance with the accent line */
  max-width: 700px;
}

.about-text p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 25px;
  color: #333;
}

.gold-text {
  color: #dec55d;
}

/* RESPONSIVE (Tablet & Mobile) */
@media (max-width: 991px) {
  .about-wrapper {
    flex-direction: column; /* Stack image and content vertically */
  }

  .about-image,
  .about-content {
    width: 100%;
    height: auto;
  }

  .about-image {
    height: 400px; /* Fixed height for image on mobile */
  }

  .about-content {
    /* Reduced padding, specifically for the bottom area */
    padding: 40px 30px 10px; 
  }

  .about-content::before {
    display: none; /* Hide the accent line on smaller screens */
  }

  .about-text {
    padding-left: 0;
  }
}

/* DEVICE-SPECIFIC OVERRIDES */
/* SURFACE PRO 7 OPTIMIZATION */
@media (min-width: 912px) and (max-width: 915px) {
    .about-text {
        margin: 0 auto !important;
        padding: 0 40px !important; /* Provide horizontal breathing room */
        max-width: 100% !important;
    }
}

/* NEST HUB, NEST HUB MAX, & IPAD PRO (DESKTOP-HYBRID VIEW) */
@media (width: 1024px) and (height: 600px), 
       (width: 1280px) and (height: 800px), 
       (min-width: 1024px) and (max-device-width: 1366px) { 
      
    .about-wrapper {
        display: flex !important;
        flex-direction: row !important; 
        height: auto !important;
        align-items: stretch; /* Ensures image and content height remain equal */
    }

    .about-image {
        width: 45% !important;
        height: auto !important; /* Height is dictated by content flow */
    }

    .about-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Prevents image distortion */
    }

    .about-content {
        width: 55% !important;
        padding: 80px 60px !important; /* Increased spacing to prevent crowding */
        display: flex;
        align-items: center;
        position: relative;
    }

    /* VERTICAL ACCENT LINE ADJUSTMENT */
    .about-content::before {
        display: block !important; 
        left: 30px !important; /* Spacing from the image edge */
        top: 10%;
        height: 80% !important;
    }

    .about-text {
        max-width: 100% !important;
        padding-left: 20px !important; /* Offset from the yellow accent line */
    }

    .about-text p {
        font-size: 15px !important; 
        line-height: 1.8 !important;
    }
}

/* ASUS ZENBOOK FOLD OPTIMIZATION */
@media (min-width: 850px) and (max-width: 860px) {
    .about-text {
        margin: 0 auto !important;
        padding: 0 50px !important; /* Prevent text from touching screen edges */
        max-width: 90% !important;
        text-align: left; /* Keep text left-aligned while centering the container */
    }
      
    .about-content {
        padding: 50px 0 !important; /* Uniform vertical padding */
        display: flex;
        justify-content: center;
    }
      
    .about-image {
        height: 500px !important; /* Ensure image covers the fold view sufficiently */
    }
}

/* ===================================
Our Services HTML (our-services.html)
=================================== */
/* Our Service Details Section */
.our-service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.our-service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.our-service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.our-service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.our-service-details .services-img {
  margin-bottom: 20px;
}

.our-service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.our-service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.our-service-details p {
  font-size: 15px;
}

.our-service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.our-service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.our-service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/* Tab Content */
.tab-content {
  display: none;
  width: 100%;
  flex: 1;
}

.tab-content.active {
  display: block;
}

/* Images */
.services-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Extra padding for Creative tab */
#creative {
  padding-bottom: 30px;
}

/* Main Column (Desktop Default) */
.service-col-main {
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  padding-left: 30px;
  padding-right: 30px;
}

.service-inner {
  padding: 30px;
}

/* Side Column (Desktop Default) */
.service-col-side {
  padding-left: 30px;
}

.service-side-inner {
  padding-top: 30px;
}

.service-col-side h4 {
  margin-top: 0;
}

/* Layout */
.service-layout {
  position: relative;
}

/* Feature List */
.our-service-feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.our-service-feature-item {
  display: flex;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.our-service-feature-item:hover h5 {
  color: var(--accent-color);
}

.feature-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  font-size: 20px;
}

.feature-text h5 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}

.feature-text p {
  font-size: 14px;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

/* MEDIA QUERIES (COMPACT MOBILE VIEW) */
@media (max-width: 991px) {
  /* Pull the entire row upward toward the Page Title */
  .service-layout {
    margin-top: -40px !important;
    row-gap: 0 !important;
  }

  /* LEFT NAV - Slight adjustment to bottom gap */
  .service-col-left {
    margin-bottom: 10px !important; /* Reduced to pull Main Content closer */
    padding-bottom: 0 !important;
  }

  /* MAIN CONTENT - Forced upward alignment */
  .service-col-main {
    border: none;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-top: 0 !important;
    padding-top: 0 !important; /* Removed top spacing */
  }

  .service-inner {
    padding-top: 0 !important; /* Ensures it starts immediately at the H3 title */
    padding-bottom: 15px !important;
  }

  /* Precise spacing for Main Content title */
  .tab-content h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 10px !important;
  }

  /* 4. RIGHT SIDE CONTENT - Aligned with Main Content spacing */
  .service-col-side {
    padding-left: 15px !important;
    padding-right: 15px !important;
    border-top: 1px solid #eee;
    margin-top: 10px !important;
  }

  .service-side-inner {
    padding-top: 15px !important;
    padding-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .our-service-feature-list {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 15px;
  }
}

/* SERVICE PROGRAMS FOR 2026 */
/* Title link styling */
.feature-title-link {
  text-decoration: none;
  color: inherit;
}

/* Subsection list styling */
.service-sub-list {
  list-style: none; /* Remove default bullets */
  padding: 0;       /* Remove left indentation */
  margin: 0;
}

.service-sub-list li {
  font-size: 14px;  /* Smaller font size */
  color: #646060;   /* Grey color */
  line-height: 1.5; /* Optimized line height spacing */
  margin-bottom: 5px;
}

/* Optional: Custom bullet styling */
.service-sub-list li::before {
  content: "•";
  color: #f4c300;
  margin-right: 8px;
  /* Increased bullet size */
  font-size: 24px;
  /* Important: Align position to the vertical center of the text */
  vertical-align: middle;
  line-height: 0;
}

/* SERVICE PROGRAM FULL WIDTH MODE */
/* FORCE hide right column */
.service-layout.service-program-active > .service-col-side {
  display: none !important;
}

/* FORCE expand main column */
.service-layout.service-program-active > .service-col-main {
  flex: 0 0 75% !important;
  max-width: 75% !important;
  border-right: none;
}

/* Service Program Grid = 3 columns */
.service-layout.service-program-active #service-program .our-service-feature-list {
  grid-template-columns: repeat(3, 1fr);
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .service-layout.service-program-active > .service-col-main {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .service-layout.service-program-active #service-program .our-service-feature-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .service-layout.service-program-active #service-program .our-service-feature-list {
    grid-template-columns: 1fr;
  }
}

/* ===================================
Contact HTML (contact.html)
=================================== */
.contact {
  padding-top: 0;
}

.contact .info {
  background-color: var(--surface-color);
  padding: 40px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.contact .info h3 {
  font-weight: 600;
  font-size: 24px;
}

.contact .info p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 30px;
  font-size: 15px;
}

.contact .info-item+.info-item {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  font-size: 24px;
  color: var(--accent-color);
  transition: all 0.3s ease-in-out;
  margin-right: 20px;
}

.contact .info-item h4 {
  padding: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.contact .hmd-contact-form {
  width: 100%;
}

.contact .hmd-contact-form .form-group {
  padding-bottom: 8px;
}

.contact .hmd-contact-form input[type=text],
.contact .hmd-contact-form input[type=email],
.contact .hmd-contact-form textarea {
  color: var(--default-color);
  background-color: var(--surface-color);
  border-radius: 0px;
  box-shadow: none;
  font-size: 14px;
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .hmd-contact-form input[type=text]:focus,
.contact .hmd-contact-form input[type=email]:focus,
.contact .hmd-contact-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .hmd-contact-form input[type=text]::placeholder,
.contact .hmd-contact-form input[type=email]::placeholder,
.contact .hmd-contact-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .hmd-contact-form input[type=text],
.contact .hmd-contact-form input[type=email] {
  height: 48px;
  padding: 10px 15px;
}

.contact .hmd-contact-form textarea {
  padding: 10px 12px;
  height: 290px;
}

.contact .hmd-contact-form button[type=submit] {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 0;
  padding: 13px 50px;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .hmd-contact-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
}

/* Contact FORM Alert */
.contact-alert {
    position: relative;
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 15px;
    display: none; /* Controlled by JS */
    align-items: flex-start;
    background: #fdfdfd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-left: 5px solid #dec55d; /* Default accent */
    animation: slideIn 0.4s ease-out;
}

/* Slide-in animation */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Success Styling */
.contact-alert.success {
    border-left-color: #dec55d;
    background-color: #fdfdfd;
}
.contact-alert.success .alert-title {
    color: #f4c300;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

/* Error Styling */
.contact-alert.error {
    border-left-color: #d93025;
    background-color: #fdfdfd;
}
.contact-alert.error .alert-title {
    color: #b31412;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

/* Detailed Text */
.alert-message {
    color: #dec55d;
    line-height: 1.5;
}