* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Verdana', Geneva, Tahoma, sans-serif;
}

body {
    background-color: black;
    color: orangered;
    overflow-x: hidden;
}

.navbar {
    background: black;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar__container {
    display: flex;
    justify-content: space-between;
    z-index: 1;
    height: 100px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 50px;
}

#navbar__logo {
    background-image: linear-gradient(to top, red, orange 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    text-decoration: none;
    font-weight: bold;
}

.navbar__menu {
   display: flex;
   align-items: center;
   list-style: none;
   text-align: center;

}
.navbar__item{
   height: 80px;
}

.navbar__links {
    color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 1rem;
    height: 100%;
}

.navbar__links:hover {
    color: orangered;
}
.main__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    min-height: 90vh;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
    gap: 30px;
}

.navbar__btn{
 display:flex;
 justify-content: center;
 align-items:center;
 padding: 0 1rem;
 width: 100%;
}
.button{
  display:flex;
  justify-content: center;
  align-items: center;
  text-decoration:none;
  padding: 10px 20px;
  height: 100%;
  width:100%;
  border: none;
  outline:none;
  border-radius:4px;
  background: white;
  color: orangered;
}

.main__content {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.main__content h1 {
    font-size: clamp(2.5rem, 8vw, 4rem);
    background-image: linear-gradient(to top, red, orange 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main__content h2 {
    font-size: clamp(1.5rem, 5vw, 3rem);
    background-image: linear-gradient(to top, white, grey 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main__content p {
    font-size: 1.3rem;
    margin-top: 1rem;
    color: gray;
}

.main_user,
.main_user_ambassadors,
.main_user_ambassador1,
.main_user_ambassador2,
.main_user_ambassador3 {
    flex: 1;
    min-width: 320px;
    max-width: 400px;
    background: black;
    color: orangered;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.main_user:hover, .main_user_ambassadors:hover {
    transform: scale(1.02);
}

.main_user h2, .main_user_ambassadors h2 {
    background-image: linear-gradient(to top, red, orange 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-align: center;
}

.form-control {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid orangered !important;
    color: gray !important;
    margin-bottom: 20px;
    border-radius: 0;
}

.form-control:focus {
    outline: none;
    border-bottom: 1px solid white !important;
}
.button:hover {
    background: purple;
    color: white;
}


.btn-success {
    background: gray !important;
    border: none!important;
    padding: 12px;
    border-radius: 10px;
    font-weight: bold;
    transition: 0.4s;
    cursor: pointer;
}

.btn-success:hover {
    background: purple !important;
    color: white !important;
}

#cookie-banner {
    position: fixed;
    bottom: 0;
    width: 50%;
    background: darkgray;
    padding: 20px;
    text-align: center;
    z-index: 1000;
}

.footer__container {
    background-color: white;
    padding: 5rem 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.footer__links {
    width: 100%;
    max-width: 1300px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.footer__links--wrap {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.footer__links--items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 16px;
    text-align: left;
    width: 160px;
}

.footer__links--items a {
    color: orangered;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

@media screen and (max-width: 960px) {
   .navbar__container{
      display:flex;
      justify-content:space-between;
      height:80px;
      z-index:1; 
      width:100%; 
      max-width:1300px;
      padding:0;
   }
 
   .navbar__menu{
      display: grid;
      grid-template-columns: auto;
      margin:0;
      width: 100%;
      position: absolute;
      top: -1000px;
      opacity: 0;
      right: auto;
      left:0;
      transition: all 0.5s ease; 
      height: 50vh;
      background: black;
      z-index:-1;      
   }
   .navbar__menu.active{
      top: 100%;
      opacity: 1;
      background:black;
      transition: all 0.3s ease;
      z-index: 99;
      height:50vh;
      font-size: 1.6rem;
   }
   #navbar__logo{
   padding-left: 25px;
   }
   .navbar__toggle .bar{
         width: 25px;
         height: 3px;
         margin: 5px auto;
         transition: all 0.3s ease-in-out;
         background: orangered;
         display: block;
    }
    .navbar__item{
     width: 100%;  
    }
    .navbar__links{
      text-align:center;
      padding: 2rem;
      width:100%;
      display: table;
   }
   #mobile-menu{
    position: absolute;
    top:20%;
    right: 5%;
    transform: translate(5%, 20%);
   }
   .navbar__btn{
    padding-bottom: 2rem;
   }
   .button{
     display:flex;
     justify-content:center;
     align-items: center;
     width: 100%;
     height: 50px;
     margin: 0;  
   }
   .navbar__toggle .bar{
     display: block;
     cursor: pointer;

   }
   #mobile-menu.is-active .bar:nth-child(2){

       opacity:0;

   }
    #mobile-menu.is-active .bar:nth-child(1){
       transform: translateY(8px) rotate(45deg);
   }
    #mobile-menu.is-active .bar:nth-child(3){
         transform: translateY(-8px) rotate(-45deg);
   }

   .main__container {
        flex-direction: column;
        align-items: center;
   }

   .main_user, .main_user_ambassadors {
        max-width: 90%;
        min-height: auto;
   }
}

@media screen and (max-width: 768px){
      .main__content{
          text-align: center;
      }
      .footer__links-wrap{
          justify-content: center;
      }
}

@media screen and (max-width: 480px) {
    .navbar__container {
        padding: 0 20px;
    }

    .main__content h1 {
        font-size: 2.2rem;
    }

    .main_user, .main_user_ambassadors {
        width: 100%;
        padding: 20px;
    }
    
    .btn-success {
        width: 100%;
    }
    .footer__links--wrap{
       flex-direction: column;
       align-items: center;    
    
    }
    .footer__links--items{
       width: 100%;
       align-items: center;
       text-align: center;  
    }
}