body, html {
    margin: 0;
    padding: 0;
background-color: black;

}






#header {
    width: 100vw;
    height: 100px;
    box-sizing: border-box;
    padding: 60px;
    padding-bottom: 60px;
    display: flex;
}
  


.header-container-1 {
   width: 50vw;
   height: 100px;
   display: flex;
   justify-content: left;
   align-items: center;
}

.header-container-1 img {
    max-width: 40%;
    max-height:40%;
 
}





.header-container-2 {
   width: 50vw;
   height: 100px;
   justify-content: center;
   text-align: right;
   
}


/* #menu {
    margin: 25px;
} */


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


.menu-item {
    /* display: inline-flex; */
    font-size:14px;
    margin: 16px;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    /* color: rgb(21, 21, 21); */
    color: white;
    cursor:pointer;
    display: inline;
    

}

.menu-item:hover {

    font-weight:500;
    color:#303030;
    /* color: #20ffec; */
    text-decoration:underline;
}


#bt-1 {
    text-decoration: line-through 1.5px;
    color: #8fece4;
    
}



/* This is a Comment Section (Cmd + /) */

/* RESPONSIVE FLEX CONTAINER --------------------------- */



.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* Remove any gap between items */

}

.flex-item {
    flex: 1 1 100%; /* Grow, shrink, and initial size to 100% */
    border: none;
    background-color: rgb(0, 0, 0);
    box-sizing: border-box;
    position: relative;
    overflow: hidden; /* Ensure content does not overflow */
    cursor: pointer;
 
}


/* .flex-item:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
} */



.flex-item::before {
    content: "";
    display: block;
    padding-top: 78.22%; /* Aspect ratio 1.28:1 (404:316) */
}

.flex-item-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.flex-item-container img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle;
}


#img-item {

    width: 100%;
    height: auto;

}



.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Black background with 60% opacity */
    color: white;
    display: flex;
    /* justify-content: center; */
    justify-content: left;
    padding-left: 30px;
    padding-right: 30px;
    /* align-items: center; */
    padding-top: 30px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2; /* Ensure hover layer is above flex items */
/* 
    font-family:"Outfit", sans-serif;  */
    font-family: Josefin Sans, monospace;
    font-weight: 700;
    font-size:x-large;
  
}


#mouse-overlay {
    color: white;
    text-decoration: none !important;

}






.flex-item:hover .overlay {
    opacity: 1;
}









/* 
Work content page ---------------------------------------------------------------- */



h1 {
    color: rgb(255, 255, 255);
    text-align: left;
    font-size: 28px;
    font-family: 'Josefin Sans', sans-serif;
    padding-left: 20%;
    padding-right: 20%;
    line-height: 1.2;

}


h2 {
    color: rgb(255, 255, 255);
    text-align: left;
    font-size: 32px;
    font-family: 'Josefin Sans', sans-serif;
    line-height: 1;
    padding-left: 20%;
    padding-right: 20%;
    margin-top: 100px;

}


h3 {
    color:rgb(255, 255, 255);
    text-align: justify;
    letter-spacing: 1px;
    word-spacing: 0;
    line-height: 1.3;
    font-size: 18px;
    font-family: 'Josefin Sans', sans-serif;
    /* font-family: 'Handjet', cursive; */
    padding-left: 20%;
    padding-right: 20%;

    
    .see-more{
        color:white;
        text-decoration: none;
    }

    .see-more, .see-more p {
        color: white;
        text-decoration: none; /* Optional: Remove underline from the link */
    }
    
}

/* About quote */
.animated-color {
    animation: colorChange 10s infinite;
}

@keyframes colorChange {
    0% {
        color: rgb(255, 86, 235);
    }
    25% {
        color: rgb(48, 89, 255);
    }
    50% {
        color: rgb(148, 255, 148);
    }
    75% {
        color: rgb(255, 251, 181);
    }
    100% {
        color: rgb(255, 86, 235);
    }
}

a {
    color: white;
   
}

#about-text-container {

    padding-left: 10%;
    padding-right: 10%;
    
}
    


.paragraph-about {
    font-size: 23px ;
}



p {
    color: rgb(255, 255, 255);
    text-align: justify left;
    letter-spacing: 1px;
    word-spacing: 0;
    line-height: 1.3;
    font-size: 21px;
    font-weight: 300;
    font-family:'Josefin Sans', sans-serif;
    padding-left: 20%;
    padding-right: 20%;

}


.highlight-1 {

    font-family: 'Josefin Sans', sans-serif;
    /* color: black; */
    font-weight: 900;
}

.highlight-2 {
    font-family: 'Josefin Sans', sans-serif;
    text-decoration: underline;
}


.text-main {
    box-align: center;
    display: inline;
}




/* 
Media Query  ---------------------------------------------------------------- */


@media (max-width: 600px) {
    .menu-item {
        display: block;
        
    }

    p, h1, h2 {
        padding-left: 5%;
        padding-right: 5%;
        
    }

img {
    width: 100%;
}

}



@media (min-width: 600px) {
    .flex-item {
        flex: 1 1 50%; /* Two items per row */
    } 
   
   
 
}



@media (min-width: 900px) {
    .flex-item {
        flex: 1 1 calc(16.66%); /* Six items per row */
    }

 
}


@media (max-width: 900px) {
    .flex-item-img-grid2 {
        flex: 1 1 100%;
    }

    .flex-item-img-grid3 {
        flex: 1 1 100%;
    }


}




/* @media (min-width: 1200px)  */



.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; /* Adjust the height as needed */
    overflow: hidden; /* Ensure any overflow is hidden */
    background-color:none; /* Optional: background color for better viewing experience */
}

.video-wrapper {

    position: relative;
    width: 100%;
    max-width: 1280px; /* Adjust the maximum width as needed */
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.video-wrapper iframe {
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Removes any default border */
}



/* Placeholder for Youtube ---------------------------------------------------------------- */



.centered-yt-iframe {
    display: flex;
    justify-content: center;
    align-items: center;

}


.video-container-yt {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  display: flex;
  justify-content: center;
  align-items: center;
 
}

.video-wrapper-yt iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  max-height: 720px;
  border: none;
}




/* Images ---------------------------------------------------------------- */

.flex-container-img-grid2 {
    display: flex;
    justify-content: space-between; /* Adjusts the space between images */
    align-items: center; /* Aligns images vertically */
    flex-wrap: wrap; /* Allows items to wrap onto multiple lines */
   
}

.flex-item-img-grid2 {
    width: 50%; /* Adjusts the width of each image */
    height: auto; /* Maintains the aspect ratio */
    margin: 0;

}



.single-img {
    width: 100%;
    height: auto;
    display: flex;
    object-fit: contain;
}













.single-img-container {
    display: flex;
    align-items: center; /* Aligns images vertically */
    justify-content: center;
    flex-wrap: wrap; /* Allows items to wrap onto multiple lines */
}


.profile-pic{
    width: 350px;
}


.profile-pic img {
    width: 100%; /* Make the image take the full width of the .profile-pic container */
    max-width: 350px; /* Ensure the image does not exceed 300px */
    height: auto; /* Maintain the aspect ratio of the image */
    display: block; /* Remove any inline spacing */
    margin: 0 auto; /* Center the image horizontally */
}












.flex-container-img-grid3 {
    display: flex;
    justify-content: space-between; /* Adjusts the space between images */
    align-items: center; /* Aligns images vertically */
    flex-wrap: wrap; /* Allows items to wrap onto multiple lines */
   
}

.flex-item-img-grid3 {
    width: 32%; /* Adjusts the width of each image */
    height: auto; /* Maintains the aspect ratio */
    margin: 10px;

}




.single-img-container-max-1280 {
    width: 100%;
    max-width: 1280px;
    height: auto;
    display: flex;
    align-items: center;  /* Aligns items vertically in the center */
    justify-content: center;  /* Centers items horizontally */
    margin: 0 auto;  /* Centers the container itself within its parent */
}

.single-img-max-1280 {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;  /* Ensures any children within the image are centered */
    justify-content: center;  /* Centers any children horizontally */
}



.single-img-container-max-720 {
    width: 100%;
    max-width: 720px;
    height: auto;
    display: flex;
    align-items: center;  /* Aligns items vertically in the center */
    justify-content: center;  /* Centers items horizontally */
    margin: 0 auto;  /* Centers the container itself within its parent */
}

.single-img-max-720 {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;  /* Ensures any children within the image are centered */
    justify-content: center;  /* Centers any children horizontally */
}






/* 

Go to top of the page bt ---------------------------------------------------------------- */

#scrollToTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 125px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #1e1e1e; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 75px; /* Rounded corners */
    font-size:24px; /* Text size */;
    
}

#scrollToTopBtn:hover {
    background-color: #12ffe7; /* Add a dark-grey background on hover */
    color: rgb(14, 14, 14); /* Text color */
   
}




/* Footer ---------------------------------------------------------------- */

.spacing-footer {
    /* background-color: rgb(255, 255, 255); */
    background-color: black;
    width: 100%;
    height: 175px;

}



.copy-footer {

    padding: 60px;
    font-family: "Outfit", sans-serif;
    font-weight: 200;
    /* color: rgb(214, 214, 214); */
    color:rgb(167, 167, 167);

}

/* body {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(23, 23, 23);

} */





.content-video-thumb {
    position: relative;
    width: 100%;
    max-width: 640px;
}
.content-video-thumb img {
    width: 100%;
    cursor: pointer;
}
.content-video-thumb iframe {
    display: none;
    width: 100%;
    height: 360px;
}






.video-native-container-2 {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center; /* Centers the video horizontally */
    align-items: center; /* Centers the video vertically if necessary */        

}




.video-native-center {

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


.video-native-container {
    position: relative;
    width: 100%;

}




video{
   max-width: 100%;
   height: auto;
}



.cursor-follower {
    width: 20px;
    height: 20px;
    background-color: #20ffec; /* You can change the color */
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    transition: transform 0.5s ease; /* Smooth movement */
    opacity: none; /* no transparcy */
    z-index: 9999; /* Ensures it's above all other elements */
}


.divider-space-video-native {
    width: 100%;
    height: 250px;
}



.my-link {
    color:white ;           /* Link text color */
    text-decoration: none; /* Removes underline */
    font-size: 21px;
  }

  .my-link:hover {
    color:#20ffec;               /* Change text color on hover */
    text-decoration: underline; /* Add underline on hover */
  }

  .my-link:active {
    background-color: rgb(62, 62, 62); /* Background color when clicked */
  }

 

  .yellow-type-footer {
    color: rgb(104, 104, 104);
  }