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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:var(--body-font);
    font-size:var(--fs-16);
    font-weight:var(--fw-regular);
    line-height:var(--line-height);

    color:var(--body);
    background:var(--white);

    overflow-x:hidden;

    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}


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

::selection{

    background:var(--primary);

    color:var(--white);

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--gray-100);

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


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

img{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

}


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

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}


/*==================================================
    BUTTON RESET
==================================================*/

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}


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

input,
textarea,
select{

    width:100%;

    font-family:inherit;

    font-size:inherit;

    border:none;

    outline: 1px solid var(--gray-400);

    background:none;
	
	padding: 10px;
	
	border-radius: 5px;

}

textarea{

    resize:vertical;

}


/*==================================================
    LIST
==================================================*/

ul{

    list-style:none;

}


/*==================================================
    HEADINGS
==================================================*/

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

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

    color:var(--heading);

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

    line-height:var(--heading-line-height);

}

h1{

    font-size:clamp(2.8rem,5vw,3.7rem);

}

h2{

    font-size:clamp(2rem,4vw,3rem);

}

h3{

    font-size:1.5rem;

}

h4{

    font-size:1.15rem;

}

p{

    color:var(--body);

}


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

.container{

    width:min(100% - 40px,var(--container-width));

    margin-inline:auto;

}


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

.section{

    padding:var(--section-padding) 0;

    position:relative;

}

.section-heading{

    max-width:760px;

    margin-bottom:70px;

}

.section-heading.center{

    margin-inline:auto;

    text-align:center;

}

.section-heading h2{

    margin:18px 0;

}

.section-heading p{

    font-size:1.05rem;

}


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

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    background:#eef4ff;

    color:var(--primary);

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}


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

.grid{

    display:grid;

}

.flex{

    display:flex;

}


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

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.w-100{

    width:100%;

}

.d-none{

    display:none;

}

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mt-4{

    margin-top:40px;

}

.mt-5{

    margin-top:50px;

}

.mb-1{

    margin-bottom:10px;

}

.mb-2{

    margin-bottom:20px;

}

.mb-3{

    margin-bottom:30px;

}

.mb-4{

    margin-bottom:40px;

}

.mb-5{

    margin-bottom:50px;

}


/*==================================================
    SHADOW UTILITIES
==================================================*/

.shadow-sm{

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

}

.shadow-md{

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

}

.shadow-lg{

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

}


/*==================================================
    BORDER RADIUS
==================================================*/

.rounded-sm{

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

}

.rounded-md{

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

}

.rounded-lg{

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

}

.rounded-xl{

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

}


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

.py{

    padding:var(--section-padding) 0;

}

.pb{

    padding-bottom:var(--section-padding);

}

.pt{

    padding-top:var(--section-padding);

}


/*==================================================
    FOCUS ACCESSIBILITY
==================================================*/

:focus-visible{

    outline:3px solid var(--accent);

    outline-offset:3px;

}


.footer-grid h4{
	color: var(--gray-300);
}

/*==================================================
    REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}