/* GSAP Section Scale Effect - Based on Porto Marketing Demo */

/* Custom Section 1 - Base Styles */
.custom-section-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.custom-section-1 .custom-section-1-box {
    position: relative;
    margin-bottom: -80px;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.custom-section-1 .custom-section-1-box:before {
    content: "";
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    position: absolute;
    z-index: -1;
}

/* Custom Background Color */
.custom-bg-color-1 {
    background: #f7f7FF !important;
}

/* Custom Border Radius */
.custom-border-radius-1 {
    border-radius: 10px !important;
}

/* Custom Font Styles */
.custom-font-1 {
    font-size: clamp(28px, 6.6666666667px + 0.0444444444 * 100vw, 60px);
    line-height: 1.1;
    font-weight: 400;
    text-transform: none;
}

/* Custom Word Highlight */
.custom-word-highlight-1 img {
    width: auto;
    max-width: 100%;
    position: absolute;
    left: 10%;
    margin-top: 20%;
}

/* Ensure smooth transitions for GSAP animations */
.gsap-section-scale {
    will-change: transform;
    transform-origin: center center;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .custom-section-1 .custom-section-1-box {
        margin-bottom: -40px;
        min-height: 50vh;
    }
}

/* Full Width Section Styles */
.section.bg-light {
    background-color: #f8f9fa !important;
}

.feature-box-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-box-icon i {
    font-size: 1.5rem;
}

/* Object fit utility for images */
.object-cover {
    object-fit: cover;
}

/* Enhanced shadow for floating elements */
.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* Gradient overlay for images */
.gradient-overlay {
    background: linear-gradient(135deg, rgba(107, 57, 244, 0.1) 0%, rgba(158, 23, 241, 0.1) 100%);
}

/* Responsive adjustments for full width section */
@media (max-width: 768px) {
    .section.bg-light {
        min-height: 60vh !important;
    }

    .feature-box {
        margin-bottom: 2rem;
    }

    .feature-box-icon {
        width: 50px;
        height: 50px;
    }

    .feature-box-icon i {
        font-size: 1.25rem;
    }
}