.marioxx{
   &__brand{
      &-wrapper{
         text-align: center;
         padding-top: 90px;
         background: var(--white);
         border-radius: 20px;
         margin-top: -300px;
         position: relative;
         z-index: 99;
         padding-left: 100px;
         padding-right: 100px;
         @include mq(md){
            padding-left: 0;
            padding-right: 0;
            margin-top: 0;
         }
         @include mq(sm){
            padding-top: 25px;
         }
         &.mariox__brandwrapper{
            margin-top: 120px;
            @include mq(md){
               margin-top: 50px;
            }
         }
      }
      &-items{
         max-width: 1112px;
         margin: auto;
      }
      &-title{
         font-family: $headingFont;
         font-weight: 500;
         font-size: 36px;
         line-height: 1.6;
         color: var(--black-2);
         &.about-brand-title{
            span{
               color: var(--black-2);
            }
         }
         @include mq(sm){
            font-size: 25px;
         }
         span{
            color: var(--theme-3);
            font-weight: 700;
         }
      }
      &-dis{
         font-weight: 600;
         font-size: 48px;
         line-height: 1.8;
         color: var(--black-1);
         padding-top: 60px;
         @include mq(xl){
            font-size: 40px;
            line-height: 1.2;
            padding-top: 0;
         }
         @include mq(md){
            padding-top: 0;
            font-size: 30px;
            line-height: 1.5;
         }
      }
   }
}
.marioxx{
   &__notification{
      margin-top: 20px;
      &-wrapper{
         max-width: 925px;
         margin: auto;
         background: rgba(208, 222, 255, 0.5);
         border-radius: 10px;
         padding: 50px;
         padding-bottom: 0;
         display: grid;
         grid-template-columns: auto auto auto;
         @include mq(md){
            grid-template-columns: auto;
            padding: 50px 25px;
         }
      }
      &-left{
         background: var(--white);
         box-shadow: 0px 40px 60px 5px rgba(0, 0, 0, 0.25);
         border-radius: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 93px;
         height: 93px;
         margin-left: 140px;
         transform: translate(-31px,-85px);
         @include mq(md){
            margin-left: 0;
            transform: translateY(-20px);
         }
         & i{
            font-size: 36px;
            color: var(--theme-3);
         }
      }
      &-right{
         text-align: right;
         @include mq(md){
            text-align: left;
         }
      }
      &-title{
         font-weight: 600;
         font-size: 20px;
         line-height: 1.5;
         align-items: center;
         color: var(--black-2);
         @include mq(md){
            padding-bottom: 20px;
         }
      }
   }
}
#star{
   animation: jackInTheBox 3s infinite;
}