@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* 
---------------------------------------------
RESET
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
    display: block;
}

* {
    box-sizing: border-box;
}

html,
body {
    font-family: 'Poppins', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #1e1e1e;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 700;
}

ul {
    margin-bottom: 0px;
}
footer2 {
    margin-bottom: 0px;
}

p {
    font-size: 14px;
    line-height: 28px;
    color: #4a4a4a;
}

img {
    width: 100%;
    overflow: hidden;
}

/* 
---------------------------------------------
GLOBAL STYLES
--------------------------------------------- 

*/



h1 {
    color: var(--primary);
}
h1.mt-4 {
    padding-top: 80px;
}

html,
body {
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    min-height: 91vh;
    flex-direction: column;
    justify-content: space-between;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: var(--background);
}

:root {
    --background: #fffffc;
    --primary: #407BFF;
    --secondary: #ececec;
    --text-color: rgb(41, 41, 43);
    --bs-dropdown-link-active-bg: #d30013;
}

section h2 {
    font-size: 3rem;
    color: var(--primary);
    position: relative;
}

section h2::after {
    bottom: -7px;
    left:0;
    position: absolute;
    content: '';
    width: 130px;
    height: 7px;
    background-color: var(--primary);
}

h2#admitere-title::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 7px;
    background-color: var(--primary);
}


/* 
---------------------------------------------
NAVBAR
--------------------------------------------- 
*/

nav.navbar {
    & h1 {
        color: white;
    }
    position: fixed;
    top: 7px;
    left: 0;
    width: 100%;
    border-width: none;
    min-height: 80px;
    height: 80px;
    border-width: 0px;
    transition: all 200ms ease-out, top 50ms linear, background 100ms ease;
    border: none;
    a:not(.dropdown-item) {
        color: var(--text-color);
    }

    .navbar-brand {
        & svg path {
            fill: var(--background);
        }
    }

    .hamburger {
        & path {
            stroke: var(--background);
        }
    }
    & .nav-link.active {
        color: var(--background) !important;
    }
}
.navbar-brand-2 h1 {
    color:#407BFF !important; 
    font-size: 2.5rem !important;
    font-weight: 800 !important;
}

nav.navbar.scrolled {
    border-bottom: 1px solid rgba(128, 128, 128, 0.685);
    h1 {
        color: var(--primary);
    }
    top: 0px ;
    height: 80px;
    background: var(--background);
    a:not(.dropdown-item) {
        color: var(--text-color);
    }

    .navbar-brand {
        & svg path {
            fill: var(--text-color);
        }
    }

    .hamburger {
        & path {
            stroke: var(--text-color);
        }
    }
    & .nav-link.active {
        color: var(--primary) !important;
    }
}

.active {
    color: var(--primary);
}

.navbar-brand {
    & svg {
        height: 50px;
        width: 50px;
    }

    & path {
        fill: var(--primary);
    }
}

.hamburger {
    cursor: pointer;
}

.hamburger input {
    display: none;
}

.hamburger svg {
    /* The size of the SVG defines the overall size */
    height: 3em;
    /* Define the transition for transforming the SVG */
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
    fill: none;
    stroke: black;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1;
    /* Define the transition for transforming the Stroke */
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
    stroke-dasharray: 12 63;
}

.hamburger input:checked+svg {
    transform: rotate(-45deg);
}

.hamburger input:checked+svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
}

.nav-item {
    font-weight: 500;
}

.dropdown-menu {
    padding: 0;
    border-radius: 5px;
}

.dropdown-item {
    --bs-dropdown-link-active-bg: var(--primary);
    padding: 8px 28px;

    & a:hover {
        background: var(--primary);
    }
}

.nav-link.active {
    color: var(--primary) !important;
}


/* 
---------------------------------------------
HERO
--------------------------------------------- 
*/

section.hero {
    align-items: center;
    justify-content: center;
    height: 80vh;
    background-image: repeating-linear-gradient(45deg, #719eff 0, #0856ff 10px, transparent 0, transparent 50%);
    background-size: 67px 67px;
    background-color: var(--primary);
    & .row {
        height: 100%;
    }

    & svg {
        height: 700;
    }
    & > div > div:nth-of-type(1) {
      flex-direction: column !important;
      & span > span {
        background: white;
        padding:2px;
        color: var(--primary);
      }
  
      & > div {
        margin: auto;
        > span {
            color: white;
            font-size: 1.25rem;
            font-weight: 500;
        }
      }

      & p {
        font-weight: 800;
        margin: 30px 0px;
        text-transform: uppercase;
        font-size: clamp(24pt, 6vw, 4rem);
        color: var(--background);
      }
    }

    & > div > div:nth-of-type(2) {
        height: 100%;
        background: var(--secondary) !important;
    }

    & > div > div:nth-of-type(1) {
        .buttons {
            display: flex;
            gap:20px;
            flex-wrap: wrap;
            & button {
                background: var(--background);
                padding: 10px 40px;
            }
        }
    }

    & > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* Make the container for the checkbox and time display use Flexbox */
/* Default styling for the section */
.selection {
    width: 100%;
    padding: 0 20px; /* Add padding to the left and right of the entire section */
}

.presimulare-section {
    margin-top: 30px; /* Adds space between each section */
}

h3 {
    text-align: left; /* Left align the headings */
    font-size: 38px;  /* Set a default font size */
    margin-left: 40px; /* Indentation from the left */
}

.presimulare {
    display: flex;               /* Use Flexbox for layout */
    align-items: center;         /* Vertically align the checkbox and the countdown */
    gap: 10px;                   /* Add space between the checkbox and the countdown */
    justify-content: flex-start; /* Align to the left */
    margin-top: 10px;            /* Space between label and checkbox */
    margin-left: 30px;           /* Indentation from the left to align with h3 */
}

.presimulare label {
    font-size: 28px;
    font-weight: normal;
    display: flex;
    align-items: left;
    gap: 10px;                   /* Adds space between checkbox and text */
}

#timeUntilMay22, #timeUntilMay11 {
    font-size: 26px;
    color: #333;
    margin-left: 40px;           /* Adds space between label and countdown */
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    h3 {
        font-size: 20px;        /* Smaller font size for mobile */
        margin-left: 20px;      /* Less indentation on mobile */
    }

    .presimulare {
        justify-content: flex-start; /* Keep countdown aligned to the left */
        margin-left: 20px;          /* Maintain same indentation for countdown */
        width: 100%;                /* Make sure it takes full width on mobile */
    }

    .presimulare label {
        font-size: 16px;          /* Adjust label font size for mobile */
    }

    #timeUntilMay22, #timeUntilMay11 {
        font-size: 14px;          /* Adjust font size of countdown */
        margin-left: 10px;        /* Reduce margin between label and time */
    }
}



/* 
---------------------------------------------
SELECTION
--------------------------------------------- 
*/

.selection-page {
    position: relative;
    top:80px;
    flex:1 1 auto;
}

section.selection {
    --border-color: var(--primary);
    & div > div {
        border-radius: 0px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        & img + .title {
            position: absolute;
            height: 100%;
            width: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            & span {
                color: white;
                font-weight: 800;
                font-size: 2.5rem;
                text-transform: uppercase;
            }
        }
        & img {
            border-radius: 0;
        }
        .card-img-overlay {
            opacity: 0;
            transition: opacity 100ms linear;
        }
        
        & :hover .card-img-overlay {
            opacity: 1;
            background-color: #1e1e1e80;
        }

        & :hover img + div{
           opacity: 0;
        }

        & .card-text {
            color: white !important;
        }
    }
}

/* 
---------------------------------------------
FOOTER
--------------------------------------------- 
*/

footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    top: 80px;
    padding: 20px;
    width: 100%;
    background: var(--primary);
    align-items: center;
    justify-content: center;

    & ul {
        flex-wrap: wrap;
        display: flex;
        gap: 50px;
    }

    a {
        color: var(--background);
    }

    a:hover {
        color: var(--background);
    }

    p {
        font-size: 0.75rem;
        color: var(--background);
    }
}

/* 
---------------------------------------------
MEDIA QUERIES
--------------------------------------------- 
*/

@media only screen and (min-width: 990px) {
    .hamburger {
        display: none;
    }
}

@media only screen and (max-width: 576px) {
    .navbar {
        padding: 8px 15px;
    }

    footer ul{
        gap:10px;
        & li {
            padding: 5px;
            background: var(--secondary);
            & a {
                color: var(--primary) !important;
            }
        }
    }

    section.selection{
        & .title span {
            font-size: 3rem !important;
        }
    }
    section.hero .row > div:nth-of-type(1) {
        padding: 3rem;
        p {
            font-size: 3,5rem;
            line-height: 3.5rem;
            margin: 0;
        }
        .buttons{
            gap:20px;
        }
        & button {
            font-size: 2rem;
            padding: 10px 40px;
        }
    }
    section.hero .row > div:nth-of-type(2) {
        display: none;
    }
}

@media only screen and (max-width: 990px) {
    .titlu-sectiune {
        margin: 30px 10px !important;
    }
    
    section {
        width: 100%;
        top: 80px;
    }
    nav.navbar.scrolled{
        height: initial;
    }
    nav.navbar {
        h1{
            color: var(--primary);
        }
        top: 0;
        min-height: 80px;
        height: initial;
        border-width: 0px;
        background: var(--background);

        a:not(.dropdown-item) {
            color: var(--text-color) ;
        }

        .navbar-brand {
            & svg path {
                fill: var(--text-color);
            }
        }
        .hamburger {
            & path {
                stroke: var(--text-color);
            }
        }
    }
   
}

@media only screen and (min-width: 1200px) {
    .navbar {
        padding: 8px 170px !important;
    }
}

/* Base styles (for day mode) */
#resources {
    background-color: #f9f9f9; /* Light background for the resources section */
    padding: 40px 0;
    color: #333; /* Default text color */
}

#resources h2 {
    font-size: 32px;
    color: #333; /* Dark color for main heading */
    margin-bottom: 20px;
}

#resources p {
    font-size: 18px;
    color: #555; /* Softer text for the description */
    margin-bottom: 30px;
}

.resources-list h4 {
    font-size: 24px;
    color: #333; /* Dark color for subheadings */
    margin-bottom: 10px;
}

.resources-list ul li a {
    text-decoration: none;
    color: #3399ff; /* Blue color for links */
    font-size: 18px;
}

/* Night Mode Styles */
body.night-mode #resources {
    background-color: #333; /* Darker background */
    color: #fff; /* Light text color */
}

body.night-mode #resources h2,
body.night-mode .resources-list h4 {
    color: #fff; /* Light color for headings */
}

body.night-mode #resources p {
    color: #bbb; /* Softer light color for paragraphs */
}

body.night-mode .resources-list ul li a {
    color: #66b3ff; /* Lighter blue for links */
}

body.night-mode .resources-list ul li a:hover {
    color: #a3c2ff; /* Lighter hover color */
}


/* Custom spacing for navbar items */
.navbar-nav .nav-item {
    margin-right: 15px; /* Adjusts the space between items */
}

/* Optional: Ensure the night mode button aligns nicely */
#nightModeToggle {
    margin-left: 15px; /* Adjust the space to the left of the button */
}