* {
    margin: 0;
    padding: 0;
    /* background-color: rgb(31, 31, 31); */
}

body {}

.main-container {
    width: 100%;

    /* This padding will keep content off the very edge */
}

/* bubbles on beginning of homepage css */
@import "compass/css3";

.bubble {
    opacity: 0;
    position: absolute;
    border-radius: 50%;
    background: #2f0202;
    -webkit-animation: bubbles-appear, bubbles;
    animation: bubbles-appear, bubbles;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    &.big-bubble.left {
        top: 370px;
        left: 240px;
        height: 40px;
        width: 40px;
        border: 4px solid #2f0202;
        @include box-shadow(#2f0202 8px 0px 0px inset);
        -webkit-animation-duration: 0.05s, 5s;
        animation-duration: 0.05s, 5s;
        -webkit-animation-delay: 0.9s, 1s;
        animation-delay: 0.9s, 1s;
    }

    &.medium-bubble.left {
        top: 400px;
        /* lower than big one */
        left: 200px;
        height: 30px;
        width: 30px;
        border: 4px solid #2f0202;
        @include box-shadow(#2f0202 5px 0px 0px inset);
        -webkit-animation-duration: 0.05s, 4.9s;
        animation-duration: 0.05s, 4.9s;
        -webkit-animation-delay: 0.8s, 1s;
        animation-delay: 0.8s, 1s;
    }

    &.small-bubble.left {
        top: 435px;
        /* even lower */
        left: 240px;
        height: 20px;
        width: 20px;
        @include box-shadow(#e0f9ff 3px 0px 0px inset);
        -webkit-animation-duration: 0.05s, 4.6s;
        animation-duration: 0.05s, 4.6s;
        -webkit-animation-delay: 0.7s, 1s;
        animation-delay: 0.7s, 1s;
    }

    &.big-bubble.right {
        top: 320px;
        right: 270px;
        height: 40px;
        width: 40px;
        border: 4px solid #2f0202;
        box-shadow: #2f0202 -8px 0px 0px inset;
    }

    &.medium-bubble.right {
        top: 370px;
        right: 250px;
        height: 30px;
        width: 30px;
        border: 4px solid #2f0202;
        box-shadow: #2f0202 -5px 0px 0px inset;
    }

    &.small-bubble.right {
        top: 340px;
        right: 230px;
        height: 20px;
        width: 20px;
        box-shadow: #2f0202 -3px 0px 0px inset;
    }

}

// Bubbles
@-webkit-keyframes bubbles {
    from {
        @include transform(translate3d(0px, 0px, 0px));
    }

    to {
        @include transform(translate3d(0, -100px, 0px));
    }
}

@keyframes bubbles {
    from {
        @include transform(translate3d(0px, 0px, 0px));
    }

    to {
        @include transform(translate3d(0, -100px, 0px));
    }
}

// Opacity
@-webkit-keyframes bubbles-appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bubbles-appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* bubbles on homepage css end*/

.welcome-container {
    background-color: rgb(239, 201, 201);
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.3em;
    padding: 360px;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: black;
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

h3 {
    font-family: "Cherry Bomb One", system-ui;
    font-weight: 700;
    color: #380303;
    font-size: 10rem;
    margin: 0;
    user-select: none;
    letter-spacing: 1.5px;

}



/* <weight>: Use a value from 100 to 400 */
/* <uniquifier>: Use a unique and descriptive class name */

.cherry-bomb-one-regular {
    font-family: "Cherry Bomb One", system-ui;
    font-weight: 400;
    font-style: normal;
}


.container {
    max-width: 1900px;
    /* Limits the content width */
    margin: 0 auto;
    /* Centers the content within its parent */
    display: flex;
    /* Enables flexbox for content alignment */
    justify-content: space-between;
    /* Distributes items (e.g., logo on left, nav links on right) */
    align-items: center;
    /* Vertically centers items */
    height: 100px;
    /* Sets a fixed height for this container */
    padding: 0 20px;
}



/* General styles for nav */
nav {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: black;
    background-color: rgb(239, 201, 201);
    position: fixed;
    /* Makes it stay at the top */
    z-index: 1000;
    width: 100%;
    /* Ensures it's full width */
    top: 0;
    left: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Adds a subtle shadow for depth */
}

/* Styles for the inner container within the nav */
nav .container {
    max-width: 1200px;
    /* Limits content width on large screens */
    margin: 0 auto;
    /* Centers content on large screens */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    /* Fixed height for the navbar content */
    padding: 0 20px;
    /* Provides default horizontal padding */
}

nav .logo {
    font-size: 1.5rem;
    z-index: 6;
    color: black;
    font-weight: bold;
}

nav .links {
    display: flex;
    gap: 60px;
    list-style: none;
    justify-content: center;
    align-items: center;
}

nav .links a {
    color: black;
    text-decoration: none;
    cursor: pointer;
    font-weight: 400;
}

nav li {
    overflow: hidden;
    transition: 0.5s cubic-bezier(0.97, 0.02, 0.44, 0.99);
}

.home_underline {
    transform: translateX(-70px);
    width: auto;
    height: 2px;
    background-color: black;
    transition: 0.5s cubic-bezier(0.97, 0.02, 0.44, 0.99);
}

.list:hover>.home_underline {
    transform: translatex(0px);
    opacity: 1;
    /* ADD THIS: Make it fully visible on hover */
}

button {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: white;
    background-color: rgb(51, 3, 3);
    border-radius: 100px;
    padding: 10px 30px 10px 30px;
    transform-origin: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    /* Smooth button hover */
}

button:hover {
    transform: scale(1.05);
    /* Slightly enlarge button on hover */
}

button::before {
    content: " ";
    position: absolute;
    top: 0px;
    width: 40px;
    height: 40px;
    transform: skewX(40deg) translateX(-90px);
    background-color: rgba(255, 255, 255, 0.411);
    z-index: 99;
    transition: 0.8s cubic-bezier(0.97, 0.02, 0.44, 0.99);
}

button:hover::before {
    transform: skewX(40deg) translateX(100px);
    animation: btnshine 1s cubic-bezier(0.97, 0.02, 0.44, 0.99) infinite;
}

@keyframes btnshine {
    from {
        transform: skewX(40deg) translateX(-90px);
    }

    to {
        transform: skewX(40deg) translateX(100px);
    }
}

#nav-toggle {
    position: absolute;
    display: none;
}

nav .icon-burger {
    position: absolute;
    right: 5%;
    display: none;
}

nav .icon-burger .line {
    width: 30px;
    height: 4px;
    background-color: white;
    margin: 5px;
    border-radius: 5px;
}

/* Media query for screens 1024px and smaller */
@media screen and (max-width: 1024px) {
    nav .container {
        /* The margin property is removed here to allow the padding to control spacing */
        margin: 0 auto;
        /* Re-apply auto margin to ensure centering if max-width is used,
                           or simply rely on padding if the width is implicitly 100% */
        padding: 0 20px;
        /* You can adjust this padding for smaller screens if needed */
    }
}

/* Media query for screens 768px and smaller (mobile view adjustments) */
@media screen and (max-width: 768px) {
    nav .logo {
        z-index: 99;
    }

    nav .container {
        margin: 0 auto;
        padding: 0 15px;
        /* Example: slightly less padding on very small screens */
    }

    nav .links {
        float: none;
        position: fixed;
        top: 0;
        left: 100%;
        right: 0;
        bottom: 0;
        z-index: 9;
        width: auto;
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px 0px 0px 60px;
        background-color: rgba(0, 0, 0, 0.568);
        backdrop-filter: blur(20px);
        overflow: hidden;
        transition: 0.5s cubic-bezier(0.97, 0.02, 0.44, 0.99);
    }

    .home_underline {
        transform: translateX(-70px);
        width: auto;
        height: 2px;
        background-color: black;
        transition: 0.5s cubic-bezier(0.97, 0.02, 0.44, 0.99);
        opacity: 0;
        display: none;
        /* ADD THIS: Make it completely invisible by default */
    }

    button {
        font-size: 1.5rem;
        padding: 10px 40px;
    }

    nav .links a {
        font-size: 3rem;
    }

    nav .icon-burger {
        z-index: 9;
        display: block;
        caret-color: transparent;
    }

    nav :checked~.links {
        left: 0;
    }

    nav :checked~.icon-burger .line:nth-child(1) {
        transform: translateY(9px) rotate(50deg);
    }

    nav :checked~.icon-burger .line:nth-child(2) {
        transform: translateX(10px);
        opacity: 0;
    }

    nav :checked~.icon-burger .line:nth-child(3) {
        transform: translateY(-9px) rotate(-50deg);
    }
}

/* info section css start */
.info-section {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 900px;
    margin: 2rem auto;
    padding: 1rem;
    background-color: white;
    /* optional, for contrast */
    border-radius: 8px;
}

.info-section .image-container {
    flex: 0 0 150px;
    /* fixed width for the image */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 100px;


}

.info-section .image-container img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
    display: block;
    margin-right: 100px;
}

.info-section .text-container {
    flex: 2;
    color: #380303;
    /* match your h3 color */
    font-family: Arial, Helvetica, sans-serif;
}

.info-section .text-container h2 {
    font-weight: 700;
    /* bold */
    margin-bottom: 0.5rem;
    font-size: 3rem;
    font-family: "Cherry Bomb One", system-ui;

}

.info-section .text-container p {
    font-size: 1rem;
    line-height: 1.5;
    font-family: "Montserrat Alternates", sans-serif;
    font-weight: 400;
    font-style: normal;
}


/* Responsive for smaller screens */
@media screen and (max-width: 768px) {
    .info-section {
        flex-direction: column;
        max-width: 95%;
        padding: 0.5rem;
    }

    .info-section .text-container h2 {
        font-size: 1.5rem;
    }
}

/* info section css end */

/* cards section css start*/
/* cards section css start*/
* {
    box-sizing: border-box;
}

@media (min-width: 50em) {
    h2 {
        font-size: 1.8rem;
    }
}

.cards-wrapper {
    background-color: #380303;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.cards-row {
    display: flex;
    flex-wrap: wrap;
    /* Allows wrapping on smaller screens */
    justify-content: center;
    gap: 2rem;
    /* Increased gap slightly for bigger cards */
}

.cards-wrapper .away {
    color: white;
    font-family: "Cherry Bomb One", system-ui;
    font-weight: 700;
    font-size: 3rem;
    text-align: center;
    user-select: none;
    margin-bottom: 3rem;
    /* Space underneath the heading */
    padding-top: 2rem;
    /* Optional space above the heading */
}

.cta {
    --shadowColor: 187 60% 40%;
    display: flex;
    /* Retain flex for side-by-side layout */
    flex-direction: row;
    /* Layout content horizontally within the card */
    background: hsl(0, 38%, 80%);
    width: 380px;
    /* Keep width consistent as per your last request */
    max-width: 380px;
    /* Ensure max-width matches the fixed width */
    min-height: 200px;
    /* **Increased min-height significantly to give more text space** */
    box-shadow: 0.65rem 0.65rem 0 hsl(0, 42%, 46%);
    border-radius: 0.8rem;
    overflow: hidden;
    border: 0.5rem solid;
    align-items: center;
    /* Vertically align items in the card */
}

.cta img {
    width: 35%;
    /* Keep image width consistent or adjust as needed */
    height: 100%;
    /* Make image take full height of its container */
    object-fit: cover;
    /* Ensure image covers the area, cropping if needed */
    outline: 0.5rem solid;
}

.cta__text-column {
    flex: 1;
    /* Allows the text column to take up remaining space */
    padding: 1.2rem;
    /* **Increased padding around the text** */
}

.cta__text-column>*+* {
    margin-top: 1rem;
    /* Restored margin for better spacing */
}

.cta a {
    display: inline-block;
    color: black;
    padding: 0.5rem 1rem;
    /* Keep button padding consistent */
    text-decoration: none;
    background: hsl(0, 42%, 46%);
    border-radius: 0.6rem;
    font-weight: 700;
    border: 0.35rem solid;
    font-size: 1rem;
    /* Keep font size for the button consistent */
}

.cards-wrapper .away h2 {
    font-weight: 700;
    /* bold */
    font-size: 3rem;
    color: white;
    font-family: "Cherry Bomb One", system-ui;
    letter-spacing: 1.5px;
    padding: 0;
    margin-bottom: 1rem;
    /* was 3rem */
}

.cards-wrapper h2.look {
    font-weight: 700;
    /* bold */
    margin-bottom: 0.5rem;
    /* Keep margin below heading consistent */
    font-size: 1.8rem;
    /* Keep heading size consistent */
    color: black;
    font-family: "Cherry Bomb One", system-ui;
    letter-spacing: 1.5px;
}

.cards-wrapper p.check {
    font-size: 0.9rem;
    /* Keep paragraph font size consistent */
    line-height: 1.5;
    /* **Slightly increased line height for better readability** */
    font-weight: 400;
    font-style: normal;
    font-family: "Montserrat Alternates", sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    /* **Increased lines to 5 (from 4) to allow more text** */
    -webkit-box-orient: vertical;
    margin-bottom: 0.8rem;
    /* **Increased bottom margin for paragraph** */
}

.cards-wrapper p.clock {
    font-size: 1rem;
    font-weight: 400;
    color: white;
    font-style: normal;
    padding: 0;
    font-family: "Montserrat Alternates", sans-serif;
    margin-top: -50px;
}

/* cards section css end */
/* cards section css end */

.cook {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* Arrange items vertically */
    justify-content: center;
    /* Centers vertically */
    align-items: center;
    /* Centers horizontally */
    font-family: "Cherry Bomb One", system-ui;
    position: relative;
    /* Still needed for absolute positioning of the main "my pie" text */
}

.pie {
    margin: 5vmin auto;
    border-radius: 50%;
    width: 50vmin;
    height: 50vmin;
    overflow: hidden;
    /* Removed padding: 50px; to ensure accurate centering of labels */
    background: conic-gradient(#530303 0% 20%,
            /* 1st slice */
            #dda399 20% 40%,
            /* 2nd slice */
            #a53d3d 40% 60%,
            /* 3rd slice */
            #310202 60% 80%,
            /* 4th slice */
            #da6464 80% 100%
            /* 5th slice */
        );
    z-index: 1;
    position: relative;
    /* Essential for positioning the inner slice labels */
}

.cook h2.look {
    font-weight: 700;
    font-size: 3rem;
    color: black;
    font-family: "Cherry Bomb One", system-ui;
    letter-spacing: 1.5px;
    text-align: center;

    margin-bottom: 2vmin;
    /* Add some space between the text and the pie */
    z-index: 10;
    width: 100%;
    max-width: 50vmin;
    box-sizing: border-box;
    padding: 0 10px;
}

/* Styles for the individual pie section labels */
.pie>div {
    /* Target direct children divs of .pie */
    position: absolute;
    transform: translate(-50%, -50%);
    /* Center the label itself */
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    /* Default text color for labels */
    background-color: rgba(0, 0, 0, 0.4);
    /* Semi-transparent background for readability */
    padding: 0.8vmin 1.5vmin;
    border-radius: 10px;
    text-align: center;
    white-space: nowrap;
    /* Prevent text from wrapping */
    z-index: 5;
    /* Ensure labels are on top of the pie */
    font-family: "Cherry Bomb One", system-ui;
    /* Apply the same font */
}

/* Positioning for each specific slice label - calculated for precise centering */
/* Each slice is 72 degrees (360 / 5) */
/* Labels are placed at ~65% of the pie's radius (0.65 * 25vmin = 16.25vmin) from the center */

/* Slice 1 (goofy): Midpoint angle = 36 degrees */
.goofy {
    top: calc(50% + 9.54vmin);
    left: calc(50% + 13.15vmin);
}

.locked-in {
    /* Adjusted values for better visibility */
    top: calc(50% + 9.54vmin);
    left: calc(50% + 13.15vmin);
}

/* Slice 2 (funny): Midpoint angle = 108 degrees */
.funny {
    top: calc(50% + 15.45vmin);
    left: calc(50% - 5.02vmin);
}

/* Slice 3 (sleeping): Midpoint angle = 180 degrees */
.sleeping {
    top: calc(50% + 0vmin);
    left: calc(50% - 16.25vmin);
}

/* Slice 4 (eating): Midpoint angle = 252 degrees */
.eating {
    top: calc(50% - 15.45vmin);
    left: calc(50% - 5.02vmin);
}

/* Slice 5 (locked-in): Midpoint angle = 324 degrees */


/* Optional: Adjust colors for better contrast if needed */
.goofy {
    background-color: rgba(83, 3, 3, 0.6);
}

/* Dark Red */
.funny {
    background-color: rgba(221, 163, 153, 0.6);
    color: black;
}

/* Light Red */
.sleeping {
    background-color: rgba(165, 61, 61, 0.6);
}

/* Medium Red */
.eating {
    background-color: rgba(49, 2, 2, 0.6);
}

/* Very Dark Red */
.locked-in {
    background-color: rgba(255, 192, 203, 0.6);
    color: black;
}

/* Changed to light pink for visibility */

/* footer css start */
@import url("https://fonts.googleapis.com/css?family=IBM%20Plex%20Sans:500|IBM%20Plex%20Sans:300");

:root {
    --m: 4rem;
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}



.card {
    height: calc(8 * var(--m));
    width: calc(12 * var(--m));
    color: black;
    font-family: "Montserrat Alternates", sans-serif;

    border-radius: calc(0.5 * var(--m));

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}



footer {
    /* Reduced from 80vh to decrease the space above the footer */
    z-index: 500;
    width: 100%;
    height: auto;
    /* Changed from 100vh to make the footer height adapt to its content */
    min-height: 30vh;
    /* Added a minimum height to ensure it's visible, adjust as needed */

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-end;
    position: relative;
    background: linear-gradient(to bottom, #000000, #4a0909, #a53d3d, #FFFFFF);
    margin-bottom: 50px;
}


.col {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(0.3 * var(--m)) calc(0.8 * var(--m));
    width: 28%;
}

.col2,
.col3 {
    background-color: #b25050;
    border-radius: calc(0.5 * var(--m));
    margin-left: 20px;
    margin-left: 20px;

}

img {
    height: calc(0.3 * var(--m));
    object-fit: cover;
}

.social {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
}

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

.link {
    width: calc(0.8 * var(--m));
    height: calc(0.8 * var(--m));
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: calc(0.1 * var(--m));

    display: flex;
    justify-content: center;
    align-items: center;
}

.trick h3.spin {
    font-size: 8rem;
    line-height: 1.5;
    font-weight: 600;
    color: white;
    font-family: "Cherry Bomb One", system-ui;


}

.turn p.work {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 300;
    color: white;
    font-family: "Montserrat Alternates", sans-serif;



}

.soap p.water {
    color: white;
    font-family: "Montserrat Alternates", sans-serif;


}


/* footer css end */

/* my vision timeline css start */
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,700,900);
$fontstack_heading: "Merriweather", sans-serif;
$fontstack_body: "Merriweather", sans-serif;

body {
    font-size: 100%;
    line-height: 1.6;
}

.block-content {
    min-height: 100vh;
}

block-content p {
    font-size: 1.1em;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0 auto 1em auto;
}

.block-content h2 {

    text-align: center;
    margin: 1em 0 0 0;
    font-size: 2.5em;
    line-height: 1;
    letter-spacing: 0.02em;

    @media all and (min-width:40em) {

        font-size: 4.75em;

    }
}

.subtitle {

    font-family: $fontstack_heading;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    font-size: 1em;
    margin: 0.5em 0;
}

.heading-group {
    margin: 0 0 3em 0;
}

.content h3 {
    font-size: 1.2em;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #fff;

    @media all and (min-width:40em) {

        font-size: 2.5em;

    }
}


h1,
h2,
h3 {

    font-family: $fontstack_heading;
    font-weight: 900;

}

p {
    font-family: $fontstack_body;
    line-height: 1.5;
}

.l-block-spacing {


    min-height: 80vh;
    padding: 2em 0 4em 0;

}

.l-contained {

    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;

    padding-left: 1em;
    padding-right: 1em;

    @media all and (min-width:40em) {

        padding-left: 2em;
        padding-right: 2em;


    }
}

.timeline-list {

    //border-left: 5px solid #ccc;
    padding-bottom: 1em;
    position: relative;
    max-width: 700px;
    margin: 0 auto;

    &:before {
        content: "";
        border-left: 5px solid #CCC;
        left: -0.25em;
        top: 2em;
        height: 100%;
        position: absolute;
        bottom: 0;
        top: 0;
        transform-origin: 0 0;
        animation: scaleVertical 3s 1s ease both 1;
    }

    &:after {
        content: "";
        clear: both;

        position: absolute;
        bottom: 0px;
        left: -1em;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: none repeat scroll 0% 0% #DDD;
        border: 5px solid #DDD;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        animation: revealScaleUp 0.75s 2.82s ease both 1;
    }
}

.t-block-teal {
    background: #360404;
}

.t-block-teal h2 {
    color: #fff;
}

.t-block-teal h3 {
    color: #ffffff;
}

.t-block-teal p {
    color: #ffffff;
}

//list animation 
//scale in the circle, follwoed by the list item
//the border must also animate in.
.timeline-list li {

    margin: 0 0 3em 0;
    padding: 0 2em 0em 2em;
    position: relative;

}

.timeline-list li:before {

    content: "";
    position: absolute;
    top: 0px;
    left: -1.45em;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: none repeat scroll 0% 0% #ffffff;
    border: 5px solid #fff;
    animation: revealScaleUp 0.75s 0s ease both 1;
}

.timeline-list {

    animation: reveal 2s 0 ease both 1;
}

.timeline-list li .content {
    animation: revealFromLeft 0.5s 0s ease both 1;
}




.timeline-list li:nth-child(1):before {
    animation-delay: 0.85s;
}

.timeline-list li:nth-child(1) .content {
    animation-delay: 1.05s;
}

.timeline-list li:nth-child(2):before {
    animation-delay: 1.2s;
}

.timeline-list li:nth-child(2) .content {
    animation-delay: 1.5s;
}

.timeline-list li:nth-child(3):before {
    animation-delay: 1.8s;
}

.timeline-list li:nth-child(3) .content {
    animation-delay: 2.1s;
}

.timeline-list li:nth-child(4):before {
    animation-delay: 2s;
}

.timeline-list li:nth-child(4) .content {
    animation-delay: 2.3s;
}

@keyframes revealFromLeft {
    0% {
        transform: translateX(-1em);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes reveal {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes scaleVertical {
    0% {
        transform: scaleY(0);

    }

    100% {
        transform: scaleY(1);
    }
}

@keyframes revealScaleUp {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }



    50% {
        opacity: 1;
        transform: scale(1.3);

    }

    100% {
        opacity: 1;
        transform: scale(1);

    }
}

.content p.develop {
    font-family: "Montserrat Alternates", sans-serif;

}

.spiral p.struck {
    font-family: "Montserrat Alternates", sans-serif;
    text-align: center;
    margin-top: 30px;

}

.cool h3.weird {
    text-align: center;
    font-family: "Cherry Bomb One", system-ui;
    font-size: 10px;


}

/* my vision timeline css end */

/* wdp cards portfolio projects start*/
/* wdp cards portfolio projects start*/
:root {
    --default-padding: 10px;
}

/* Mixin a11y-visually-hidden */
.a11y-visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
    word-wrap: normal;
}

/* New container for the cards */
.portfolio-container {
    display: flex;
    /* Makes the container a flex container */
    flex-wrap: wrap;
    /* Allows cards to wrap to the next line if needed */
    gap: 30px;
    /* Adds space between cards (adjust as desired) */
    justify-content: center;
    /* Centers the cards horizontally */
    align-items: flex-start;
    /* Aligns cards to the top, useful if cards have different heights */
    padding: 100px;
    /* Add some padding around the whole collection of cards */
    background-color: #f1cbcb;
}


.window {
    /* Keep this for the internal layout of each card */
    display: flex;
    flex-direction: column;
    min-width: 350px;
    min-height: 350px;
    border: 5px solid #2a0101;
    box-shadow: 15px 15px 0 #5b0202;
    max-width: 400px;
    max-height: 400px;
    background-color: #d96c6c;
    filter: saturate(.1);
    border-radius: 3px;
    padding: 30px;
    /* Remove the margin-bottom, margin-top, and margin-left from here,
       as the `gap` on the container will handle spacing between cards. */
    /* margin-bottom: 100px; */
    /* margin-top: 100px; */
    /* margin-left: 50px; */
}

.window:focus-within {
    filter: saturate(1);
}

.take h1.give {
    /* Notice the square brackets for attribute selection */
    font-family: "Montserrat Alternates", sans-serif;
    color: #310303;
    text-align: center;
    font-size: 20px;

}

.hate h1.love {
    /* Notice the square brackets for attribute selection */
    font-family: "Montserrat Alternates", sans-serif;
    color: #310303;
    text-align: center;
    font-size: 20px;
}

.down p.up {
    /* Notice the square brackets for attribute selection */
    font-family: "Montserrat Alternates", sans-serif;
    color: #310303;
    text-align: center;
    font-size: 14px;
}

.down ul.up {
    /* Notice the square brackets for attribute selection */
    font-family: "Montserrat Alternates", sans-serif;
    color: #310303;
    text-align: center;
    font-size: 14px;
}



.window__title-bar {
    background-color: #cc4f4f;
    color: white;
    padding: 13px var(--default-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    user-select: none;
    z-index: 1;
    box-shadow: 0px 5px 6px -2px #bb99ff5e;
}

.window__body {
    flex-grow: 1;
    background-color: white;
    padding: var(--default-padding);
    overflow-y: auto;
    scrollbar-color: #350505 #dfd4fd;
    scrollbar-width: thin;
}

.window__body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #dfd4fd;
}

.window__body::-webkit-scrollbar-thumb {
    background: #e0afaf;
}

.window__btn {
    cursor: pointer;
    background-color: #610d0d;
    width: 20px;
    height: 20px;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    opacity: .8;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ae63e4;
}

.window__btn:hover {
    opacity: 1;
}

.window__btn span {
    /* Applying the mixin's styles directly */
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
    word-wrap: normal;
}

.window__btn+.window__btn {
    margin-left: 6px;
}

.window__title {
    line-height: 1;
    font-weight: 500;
    font-size: 1rem;
}

pre {
    font-family: monospace;
    background-color: #d08b8b;
    color: white;
    padding: 10px;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

.window__status-bar {
    padding: 3px var(--default-padding);
    font-size: .75rem;
    color: #ecd4ff;
}

::-moz-selection {
    color: white;
    background: hotpink;
}

::selection {
    color: white;
    background: rgb(224, 159, 159);
}

.bag h2[span="books"] {
    /* Notice the square brackets for attribute selection */
    font-family: "Cherry Bomb One", system-ui;
    color: #310303;
    text-align: center;
    font-size: 60px;
    background-color: #f1cbcb;

}

.spoon p[span="learn"] {
    font-family: "Montserrat Alternates", sans-serif;

}

/* wdp projects css end */

/* wdp projects gallery start */
/* Globals */


/* Utilities */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,
            minmax(var(--auto-grid-min-size, 14rem), 1fr));
    grid-gap: var(--auto-grid-gap, 0);
    padding: 0;
}

.flow {
    --flow-space: 4em;
    /* Set a specific value for this .flow instance */
    /* ... other .flow properties ... */
}

.flow>*+* {
    margin-top: var(--flow-space, 3em);
}

/* Composition */
.team {
    --flow-space: 2em;
    text-align: center;
}

/* Blocks */
.profile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1/1;
    position: relative;
    padding: 1.5rem;
    color: #ffffff;
    backface-visibility: hidden;
    text-decoration: none;
    overflow: hidden;
}

.profile::before,
.profile::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    /*inset: 0;*/
    top: 0;
    left: 0;
}

.profile::before {
    background: linear-gradient(to top,
            hsl(0 0% 0% / 0.79) 0%,
            hsl(0 0% 0% / 0.787) 7.8%,
            hsl(0 0% 0% / 0.779) 14.4%,
            hsl(0 0% 0% / 0.765) 20.2%,
            hsl(0 0% 0% / 0.744) 25.3%,
            hsl(0 0% 0% / 0.717) 29.9%,
            hsl(0 0% 0% / 0.683) 34.3%,
            hsl(0 0% 0% / 0.641) 38.7%,
            hsl(0 0% 0% / 0.592) 43.3%,
            hsl(0 0% 0% / 0.534) 48.4%,
            hsl(0 0% 0% / 0.468) 54.1%,
            hsl(0 0% 0% / 0.393) 60.6%,
            hsl(0 0% 0% / 0.31) 68.3%,
            hsl(0 0% 0% / 0.216) 77.3%,
            hsl(0 0% 0% / 0.113) 87.7%,
            hsl(0 0% 0% / 0) 100%);
    transition: 300ms opacity linear;
}

.profile::after {
    background: linear-gradient(45deg,
            hsl(5 97% 63% / 0.7) 0,
            hsl(5 97% 63% / 0) 100%);
    opacity: 0;
    transition: 300ms opacity linear;
}

.profile>* {
    z-index: 1;
}

.profile img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    z-index: -1;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 200ms ease, transform 250ms linear;
}

.profile h2,
.profile p {
    transform: translateY(2ex);
    font-family: "Cherry Bomb One", system-ui;

}

.profile h2 {
    font-size: 1.7rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.03ch;
    transition: 300ms transform ease;
    font-family: "Cherry Bomb One", system-ui;

}

.profile p {
    font-size: 1.2rem;
    font-weight: 500;
    font-family: "Montserrat Alternates", sans-serif;

}

.profile p {
    opacity: 0;
    transition: 300ms opacity linear, 300ms transform ease-in-out;
}

.profile:focus {
    outline: 0.5rem solid white;
    outline-offset: -0.5rem;
}

.profile:hover :is(h2, p),
.profile:focus :is(h2, p) {
    transform: none;
}

.profile:hover::after,
.profile:focus::after,
.profile:hover::before,
.profile:focus::before {
    opacity: 0.7;
}

.profile:hover p,
.profile:focus p {
    opacity: 1;
    transition-delay: 200ms;
}

.profile:hover img,
.profile:focus img {
    filter: grayscale(0);
    transform: scale(1.05) rotate(1deg);
}

.flow h1[span="away"] {
    font-family: "Cherry Bomb One", system-ui;

}

.flow p[span="clock"] {
    font-family: "Montserrat Alternates", sans-serif;

}

/* wdp projects gallery end */

/* more about me cards that hover start */
/* From Uiverse.io by Smit-Prajapati */
.card {
    width: 280px;
    height: 280px;
    background: white;
    border-radius: 32px;
    padding: 3px;
    position: relative;
    box-shadow: #604b4a30 0px 70px 30px -50px;
    transition: all 0.5s ease-in-out;

}

.card-container {
    display: flex;
    /* Makes the container a flex container */
    flex-wrap: wrap;
    /* Allows cards to wrap to the next line if needed */
    gap: 30px;
    /* Adds space between cards (adjust as desired) */
    justify-content: center;
    /* Centers the cards horizontally */
    align-items: flex-start;
    /* Aligns cards to the top, useful if cards have different heights */
    padding: 100px;
    /* Add some padding around the whole collection of cards */
    background-color: #f1cbcb;
}

.card .mail {
    position: absolute;
    right: 2rem;
    top: 1.4rem;
    background: transparent;
    border: none;
}

.card .mail svg {
    stroke: #fbb9b6;
    stroke-width: 3px;
}

.card .mail svg:hover {
    stroke: #f55d56;
}

.card .profile-pic {
    position: absolute;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    top: 3px;
    left: 3px;
    border-radius: 29px;
    z-index: 1;
    border: 0px solid #fbb9b6;
    overflow: hidden;
    transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s;
}

.card .profile-pic img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    -o-object-position: 0px 0px;
    object-position: 0px 0px;
    transition: all 0.5s ease-in-out 0s;
}

.card .profile-pic svg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0px 0px;
    object-position: 0px 0px;
    transform-origin: 45% 20%;
    transition: all 0.5s ease-in-out 0s;
}

.card .bottom {
    position: absolute;
    bottom: 3px;
    left: 3px;
    right: 3px;
    background: #430502;
    top: 80%;
    border-radius: 29px;
    z-index: 2;
    box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.card .bottom .content {
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 160px;
}

.card .bottom .content .name {
    display: block;
    font-size: 1.2rem;
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.card .bottom .content .about-me {
    display: block;
    font-size: 0.9rem;
    color: rgb(255, 255, 255);
    margin-top: 1rem;
}

.card .bottom .bottom-bottom {
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card .bottom .bottom-bottom .social-links-container {
    display: flex;
    gap: 1rem;
}

.card .bottom .bottom-bottom .social-links-container svg {
    height: 20px;
    fill: rgb(255, 255, 255);
    filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333));
}

.card .bottom .bottom-bottom .social-links-container svg:hover {
    fill: #f55d56;
    transform: scale(1.2);
}

.card .bottom .bottom-bottom .button {
    background: white;
    color: #fbb9b6;
    border: none;
    border-radius: 20px;
    font-size: 0.6rem;
    padding: 0.4rem 0.6rem;
    box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px;
}

.card .bottom .bottom-bottom .button:hover {
    background: #f55d56;
    color: rgb(0, 0, 0);
}

.card:hover {
    border-top-left-radius: 55px;
}

.card:hover .bottom {
    top: 20%;
    border-radius: 80px 29px 29px 29px;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
}

.card:hover .profile-pic {
    width: 100px;
    height: 100px;
    aspect-ratio: 1;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    z-index: 3;
    border: 7px solid #fbb9b6;
    box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px;
    transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s;
}

.card:hover .profile-pic:hover {
    transform: scale(1.3);
    border-radius: 0px;
}

.card:hover .profile-pic img {
    transform: scale(2.5);
    -o-object-position: 0px 25px;
    object-position: 0px 25px;
    transition: all 0.5s ease-in-out 0.5s;
}

.card:hover .profile-pic svg {
    transform: scale(2.5);
    transition: all 0.5s ease-in-out 0.5s;
}

/* more about me card hover css end */