* {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
  /* font-family: "Major Mono Display", monospace; */
  font-family: "Aboreto", monospace;

        }

.major-mono-display-regular {
  font-family: "Major Mono Display", monospace;
  font-weight: 400;
  font-style: normal;
}

.aboreto-regular {
  font-family: "Aboreto", system-ui;
  font-weight: 400;
  font-style: normal;
}


        /* =========================================
           PAGE UNDERNEATH
        ========================================= */

        .work-page {

            position: fixed;

            inset: 0;

            z-index: 1;

            background: #e8e8e8;

            color: #111;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-direction: column;
        }

        .work-page h1 {

            margin: 0;

            font-size: clamp(5rem, 12vw, 12rem);
        }


        /* =========================================
           LANDING PAGE
        ========================================= */

        .landing-page {

            position: fixed;

            inset: 0;

            z-index: 2;

            background: #111;

            color: white;

            /*
                This is the layer
                that gets revealed.
            */

            clip-path: inset(0 0 0 0);

        }


        .landing-content {
            position: absolute;
            width: 100%;
            height: 100%;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-direction: column;
        }


        .landing-content .flywright{
            position: absolute;
            top: 55%;
            margin: 0;

            font-size: clamp(3rem, 12vw, 12rem);
        }


        .landing-content p {
            position: absolute;
            top: 32%;
            letter-spacing: .1em;
        }


        button {
            position: absolute;

            bottom: 30%;

            margin-top: 30px;

            padding: 15px 30px;

            background: transparent;

            border: 1px solid white;

            color: white;

            cursor: pointer;

            font-size: 1rem;
        }


        /* =========================================
           DRONE
        ========================================= */

        .drone {

    position: fixed;

    z-index: 100;

    top: 50%;

    left: 100%;

    transform: translate(-50%, -50%);

    width: 120px;
    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 60px;

    pointer-events: none;

    /*
        Hidden when the page loads
    */

    opacity: 0;
}

.card {
    position: relative;

    height: 92dvh;
    width: 85dvw;

    background: rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);

    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);

    /* clip-path: polygon(0% 15%, 0 0, 15% 0%, 65% 0, 65% 39%, 100% 39%, 100% 85%, 100% 100%, 85% 100%, 54% 100%, 54% 80%, 0 80%); */

/* clip-path: polygon(0% 15%, 0 0, 15% 0%, 57% 0, 57% 25%, 100% 25%, 100% 85%, 100% 100%, 85% 100%, 52% 100%, 52% 79%, 0 79%); */
clip-path: polygon(0% 15%, 0 0, 15% 0%, 57% 0, 57% 39%, 100% 39%, 100% 85%, 100% 100%, 85% 100%, 58% 100%, 58% 79%, 0 79%);
    
overflow: hidden;
}



.card2 {
    top: 4%;
    right: 7%;
    position: absolute;

    height: 35dvh;
    width: 35dvw;

    background: rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);

    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);

    /* clip-path: polygon(0% 15%, 0 0, 15% 0%, 65% 0, 65% 39%, 100% 39%, 100% 85%, 100% 100%, 85% 100%, 54% 100%, 54% 80%, 0 80%); */

/* clip-path: polygon(0% 15%, 0 0, 15% 0%, 57% 0, 57% 25%, 100% 25%, 100% 85%, 100% 100%, 85% 100%, 52% 100%, 52% 79%, 0 79%); */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    
overflow: hidden;
}




.card3 {
    top: 78%;
    left: 7%;
    position: absolute;

    height: 18%;
    width: 48%;

    background: rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);

    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);

    /* clip-path: polygon(0% 15%, 0 0, 15% 0%, 65% 0, 65% 39%, 100% 39%, 100% 85%, 100% 100%, 85% 100%, 54% 100%, 54% 80%, 0 80%); */

/* clip-path: polygon(0% 15%, 0 0, 15% 0%, 57% 0, 57% 25%, 100% 25%, 100% 85%, 100% 100%, 85% 100%, 52% 100%, 52% 79%, 0 79%); */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    
overflow: hidden;
}



/* =====================================
   NAV CONTAINER
===================================== */

.card-nav {

    position: relative;

    width: 100%;
    height: 100%;
}


/* =====================================
   INDIVIDUAL GLASS MODULE
===================================== */

.nav-module {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px 22px;

    text-decoration: none;

    color: white;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 18px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 4px 20px rgba(0, 0, 0, 0.08);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


/* =====================================
   NUMBER
===================================== */

.nav-number {
    
    font-size: 0.65rem;

    opacity: 0.5;

    letter-spacing: 0.08em;
}


/* =====================================
   LABEL
===================================== */

.nav-label {

    font-size: 0.85rem;

    letter-spacing: 0.15em;
}


/* =====================================
   Press
===================================== */

/* .nav-press {
    top: 5%;
    left: 5%;
} */

.nav-press {

    top: 5%;

    left: 5%;

    display: block;

    padding: 18px 22px;

    width: 47%;

    height: 35%;
}


.press-header {

    display: flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255,255,255,.15);
}


.presslist {

    list-style: none;

    margin: 12px 0 0;

    padding: 0;
}


.presslist li {

    margin: 0;
}


.presslist a {

    display: block;

    padding: 7px 0;

    color: rgba(255,255,255,.7);

    text-decoration: none;

    font-size: .75rem;

    letter-spacing: .08em;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.presslist a:hover {

    color: white;

    padding-left: 6px;
}
/* =====================================
   WORK
===================================== */

.nav-work {
    top: 42%;
    left: 5%;
    height: 35%;
    width: 40%;
    
}


/* =====================================
   ABOUT
===================================== */

.nav-services {
    top: 42%;
    right: 5%;
    width: 45%;
    height: 18%;
}


/* =====================================
   CONTACT
===================================== */

.nav-contact {
    bottom: 3%;
    right: 5%;
    width: 45%;
    height: 35%;
    clip-path: polygon(0% 15%, 0 0, 15% 0%, 100% 0, 100% 15%, 100% 37%, 100% 68%, 100% 88%, 100% 100%, 28% 100%, 28% 41%, 0 41%);

}


/* =====================================
   HOVER
===================================== */

.nav-module:hover {

    background: rgba(255, 255, 255, 0.13);

    border-color: rgba(255, 255, 255, 0.4);

    transform: translateY(-3px);
}







/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  left: 0px;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: grayscale(75%);
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

.work-page {
    /* background: purple; */
    /* background-image: url("/assets/g2.gif");
    background-size: cover;
    background-position: center; */
      /* background-image: var(--bg-gradient),
    url("/assets/g1.gif"); */
    background-size: cover;
    background-position: center;
}

.landing-page {
    background-image: url("/assets/logo.jpg");
    background-size: cover;
    background-position: center;
}





.carousel {
    position: relative;
    width: 80%; 
    height: 75%;
    overflow: hidden;
    /* background-color: #cdcdcd; */
}

/* .carousel-item .slide-image1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-repeat: no-repeat; 

    background-color: red;
} */

/* .carousel-item .slide-image2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-repeat: no-repeat; 

    background-color: green;
} */


/* .slide-image1 img {
    height:100%;
}
.slide-image2 img { 
    height: 50%;
    top: 5%;
} */

.slide-image1 img,
.slide-image2 img {
    position: absolute;
    /* top: 1%; */
    bottom: 18%;
    left: 22%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* background-color: purple; */

}

.slide-image2 {
    top: 10%;
}

.carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    top: 0;
    left: 100%;
    
}

.carousel-item.active {
    left: 0;
    transition: all 0.3s ease-out;
}

.carousel-item div {
    height: 100%;
}

.carousel-item img {
    position: absolute;
    /* top: 4%; */
    text-align: center;
    margin-bottom: 10px;
    
}




.carousel-item h5 {
    position: absolute;
    /* top: 4%; */
    bottom: 6%;
    text-align: center;
    margin-bottom: 10px;
}

.carousel h5 {
    left: 15%;

    text-align: center;
}

.container h3 {
    text-align: center;
    margin-bottom: 20px;
}

.card3 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 100%;
    color: #f1f1f1;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icons img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.card2,
.card3  h3 {
      color: #f1f1f1;
}