@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    --blue-dark: #132936;
    --blue-dark-ten: #1329361a;
    --blue-dark-twenty: #13293633;
    --grey-light: #e8e9ea;
    --grey-light-full: #E9E9EA;
    --blue-dark-fifty: #13293680;
    --blue-dark-fifty-full: #8e9399;
    --blue-light: #B0D9ED;
    --blue-flash: #1AB0DE;
    --orange: #D4581A;
    --orange-light: #d4581a84;
    --white: #ffffff;
    --white-light: #ffffff80;
    --white-ten: #ffffff1a;
    --white-twenty: #ffffff33;
    --transparent: #00000000;

    --green-light: #10B981;
    --green-dark: #059669;
    --orange-light: #F59E0B;
    --orange-dark: #D97706;
    --red-light: #FF4444;
    --red-dark: #CC0000;

    --gradient-blue: linear-gradient(135deg, var(--blue-flash), var(--blue-dark-fifty));
    --gradient-blue-dark: linear-gradient(135deg, var(--blue-dark), var(--blue-dark-fifty));
    --gradient-green: linear-gradient(135deg, var(--green-light), var(--green-dark));
    --gradient-orange: linear-gradient(135deg, var(--orange-light), var(--orange-dark));
    --gradient-red: linear-gradient(135deg, var(--red-light), var(--red-dark));
    --gradient-white: linear-gradient(135deg, var(--white), var(--white-light));

    --main-font: 'Roboto', sans-serif;

    --0: 0;
    --0px: 0px;
    --0vh: 0vh;
    --0vw: 0vw;

    --10vw: 10vw;
    --20vw: 20vw;
    --25vw: 25vw;
    --30vw: 30vw;
    --40vw: 40vw;
    --45vw: 45vw;
    --50vw: 50vw;
    --60vw: 60vw;
    --70vw: 70vw;
    --80vw: 80vw;
    --90vw: 90vw;
    --100vw: 100vw;

    --10vh: 10vh;
    --20vh: 20vh;
    --30vh: 30vh;
    --40vh: 40vh;
    --45vh: 45vh;
    --50vh: 50vh;
    --60vh: 60vh;
    --70vh: 70vh;
    --80vh: 80vh;
    --90vh: 90vh;
    --100vh: 100vh;

    --1px: 1px;
    --2px: 2px;
    --4px: 4px;
    --6px: 6px;
    --10px: 10px;
    --20px: 20px;
    --28px: 28px;
    --30px: 30px;
    --40px: 40px;
    --50px: 50px;
    --60px: 60px;
    --70px: 70px;
    --80px: 80px;
    --90px: 90px;
    --100px: 100px;
    --120px: 120px;
    --150px: 150px;
    --200px: 200px;

    --100percent: 100%;
    --80percent: 80%;
    --75percent: 75%;
    --66percent: 66.66%;
    --50percent: 50%;
    --33percent: 33.33%;
    --25percent: 25%;
    --20percent: 20%;
    --10percent: 10%;
    --5percent: 5%;
}

body { font-family: var(--main-font); margin: 0; }

/* FONT COLOR CLASSES */
.color-blue-dark { color: var(--blue-dark); }
.color-blue-dark-fifty { color: var(--blue-dark-fifty); }
.color-blue-flash { color: var(--blue-flash); }
.color-orange { color: var(--orange); }
.color-orange-light { color: var(--orange-light); }
.color-white { color: var(--white); }
.color-white-light { color: var(--white-light); }
.color-white-ten { color: var(--white-ten); }
.color-white-twenty { color: var(--white-twenty); }
.color-green-light { color: var(--green-light); }
.color-green-dark { color: var(--green-dark); }
.color-transparent { color: var(--transparent); }

/* GRADIENT CLASSES */
.gradient-blue { background: var(--gradient-blue); }
.gradient-blue-dark { background: var(--gradient-blue-dark); }
.gradient-green { background: var(--gradient-green); }
.gradient-orange { background: var(--gradient-orange); }
.gradient-red { background: var(--gradient-red); }
.gradient-white { background: var(--gradient-white); }

.centerContainer { margin-top: 40px; }

h1 { font-size: 7em; margin: 0; line-height: normal; }
h2 { font-size: 5em; margin: 0; line-height: normal; }
h3 { font-size: 3em; margin: 0; line-height: normal; }
h4 { font-size: 1.8em; margin: 0; line-height: normal; }
p { font-size: 1.5em; margin: 0; line-height: normal; }
strong { font-weight: 600!important; line-height: normal; }



@media screen and (max-width: 1600px) {
    h1 { font-size: 5em; }
    h2 { font-size: 5em; }
    h3 { font-size: 1.5em; margin: var(--0); }
    h4 { font-size: 1.2em; margin: var(--0); }
    p { font-size: 1em; margin: var(--0); }
}


@media screen and (max-width: 600px) {
    h1 { font-size: 3em; }
    h2 { font-size: 3em; }
    h3 { font-size: 1.5em; margin: var(--0); }
    h4 { font-size: 1em; margin: var(--0); }
    p { font-size: 0.8em; margin: var(--0); }
}

.light { font-weight: 100; }
.regular { font-weight: 400; }
.bold { font-weight: 700; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.no-underline { text-decoration: none; }


/* ----- UTILITY CLASSES ----- */
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: 1fr 1fr; }
.grid-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid-cols-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }
.align-self-center { align-self: center; }
.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-baseline { align-self: baseline; }
.align-self-stretch { align-self: stretch; }
.align-content-center { align-content: center; }
.align-content-start { align-content: flex-start; }
.align-content-end { align-content: flex-end; }
.align-content-baseline { align-content: baseline; }
.align-content-stretch { align-content: stretch; }

.justify-content-center { justify-content: center; }
.justify-content-space-between { justify-content: space-between; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-baseline { justify-content: baseline; }
.justify-content-stretch { justify-content: stretch; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly; }
.justify-self-center { justify-self: center; }
.justify-self-start { justify-self: flex-start; }
.justify-self-end { justify-self: flex-end; }
.justify-self-baseline { justify-self: baseline; }
.justify-self-stretch { justify-self: stretch; }

.width-100 { width: var(--100percent); }
.width-100vw { width: var(--100vw); }
.width-80 { width: var(--80percent); }
.width-80vw { width: var(--80vw); }
.width-75 { width: var(--75percent); }
.width-66 { width: var(--66percent); }
.width-50 { width: var(--50percent); }
.width-50vw { width: var(--50vw); }
.width-33 { width: var(--33percent); }
.width-25 { width: var(--25percent); }
.width-25vw { width: var(--25vw); }
.width-20 { width: var(--20percent); }
.width-20vw { width: var(--20vw); }
.width-10 { width: var(--10percent); }
.width-fit-content { width: fit-content; }
.width-max-content { width: max-content; }
.width-fit-available { width: -webkit-fit-available; }
.width-fill-available { width: -webkit-fill-available; }
.width-auto { width: auto; }
.width-calc-100-20vw { width: calc(var(--100percent) - var(--20vw)); }

.height-100 { height: var(--100percent); }
.height-100vh { height: var(--100vh); }
.height-50vh { height: var(--50vh); }
.height-45vh { height: var(--45vh); }
.height-45vw { height: var(--45vw); }
.height-40vh { height: var(--40vh); }
.height-30vh { height: var(--30vh); }
.height-20vh { height: var(--20vh); }
.height-auto { height: auto; }
.height-fit-content { height: fit-content; }
.height-max-content { height: max-content; }
.height-fill-available { height: -webkit-fill-available; }

/* Padding Utility Classes */
.p-0 { padding: var(--0); }
.p-5 { padding: var(--5px); }
.p-10 { padding: var(--10px); }
.p-20 { padding: var(--20px); }
.p-30 { padding: var(--30px); }
.p-40 { padding: var(--40px); }
.p-50 { padding: var(--50px); }
.p-60 { padding: var(--60px); }
.p-100 { padding: var(--100px); }
.p-150 { padding: var(--150px); }
.p-200 { padding: var(--200px); }    

.pt-20 { padding-top: var(--20px); }
.pt-40 { padding-top: var(--40px); }
.pt-50 { padding-top: var(--50px); }
.pt-60 { padding-top: var(--60px); }
.pt-100 { padding-top: var(--100px); }
.pt-150 { padding-top: var(--150px); }
.pt-200 { padding-top: var(--200px); }

.pb-20 { padding-bottom: var(--20px); }
.pb-40 { padding-bottom: var(--40px); }
.pb-50 { padding-bottom: var(--50px); }
.pb-60 { padding-bottom: var(--60px); }
.pb-100 { padding-bottom: var(--100px); }
.pb-150 { padding-bottom: var(--150px); }
.pb-200 { padding-bottom: var(--200px); }

.pl-20 { padding-left: var(--20px); }
.pl-40 { padding-left: var(--40px); }
.pl-50 { padding-left: var(--50px); }
.pl-60 { padding-left: var(--60px); }
.pl-100 { padding-left: var(--100px); }
.pl-150 { padding-left: var(--150px); }
.pl-200 { padding-left: var(--200px); }

.pr-20 { padding-right: var(--20px); }
.pr-40 { padding-right: var(--40px); }
.pr-50 { padding-right: var(--50px); }
.pr-60 { padding-right: var(--60px); }
.pr-100 { padding-right: var(--100px); }
.pr-150 { padding-right: var(--150px); }
.pr-200 { padding-right: var(--200px); }    

/* Margin Utility Classes */
.m-20 { margin: var(--20px); }
.m-30 { margin: var(--30px); }
.m-40 { margin: var(--40px); }
.m-50 { margin: var(--50px); }
.m-100 { margin: var(--100px); }

.mt-20 { margin-top: var(--20px); }
.mt-40 { margin-top: var(--40px); }
.mt-50 { margin-top: var(--50px); }
.mt-60 { margin-top: var(--60px); }
.mt-100 { margin-top: var(--100px); }
.mt-150 { margin-top: var(--150px); }
.mt-200 { margin-top: var(--200px); }

.mb-20 { margin-bottom: var(--20px); }
.mb-40 { margin-bottom: var(--40px); }
.mb-50 { margin-bottom: var(--50px); }
.mb-60 { margin-bottom: var(--60px); }
.mb-100 { margin-bottom: var(--100px); }
.mb-150 { margin-bottom: var(--150px); }
.mb-200 { margin-bottom: var(--200px); }

.ml-0 { margin-left: var(--0); }
.ml-20 { margin-left: var(--20px); }
.ml-40 { margin-left: var(--40px); }
.ml-50 { margin-left: var(--50px); }
.ml-60 { margin-left: var(--60px); }
.ml-100 { margin-left: var(--100px); }
.ml-150 { margin-left: var(--150px); }
.ml-200 { margin-left: var(--200px); }

.pl-10vw { padding-left: var(--10vw); }
.pr-10vw { padding-right: var(--10vw); }
.ml-10vw { margin-left: var(--10vw); }
.mr-10vw { margin-right: var(--10vw); }

/* Gap Utility Classes */
.gap-5 { gap: var(--5px); }
.gap-10 { gap: var(--10px); }
.gap-20 { gap: var(--20px); }
.gap-30 { gap: var(--30px); }
.gap-40 { gap: var(--40px); }
.gap-50 { gap: var(--50px); }
.gap-60 { gap: var(--60px); }
.gap-100 { gap: var(--100px); }

/* Border Radius Classes */
.rounded-sm { border-radius: var(--20px); }
.rounded-md { border-radius: var(--28px); }

/* Text Alignment Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }

/* List Style Classes */
ul, ul li { list-style: none; margin-left: var(--0); }

input[type="checkbox"] { scale: 1.6; accent-color: var(--orange); }

textarea, 
input[type="text"], 
input[type="email"], 
select { 
    width: var(--100percent); 
    resize: none; 
    font-size: 1.2em; 
    padding: var(--10px); 
    border-radius: var(--6px); 
    border: var(--1px) solid var(--grey-light); 
    font-family: inherit; 
    transition: border-color 0.2s ease;
}

textarea:focus, 
input[type="text"]:focus, 
input[type="email"]:focus, 
select:focus { 
    outline: none; 
    border-color: var(--blue-light); 
    box-shadow: 0 0 0 var(--2px) rgba(103, 171, 212, 0.2); 
}

a.orangeButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--20px);
    width: fit-content;
    background: var(--gradient-orange);
    color: var(--white);
    font-size: 2em;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    text-align: center;
    padding: var(--10px) var(--80px);
    border-radius: var(--20px);
    text-decoration: none;
    border: 1px solid var(--transparent);
    transition: 0.3s;
}


a.orangeButton:hover {
    background-color: var(--orange-light);
    border: 1px solid var(--white);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    scale: 1.05;
}

@media screen and (max-width: 1100px) {
    a.orangeButton {
        font-size: 1.2em;
        padding: var(--10px) var(--20px);
    }
}

/* Card Hover Effect */
.cardHover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cardHover:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 20px, rgba(0, 0, 0, 0.08) 5px 5px 10px, 
                rgba(0, 0, 0, 0.08) 0px 3px 5px, rgba(0, 0, 0, 0.1) 0px 8px 8px, 
                rgba(0, 0, 0, 0.07) 0px 10px 8px;
}

/* Card White Transparent Background with Glassmorphism */
.cardWhiteTrans {
    background-color: var(--white-twenty);
    box-shadow: rgba(0, 0, 0, 0.01) 0px 17px 7px, rgba(0, 0, 0, 0.06) 4px 4px 5px, 
                rgba(0, 0, 0, 0.06) 0px 2px 3px, rgba(0, 0, 0, 0.08) 0px 6px 6px, 
                rgba(0, 0, 0, 0.05) 0px 7px 5px;
    backdrop-filter: blur(7px);
    border-top: 3px solid var(--white);
    border-left: 3px solid var(--white);
    padding: var(--40px);
}

@media screen and (max-width: 1200px) {
    .cardWhiteTrans {
        padding: var(--30px);
    }
}

/* Icon Circle Utility Classes */
.iconCircle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--50percent);
}

.iconCircle-sm { width: var(--70px); height: var(--70px); }
.iconCircle-md { width: var(--80px); height: var(--80px); }
.iconCircle-lg { width: var(--90px); height: var(--90px); }
.iconCircle-xl { width: var(--100px); height: var(--100px); }
.iconCircle-xxl { width: var(--120px); height: var(--120px); }