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

.container{

    width:min(100% - 2rem,var(--container-width));

    max-width:var(--container-width);

    margin-inline:auto;

}

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

.section{

    position:relative;

    padding-block:var(--space-3xl);

}

.section--sm{

    padding-block:var(--space-2xl);

}

.section--lg{

    padding-block:10rem;

}

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

.section__header{

    max-width:800px;

    margin:0 auto var(--space-2xl);

    text-align:center;

}

.section__title{

    margin-bottom:var(--space-md);

}

.section__subtitle{

    margin-bottom:var(--space-sm);

}

.section__description{

    max-width:700px;

    margin-inline:auto;

}

/*==================================================
                    BUTTONS
==================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:1rem 2rem;

    font-family:var(--font-primary);

    font-size:var(--fs-md);

    font-weight:var(--fw-semi-bold);

    text-decoration:none;

    border:none;

    border-radius:var(--radius-full);

    cursor:pointer;

    transition:var(--transition);

}

.btn:hover{

    transform:translateY(-3px);

}

.btn:focus-visible{

    outline:2px solid var(--color-secondary);

    outline-offset:4px;

}

.btn--primary{

    color:var(--color-white);

    background:var(--gradient-primary);

    box-shadow:var(--shadow-md);

}

.btn--primary:hover{

    box-shadow:var(--shadow-lg);

}

.btn--secondary{

    color:var(--color-white);

    background:rgba(255,255,255,.08);

    border:var(--border-light);

    backdrop-filter:blur(var(--blur));

}

.btn--secondary:hover{

    background:rgba(255,255,255,.14);

}

.btn--outline{

    color:var(--color-primary);

    background:transparent;

    border:var(--border-primary);

}

.btn--outline:hover{

    color:var(--color-white);

    background:var(--color-primary);

}

/*==================================================
                    GRID
==================================================*/

.grid{

    display:grid;

    gap:var(--space-lg);

}

.grid-2{

    grid-template-columns:repeat(2,1fr);

}

.grid-3{

    grid-template-columns:repeat(3,1fr);

}

.grid-4{

    grid-template-columns:repeat(4,1fr);

}

/*==================================================
                    FLEX
==================================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

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

.card{

    background:var(--bg-primary);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

/*==================================================
                    GLASS
==================================================*/

.glass{

    background:var(--glass);

    border:var(--border-light);

    backdrop-filter:blur(var(--blur));

}

/*==================================================
                    HELPERS
==================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.w-100{

    width:100%;

}

.hidden{

    display:none !important;

}

.rounded{

    border-radius:var(--radius-lg);

}

.shadow{

    box-shadow:var(--shadow-md);

}

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

@media (max-width:992px){

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .section{

        padding-block:var(--space-2xl);

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .btn{

        width:100%;

    }

}

/*==================================================
                BACK TO TOP
==================================================*/

.back-to-top{

    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #A6192E,
        #861323
    );

    color: #fff;

    font-size: 1rem;

    cursor: pointer;

    box-shadow: 0 12px 30px rgba(0,0,0,.20);

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: all .35s ease;

    z-index: 9999;

}

.back-to-top.show{

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.back-to-top:hover{

    transform: translateY(-4px);

    box-shadow: 0 18px 40px rgba(0,0,0,.25);

}