*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hide{
    display: none;
}
.inter-font{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  
}
/* shared styles */
.flex{
    display: flex;
}
#gradient{
    background: linear-gradient(#F7E93F ,#FB09B4 ,#9100F8);
    background-clip: text;
   color: transparent;
}
.background-gradient{
    background: linear-gradient(to top right, #F7E93F,#FB09B4,#9100F8);
}
.color-white{
    color: white;
}

.color-green{
    color: #00FF88;
}
/* main styles */

/* header design */
.header{
    max-width: 1600px;
    margin: 0 auto;
}
.navbar{
    justify-content: space-evenly;
    background-color: #1A0B2E;
    padding: 26px;
    align-items: center;
}
.navbar ul{
    gap: 32px;
}
.navbar ul li{
    list-style: none;
}
.navbar ul li a{
    text-decoration: none;
    color: #FFFFFF;
}
.navbar button{
    border: none;
    border-radius: 10000px;
    padding: 12px 16px;
    align-items: center;
    color: #FFFFFF;
    font-size: 0.9rem;
    /* transition: background 8s; */
    transition: color .4s , border .5s;
}
.navbar button:hover{
    background: none;
    border:.1px solid #FB09B4;
    color: #FB09B4;
}
#hamburger{
    display: none;
}
.header-elements{
    max-width: 1600px;
    background: url(./assets/hero-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
    
}
.header-image{
    max-width: 350px;
    margin: 0 auto;
    background: url(./assets/hero-circle.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    padding: 50px;
    
}
.header-image img{
      max-width: 115px;
      margin-left: 70px;
      
}
#new-badge{
    margin-top: -190px;
    margin-left: 140px;
}
.header-details{
    max-width: 550px;
    margin: 10px auto;
    text-align: center;

}
.header-details h1{
    color: #FFFFFF;
    font-size: 3rem;
    margin-bottom: 10px;
   
}
.header-details p{
    color: #FFFFFF;
      margin-bottom: 10px;
      animation: color-change 3s linear infinite;
}
#btn1{
    border: none;
    border-radius: 10000px;
    padding: 12px 20px;
    color: #FFFFFF;
    font-size: 1rem;
    align-items: center;
    transition: color .4s , border .5s;
}
#btn1 img{
    width: 15px;
}
#btn1:hover{
     background: none;
    border:.1px solid #FB09B4;
    color: #FB09B4;
}

#btn2{
    border: 1px solid #00FF88;
    border-radius: 10000px;
    color: #00FF88;
     padding: 12px 20px;
      font-size: 1rem;
    align-items: center;
    background: none;
    transition: color 1s;
}
#btn2 img{
    width: 15px;
}
#btn2:hover{
    background:linear-gradient(to top right, #F7E93F,#FB09B4,#9100F8);
    border: none;
    color: #FFFFFF;
}

/* section1 designs */
.section1{
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    background-color: #1A0B2E;
    color: #FFFFFF;
}
.sec1-details p{
    margin-bottom: 40px;
}
.sec1-details{
    max-width: 900px;
    margin: 0 auto;
}
hr{
    max-width: 1000px;
    margin: 30px auto;
}
.sec1-cards{
    justify-content: center;
    gap: 50px;
    margin-top: 20px;
}
.sec1-card h1{
    color: #00FF88;
}
/* section2 designs */
 .section2{
    background-color: #230E3D;
    max-width: 1600px;
    padding: 120px 200px;
    margin: 0 auto;
    
 }
 .section2 h1{
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
     color: #FFFFFF;
     margin-bottom: 20px;
 }
 .sec2-cards *{
    background-color: #351165;
    color: #FFFFFF;
 }
 .section2 h3{
    margin-top: 10px;
    margin-bottom: 10px;
 }
 .sec2-card1{
    border-radius: 30px;
    grid-area: card1;
    padding: 20px;
    
 }
 .sec2-card2{
    border-radius: 30px;
    grid-area: card2;
     padding: 20px;
   
 }
 .sec2-card3{
    border-radius: 30px;
    grid-area: card3;
     padding: 20px;
     
 }
 .sec2-card4{
    border-radius: 30px;
    grid-area: card4;
     padding: 20px;
     
 }
 .sec2-card5{
    border-radius: 30px;
    grid-area: card5;
     padding: 20px;
     
 }
 .sec2-cards{   
    margin: 0 auto;
    max-width: 1400px;
    display: grid;
    gap: 10px;
    grid-template-areas: 
    "card1 card2 card2"
    "card1 card3 card3"
    "card4 card4 card5";
 }
/* section3 designs */
 .section3{
    max-width: 1600px;
    background-color: #1A0B2E;
    margin: 0 auto;
    padding-top: 70px;
 }
 #sec3-heading{
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 30px;
    animation: color-change 5s linear infinite;
 }
 .sec3-cards{
    justify-content: center;
    gap: 30px;
 }
 .sec3-card{
    max-width: 380px;
    background-color: #250D44;
    color: #FFFFFF;
    border-radius: 30px;
 }
 .sec3-card:hover{
    box-shadow: 2px 2px 20px rgb(106, 100, 100);
 }
 .sec3-card iframe{
    width: 100%;
     border-radius: 30px 30px 0px 0px;
 } 
 .sec3-card h1,.sec3-card p{
    padding: 10px;
 }
 /* section4 designs */
 .section4{
    max-width: 1600px;
    margin: 0 auto;
    background-color: #1A0B2E;
    color: #FFFFFF;
    padding: 120px 200px;
   
 }
 #sec4-heading{
    max-width: 800px;
    margin: 20px auto;
    text-align: center;
    font-size: 3rem;
    
 }
 .sec4-elements{
    background-color: #351165;
    gap: 20px;
    padding: 20px;
    align-items: center;
    max-width: 1200px;
    margin: 20px auto;
     border-radius: 40px;
     animation: shadow 7s linear infinite;
     
 }
 .sec4-details h1 ,.sec4-details p{
    margin-bottom: 10px;
 }
 .sec4-details img{
       border: .5px solid rgb(120, 118, 118);
       width: 40px;
       height: 40px;
       border-radius: 50%;
       padding: 5px;
 }
 /* footer designs */
 .footer{
    padding-top: 110px;
    max-width: 1600px;
    background: url(./assets/footer-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 412px;
    margin: 0 auto;
    text-align: center;
    color: #FFFFFF;
    align-items: center;
 }
 .footer h1{
    font-size: 4rem;
    margin-bottom: 50px;
 }

 .footer-logos{
   justify-content: center;
   gap: 30px;
   align-items: center;
   margin-bottom: 40px;
   
 }
 /* small device media query */
@media screen and (max-width:576px) {
    .header-elements{
        max-width: 100%;
        padding-top: 70px;
        padding-bottom: 10px;
        height: 350px;
        object-fit: cover;
        background-position: center;
    }
    .navbar{
        justify-content: space-between;
    }
    .navbar ul,.navbar button{
        display: none;
    }
    #hamburger{
          display: block;
    }
    .header-image{
        width: 150px;
        height: 150px;
        margin-top: -30px;
    }
    #btn1,#btn2{
        padding: 5px 10px;
    }
    .header-image img{
      width: 70px;
      margin-top: -50px;
      margin-left: -10px;
    }
    #new-badge{
        position: relative;
        right: 100px;
        bottom: 20px;
    }
    .section1{
        padding: 20px;
    }
    .sec1-cards{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    .section2{
        margin: 0 auto;
        padding: 0;   
    }
   .sec2-cards{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
   }
   .sec2-card1,
   .sec2-card2,
   .sec2-card3,
   .sec2-card4,
   .sec2-card5{
    padding: 0;
    width: 300px; 
    margin: 0 auto;
    padding: 40px;
   }
    .section3{
        padding: 10px;
    }
   .sec3-cards{
    padding: 15px;
    flex-direction: column;
   }
   .section4{
    padding: 30px;
    text-align: center;
   }
   .sec4-elements{
    flex-direction: column;
   }
   .footer{
    background: url(./assets/footermobileImage.png);
    padding: 20px;
    max-width: 100%;
    height: 300px;
    object-fit: contain;
    background-position: center
   }
   .footer-logos{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: -8px;
   }
}

/* medium device media query */
@media screen and (min-width:576px) and (max-width:992px) {
    .sec2-cards{
        margin: 0 auto;
        display: flex;
        flex-direction: column; 
    }
    .sec3-cards{
       flex-direction: column; 
    }
    .sec3-card{
        margin: 0 auto;
    }
    .section4{
        padding: 10px;
    }
    .sec4-elements{
        border: 1px solid;
        flex-direction: column;
        width: 600px;
        margin: 0 auto;
        text-align: center;
    }
}
/* animation */
@keyframes shadow {
    0%{
        box-shadow: 2px 2px 20px #00FF88;
    }
    25%{
        box-shadow: -3px -3px 20px #F7E93F;
    }
    50%{
        box-shadow: 2px 2px 20px #FB09B4;
    }
    75%{
        box-shadow: -3px -3px 20px #00FF88;
    }
    100%{
        box-shadow: 2px 2px 20px #F7E93F ;
    }
}