/* Custom CSS for Developer Technology Details Page */

/* Fix for points list alignment and spacing */
.services-details__points-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.services-details__points-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.services-details__points-list .icon {
    flex-shrink: 0 !important;
    margin-top: 3px !important;
}

.services-details__points-list .icon span {
    font-family: 'icomoon' !important;
    font-size: var(--otto-font-size-md) !important;
    color: var(--techguru-base) !important;
}

/* Fix for services list with descriptions */
.services-details__points-list h5 {
    font-size: var(--otto-font-size-lg) !important;
    font-weight: var(--otto-font-medium) !important;
    line-height: var(--otto-line-height-input) !important;
    color: var(--techguru-white) !important;
    margin-bottom: 5px !important;
}

.services-details__points-list p {
    font-size: var(--otto-font-size-sm) !important;
    line-height: var(--otto-line-height-body) !important;
    color: var(--techguru-gray) !important;
    margin-bottom: 0 !important;
}

/* Fix for points box 2 (frameworks section) */
.services-details__points-box-2 .services-details__points-two {
    margin-bottom: 23px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 25px !important;
}

.services-details__points-two .icon {
    flex-shrink: 0 !important;
    margin-top: 3px !important;
}

.services-details__points-two .icon span {
    font-family: 'icomoon' !important;
}

.services-details__points-two .content {
    flex: 1 !important;
}

/* Ensure proper spacing between all list items */
.services-details__points-list li + li {
    margin-top: 20px !important;
}

/* Fix for the frameworks section specifically */
.services-details__points-box-2 .row .col-md-6 {
    margin-bottom: 20px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .services-details__points-list li {
        gap: 12px !important;
    }
    
    .services-details__points-list h5 {
        font-size: var(--otto-font-size-md) !important;
    }
    
    .services-details__points-box-2 .services-details__points-two {
        gap: 15px !important;
    }
}