/* Diagonal Section Cuts */

/* Main diagonal cut for hero section - bottom only */


/* Alternative slants */
.slant-bottom-right {
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    padding-bottom: 5rem;
    position: relative;
    z-index: 2;
}

.slant-bottom-left {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
    padding-bottom: 5rem;
    position: relative;
    z-index: 2;
}

/* Double diagonal cut (top and bottom) */
.slant-both {
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
    -webkit-clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
    padding: 4rem 0;
}

/* More dramatic slant angle */
.slant-dramatic {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    padding-bottom: 6rem;
}

/* Slant for the About Us maroon section */
.slant-maroon {
    clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
    padding-bottom: 5rem;
    position: relative;
    z-index: 3;
}

/* Section connector - creates an overlap effect */
.section-connector-top {
    margin-top: -4rem;
    padding-top: 6rem;
    position: relative;
    z-index: 0;
}

/* Media queries for responsive slant angles */
@media (max-width: 768px) {
    .slant-bottom-right, .slant-bottom-left {
        clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
        padding-bottom: 3rem;
    }
    
    .slant-both {
        clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
        -webkit-clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
    }
    
    .slant-dramatic {
        clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
    }
}