body {
    background-image: radial-gradient(circle at 50% 43%, #011027, #000110 70%);
    height: 100vh; /* Adjust as needed */
   }

   nav.site-nav > ul > li.menu-item-has-children > a{
    color: white;
   }

   nav.site-nav > ul > li.menu-item-has-children > a:hover{
    background: linear-gradient(to right, #6c22bd, #0f6bdf);
    background-clip: text;
    -webkit-background-clip: text;
    transition: 0.2s ease-in;
    color: transparent;
    text-decoration: none;
   }
 

   .header-right-icons .single-icon a i{
    color: white;
    font-size: 24px;
   }
   .header-offcanvas-about{
    border: none;
   }
   .site-mobile-nav .hamburger .hamburger-box .hamburger-inner, .site-mobile-nav .hamburger .hamburger-box .hamburger-inner::before, .site-mobile-nav .hamburger .hamburger-box .hamburger-inner::after {
    width: 26px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 4px;
    position: absolute;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
  }
/* Apply general styles to the header */

  .flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
} 
  /* Style the logo */

  .carousel {
    max-width: 100%;
    overflow: hidden;
  }
  
  /* Add styles for the carousel items (slides) */
  .carousel .item {
    position: relative;
  }
  
  .carousel .item img,
  .carousel .item .T {
    max-width: 100%;
    height: auto;
  }
  
  /* Add any other styles you need for the navigation links */
  
  /* Other existing styles for .T, .top, .middle, .wrapper, .stem, .bg, .bg2, etc. */
  /* ... */
  
  /* Adjust the section to have some space below the fixed header */
  section {
    padding-top: 10px;
  }
   /* Adjust the section to have some space below the fixed header */
   .center-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center; /* Center text */
    padding: 2rem;
}

.text-container {
    padding: 10px;
    background: none;
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.text-container h1 {
    font-size: 44px;
    margin-top: 0;
    background-color: #663dff;
    background-image: linear-gradient(319deg, #663dff 0%, #aa00ff 37%, #cc4499 100%);    
    background-clip: text;
    -webkit-background-clip: text;
    margin-bottom: 15px;
    transition: 0.2s ease-in;
    color: transparent;
}

.text-container p {
    font-size: 24px;
    margin-bottom: 15px;

}

.button-container {
    padding: 10px;
    background: none;
    color: white;
    border: 0.6px solid white;
    cursor: pointer;
}

.button-container a {
    color: white;
    font-size: 18px;
    text-decoration: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.button-container a:hover {
    background: linear-gradient(to right, #6c22bd, #0f6bdf);
    background-clip: text;
    -webkit-background-clip: text;
    transition: 0.2s ease-in;
    color: transparent;
}

  
  /* Add any other styles you need for the navigation links */
   
   .T:hover {
    > .middle, .stem, .middle::after {
     background: #b2ffff;
    }
    
    .middle, .stem, .top:not(.top2) {
       box-shadow: 0 0 10px 0 white, 0 0 20px 0 white,
        0 0 30px 0 white;
    }
    .top2 {
     box-shadow: -4px -7px 13px 0 white;
    }
    
    .top {
      border: 9px solid #7ff9f9;
    }
    
    .middle::after {
         border-left: 4px solid #7ff9f9;
   
    }
    .bg {
     opacity: 7.1;
   
     transform: scale(1.1) skewY(326deg) translate(-50%, -40%);
    }
   }
   
   *, *::after {
    transition: all 400ms ease-in-out;
   }
   
   .top {
    position: relative;
    background-image: linear-gradient(135deg, #6c22bd, #8b25bb, #a52bb9, #bc34b7, #d040b5, #e645a5, #f55195, #ff6188, #ff796e, #ff965b, #f5b255, #e1cd60);
    width: 300px;
    height: 85px;
    /* transform: skewY(-15deg) rotateX(129deg); */
    border-radius: 50px;
    z-index: 0;
    border: 7px solid #161525;
    transform: rotate(281deg)rotateX(66deg)translateX(-163px)translateY(359px)skewX(6deg);
}
   .bg {
    transform-origin: center center;
    background-image: linear-gradient(to right top, #6c22bd, #8b25bb, #a52bb9, #bc34b7, #d040b5, #e645a5, #f55195, #ff6188, #ff796e, #ff965b, #f5b255, #e1cd60);
    width: 275px;
    height: 177px;
    z-index: -1;
    filter: blur(26px);
    opacity: 0.69;
    position: absolute;
    top: 31%;
    left: 40%;
    border-radius: 20px;
    transform: skewY(326deg) translate(-30%, -30%);
   }
   
   .bg2 {
    background-image: linear-gradient(to bottom, #5239d0, #3e4dd8, #285ddd, #0f6bdf, #0078e0, #0087e5, #0095e8, #00a2ea, #00b5ec, #00c5df, #00d3c6, #0edda4);
    top: auto;
    bottom: 29%;
    width: 258px;
    height: 200px;
   }
   
   .middle {
    height: 96px;
    background: #080808;
    /* transform: skewY(-15deg) translateY(-37px); */
    z-index: 3;
    border-bottom-left-radius: 90px;
    border-bottom-right-radius: 147px;
    border-top-left-radius: 10px;
    position: relative;
    box-shadow: 0 0 15px 0 black;
    transform: skewY(127deg) translateY(300px)rotateY(60deg)translateX(256px)rotateX(0deg)rotateZ(299deg);
    border-top-right-radius: 0px;
    top: -1px;
    
     /* &::after {
        content: '';
       width: 66px;
       height: 25px;
       background: #161525;
       position: absolute;
       bottom: -24px;
       border-left: 4px solid #161525;
       left: calc(50% + 18px);
       transform: translateX(-50%);
    } */
   }
   
   .stem {
    height: 322px;
    /* width: 80px; */
    width: 61px;
    left: calc(50% + -19px);
    top: -48px;
    position: relative;
    /* transform: skewY(-15deg) translateX(-50%); */
    /* transform: skewY(55deg) translateX(-50%); */
    transform: rotate(150deg) rotateX(0deg);
    background: #161525;
    z-index: 2;
    box-shadow: 0 0 15px 0 black;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 21px;
    border-top-left-radius: 50px;
   }
   
   .top2 {
    /* transform: rotate(-90deg) rotateX(50deg); */
    transform: rotate(60deg) rotateX(68deg);
    height: 70px;
    background-image: linear-gradient(to left, #5239d0, #3e4dd8, #285ddd, #0f6bdf, #0078e0, #0087e5, #0095e8, #00a2ea, #00b5ec, #00c5df, #00d3c6, #0edda4);
    left: -7px;
    top: -221px;
    z-index: 2;
    
   }

       /* Media query for tablet (iPad) */
       @media (max-width: 960px){
        .center-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center; /* Center text */
          padding: 2rem;
      }
    }
  
  
   
       /* Media query for tablet (iPad) */
  @media (max-width: 768px){
    .center-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center; /* Center text */
  }

  .button-container a {
    color: white;
    font-size: 16px;
}

.text-container h1 {
  font-size: 36px;
}

.text-container p {
  font-size: 18px;
}
  }
  
  @media (max-width: 480px){
    .center-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center; /* Center text */
      padding: 2rem;
  }

  .button-container a {
    color: white;
    font-size: 16px;
}
.text-container{
  margin-left:20%
}
.text-container h1 {
  font-size: 36px;
}

.text-container p {
  font-size: 18px;
}
.button-container{
  margin-left: 20%;
}
  }