.ranked-g2{ 
  padding: 0px 0 80px;
    background: #eb592a;  
    /*color: #eb592a;*/
}

.ranked-g2 .row-cards{ 
justify-content: space-between; 
}


.ranked-g2 h2 span{
  color: #fff;
  font-weight: 400;
}

.ranked-g2 h2{
  font-size: 24px;
  color: #fff;
  /*margin: 0 0 30px; */
  text-align: center;
  font-family: "Aventa", sans-serif;
  font-weight: 600;
} 
 .ranked-g2 .container .cards-unique h2{
   text-align: left;
   font-family: "Montserrat", sans-serif;
} 


.ranked-g2 .container .cards .content-img{
    /*transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;*/
  background: url("https://en.clear.sale/hubfs/LP-G2-CSROW-2023/bg-larana.webp");  
    background-position: right;
    border-radius: 11px;
    padding: 2em 3em;
    display: block;
    position: absolute;
    z-index: 1;
    width: 95%;
    height: 94%;
  opacity:0;
}

.ranked-g2 .container .cards .content-img::before{ 
  opacity:1;
}

.ranked-g2 .container .cards .content-text{
    /*transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;*/ 
  border-radius: 11px;
  display: flex; 
    margin: 2%;
    --e-column-margin-right: 2%;
    --e-column-margin-left: 2%;
 
   /* padding: 2em 3em;*/
} 
    
.ranked-g2 .container .cards-unique .content-text-badgets .row-cards{
      align-items: center;
      width: 100%;
}

.ranked-g2 .container .content-text-badgets{
    /*transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;*/ 
}
/*.ranked-g2 .container .cards .content-text-badgets img{
  text-align: right;
      max-width: 90%!important;
}

.ranked-g2 .cards .text-badgets{
    display: flex;
    padding: 0;
    flex-direction: column;
    justify-content: space-around;
}

.ranked-g2 .cards .text-badgets h2{
    font-size: 26px;
  color: #fff;
  /*margin: 0 0 30px; 
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}
*/
.ranked-g2 h3{
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 21px;
  color: #fff;
  /*margin: 0 0 30px;  */
}

.ranked-g2 h3 span{ 
  color: #ff4800; 
}

.ranked-g2 h4{  
  margin: 0;  
}

.ranked-g2 h6{ 
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  margin:0;
  color: #fff;
  margin: 0;  
}


.ranked-g2 .item  {  
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  border-radius: 11px;
  z-index:2;
}

.ranked-g2 .item svg,
.ranked-g2 .item img { 
    width: 50px!important;
}




.ranked-g2 .item p {
  font-family: "Montserrat", sans-serif;
  font-size:14px;
  color: #fff;
  text-align: center;
  font-weight: 400;
}


.ranked-g2 .item{
    border: 0px; 
    /* border-color: #320909; */  
    padding: 20px;
} 

.ranked-g2 .container .col-md-12 .display{
  text-align: center;
  padding: 20px 0 0 0;
}


.ranked-g2 .container .row-cards .cards{ 
  display:flex;
    background: #141414;
  border-radius: 11px;
   max-width: 32%!important;
}

/*.ranked-g2 .container .cards-unique{ 
  display:flex;
    background: #141414;
  border-radius: 11px; 
            margin-top: 5px;
            padding: 30px;
}*/

.ranked-g2 .container .row-cards-unique  {  
    background: #141414;
  border-radius: 11px;  
    margin-top: 15px;

}

.ranked-g2 .container .row-cards-unique .cards-unique { 
  display:flex;
      align-items: center;
  padding: 20px 100px;
}

.ranked-g2 .container .row-cards-unique .cards-unique img{
  max-width: 90%!important;
}

.item-text{
overflow: initial;
}

.item-text:hover{
-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

         @media (max-width: 1024px) { 
           .ranked-g2 {
            padding: 0px 0 30px;
           }
        .ranked-g2 .container .cards .content-text { 
            padding: 1em;
        }
          /* .ranked-g2 .container .cards .content-text-badgets { 
            padding: 2em 3em; 
            align-items: center; 
        }*/
           .ranked-g2 h3 {
            font-size: 18px;
            margin: 0 0 2px;
        } 
           .ranked-g2 .item{
             padding:5px;
           }
           .ranked-g2 .container .cards .content-text { 
            margin: 0
              }
            .ranked-g2 .container .row-cards-unique { 
    margin-top: 5px;
              align-items: center!important;
}
}
        

        @media(max-width:768px){
      .ranked-g2 {
          padding: 50px 0;
        }
          
      .ranked-g2 .container .cards .content-text { 
          margin: 2% 5%;
    padding: 0em 0em;
      } 
          .ranked-g2 .container .cards .content-text-badgets { 
    padding: 2em 1em; 
    align-items: center;
}
          .ranked-g2 .container .row-cards .cards { 
    max-width: 100%!important;
  margin: 2px;
}
          
          .ranked-g2 .container .row-cards-unique .cards-unique {
    display: block; 
}
         
          
          .ranked-g2 .cards .text-badgets h2 {
    font-size: 18px; 
    margin: 0; 
  }
   .ranked-g2 .cards h3 {
    font-size: 18px; 
  }
          .ranked-g2 h6 { 
    font-size: 14px; 
}
          
  .ranked-g2 .container .cards .col-md-5 img{
    padding: 0 20px;
          }
    
    .ranked-g2 .item svg  { 
    width: 30px!important;
} 
          .ranked-g2 .item svg { 
    display: none;
}
          .ranked-g2 .cards .text-badgets {
    display: flex;
    padding: 20px 0 0;
          }
}

@media(max-width:767px){
          .ranked-g2 .container .cards .content-text-badgets {
    /* transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; */
        border-radius: 11px;
    display: flex;
    background-color: #8A88884D;
    width: 100%;
    padding: auto;
    margin: 2% 5%;
    flex-direction: column;
}
  
}

@media(max-width:425px){
.ranked-g2 .container .row-cards .cards { 
    max-width: 100%!important;
  margin: 2px;
}
}



/* link*/
.ranked-g2 .page-center a { 
  color:#ff4800;
    text-decoration: none;
    margin-top: 1em;
    display: inline-block;
    font-weight: bold;
    padding: .5em;
    margin-left: -.5em;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

    &:before, &:after {
        
        position: absolute;
        content: '';
        border-bottom: 3px solid #ff4800;
        border-radius: 1em;
        bottom: .3em;
        transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    &:before { 
        transform-origin: left;
    }

    &:after {
        width: 82%;
        left: 1em;
        transform: translateX(110%);
    }

    &:hover:before {
        transform: scaleX(0.3);
    }

    &:hover:after {
        transform: translateX(0);
    }

}