@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: "brittany signature";
    src:  url('/BrittanySignature.ttf') format('truetype');
  }
* {
    margin: 0%;
    padding: 0%;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin: 0%;
    padding: 0%;
    overflow: hidden;
}

.background--custom {
    background-color: #FFFFFF;
    width: 100vw;
    height: 100vh;
    position: absolute;
    overflow: hidden;
    z-index: -2;
    top: 0;
    left: 0;

}

canvas#canvas {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(0deg) scale(2.5) translateY(0%);
    --gradient-color-1: #191D38    ;
    --gradient-color-2: #dfb359    ;
    --gradient-color-3: #f5db9b    ;
    --gradient-color-4: #d49e34    ;
    --gradient-speed: 0.000006;
}

h1 {
    /* Font family and fallback */
    font-family: 'Montserrat', sans-serif;
    /* Color from the logo */
    color: #ffffff;
    /* Ensure uppercase text */
    text-transform: uppercase;
    /* Adjust font size to match the logo's prominence */
    font-size: 3.3rem;
    /* Line height for better spacing */
    line-height: 1.2;
    /* Remove default margin for better control */
    margin: 0;
}

/* Split the styling for "EVENT SERVICES" and "AZUR" using a span */
h1 .event-services {
    font-weight: 700; /* Bold for "EVENT SERVICES" */
}

h1 .azur {
    font-weight: 400; /* Regular weight for "AZUR" */
    display: block; /* Put "AZUR" on a new line */
    font-size: 2.3rem; /* Slightly smaller than "EVENT SERVICES" */
}

.countdown-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-direction: column;


}

.countdown-container {
    /* From https://css.glass */
    height: 20vh;
    width: 10vw;
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}

.number {
    font-size: 50px;
    color: #FFFFFF;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: normal;
    font-family: 'Montserrat', sans-serif;
}

img {
    height: auto;
    width: 20vw;
}

.countdown {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 60%;
}

.slogan {
    font-size: 30px;
    color: #FFFFFF;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: normal;
    font-family: "brittany signature";

}

.slogan1 {
    font-size: 20px;
    color: #FFFFFF;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: normal;
    font-family: 'Montserrat', sans-serif;

}

.label {
    font-size: 20px;
    color: #FFFFFF;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: normal;
    text-transform: capitalize;
    font-family: 'Montserrat', sans-serif;
}