/* Tiny portrait phones (like iPhone SE, 320px) */
/* Basic Reset and Font */

/*
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Prevent accidental horizontal scrollbars 
    font-family: 'Inter', sans-serif;
}
*/
.section-header {
    padding-top: 3rem;
    padding-bottom: 1rem;
    /* text-align: center; */
    background-color: #e9ecef;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #dee2e6;
}

.section-divider {
    padding: 60px 0;
    padding: 40px 0;
    position: relative;
    overflow: hidden; /* Overridden where needed for pseudo-elements */
}

.content-block {
    padding: 40px 0;
    /* text-align: center; */
}


.bg-section-a { background-color: #f0f8ff; /* AliceBlue */ }
.bg-section-b { background-color: #e6e6fa; /* Lavender */ }
.bg-section-c { background-color: #d8bfd8; /* Thistle */ }
.bg-section-d { background-color: #dda0dd; /* Plum */ }
.bg-section-e { background-color: #ccbcf5; /* A light purple */ }
.bg-white { background-color: #ffffff; }
.bg-light-gray { background-color: #f8f9fa; } /* Bootstrap .bg-light */
.text-white { color: white !important; }
.text-dark { color: #212529 !important; }

.bg-divider {
  background-color: #f1f2f9;
  background-color: #fff9ec; 
}

/* --- 1. Angled Divider --- */
.angled-bottom-left {
    background-color: #007bff;
    background-color: #fff9ec; 
    color: white;
    height: 100px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65%);
}

.angled-top-left {
    background-color: #28a745;
  background-color: #fff9ec; 
    color: white;
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
    margin-top: -1px;
}

/* --- 2. Wave Divider (SVG) --- */
.wave-container-bottom, .wave-container-top, .div-own-top-wave-container {
    position: relative;
    left: 0;
    width: 100%;
    line-height: 0;
}

/* .wave-container-bottom{
  padding-bottom: 50px;
} */

.wave-container-bottom svg,
.wave-container-top svg,
.div-own-top-wave-container svg {
    display: block;
    width: 100%;
    height: 30px;
}
.wave-container-top svg,
.div-own-top-wave-container svg { /* Also rotate the new wave type */
    transform: rotate(180deg);
}

/* --- 3. Pyramid / V-Shape Divider (Clip-Path) --- */
.v-shape-bottom {
    background-color: #6f42c1;
    color: white;
    padding-bottom: 80px;
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - 60px), 0 100%);
}

.pyramid-shape-top-container {
    position: relative;
    background-color: #fd7e14; /* Orange */
    color: white;
    overflow: visible !important;
}
.pyramid-shape-top-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: inherit;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: translateY(-100%);
}

/* --- 4. Slanted Edge Divider (Pseudo-elements & Skew) --- */
.slanted-edge-bottom {
    background-color: #dc3545;
    color: white;
    position: relative;
}
.slanted-edge-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #e6e6fa; /* MUST BE bg of NEXT section */
    transform: skewY(-3deg);
    transform-origin: bottom left;
    z-index: 1;
}

.slanted-edge-top {
    background-color: #17a2b8; /* Info color */
    color: white;
    position: relative;
    margin-top: 50px;
    overflow: visible !important; /* Allow ::before to show */
}
.slanted-edge-top::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #e6e6fa; /* MUST BE bg of PREVIOUS section */
    transform: skewY(3deg);
    transform-origin: top left;
}



/* --- XS Custom Breakpoints: <576px --- */

@media (min-width: 360px) {
}

/* Upper-range phones in portrait (480px - 575.98px) */
@media (min-width: 480px) {
  /* Styles for larger portrait phones */

}

/* --- SM: 576px to 767.98px --- */
@media (min-width: 576px) {
  /* SM portrait styles */

}

/* --- MD: 768px to 991.98px --- */
@media (min-width: 768px) {
  /* MD portrait styles */
}

/* --- LG: 992px to 1199.98px --- */
@media (min-width: 992px) {
  /* LG portrait styles */
}

/* --- XL: 1200px to 1399.98px --- */
@media (min-width: 1200px) {
  /* XL portrait styles */

}

/* --- XXL: 1400px and up --- */
@media (min-width: 1400px) {
  /* XXL portrait styles */
}