/* Desktop only - Services & Solutions Dropdown - 3 Columns */
@media (min-width: 992px) {
    .contain-sub-1__content {
        display: flex !important;        /* Use flex for items */
        flex-wrap: wrap;                 /* Wrap to new rows */
        width: 950px;                    /* Wider dropdown, adjust as needed */
        padding: 1rem;                   /* Inner spacing */
        gap: 1rem;                       /* Space between items */
        background-color: #fff;          /* Optional: white background */
        border-radius: 0.5rem;           /* Optional rounded corners */
        box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Optional shadow */
    }

    /* Each item - 3 columns */
    .contain-sub-1__content li {
        flex: 0 0 calc(33.333% - 1rem); /* 3 columns */
        box-sizing: border-box;
    }
}

/* Ensure icons always visible */
.contain-sub-1__content .contain-sub-1__img i,
.contain-sub-1__content .contain-sub-1__img img {
    display: block;
}

/* Optional: adjust description and titles spacing */
.contain-sub-1__link .contain-sub-1__description {
    font-size: 0.875rem;
    color: #555;
}

/* Responsive - 2 columns on tablets */
@media (min-width: 576px) and (max-width: 991px) {
    .contain-sub-1__content li {
        flex: 0 0 calc(50% - 0.5rem); /* 2 columns */
    }
}

/* Mobile burger menu - keep default collapse */
@media (max-width: 575px) {
    .contain-sub-1__content li {
        flex: 0 0 100%; /* 1 column */
    }
}

/* Why Choose Us Section Background */
.why-choose-us {
    background: #1a1a1a; /* Dark background */
    color: #fff;          /* Default text color white */
}

/* Optional: add subtle hover effect for each block */
.why-choose-us .choose-us-item {
    transition: all 0.3s ease;
    background-color: #2a2a2a; /* Slightly lighter dark for each block */
}

.why-choose-us .choose-us-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
/* Services Section - Light Background */
#services {
    background-color: #0b1c02; /* Light background */
    color: #000;               /* Default text black */
    padding: 5rem 0;
}

/* Web Section - Dark Background */
#web {
    background-color: #1f1f1f; /* Dark background */
    color: #fff;               /* Default text white */
    padding: 5rem 0;
}

/* Cards inside both sections */
.card_12_item {
    border-radius: 0.75rem;
    border: 2px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    padding: 2rem;
}

/* Cards hover effect */
.card_12_item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Icon Box */
.icon_box {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1rem auto;
    transition: color 0.3s ease;
}
.icon-hover:hover {
    color: #cc996a !important;
}

/* Titles and Descriptions */
.card_12_item h5,
.card_12_item p {
    text-align: center;
    margin: 0 auto;
}

/* Desktop: remove underline for links */
@media (min-width: 992px) {
    .card_12_item .mobile-link {
        text-decoration: none;
        color: inherit;
    }
}

/* Mobile Accordion */
@media (max-width: 991px) {
    .card-content {
        display: none;
        margin-top: 10px;
    }
    .accordion-card.active .card-content {
        display: block;
    }
    .card_12_item {
        cursor: default;
    }
    .mobile-link {
        display: block;
        text-decoration: none;
    }
}

.footer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 80px; /* Narrower height */
    background: linear-gradient(135deg, #263c73, #00c6ff); /* Gradient background */
    color: #fff;
    border-radius: 12px;
}

.footer-cta-inner h4 {
    margin: 0;
    font-size: 1.25rem;
}

.footer-cta-inner .btn {
    min-width: 160px; /* Button size */
}

@media (max-width: 768px) {
    .footer-cta-inner {
        flex-direction: column;
        height: auto;
        text-align: center;
        gap: 15px;
    }

    .footer-cta-inner .btn {
        width: 100%;
    }
}

/* Hide submenus by default only on mobile */
@media (max-width: 991px) {
  .contain-sub-1__content {
    display: none !important;  /* start hidden */
    position: relative !important; /* remove absolute hover positioning */
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* make sure when we open them with JS they are visible */
  .contain-sub-1__content.show {
    display: block !important;
  }
}

@media (max-width: 991px) {
  .contain-sub-1__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease; /* smooth slide */
  }

  .contain-sub-1__content.show {
    max-height: 600px; /* adjust if submenu has more items */
  }
}