#loader {
       position: fixed;
       background: var(--bg);
       width: 100%;
       height: 100svh;
       top: 0px;
       pointer-events: none;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       z-index: 10000;
       animation: loader 1.5s ease forwards;

       .title {
              font-size: 80px;
              scale: 1;
              opacity: 0;
              transition: transform 1s ease-out;
              animation-duration: 0.5s;

              &:nth-child(2), &:nth-child(10) {
                     animation: loadertxt 0.5s ease-in-out forwards 0s; 
              }
              &:nth-child(3), &:nth-child(9) {
                     animation: loadertxt 0.5s ease-in-out forwards 0.1s; 
              }
              &:nth-child(4), &:nth-child(8) {
                     animation: loadertxt 0.5s ease-in-out forwards 0.2s; 
              }
              &:nth-child(5), &:nth-child(7) {
                     animation: loadertxt 0.5s ease-in-out forwards 0.3s; 
              }
              &:nth-child(6), &:nth-child(6) {
                     animation: loadertxt 0.5s ease-in-out forwards 0.4s; 
              }
              span {
                     padding-right: 0px;
                     background-image: linear-gradient(90deg, var(--pri), var(--acc));
                     background-clip: text;
                     color: transparent;
              }
       }
       div {  
              position: absolute;
                  width: 100%;
              height: 100svh;
              background: linear-gradient(0deg, var(--bg), transparent, var(--bg));
              z-index: 10001;
       }
}
@keyframes loader {
       from {
              opacity: 1;
       }
       70% {
              opacity: 1;
       }
       to {
              opacity: 0;
       }
}
@keyframes loadertxt {
       from {
              opacity: 0;
       }
       50% {
              opacity: 1;
       }
       to {
              opacity: 0;
       }
}


#header.desktop {
       position: fixed;
       top: 10px;
       background: transparent;
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
       gap: 10px;
       z-index: 9999;

       img {
              cursor: pointer;
              max-height: 30px;
              box-shadow: 0px 0px 0px 1px rgba(255,255,255,10%);
              padding: 10px 20px; 
              border-radius: 50vmax;
              transition: 0.1s ease;
              background: var(--bgtrans);
              opacity: 1;
       }
       h2 {
              position: absolute;
              background: var(--bgtrans);
              padding: 10px 20px;
              font-size: 20px;
              bottom: -50px;
              scale: 0.5;
              opacity: 0;
              transition: 0.3s ease;
       }
}
#header.mobile {
       position: fixed;
       top: 10px;
       left: 10px;
       background: transparent;
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
       gap: 10px;
       z-index: 9999;

       img {
              cursor: pointer;
              max-height: 3vmax;
              box-shadow: 0px 0px 0px 1px rgba(255,255,255,10%);
              padding: 1vmax 2vmax; 
              border-radius: 50vmax;
              transition: 0.1s ease;
              background: var(--bgtrans);
              opacity: 1;
       }
       h2 {
              position: absolute;
              background: var(--bgtrans);
              padding: 10px 20px;
              font-size: 2vmax;
              bottom: -6vmax;
              scale: 0.5;
              opacity: 0;
              transition: 0.3s ease;
       }
}
#header2.desktop {
       position: fixed;
       top: 10px;
       right: 10px;
       background: transparent;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       align-items: flex-end;
       gap: 10px;
       z-index: 9999;

       span {
              cursor: pointer;
              max-height: 30px;
              box-shadow: 0px 0px 0px 1px rgba(255,255,255,10%);
              padding: 10px 10px; 
              border-radius: 50vmax;
              transition: 0.1s ease;
              background: var(--bgtrans);
              opacity: 1;
       }
       .headeradder.on {
              opacity: 1;
              scale: 1;
              pointer-events: auto;
       }
       .headeradder {
              position: relative;
              box-shadow: 0px 0px 0px 1px rgba(255,255,255,10%);
              padding: 15px 20px;
              border-radius: 10px !important;
              background: var(--bgtrans);
              display: flex;
              opacity: 0;
              scale: 0.9;
              pointer-events: none;
              flex-direction: column;
              align-items: flex-end;
              gap: 5px;
              transition: 0.2s ease;

              h2 {
                     opacity: 0.5;
                     font-size: 20px;
                     transition: 0.1s ease;
                     cursor: pointer;
                     margin-right: 10px;

                     &:hover {
                            opacity: 1;
                     }
              }
              h3 {
                     font-size: 10px;   
                     padding: 0px 10px;
              }
              hr {
                     flex-grow: 1;
                     width:100%;
                     opacity: 0.2;
              }
       }
}
#header2.mobile {
       position: fixed;
       top: 10px;
       right: 10px;
       background: transparent;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       align-items: flex-end;
       gap: 10px;
       z-index: 9999;

       span {
              cursor: pointer;
              max-height: 10vmax;
              font-size: 3vmax;
              box-shadow: 0px 0px 0px 1px rgba(255,255,255,10%);
              padding: 2vmax; 
              border-radius: 50vmax;
              transition: 0.1s ease;
              background: var(--bgtrans);
              opacity: 1;
       }
       .headeradder.on {
              opacity: 1;
              scale: 1;
              pointer-events: auto;
       }
       .headeradder {
              position: relative;
              box-shadow: 0px 0px 0px 1px rgba(255,255,255,10%);
              padding: 2vmax 3vmax;
              border-radius: 2vmax !important;
              background: var(--bgtrans);
              display: flex;
              opacity: 0;
              scale: 0.9;
              pointer-events: none;
              flex-direction: column;
              align-items: flex-end;
              gap: 5px;
              transition: 0.2s ease;

              h2 {
                     opacity: 0.5;
                     font-size: 3vmax;
                     transition: 0.1s ease;
                     cursor: pointer;

                     &:hover {
                            opacity: 1;
                     }
              }
              h3 {
                     font-size: 2vmax;   
                     padding: 0px 10px;
              }
              hr {
                     flex-grow: 1;
                     width:100%;
                     opacity: 0.2;
              }
       }
}

#hero.desktop {
       position: relative;
       background: transparent;
       width: 100%;
       height: 100svh;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;

       h1 {
              font-size: 150px;
              scale: 1;
              transition: transform 1s ease-out;
              span {
                     padding-right: 0px;
                     background-image: linear-gradient(90deg, var(--pri), var(--acc));
                     background-clip: text;
                     color: transparent;
              }
       }
       h2 {
              font-style: italic;
              opacity: 0.7;
       }
       .sindicate {
              pointer-events: none;
              position: absolute;
              bottom: 25px;
              font-size: 50px;
              background-image: linear-gradient(360deg, var(--pri), var(--acc));
              background-clip: text;
              color: transparent;
       }
}
#hero.mobile {
       position: relative;
       background: transparent;
       width: 100%;
       height: 100svh;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;

       h1 {
              font-size:80px;
              scale: 1;
              transition: transform 1s ease-out;
              span {
                     padding-right: 0px;
                     background-image: linear-gradient(90deg, var(--pri), var(--acc));
                     background-clip: text;
                     color: transparent;
              }
       }
       h2 {
              font-style: italic;
              opacity: 0.7;
              font-size:20px;
       }
       .sindicate {
              pointer-events: none;
              position: absolute;
              bottom: 25px;
              font-size: 50px;
              background-image: linear-gradient(360deg, var(--pri), var(--acc));
              background-clip: text;
              color: transparent;
       }
}
#sec2.desktop {
       position: relative;
       background: transparent;
       width: 100%;
       padding: 100px 0px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 50px;

       .title {
              background-image: linear-gradient(90deg, var(--pri), var(--acc));
              background-clip: text;
              color: transparent;
              translate: 0% 0%;
              font-size: 100px;
              transition: transform 0.3s ease-out;
       }
       .items {
              padding: 10px;
              background: transparent;
              min-width: 50px;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              gap: 25px;
              flex-wrap: wrap;

              div {
                     position: relative;
                     background: var(--bg2);
                     padding: 10px;
                     width: 800px;
                     height: 350px;
                     display: flex;
                     flex-direction: column;
                     justify-content: flex-start;
                     align-self: center;
                     gap: 20px;
                     cursor: pointer;
                     transition: 0.1s ease;

                     &:hover {
                            box-shadow: 0px 0px 0px 2px var(--pri),
                                   0px 0px 15px -2px var(--pri);
                            h3 {
                                   translate: 0% 0%;
                                   opacity: 0.3;
                            }
                     }

                     img {
                            width: 100%;
                            min-height: 200px;
                            opacity: 0.7;
                            flex-grow: 1;
                            object-fit: cover;
                     }
                     h1 {
                            font-size: 40px;
                            text-align: center;
                            opacity: 0.9;
                     }
                     h2 {
                            flex-grow: 1;
                            height: 100%;
                            text-align: center;
                            opacity: 0.5;
                            font-size: 20px;
                            margin-bottom: 10px;
                     }
                     h3 {
                            position: relative;
                            text-align: center;
                            bottom: 15px;
                            font-size: 12px;
                            opacity: 0;
                            transition: 0.2s ease;
                            translate: 0% 100%;

                            span {
                                   position: absolute;
                                   top: -5px;
                            }
                     }
              }
       }
}
#sec2.mobile {
       position: relative;
       background: transparent;
       width: 100%;
       padding: 100px 0px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 50px;

       .title {
              background-image: linear-gradient(90deg, var(--pri), var(--acc));
              background-clip: text;
              color: transparent;
              translate: 0% 0%;
              font-size: 70px;
              transition: transform 0.3s ease-out;
       }
       .items {
              padding: 0px;
              background: transparent;
              min-width: 50px;
              width: 90%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              gap: 25px;
              flex-wrap: wrap;

              div {
                     position: relative;
                     background: var(--bg2);
                     padding: 10px;
                     display: flex;
                     flex-direction: column;
                     justify-content: flex-start;
                     align-self: center;
                     gap: 20px;
                     cursor: pointer;
                     transition: 0.1s ease;

                     &:hover {
                            box-shadow: 0px 0px 0px 2px var(--pri),
                                   0px 0px 15px -2px var(--pri);
                            h3 {
                                   translate: 0% 0%;
                                   opacity: 0.3;
                            }
                     }

                     img {
                            width: 100%;
                            min-height: 200px;
                            opacity: 0.7;
                            flex-grow: 1;
                            object-fit: cover;
                     }
                     h1 {
                            font-size: 5vmax;
                            text-align: center;
                            opacity: 0.9;
                     }
                     h2 {
                            flex-grow: 1;
                            height: 100%;
                            text-align: center;
                            opacity: 0.5;
                            font-size: 2.5vmax;
                            margin-bottom: 10px;
                     }
                     h3 {
                            position: relative;
                            text-align: center;
                            bottom: 15px;
                            font-size: 12px;
                            opacity: 0;
                            transition: 0.2s ease;
                            translate: 0% 100%;

                            span {
                                   position: absolute;
                                   top: -5px;
                            }
                     }
              }
       }
}
#sec3.desktop {
       position: relative;
       background: transparent;
       width: 1700px;
       padding: 50px 0px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 50px;

       .title {
              background-image: linear-gradient(90deg, var(--pri), var(--acc));
              background-clip: text;
              color: transparent;
              translate: 0px 0%;
              font-size: 100px;
              transition: transform 0.3s ease-out;
       }
       .items {
              padding: 10px;
              background: transparent;
              min-width: 50px;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              gap: 25px;
              flex-wrap: wrap;

              div {
                     position: relative;
                     padding: 20px 40px;
                     background: var(--bg2);
                     overflow: hidden;

                     h1 {
                            color: var(--pri);
                     }
                     img {
                            pointer-events: none;
                            position: absolute;
                            opacity: 0.1;
                            height: 100%;
                            top: 0px;
                            left: 0px;
                            translate: -50% 0%;
                     }
              }
       }
}
#sec3.mobile {
       position: relative;
       background: transparent;
       width: 100%;
       padding: 50px 0px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 50px;

       .title {
              background-image: linear-gradient(90deg, var(--pri), var(--acc));
              background-clip: text;
              color: transparent;
              translate: 0px 0%;
              font-size: 100px;
              transition: transform 0.3s ease-out;
       }
       .items {
              padding: 10px;
              background: transparent;
              min-width: 50px;
              width: 90%;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              gap: 25px;
              flex-wrap: wrap;

              div {
                     position: relative;
                     width: 100%;
                     padding: 20px 40px;
                     background: var(--bg2);
                     overflow: hidden;

                     h1 {
                            color: var(--pri);
                     }
                     img {
                            pointer-events: none;
                            position: absolute;
                            opacity: 0.1;
                            height: 100%;
                            top: 0px;
                            right: 0px;
                            scale: 2;
                            translate: 50% 0%;
                     }
              }
       }
}
#footer.desktop {
       position: relative;
       background: transparent;
       border-radius: 0px !important;
       width:100%;
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: 10px;

       hr {
              flex-grow: 1;
              border-color: var(--pri2);
              border-style: dashed;
              height: 0px;
       }

       .ftitle {
              margin-bottom: 10px;
              margin-left: 10px;
              height: 100%;
              position: relative;
              padding: 30px;
              background: var(--bg2);
              overflow: hidden;

              div {
                     position: absolute;
                     height: 100%;
                     width: 5px;
                     background: var(--pri);
                     top: 0px;
                     left: 0px;
              }
              h1 {
                     font-size: 50px;
                     scale: 1;
                     transition: transform 1s ease-out;
                     span {
                            padding-right: 15px;
                            background-image: linear-gradient(90deg, var(--pri), var(--acc));
                            background-clip: text;
                            color: transparent;
                     }
              }
              h2 {
                     font-size: 20px;
                     font-style: italic;
                     opacity: 0.7;
              }
       }
       .items {
              margin-bottom: 10px;
              margin-right: 10px;
              position: relative;
              background: var(--bg2);
              overflow: hidden; 
              display: flex;
              gap: 10px;

              div {
                     background: transparent;
                     padding: 20px 30px;
                     text-align: right;

                     h1 {
                            color: var(--pri);
                            font-size: 30px;
                            margin-bottom: 5px;
                     }
                     h2 {
                            opacity: 0.5;
                            font-size: 20px;
                            cursor: pointer;
                            transition: 0.1s ease;

                            &:hover {
                                   opacity: 1;
                            }
                     }
              }
       }
}

#footer.mobile {
       position: relative;
       background: transparent;
       border-radius: 0px !important;
       width:100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 10px;

       hr {
              flex-grow: 1;
              border-color: var(--pri2);
              border-style: dashed;
              height: 0px;
       }

       .ftitle {
              margin-bottom: 10px;
              margin-left: 10px;
              height: 100%;
              position: relative;
              padding: 30px;
              background: var(--bg2);
              overflow: hidden;

              div {
                     position: absolute;
                     height: 100%;
                     width: 5px;
                     background: var(--pri);
                     top: 0px;
                     left: 0px;
                     display: none;
              }
              h1 {
                     text-align: center;
                     font-size: 50px;
                     scale: 1;
                     transition: transform 1s ease-out;
                     span {
                            padding-right: 15px;
                            background-image: linear-gradient(90deg, var(--pri), var(--acc));
                            background-clip: text;
                            color: transparent;
                     }
              }
              h2 {
                     text-align: center;
                     font-size: 20px;
                     font-style: italic;
                     opacity: 0.7;
              }
       }
       .items {
              margin-top: 10px;
              margin-bottom: 10px;
              position: relative;
              background: var(--bg2);
              overflow: hidden; 
              display: flex;
              justify-content: center;
              width: 100%;
              gap: 10px;

              div {
                     background: transparent;
                     padding: 20px 30px;
                     text-align: right;

                     h1 {
                            color: var(--pri);
                            font-size: 30px;
                     }
                     h2 {
                            opacity: 0.5;
                            font-size: 20px;
                            cursor: pointer;
                            transition: 0.1s ease;

                            &:hover {
                                   opacity: 1;
                            }
                     }
              }
       }
}
@media screen and (max-width: 768px) {
      
       #loader .title {
           font-size: 2rem;
       }
       
      
       #hero #title {
           font-size: 2.5rem;
           word-wrap: break-word;
           max-width: 100%;
           padding: 0 15px;
       }
   
      
       #hero h2 {
           font-size: 1.2rem;
           padding: 0 15px;
           text-align: center;
       }
   }
   
  
   @media screen and (max-width: 480px) {
       #loader .title {
           font-size: 1.5rem;
       }
       
       #hero #title {
           font-size: 2rem;
       }
   
       #hero h2 {
           font-size: 1rem;
       }
   }
  


html {
       scroll-behavior: smooth;
     }
     
    
     @keyframes fadeIn {
       from {
         opacity: 0;
         transform: translateY(20px);
       }
       to {
         opacity: 1;
         transform: translateY(0);
       }
     }
     
    
     .button {
       transition: all 0.3s ease;
     }
     
     .button:hover {
       transform: translateY(-3px);
       filter: brightness(1.2);
       box-shadow: 0 5px 15px rgba(0,0,0,0.2);
     }
     
    
     #sec2 .items div {
       transition: all 0.3s ease;
     }
     
     #sec2 .items div:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 20px rgba(0,0,0,0.2);
     }
     
    
     #sec3 .items div {
       transition: all 0.3s ease;
     }
     
     #sec3 .items div:hover {
       transform: scale(1.05);
     }
     
    
     #header img {
       transition: all 0.3s ease;
     }
     
     #header img:hover {
       transform: rotate(360deg) scale(1.1);
     }
     
    
     #footer a h2 {
       position: relative;
     }
     
     #footer a h2::after {
       content: '';
       position: absolute;
       width: 0;
       height: 2px;
       bottom: -2px;
       left: 0;
       background-color: #ffd700;
       transition: width 0.3s ease;
     }
     
     #footer a h2:hover::after {
       width: 100%;
     }
     
    
     @keyframes gradient {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
     }
     
     #title span {
       background: linear-gradient(45deg, #ffd700, #ff6b6b, #4ecdc4);
       background-size: 200% 200%;
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       animation: gradient 5s ease infinite;
     }




@keyframes float {
       0% { transform: translateY(0px); }
       50% { transform: translateY(-20px); }
       100% { transform: translateY(0px); }
   }
   
   #hero #title {
       animation: float 6s ease-in-out infinite;
   }
   
   
   
  
   #hero {
       position: relative;
       overflow: hidden;
   }
   
   .particles {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
   }
   
   .particle {
       position: absolute;
       background: rgba(255, 215, 0, 0.5);
       border-radius: 50%;
       pointer-events: none;
   }
  


#hero {
       position: relative;
       overflow: hidden;
       background: linear-gradient(
           to bottom,
           rgba(0, 0, 0, 0.8),
           rgba(0, 0, 0, 0.9)
       );
   }
   
  
   #hero::before {
       content: '';
       position: absolute;
       top: -2px;
       left: -2px;
       right: -2px;
       bottom: -2px;
       border: 2px solid #ffd700;
       opacity: 0.3;
       z-index: -1;
       animation: borderGlow 3s ease-in-out infinite;
   }
   
   @keyframes borderGlow {
       0%, 100% { opacity: 0.2; }
       50% { opacity: 0.4; }
   }
   
  
   #hero #title {
       position: relative;
       text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
   }
   
  
   #hero #title span {
       color: #ffd700;
       text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
   }
   
  
   .ambient-glow {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 100%;
       height: 100%;
       background: radial-gradient(
           circle at center,
           rgba(255, 215, 0, 0.1) 0%,
           transparent 70%
       );
       opacity: 0;
       animation: ambientGlow 4s ease-in-out infinite;
   }
   
   @keyframes ambientGlow {
       0%, 100% { opacity: 0; }
       50% { opacity: 1; }
   }
   
  
   .shine-line {
       position: absolute;
       top: 0;
       left: -100%;
       width: 50%;
       height: 1px;
       background: linear-gradient(
           to right,
           transparent,
           rgba(255, 215, 0, 0.5),
           transparent
       );
       animation: shineLine 6s infinite;
   }
   
   @keyframes shineLine {
       0% { left: -100%; }
       100% { left: 200%; }
   }




#sec2 {
       padding: 4rem 2rem;
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95));
   }
   
   #sec2 .title {
       text-align: center;
       color: #ffd700;
       margin-bottom: 3rem;
       text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
   }
   
   #sec2 .items div {
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 215, 0, 0.1);
       border-radius: 10px;
       padding: 1.5rem;
       margin-bottom: 2rem;
       backdrop-filter: blur(5px);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
       transition: all 0.3s ease;
   }
   
   #sec2 .items div:hover {
       transform: translateY(-5px);
       border-color: rgba(255, 215, 0, 0.3);
       box-shadow: 0 8px 25px rgba(255, 215, 0, 0.1);
   }
   
   #sec2 .items img {
       border-radius: 8px;
       margin-bottom: 1rem;
       width: 100%;
       object-fit: cover;
   }
   
   #sec2 .items h1 {
       color: #ffd700;
       font-size: 1.5rem;
       margin-bottom: 0.5rem;
   }
   
   #sec2 .items h2 {
       color: #ffffff;
       opacity: 0.8;
       font-size: 1rem;
       margin-bottom: 1rem;
   }
   
   #sec2 .items h3 {
       color: #ffd700;
       opacity: 0.6;
       font-size: 0.9rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
  
   #sec3 {
       padding: 4rem 2rem;
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.9));
   }
   
   #sec3 .title {
       text-align: center;
       color: #ffd700;
       margin-bottom: 3rem;
       text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
   }
   
   #sec3 .items {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 2rem;
       padding: 1rem;
   }
   
   #sec3 .items div {
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 215, 0, 0.1);
       border-radius: 10px;
       padding: 2rem;
       text-align: center;
       transition: all 0.3s ease;
   }
   
   #sec3 .items div:hover {
       background: rgba(255, 255, 255, 0.08);
       border-color: rgba(255, 215, 0, 0.3);
       transform: translateY(-5px);
   }
   
   #sec3 .items img {
       width: 80px;
       height: 80px;
       margin-bottom: 1rem;
       filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
   }
   
   #sec3 .items h1 {
       color: #ffd700;
       font-size: 1.2rem;
       margin-bottom: 0.5rem;
   }
   
   #sec3 .items h2 {
       color: #ffffff;
       opacity: 0.8;
       font-size: 1rem;
   }
   
  
   #footer {
       padding: 4rem 2rem 2rem;
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 1));
   }
   
   #footer .ftitle {
       text-align: center;
       margin-bottom: 3rem;
   }
   
   #footer .ftitle h1 {
       color: #ffd700;
       margin-bottom: 1rem;
       text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
   }
   
   #footer .ftitle h2 {
       color: #ffffff;
       opacity: 0.8;
   }
   
   #footer hr {
       border: none;
       height: 1px;
       background: linear-gradient(
           to right,
           transparent,
           rgba(255, 215, 0, 0.3),
           transparent
       );
       margin: 2rem 0;
   }
   
   #footer .items {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 2rem;
       padding: 1rem;
   }
   
   #footer .items div {
       text-align: center;
   }
   
   #footer .items h1 {
       color: #ffd700;
       font-size: 1.2rem;
       margin-bottom: 1rem;
   }
   
   #footer .items h2 {
       color: #ffffff;
       opacity: 0.7;
       font-size: 1rem;
       margin-bottom: 0.5rem;
       transition: all 0.3s ease;
   }
   
   #footer .items h2:hover {
       color: #ffd700;
       opacity: 1;
   }
   
  
   #footer a {
       text-decoration: none;
       position: relative;
   }
   
   #footer a::after {
       content: '';
       position: absolute;
       width: 0;
       height: 1px;
       bottom: -2px;
       left: 50%;
       background: #ffd700;
       transition: all 0.3s ease;
   }
   
   #footer a:hover::after {
       width: 100%;
       left: 0;
   }
   
  
   @media screen and (max-width: 768px) {
       #sec2, #sec3, #footer {
           padding: 3rem 1rem;
       }
       
       #sec3 .items {
           grid-template-columns: 1fr;
       }
       
       #footer .items {
           grid-template-columns: 1fr;
       }
   }

  

body {
       position: relative;
   }
   
  
   #hero, #sec2, #sec3, #footer {
       position: relative;
       z-index: 2;
   }
   
  
   body::after {
       content: '';
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(
           to bottom,
           rgba(0, 0, 0, 0.8),
           rgba(0, 0, 0, 0.9)
       );
       pointer-events: none;
       z-index: 0;
   }

  

.contact-buttons {
       display: flex;
       gap: 20px;
       justify-content: center;
       margin-top: 2rem;
       position: relative;
   }
   
   .contact-btn {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px 24px;
       border: 2px solid #ffd700;
       background: rgba(255, 215, 0, 0.1);
       color: #ffd700;
       border-radius: 8px;
       cursor: pointer;
       font-size: 1rem;
       font-weight: 600;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
   }
   
   .contact-btn:hover {
       background: rgba(255, 215, 0, 0.2);
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
   }
   
   .contact-btn:active {
       transform: translateY(0);
   }
   
   .contact-btn img {
       width: 20px;
       height: 20px;
       filter: brightness(0) saturate(100%) invert(83%) sepia(71%) 
               saturate(638%) hue-rotate(359deg) brightness(103%) contrast(107%);
   }
   
  
   .contact-btn::after {
       content: '';
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       background: rgba(255, 215, 0, 0.3);
       transform: scale(0);
       border-radius: 50%;
       transition: transform 0.5s ease;
   }
   
   .contact-btn:active::after {
       transform: scale(2);
       opacity: 0;
   }
   
  
   .tooltip {
       position: absolute;
       background: rgba(0, 0, 0, 0.8);
       color: #ffd700;
       padding: 8px 16px;
       border-radius: 4px;
       font-size: 0.9rem;
       bottom: -40px;
       left: 50%;
       transform: translateX(-50%);
       opacity: 0;
       visibility: hidden;
       transition: all 0.3s ease;
   }
   
   .tooltip.show {
       opacity: 1;
       visibility: visible;
   }
   
  
   @media screen and (max-width: 768px) {
       .contact-buttons {
           flex-direction: column;
           align-items: center;
       }
       
       .contact-btn {
           width: 200px;
       }
   }
   /* Add this to your main.css */
#footer {
       width: 100%;
       background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
       padding: 4rem 2rem 2rem;
       position: relative;
       overflow: hidden;
   }
   
   .footer-content {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 2fr;
       gap: 4rem;
   }
   
   .footer-brand {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   
   .footer-brand .tagline {
       color: var(--pri);
       font-size: 1.1rem;
       opacity: 0.8;
   }
   
   .footer-sections {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 2rem;
   }
   
   .footer-nav, .footer-social {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   
   .footer-nav h3, .footer-social h3 {
       color: var(--pri);
       font-size: 1.2rem;
       margin-bottom: 0.5rem;
   }
   
   .footer-nav a {
       color: var(--txt);
       transition: all 0.3s ease;
       opacity: 0.8;
       position: relative;
       width: fit-content;
   }
   
   .footer-nav a::after {
       content: '';
       position: absolute;
       width: 0;
       height: 2px;
       bottom: -2px;
       left: 0;
       background: var(--pri);
       transition: width 0.3s ease;
   }
   
   .footer-nav a:hover::after {
       width: 100%;
   }
   
   .social-links {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   
   .social-link {
       display: flex;
       align-items: center;
       gap: 1rem;
       transition: all 0.3s ease;
       opacity: 0.8;
   }
   
   .social-link:hover {
       opacity: 1;
       transform: translateX(10px);
   }
   
   .social-link img {
       width: 24px;
       height: 24px;
       filter: brightness(0) saturate(100%) invert(83%) sepia(71%) 
               saturate(638%) hue-rotate(359deg) brightness(103%) contrast(107%);
   }
   
   .footer-bottom {
       margin-top: 3rem;
       padding-top: 2rem;
       border-top: 1px solid rgba(255, 215, 0, 0.1);
       text-align: center;
       position: relative;
   }
   
   .footer-decoration {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 2px;
       background: linear-gradient(90deg, 
           transparent, 
           var(--pri), 
           transparent
       );
       animation: shimmer 3s infinite;
   }
   
   @keyframes shimmer {
       0% { transform: translateX(-100%); }
       100% { transform: translateX(100%); }
   }
   
   @media screen and (max-width: 768px) {
       .footer-content {
           grid-template-columns: 1fr;
           gap: 2rem;
       }
       
       .footer-sections {
           grid-template-columns: 1fr;
       }
   }