/* ======================================================
   SEAN B SOLUTIONS
   GLOBAL SECTION SYSTEM
   /assets/css/home/sections.css

   Includes:
   - Section Wrapper
   - Section Headers
   - Section Titles
   - Section Labels
   - Background Variations
   - Dividers
   - CTA Sections
   - Shared Layout Utilities
====================================================== */


/* ======================================================
   GLOBAL SECTION WRAPPER
====================================================== */


.section{

    position:relative;

    width:100%;

    padding:100px 0;

    overflow:hidden;

}



/* ======================================================
   SECTION CONTAINER
====================================================== */


.section-container{

    width:100%;

    max-width:1280px;

    margin:auto;

    padding-left:25px;

    padding-right:25px;

}



/* ======================================================
   SECTION HEADER
====================================================== */


.section-header{

    max-width:800px;

    margin:

    0 auto 60px;

    text-align:center;

}



.section-header.left{

    text-align:left;

    margin-left:0;

}



.section-header h2{

    margin-bottom:18px;

    font-weight:800;

}



.section-header p{

    max-width:700px;

    margin:auto;

    color:

    var(--text-light,#64748b);

    line-height:1.8;

}



.section-header.left p{

    margin-left:0;

}



/* ======================================================
   SECTION TAG / LABEL
====================================================== */


.section-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:

    7px 18px;

    margin-bottom:18px;

    border-radius:50px;

    background:

    rgba(230,0,0,.1);

    color:

    var(--secondary,#e60000);

    font-size:.8rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.1em;

}



.section-tag::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

    background:

    var(--secondary,#e60000);

}



/* ======================================================
   SECTION TITLE HIGHLIGHT
====================================================== */


.section-title span{

    color:

    var(--secondary,#e60000);

}



/* ======================================================
   SECTION DESCRIPTION
====================================================== */


.section-description{

    max-width:700px;

    color:

    var(--text-light,#64748b);

    font-size:1.05rem;

    line-height:1.8;

}



/* ======================================================
   SECTION BACKGROUNDS
====================================================== */


.section-light{

    background:

    #fff;

}



.section-gray{

    background:

    var(--background,#f5f7fa);

}



.section-dark{

    background:

    var(--primary,#0b1f3a);

    color:#fff;

}



.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4{

    color:#fff;

}



.section-dark p{

    color:

    rgba(255,255,255,.75);

}



/* ======================================================
   SECTION DIVIDER
====================================================== */


.section-divider{

    width:100%;

    height:1px;

    background:

    rgba(0,0,0,.08);

}



/* ======================================================
   TOP / BOTTOM SPACING
====================================================== */


.pt-0{

    padding-top:0!important;

}



.pb-0{

    padding-bottom:0!important;

}



.pt-small{

    padding-top:60px;

}



.pb-small{

    padding-bottom:60px;

}



.pt-large{

    padding-top:140px;

}



.pb-large{

    padding-bottom:140px;

}



/* ======================================================
   CONTENT WIDTHS
====================================================== */


.content-sm{

    max-width:600px;

}



.content-md{

    max-width:800px;

}



.content-lg{

    max-width:1000px;

}



/* ======================================================
   TWO COLUMN SECTION
====================================================== */


.section-columns{

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:70px;

    align-items:center;

}



/* ======================================================
   THREE COLUMN SECTION
====================================================== */


.section-three-columns{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}



/* ======================================================
   CTA SECTION
====================================================== */


.cta-section{

    position:relative;

    padding:80px;

    border-radius:35px;

    background:

    linear-gradient(
    135deg,
    var(--primary,#0b1f3a),
    #173b68
    );

    overflow:hidden;

}



.cta-section::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-150px;

    top:-150px;

    border-radius:50%;

    background:

    rgba(230,0,0,.15);

}



.cta-section h2{

    color:#fff;

}



.cta-section p{

    color:

    rgba(255,255,255,.75);

}



/* ======================================================
   SECTION DECORATIVE SHAPES
====================================================== */


.section-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}



.section-shape.red{

    width:300px;

    height:300px;

    background:

    rgba(230,0,0,.05);

}



.section-shape.blue{

    width:300px;

    height:300px;

    background:

    rgba(11,31,58,.06);

}



/* ======================================================
   REVEAL STATES
====================================================== */


.section-reveal{

    opacity:0;

    transform:

    translateY(40px);

}



.section-reveal.active{

    opacity:1;

    transform:

    translateY(0);

    transition:

    .8s ease;

}



/* ======================================================
   RESPONSIVE
====================================================== */


@media(max-width:992px){


.section{

    padding:80px 0;

}



.section-columns{

    grid-template-columns:1fr;

    gap:50px;

}



.section-three-columns{

    grid-template-columns:

    repeat(2,1fr);

}



.cta-section{

    padding:50px 35px;

}



}



@media(max-width:768px){


.section{

    padding:65px 0;

}



.section-container{

    padding-left:18px;

    padding-right:18px;

}



.section-header{

    margin-bottom:40px;

}



.section-header h2{

    font-size:1.9rem;

}



.section-three-columns{

    grid-template-columns:1fr;

}



.cta-section{

    padding:35px 25px;

    border-radius:25px;

}



}



@media(max-width:480px){


.section{

    padding:55px 0;

}



.section-tag{

    font-size:.7rem;

}



}