/* Variables et Reset */
:root {
    --main-color: #0065FC;
    --main-bg-color: #F2F2F2;
    --filter-bg-color: #DEEBFF;
    --color-border: #D9D9D9;
}

* {
    font-family: 'Raleway', sans-serif;
    box-sizing: border-box;
}

.fa-solid {
    color: var(--main-color);
}

.neutral-star {
    color: var(--main-bg-color)
}

a {
    color: inherit;
    text-decoration: none;
}

.card {
    display: flex;
    background-color: white;
    border-radius: 20px;
    padding: 5px;
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
}

/* Layout Utilities */
.container {
    width: 100%;
	max-width: 1440px;
	padding: 0 50px;
	box-sizing: border-box;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.self-center { align-self: center; }

.gap-0 { gap: 0; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }
.gap-35 { gap: 35px; }

/* Spacing */
.p-0 { padding: 0; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }

.pl-10 { padding-left: 10px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }

.m-0 { margin: 0; }
.mt-20 { margin-top: 20px; }
.mb-5 { margin-bottom: 5px; }
.mb-30 { margin-bottom: 30px; }
.my-25 { margin-top: 25px; margin-bottom: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }

/* Width & Height */
.w-full { width: 100%; }
.w-half { width: 50%; }
.w-third { width: 33.333%; }
.w-two-thirds { width: 66.666%; }
.w-50px { width: 50px; }

.h-50 { height: 50px; }
.h-four-fifth { height: 80%; }
.h-full { height: 100%; }

/* Colors */
.main-color { background-color: var(--main-color); }
.bg-filter-color:hover { background-color: var(--filter-bg-color); }
.bg-main-color { background-color: var(--main-bg-color); }
.bg-white { background-color: white; }
.text-black { color: black; }
.text-white { color: white; }

/* Typography */
.text-14 { font-size: 14px; }
.text-16 { font-size: 16px; }
.text-17 { font-size: 17px; }
.text-18 { font-size: 18px; }
.text-22 { font-size: 22px; }
.font-bold { font-weight: bold; }
.text-center { text-align: center; }
.no-style { list-style: none; }

/* Borders */
.no-border { border: 0; }
.rounded-full { border-radius: 50%; }
.rounded-20 { border-radius: 20px; }
.rounded-25 { border-radius: 25px; }
.rounded-l-15 { 
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.rounded-r-15 { 
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.rounded-l-20 { 
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.rounded-t-20 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.border { border: 2px solid var(--color-border); }
.box-sizing { box-sizing: border-box; }
.img-cover { object-fit: cover; }