.mariox{
   &__service{
      margin-bottom: 100px;
      @include mq(sm){
         margin-bottom: 50px;
      }
      &-item{
         background-color: var(--black-1);
         padding: 62px;
         position: relative;
         border-radius: 15px;
         @include mq(md){
            padding: 45px 25px;
         }
      } 
      &-sitem{
         border: 1px solid #0D0E10;
         border-radius: 15px;
         padding: 50px;
         min-height: 395px;
         max-height: 395px;
         &:hover{
            img{
               transform: scale(1.1);
            }
            h3{
               color: var(--secondary);
            }
         }
         @include mq(md){
            padding: 25px;
            min-height: 330px;
            margin-bottom: 20px;
         }
         img{
            padding-bottom: 30px;
            max-width: 100px;
            transform: scale(1);
            transition: .3s;
            height: 130px;
            object-fit: contain;
            @include mq(sm){
               padding-bottom: 0;
            }
         }
         h3{
            font-weight: 700;
            font-size: 24px;
            line-height: 1.4;
            color: var(--black-1);
            margin-bottom: 0;
            transition: .3s;
         }
         p{
            font-weight: 400;
            font-size: 16px;
            line-height: 2;
            color: #3C434A;
            padding-top: 20px;
            margin-bottom: 0;
            @include mq(sm){
               padding-top: 10px;
            }
         }
      }
      &-title{
         color: var(--white);
         font-weight: 700;
         font-size: 48px;
         line-height: 1.5;
         @include mq(md){
            font-size: 30px;
         }
      }
      &-btnwrapper{
         margin-top: 50px;
         @include mq(sm){
            margin-top: 20px;
         }
      }
      &-s1{
         position: absolute;
         right: -20px;
         bottom: 60px;
         @include mq(md){
            display: none;
         }
      }
      &-s2{
         position: absolute;
         right: 175px;
         bottom: 60px;
         animation: rotated 2s infinite;
         @include mq(md){
            display: none;
         }
      }
   }
   &__savior{
      background: var(--theme-1);
      padding: 180px 0;
      position: relative;
      overflow: hidden;
      padding-bottom: 150px;
      // &::before{
      //    content: "";
      //    position: absolute;
      //    left: 0;
      //    top: 0;
      //    width: 1920px;
      //    height: 400px;
      //    background-color: var(--white);
      //    border-radius: 47% 49% 46% 54% / 17% 21% 0% 0% ; 
      // }
      @include mq(xl){
         padding: 50px 0;
         padding-bottom: 0;
      }
      @include mq(md){
        padding-bottom: 50px;
      }
      @include mq(sm){
         padding-bottom: 0;
      }
      &-thumb{
         @include mq(sm){
            display: none;
         }
      }
      &-sh2{
         position: absolute;
         top: 180px;
         left: 485px;
         @include mq(xl){
            display: none;
         }
      }
      &-sh3{
         position: absolute;
         top: 90px;
         left: 630px;
         @include mq(xl){
            display: none;
         }
      }
      &-subtitle{
         font-weight: 700;
         font-size: 18px;
         line-height: 1;
         text-align: center;
         color: var(--white);
         background: var(--theme-2);
         padding: 10px 20px;
         display: inline-block;
         border-radius: 10px;
         margin-bottom: 30px;
         &.breadcrumb-subtitle{
            font-family: $headingFont;
            padding: 5px 20px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 14px;
            line-height: 1.1;
         }
      }
      &-list {
         position: relative;
         z-index: 3;
         max-width: 500px;
     }
     &-listing{
      max-width: 500px;
     }
      &-title{
         font-weight: 700;
         font-size: 58px;
         line-height: 1.2;
         color: var(--black-1);
         @include mq(xl){
            font-size: 40px;
         }
         @include mq(md){
            font-size: 30px;
         }
      }
      &-dis{
         font-weight: 400;
         font-size: 24px;
         line-height: 1.7;
         color: var(--black-3);
         margin-top: 60px;
         margin-bottom: 30px;
         @include mq(md){
            font-size: 17px;
            margin-top: 20px;
         }
      }
      &-morebtn{
         font-family: $headingFont;
         font-weight: 700;
         font-size: 18px;
         line-height: 1;
         color: #1B1C1E;
         transition: .3s;
         &:hover{
            color: var(--secondary);
         }
         i{
            padding-left: 10px;
         }
      }
      &-sh1{
         position: absolute;
         left: 0;
         top: 0;
         @include mq(xl-1){
            left: -200px;
         }
         @include mq(xl){
            left: 0;
            width: 60%;
         }
         @include mq(lg){
            position: static;
         }
         @include mq(md){
            display: none;
         }
         // @include mq(xl){
         //    position: static;
         //    left: -165px;
         //    top: 0;
         //    width: 60%;
         // }
      }
      &-wrapper{
         position: relative;
         text-align: center;
         background: var(--white);
         box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.15);
         border-radius: 20px;
         padding: 100px 0 226px 0;
         max-width: 1109px;
         margin: auto;
         margin-top: 140px;
         @include mq(xl){
            margin-top: 0;
         }
         @include mq(md){
            padding: 70px 0 97px 0;
         }
         @include mq(sm){
            padding-bottom: 0;
         }
      }
      &-oval{
         position: absolute;
         bottom: 0;
         left: 0;
         top: -42px;
         @include mq(sm){
            top: 0;
         }
      }
      &-title2{
         font-weight: 700;
         font-size: 60px;
         line-height: 1.2;
         text-align: center;
         color: var(--black-1);
         max-width: 470px;
         margin: auto;
         @include mq(xl){
            font-size: 40px;
         }
         @include mq(md){
            font-size: 30px;
         }
      }
      &-items{
         display: flex;
         @include mq(md){
            flex-wrap: wrap;
            gap: 20px;
            max-width: 500px;
            margin: auto;
            margin-top: 70px;
            justify-content: center;
         }
      }
      &-item{
         height: 120px;
         background-color: var(--white);
         position: relative;
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
         border-radius: 20px;
         width: 130px;
         max-width: 130px;
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 9;
         position: absolute;
         @include mq(md){
            height: 100px;
            width: 100px;
            max-width: 100px;
         }
         @include mq(sm){
            display: none;
         }
         img{
            position: relative;
            z-index: 99;
         }
         @include mq(md){
            // position: static;
         }
         &:nth-child(1){
            top: 145px;
            left: 94px;
            animation: float-bob-y 2s infinite;
            @include mq(md){
               left: 0;
            }
         }
         &:nth-child(2){
            top: 345px;
            left: 194px;
            @include mq(xl){
               top: 308px;
            }
            @include mq(md){
               left: 122px;
               top: 240px;
            }
         }
         &:nth-child(3){
            bottom: 45px;
            left: 394px;
            animation: float-bob-y 5s infinite;
            @include mq(md){
               bottom: 30px;
            }
         }
         &:nth-child(4){
            bottom: 45px;
            right: 377px;
            @include mq(xl){
               right: 300px;
            }
            @include mq(md){
               right: 378px;
            }
         }
         &:nth-child(5){
            bottom: 150px;
            right: 150px;
            animation: float-bob-y 3s infinite;
            @include mq(xl){
               bottom: 110px;
               right: 120px;
            }
            @include mq(md){
               bottom: 60px;
            }
         }
         &:nth-child(6){
            top: 152px;
            right: 96px;
            @include mq(xl){
               top: 65px;
            }
            @include mq(md){
               top: 6px;
            }
         }
         &::before{
            position: absolute;
            content: "";
            right: -14px;
            bottom: -11px;
            background-color: var(--black-1);
            height: 100%;
            width: 100%;
            z-index: -2;
            border-radius: 20px;
         }
         &::after{
            content: "";
            position: absolute;
            right: -7px;
            bottom: -2px;
            height: 100%;
            width: 100%;
            border-radius: 20px;
            background-color: var(--white);
            z-index: 2;
            border: 1px solid #000000;
         }
      }
      &-sbottom{
         padding-top: 140px;
         @include mq(xl){
            padding-bottom: 100px;
         }
         @include mq(md){
            padding-top: 60px;
         }
      }
      &-bottomright {
         @include mq(md){
            padding-top: 30px;
         }
     }
      &-listing{
         li{
            margin-bottom: 60px;
            position: relative;
            @include mq(sm){
               margin-bottom: 20px;
            }
            &:last-child{
               &::before{
                  display: none;
               }
            }
            &::before{
               content: "";
               left: 35px;
               bottom: -55px;
               height: 70px;
               width: 1px;
               border: 1px dashed var(--gray-1);
               position: absolute;
               @include mq(xl){
                  height: 64px;
               }
               @include mq(sm){
                  height: 29px;
                  bottom: -17px;
               }
            }
            p{
               font-size: 20px;
               float: inherit;
               color: #3C434A;
               span{
                  font-weight: 700;
               }
               @include mq(md){
                  font-size: 14px;
               }
            }
            mdall{
               font-weight: 600;
               font-size: 20px;
               line-height: 2;
               color: #0D0E10;
            }
         }
      }
      &-circle{
         display: inline-block;
         height: 70px;
         width: 70px;
         border-radius: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         border: 2px solid var(--black-1);
         float: left;
         margin-right: 16px;
         font-weight: 700;
         font-size: 32px;
         line-height: 2;
         color: var(--black-1);
      }
   }
}

// index two 

.marioxx{
   &__service{
      margin-top: 130px;
      @include mq(md){
         margin-top: 76px;
      }
      &-item{
         text-align: center;
         padding: 30px;
         position: relative;
         &.itemone{
            &::before{
               content: "";
               position: absolute;
               left: 0;
               top: -130px;
               height: 230px;
               width: 100%;
               background-image: url('../img/blur/1.png');
               z-index: -2;
               @include mq(sm){
                  top: -70px;
               }
            }
         }
         &.itemtwo{
            margin-top: 30px;
            &::before{
               content: "";
               position: absolute;
               left: -37px;
               top: -130px;
               height: 230px;
               width: 100%;
               background-image: url('../img/blur/2.png');
               z-index: -2;
               @include mq(sm){
                  top: -71px;
                  left: 0;
               }
            }
         }
         &.itemthree{
            &::before{
               content: "";
               position: absolute;
               left: 0;
               top: -130px;
               height: 230px;
               width: 100%;
               background-image: url('../img/blur/3.png');
               z-index: -2;
               @include mq(sm){
                  top: -46px;
               }
            }
         }
         @include mq(md){
            padding: 0;
            margin-bottom: 30px;
         }
         img{
            margin-bottom: 30px;
         }
      }
      &-content{}
      &-title{
         font-weight: 700;
         font-size: 24px;
         line-height: 1.2;
         color: var(--black-1);
         margin-bottom: 20px;
      }
      &-dis{
         font-weight: 400;
         font-size: 16px;
         line-height: 2;
         color: #3C434A;
      }
   }
}

// index two feature 


.marioxx{
   &__feature{
      background-color: #EDF1FA;
      padding: 250px 0;
      margin-top: 140px;
      position: relative;
      overflow: hidden;
      @include mq(md){
         margin-top: 50px;
         padding: 80px 0;
      }
      &-item{
         text-align: center;
      }
      &-oval2{
         position: absolute;
         left: 50%;
         top: 0;
         transform: translateX(-50%);
         @include mq(md){
            height: 100%;
            object-fit: cover;
         }
      }
      &-wrapper{
         position: relative;
         z-index: 2;
      }
      &-title{
         font-weight: 700;
         font-size: 60px;
         line-height: 1.2;
         color: var(--black-1);
         margin-bottom: 40px;
         @include mq(xl){
            font-size: 45px;
         }
         @include mq(md){
            font-size: 30px;
            margin-bottom: 20px;
         }
      }
      &-name{
         font-weight: 700;
         font-size: 18px;
         line-height: 1;
         text-align: center;
         color: #4C30F6;
         font-family: $headingFont;
         i{
            padding-left: 10px;
         }
      }
      &-icon1{
         position: absolute;
         width: 132px;
         height: 132px;
         left: 121px;
         top: 140px;
         background: #FFFFFF;
         box-shadow: 0px 40px 60px 5px rgba(0, 0, 0, 0.05);
         border-radius: 100px;
         display: flex;
         justify-content: center;
         align-items: center;
         animation: pulse 3s infinite;
         @include mq(xl){
            top: 70px;
         }
         @include mq(md){
            display: none;
         }
      }
      &-icon2{
         position: absolute;
         width: 132px;
         height: 132px;
         right: 405px;
         top: 140px;
         background: #FFFFFF;
         box-shadow: 0px 40px 60px 5px rgba(0, 0, 0, 0.05);
         border-radius: 100px;
         display: flex;
         justify-content: center;
         align-items: center;
         animation: pulse 3s infinite;
         &.icon2three{
            top: -80px;
            @include mq(xl-1){
               top: -190px;
            }
         }
         @include mq(xl){
            top: 30px;
         }
         @include mq(md){
            display: none;
         }
      }
      &-icon3{
         position: absolute;
         width: 92px;
         height: 92px;
         right: 150px;
         top: 218px;
         background: #FFFFFF;
         box-shadow: 0px 40px 60px 5px rgba(0, 0, 0, 0.05);
         border-radius: 100px;
         display: flex;
         justify-content: center;
         align-items: center;
         animation: pulse 3s infinite;

         &.icon2two{
            top: 0;
            @include mq(xl){
               top: 45px;
            }
         }
         @include mq(xl){
            top: 110px;
         }
         @include mq(md){
            display: none;
         }
      }
      &-icon4{
         position: absolute;
         width: 132px;
         height: 132px;
         right: 300px;
         top: 400px;
         background: #FFFFFF;
         box-shadow: 0px 40px 60px 5px rgba(0, 0, 0, 0.05);
         border-radius: 100px;
         display: flex;
         justify-content: center;
         align-items: center;
         animation: pulse 3s infinite;
         &.icon2four{
            top: 200px;
         }
         @include mq(xl){
            top: 485px;
         }
         @include mq(md){
            display: none;
         }
      }
      &-icon5{
         position: absolute;
         width: 92px;
         height: 92px;
         left: 415px;
         top: 218px;
         background: #FFFFFF;
         box-shadow: 0px 40px 60px 5px rgba(0, 0, 0, 0.05);
         border-radius: 100px;
         display: flex;
         justify-content: center;
         align-items: center;
         animation: pulse 3s infinite;
         &.icon2five{
            top: 212px;
         }
         @include mq(xl){
            top: 150px;
         }
         @include mq(md){
            display: none;
         }
      }
      &-icon6{
         position: absolute;
         width: 92px;
         height: 92px;
         left: 300px;
         bottom: 224px;
         background: #FFFFFF;
         box-shadow: 0px 40px 60px 5px rgba(0, 0, 0, 0.05);
         border-radius: 100px;
         display: flex;
         justify-content: center;
         align-items: center;
         animation: pulse 3s infinite;
         &.icon2six{
            left: 50px;
         }
         @include mq(xl){
            bottom: 125px;
         }
         @include mq(lg){
         }
         @include mq(md){
            display: none;
         }
      }
   }
}
.marioxxx{
   &__feature{
      background-color: #FCF8F2;
      overflow: hidden;
      &.feature-two{
         margin-top: 0;
      }
      @include mq(xl-1){
         margin-top: 0;
      }
   }
}

// index two talk 

.marioxx{
   &__talk{
      padding: 135px 0;
      padding-bottom: 0;
      @include mq(md){
         padding: 80px 0;
      }
      &-reverse{
         padding-top: 150px;
         @include mq(md){
            padding-top: 50px;
         }
         .row{
            @include mq(sm){
               flex-direction: column-reverse;
            }
         }

      }
      &-items{
         display: flex;
         gap: 95px;
         padding-top: 15px;
         @include mq(md){
            gap: 20px;
         }
         @include mq(sm){
            flex-wrap: wrap;
            gap: 20px;
         }
         img{
            padding-bottom: 15px;
            height: 84px;
         }
         p{
            font-family: $headingFont;
            font-weight: 600;
            font-size: 18px;
            line-height: 1.3;
            color: #0D0E10;
            br{
               @include mq(xl){
                  display: none;
               }
            }
            @include mq(md){
               font-size: 16px;
               line-height: 1;
            }
         }
      }
      &-item{
         @include mq(md){
            flex-basis: 100%;
         }
      }
      &-right{
         overflow: hidden;
         @include mq(sm){
            padding-top: 50px;
         }
      }
      &-title{
         font-weight: 700;
         font-size: 60px;
         line-height: 1.2;
         color: var(--black-1);
         margin-bottom: 45px;
         @include mq(md){
            font-size: 30px;
            margin-bottom: 20px;
         }
      }
      &-dis{
         font-weight: 400;
         font-size: 24px;
         line-height: 2;
         color: #3C434A;
         &.dis2{
            margin-bottom: 30px;
         }
         @include mq(md){
            font-size: 18px;
         }
         span{
            font-weight: 700;
            color: #0D0E10;
         }
      }
   }
}


// service three 

.marioxxx{
   &__service{
      padding: 145px 0;
      @include mq(md){
         padding: 90px 0;
         @include mq(sm){
            padding-bottom: 30px;
         }
      }
      &-item{
         text-align: center;
         position: relative;
         max-width: 284px;
         margin: auto;
         &:hover{
            img{
               transform: scale(1.1);
            }
            .marioxxx__service-itemtitle{
               color: var(--secondary);
            }
         }
         @include mq(md){
            margin-bottom: 30px;
         }
         img{
            transition: .3s;
            @include mq(md){
               margin-bottom: 15px;
            }
         }
         &.before-none{
            &::before{
               display: none;
            }
         }
         &::before{
            content: "";
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-image: url('../img/home-three/service/line.png');
            position: absolute;
            left: 120%;
            top: 0;
            @include mq(md){
               display: none;
            }
         }
         img{
            height: 135px;
            object-fit: contain;
            margin-bottom: 40px;
            @include mq(md){
               margin-bottom: 10px;
            }
         }
      }
      &-itemtitle{
         display: inline-block;
         font-family: $headingFont;
         font-weight: 700;
         font-size: 24px;
         line-height: 1.5;
         color: var(--black-1);
         margin-bottom: 20px;
         display: block;
         @include mq(md){
            margin-bottom: 10px;
         }
      }
      &-itemdis{
         font-weight: 400;
         font-size: 16px;
         line-height: 2;
         color: var(--black-3);
      }
   }
}
.marioxxx__sectiontitle{
   margin-bottom: 75px;
   @include mq(md){
      margin-bottom: 40px;
   }
}
.marioxxx-stitle{
   font-weight: 700;
   font-size: 60px;
   line-height: 1.2;
   text-align: center;
   color: var(--black-1);
   @include mq(xl){
      font-size: 40px;
   }
   @include mq(md){
      font-size: 35px;
   }
}


// notification 

.marioxxx{
   &__notification{
      &-wrapper{
         background-color: #AE347A;
         padding: 120px 90px;
         position: relative;
         overflow: hidden;
         border-radius: 20px;
         @include mq(md){
            padding: 70px 50px;
         }
         @include mq(md){
            grid-template-columns: auto;
            padding: 70px 17px;
         }
      }
      &-title{
         font-weight: 700;
         font-size: 48px;
         line-height: 1.5;
         color: var(--white);
         max-width: 552px;
         margin-bottom: 20px;
         position: relative;
         z-index: 3;
         @include mq(md){
            font-size: 28px;
            max-width: 100%;
         }
      }
      &-shape1{
         position: absolute;
         width: 504px;
         height: 504px;
         left: -73px;
         top: 75px;
         background: #4F4BCB;
         border-radius: 50%;
         animation: float-bob-y 2s infinite;
      }
      &-shape2{
         position: absolute;
         width: 292px;
         height: 292px;
         right: 130px;
         top: -60px;
         background: #FFD07B;
         border-radius: 20px;
         transform: rotate(-35.64deg);
      }
      &-shape3{
         position: absolute;
         width: 248px;
         height: 248px;
         right: 69px;
         bottom: -89px;
         background: #F58A8A;
         border-radius: 50%;
         animation: pulse 2s infinite;
      }
   }
}

.mariox__savior-thumbs{
   @include mq(sm){
      display: none;
   }
}
.mariox__savior-bottomright {
   @include mq(md){
      margin-left: -50px;
   }
   img{
      @include mq(md){
         max-width: 500px;
      }
   }
}

.mariox__savior-bottomright img {
    width: 100%;
    height: 483px;
    object-fit: cover;
    @include mq(sm){
      height: 200px !important;
    }
}