/* ======================================================
   SEAN B SOLUTIONS
   BASE STYLES
   /assets/css/home/base.css

   Foundation Styles
   - Variables
   - Global Reset Overrides
   - Typography
   - Body
   - Containers
   - Links
   - Lists
   - Images
====================================================== */


/* ======================================================
   ROOT VARIABLES
====================================================== */

:root{

    /* Brand */

    --primary:#0b1f3a;
    --primary-light:#16345d;
    --primary-dark:#071529;

    --secondary:#e60000;
    --secondary-dark:#b40000;

    --accent:#ffb400;

    /* Neutral */

    --white:#ffffff;

    --background:#f7f9fc;
    --surface:#ffffff;
    --surface-alt:#eef3f8;

    --text:#1f2937;
    --text-light:#5f6f81;
    --text-muted:#7b8794;

    --border:#e5e9ef;

    /* Radius */

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:32px;

    /* Shadows */

    --shadow-sm:
    0 5px 15px rgba(15,23,42,.06);

    --shadow-md:
    0 15px 40px rgba(15,23,42,.08);

    --shadow-lg:
    0 25px 60px rgba(15,23,42,.12);

    --shadow-xl:
    0 35px 80px rgba(15,23,42,.18);

    /* Animation */

    --transition-fast:.25s ease;

    --transition:.35s ease;

    --transition-slow:.55s ease;

}



/* ======================================================
   GLOBAL RESET
====================================================== */


*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

    font-size:16px;

}



body{

    width:100%;

    min-height:100vh;

    font-family:

    var(--font-primary, 'Poppins', sans-serif);

    background:

    var(--background,#f5f7fa);

    color:

    var(--text,#1b1b1b);

    line-height:1.6;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}



/* ======================================================
   TYPOGRAPHY
====================================================== */


h1,
h2,
h3,
h4,
h5,
h6{


    font-family:

    var(--font-heading,'Poppins',sans-serif);


    font-weight:800;

    line-height:1.2;

    color:

    var(--primary,#0b1f3a);

}



h1{

    font-size:

    clamp(2.5rem,5vw,4.5rem);

}



h2{

    font-size:

    clamp(2rem,4vw,3rem);

}



h3{

    font-size:

    clamp(1.3rem,2vw,1.8rem);

}



p{

    color:

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

    margin-bottom:1rem;

}



strong{

    font-weight:800;

}



small{

    font-size:.85rem;

}



/* ======================================================
   LINKS
====================================================== */


a{

    text-decoration:none;

    color:inherit;

    transition:

    var(--transition,.3s ease);

}



a:hover{

    color:

    var(--secondary,#e60000);

}



/* ======================================================
   IMAGES
====================================================== */


img{

    max-width:100%;

    height:auto;

    display:block;

}



svg{

    display:block;

}



/* ======================================================
   LISTS
====================================================== */


ul,
ol{

    list-style:none;

}



/* ======================================================
   CONTAINER SYSTEM
====================================================== */


.container{

    width:100%;

    max-width:

    1280px;

    margin-inline:auto;

    padding-left:25px;

    padding-right:25px;

}



.container-fluid{

    width:100%;

    padding-left:25px;

    padding-right:25px;

}



/* ======================================================
   SECTION SYSTEM
====================================================== */


.section{

    padding:

    100px 0;

}



.section-sm{

    padding:

    60px 0;

}



.section-header{

    max-width:750px;

    margin:

    0 auto 60px;

    text-align:center;

}



.section-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:

    7px 18px;

    border-radius:50px;

    background:

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

    color:

    var(--secondary,#e60000);

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}



/* ======================================================
   BUTTON SYSTEM
====================================================== */


.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;


    padding:

    14px 32px;


    border-radius:

    12px;


    font-size:

    .95rem;


    font-weight:700;


    cursor:pointer;


    border:none;


    transition:

    .35s ease;


}



.btn-primary{


    background:

    var(--secondary,#e60000);


    color:#fff;


}



.btn-primary:hover{


    background:

    #b80000;


    color:#fff;


    transform:

    translateY(-3px);


}



.btn-secondary{


    background:

    var(--primary,#0b1f3a);


    color:#fff;


}



.btn-secondary:hover{


    background:

    #173b68;


    color:#fff;


}



.btn-outline{


    background:transparent;


    border:

    2px solid var(--primary,#0b1f3a);


    color:

    var(--primary,#0b1f3a);


}



.btn-outline:hover{


    background:

    var(--primary,#0b1f3a);


    color:white;


}



/* ======================================================
   CARDS
====================================================== */


.card{


    background:#fff;

    border-radius:

    24px;

    border:

    1px solid rgba(0,0,0,.06);

    box-shadow:

    0 15px 40px rgba(0,0,0,.06);

}



/* ======================================================
   FORM ELEMENTS
====================================================== */


input,
textarea,
select{


    width:100%;


    padding:

    14px 18px;


    border-radius:

    12px;


    border:

    1px solid #ddd;


    background:#fff;


    font-family:inherit;


    outline:none;


    transition:.3s ease;


}



input:focus,
textarea:focus,
select:focus{


    border-color:

    var(--secondary,#e60000);


    box-shadow:

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


}



textarea{

    resize:vertical;

}



/* ======================================================
   GLOBAL UTILITIES
====================================================== */


.text-center{

    text-align:center;

}



.text-left{

    text-align:left;

}



.text-right{

    text-align:right;

}



.text-primary{

    color:

    var(--primary,#0b1f3a);

}



.text-secondary{

    color:

    var(--secondary,#e60000);

}



.bg-primary{

    background:

    var(--primary,#0b1f3a);

}



.bg-secondary{

    background:

    var(--secondary,#e60000);

}



.hidden{

    display:none!important;

}



.flex{

    display:flex;

}



.grid{

    display:grid;

}



.align-center{

    align-items:center;

}



.justify-center{

    justify-content:center;

}



/* ======================================================
   SCROLLBAR
====================================================== */


::-webkit-scrollbar{

    width:10px;

}



::-webkit-scrollbar-track{

    background:#f1f1f1;

}



::-webkit-scrollbar-thumb{

    background:

    var(--primary,#0b1f3a);

    border-radius:20px;

}



::-webkit-scrollbar-thumb:hover{

    background:

    var(--secondary,#e60000);

}



/* ======================================================
   SELECTION
====================================================== */


::selection{

    background:

    var(--secondary,#e60000);

    color:white;

}



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


@media(max-width:768px){


.container{

    padding-left:18px;

    padding-right:18px;

}


.section{

    padding:70px 0;

}


}



@media(max-width:480px){


html{

    font-size:15px;

}


.btn{

    width:100%;

}


}