*{
    margin:0;
    padding:0;
    box-sizing:inherit;

}

@font-face {
    font-family: 'azonix';
    src: url('../fonts/Azonix.woff') format('woff');
   
}

@font-face {
    font-family: 'telegraf';
    src: url('../fonts/TelegrafRegular.woff') format('woff');
    
}

.notSupported {
  display: none; /* Initially hide the message */
  visibility: hidden;
  text-align: center;
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  color: #000;
  z-index: 20;
}




html{
    font-size: 62.5%;
    scroll-behavior: smooth;
    text-transform: uppercase;
   
}

body{ 
    font-size: 1.6rem;
    background-color: black;
    box-sizing: border-box;
    margin: 0 auto;
    color: white;
    font-family: 'telegraf';

}

h1{
    font-family: 'azonix';
    font-size: 3rem;
    padding-bottom:2.4rem;
    white-space: nowrap;
}

p{
  font-size: 1.6rem;
  line-height: 1.6;
  padding: 0;
}

h2{
  font-family: 'azonix';
  font-size: 2.4rem;
  padding-bottom: 2rem;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 2);
}

h3{
  margin-top: 2rem;
  font-family: 'azonix';
  font-size: 2.4rem;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 2);
}



/*--------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------Logo and nav--------------------------------------------------------*/
.topNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    mix-blend-mode: difference;
  }
  
  .logo {
    display: block;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    text-decoration: none;
    font-size: 3rem;
    padding-left: 2rem;
    font-family: 'azonix';
  }
  
  .showreel, .aboutMe, .projects {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    text-decoration: none;
    padding: 3rem;
    color: white;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .contact {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    text-decoration: none;
    padding: 3rem;
    color: orange;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .showreel:hover, .aboutMe:hover, .projects:hover, .contact:hover {
    background-color: orange;
    color: black;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  

/*--------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------Heading--------------------------------------------------------*/

@keyframes lineLeftToRight {
    0% {
      width: 0;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    100% {
      width: 12%;
      opacity: 1;
    }
  }
  
  @keyframes lineRightToLeft {
    0% {
      width: 0;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    100% {
      width: 12%;
      opacity: 1;
    }
  }
  
  .lineA {
    position: absolute;
    width: 12%;
    top: 44.5%;
    border: 0;
    height: 2px;
    background: white;
    margin: 20px 0;
    opacity: 0;
    animation: lineLeftToRight 1s ease-out forwards;
    animation-delay: 1s;
  }
  
  .lineB {
    position: absolute;
    width: 12%;
    top: 44.5%;
    right: 0;
    border: 0;
    height: 2px;
    background: white;
    margin: 20px 0;
    opacity: 0;
    animation: lineRightToLeft 1s ease-out forwards;
    animation-delay: 1s;
  }
  

@keyframes slideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: fit-content; 
    }
}



.hero {
    position: relative;
    height: 100vh;
    width: 100%;  
    overflow: hidden;
}

.headerText { 
    width: auto;
    z-index: 1;
    position: absolute;
    top: 35%;
    left: 25%;
    transform: translate(-50%, -50%);
    text-align: center;
    animation: slideIn 1s ease forwards;
    animation-delay: 2s;
}

.text1,
.text2,
.text3 {
    margin: 0;
    padding: 0; 
    opacity: 0; 
}

.text1 {
    font-size: 2vw;
    margin-bottom: 10px; 
    text-align: left; 
    animation: slideIn 1s forwards; 
    animation-delay: 2s; 
}

.text2 {
    font-size: 8vw;
    font-family: 'azonix';
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    margin-bottom: 10px; 
    position: relative; 
    display: inline-block; 
    opacity: 0; 
    animation: slideIn 1s forwards; 
    animation-delay: 3s; 
}

.text3 {
    font-size: 2vw;
    margin-bottom: 10px; 
    text-align: right; 
    opacity: 0; 
    animation: fadeIn 1s forwards; 
    animation-delay: 4s; 
}

.text2::before,
.text2::after {
    content: attr(data-glitch);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; 
    color: white; 
    z-index: -1; 
    text-shadow: none; 
}

.text2:hover::before,
.text2:hover::after {
    opacity: 0.8; 
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) infinite; 
}

.text2:hover::after {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) reverse infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px); 
    }
    40% {
        transform: translate(-2px, -2px); 
    }
    60% {
        transform: translate(2px, 2px); 
    }
    80% {
        transform: translate(2px, -2px); 
    }
    to {
        transform: translate(0);
    }
}

.introText {
    z-index: 1;
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    overflow: hidden; /* Hide the text until it's "typed" */
    font-size: clamp(1rem, 2.5vw, 2rem); /* Adjust font size responsively */
    width: fit-content; /* Adjusts the width to the content */
    max-width: 90%; /* Prevents the text from overflowing the screen */
    opacity: 0; /* Initially hidden */
    animation: fadeIn 0.1s forwards 4.4s, typing 5s steps(50) 4.2s, blink 0.5s step-end infinite alternate 4.2s;
  }
  
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  
  
  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 100%; 
    }
  }
  
  @keyframes blink {
    50% {
      border-color: transparent;
    }
  }

.scene {
    position: relative;
    height: 100vh;
    width: 100vw;
    margin: 0 auto;
    opacity: 0; 
    animation: fadeIn 1s forwards; 
    animation-delay: 4s; 
}

.q1 {
    width: 17%;
    top: 36% !important;
    left: 31% !important;
}

.q2 {
    width: 17%;
    top: 36% !important;
    left: 41.5% !important;
}

.q3 {
    width: 17%;
    top: 36% !important;
    left: 52% !important;
}

.q4 {
    width: 17%;
    top: 32.8% !important;
    left: 41.5% !important;
}

.q5 {
    width: 10.5%;
    top: 41.4% !important;
    left: 34.2% !important;
}

.q6 {
    width: 10.5%;
    top: 39% !important;
    left: 44.8% !important;
    rotate: 180deg;
}

.q7 {
    width: 10.5%;
    top: 41% !important;
    left: 55.2% !important;
    rotate: 180deg;
}

.q8 {
    position: absolute;
    width: 38%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


 /* -----------------------------------------ABOUT SECTION --------------------------------------------------- */


 .about {
    position: relative;
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.content {
    width: 100%;
    height: 55%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 2fr 1fr;
    grid-column-gap: 30px;
    box-sizing: border-box;
}

.image {
    grid-area: 2 / 2 / 3 / 3;
    width: 80%;
    align-self: center;
   justify-self: center;
    
}

.text {
    margin: 45% 6% 1% 28%;
    grid-area: 2 / 3 / 3 / 4;
}

.text h1 {
    margin-bottom: 2.5rem;
}

.text p {
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 0;
}

.cta-button {
    visibility: hidden;
    background: transparent;
    border: 2px solid orange;
    color: orange;
    padding: 10px 20px;
    margin-top: 10%;
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    box-sizing: border-box;
}

.cta-button:hover {
    background: orange;
    color: black;
}

.aboutLine1,
.aboutLine2 {
    width: 40%;
    border: 0;
    height: 2px;
    background: white;
    align-self: center;
}

.aboutLine1 {
    grid-area: 2 / 1 / 3 / 2;
    justify-self: flex-start;
}

.aboutLine2 {
    grid-area: 2 / 4 / 3 / 5;
    justify-self: flex-end;
}

/* ----------------------------projects--------------------- */

a {
    display: contents; 
  
}

.projectsContainer{
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display:grid;
    grid-template-columns: 2fr repeat(5, 1fr) 2fr;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 0px;
}

.projectsHeader{
    font-family: 'azonix';
    grid-area: 1 / 3 / 2 / 6;
    justify-self: center;
    align-self: end;
    margin-bottom: 13%;

}

.p1img { 
   
    grid-area: 2 / 2 / 3 / 3; 
    width: 100%;
    overflow: hidden;
    align-self: center;
    justify-self: center;
}

.p2img { 
    grid-area: 2 / 3 / 3 / 4; 
    width: 100%;
    overflow: hidden;
    align-self: center;
    justify-self: center;
}
.p3img { 
    
    grid-area: 2 / 4 / 3 / 5;
    width: 100%;
    overflow: hidden;
    align-self: center;
    justify-self: center;
 }
.p4img {
     grid-area: 2 / 5 / 3 / 6; 
     width: 100%;
    overflow: hidden;
    align-self: center;
    justify-self: center;
    }

.p5img {
    grid-area: 2 / 6 / 3 / 7;
    width: 100%;
    overflow: hidden;
    align-self: center;
    justify-self: center;
  }
  
  .PRline3,
  .PRline4 {
    width: 50%;
    border: 0;
    height: 2px;
    background: white;
    align-self: center;
  }
  
  .PRline3 {
    grid-area: 2 / 1 / 3 / 2;
    justify-self: flex-start;
  }
  
  .PRline4 {
    grid-area: 2 / 7 / 3 / 8;
    justify-self: flex-end;
  }
  
  /* Text Elements */
  .p1Text,
  .p2Text,
  .p3Text,
  .p4Text,
  .p5Text {
    text-align: center;
    justify-content: center;
    align-content: flex-start;
    line-height: 1.5;
  }
  
  .p1Text { grid-area: 3 / 2 / 4 / 3; }
  .p2Text { grid-area: 3 / 3 / 4 / 4; }
  .p3Text { grid-area: 3 / 4 / 4 / 5; }
  .p4Text { grid-area: 3 / 5 / 4 / 6; }
  .p5Text { grid-area: 3 / 6 / 4 / 7; }
  
  /* Image Elements */
  .p1img,
  .p2img,
  .p3img,
  .p4img,
  .p5img {
    border-radius: 25px;
    width: 100%;
    overflow: hidden;
    align-self: center;
    justify-self: center;
    filter: brightness(0.9);
    transition: transform 0.9s ease, filter 0.4s ease;
  }
  
  .p1img:hover,
  .p2img:hover,
  .p3img:hover,
  .p4img:hover,
  .p5img:hover {
    width: 110%;
    filter: brightness(1);
  }
  
  /*------------------------- Showreel Section-------------------------- */
  .unpack7 {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1.2fr 2fr 0.5fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.uiHeader {
    grid-area: 1 / 2 / 2 / 3;
    justify-self: center;
    align-self: end;
    margin-bottom: 5%;
}

.videoContainer1 {
    grid-area: 2 / 2 / 3 / 3;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#myVideo2 {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    /* border: 2px solid white; */
}
  /* -----------------------------Contact Page -------------------------------------*/
  .contactContainer {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 2fr 1.4fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  
  .contactHeader {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    z-index: 1;
    grid-area: 2 / 2 / 3 / 3;
    font-family: 'azonix';
    justify-self: center;
    align-self: center;
    font-size: clamp(2rem, 5vw, 8rem); 
  }
  
  
  .aniContainer {
    position: absolute;
    width: 46%;
    top: 44.5%;
    left: 50.7%;
    transform: translate(-50%, -50%);
  }
  
  .line7,
  .line8 {
    width: 42%;
    border: 0;
    height: 2px;
    background: white;
    align-self: center;
  }
  
  .line7 { grid-area: 2 / 1 / 3 / 2; justify-self: flex-start; }
  .line8 { grid-area: 2 / 3 / 3 / 4; justify-self: flex-end; }
  
  /* Image Container */
  .image-container {
    grid-area: 3 / 2 / 4 / 3;
    width: 100%;
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: row;
    gap: 20px;
    padding: 10px;
    flex-wrap: wrap;
    z-index: 5;
  }
  
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-transform: lowercase;
    width: 30%;
    transition: transform 0.3s ease;
  }
  
  .item:hover { transform: scale(1.1) translateY(-10px); }
  
  .item img {
    width: 25%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 16px;
  }
  
  .item p {
    text-align: center;
    font-size: 1.6rem;
    margin: 0;
    margin-top: 20px;
    cursor: pointer;
  }
  
    
   
    /* #loading-screen {
     
      height: 100vh;
      background-color: #000000;
      color: white;
    }
    
    .hidden {
      display: none;
    }
    
    .spinner {
      width: 50px;
      height: 50px;
      border: 5px solid #ff8b00;
      border-top: 5px solid transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    #home-page {
      display: none; 
    }
     */





    /* -----------------query-------------- */

    #home-page {
      display: block;
    }

#low-resolution-message {
  font-family: 'telegraf';
  font-size: 1.6rem;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ff8b00;
  color:black ;
  padding: 50px;
  border-radius: 8px;
  text-align: center;
  z-index: 9999;
}


@media (max-width: 1439px) {
  #home-page {
    display: none ; 
  }

  #low-resolution-message {
    display: block; 
  }
}