/* =====================top banner css================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


.xmas-banner .desk-banner, .xmas-banner .mob-banner{
    position: relative;
    font-weight: 700;
    
}
.desk-banner img, .mob-banner img{
    object-fit: cover;
    width: 100%;
}
.desk-banner .percentage {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 53%;
    right: 22%;
    color: #fff;
    transform: translateY(-50%);
    gap: 10px;
}
.b-friday .percentage {
    top: 53%;
    right: 22%;
    color: #fff;
    transform: translateY(-50%);
    gap: 10px;
}
.mob-banner .percentage h1 {
    font-size: 50px;
    margin: 0;    font-weight: 600;
}

.mob-banner .percentage {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 19%;
    color: #fff;
    transform: translateY(-50%);
}
/* .b-friday-mob .percentage {
    top: 18%;
   
} */
.b-friday-mob .percentage .off-div{
    background-color: #a01a9f;
}

.desk-banner .percentage h1 {
    font-size: 48px;
    margin: 0;    font-weight: 600;
}
.percentage p{
    font-weight: 700;
}

.off-div {
    background-color: #ad0505;
    padding: 4px 10px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    border-radius: 30px;
    text-transform: uppercase;
    line-height: 20px;
}
.xmas-banner .off-div{
     background-color: #aa0003;
}
.b-friday .off-div{
     background-color: #a01a9f;
}
.xmas-banner .desk-banner .percentage{top: 38%;}
/* .xmas-banner .desk-banner, .xmas-banner .mob-banner { font-family: "Barlow Condensed", sans-serif !important;} */
.xmas-banner .desk-banner h1, .xmas-banner .mob-banner h1{font-weight: 800;margin: 0 5px;}
.xmas-banner .percentage{
    display: flex;
    justify-content: center;
    align-items: center;
}

.xmas-banner .off-div{
     background-color: #aa0003;
}
.xmas-banner p {
    margin: 0;
    text-transform: uppercase;
    line-height: 20px;
    font-size: 14px;
}
.desk-banner.b-friday h1 {
 /* font-family: "itc-american-typewriter", serif; */    font-weight: 800;
}
.black-friday h1{
        color: #f166ff;
}
.black-friday .off-div {
    background-color: #0a7af8;
}
.black-friday p{
    font-size: 14px;
    line-height: 16px;
}
.xmas-banner .desk-banner.b-friday h1 {
 font-family: Sora,sans-serif;
}
@media (max-width: 1400px) {
   .desk-banner .percentage{    right: 20%;}
   .b-friday .percentage{    right: 21%;}
  .desk-banner .percentage h1 {    font-size: 42px;}  
}
@media (max-width: 1200px) {
   .desk-banner .percentage{    right: 24%;}
  .desk-banner .percentage h1 {    font-size: 32px;} 
  .b-friday .percentage {
    right: 20%;
} 
}
@media (max-width: 920px) {
   .desk-banner .percentage{    right: 22%;}
   .b-friday .percentage {
        right: 15%;
    }
     .desk-banner .percentage h1 {    
      font-size: 26px;} 
}
  

@media (max-width: 767px) {
  .mob-banner .percentage h1 {    font-size: 58px;} 

      .b-friday-mob .percentage {
    right: 12%;
    display: flex;
    flex-direction: column;
    top: 45%;
    align-items: flex-start;
}
}
@media (max-width: 700px) {
  .mob-banner .percentage h1 {    font-size:50px;}  
}
@media (max-width: 600px) {
  .mob-banner .percentage h1 {    font-size: 44px;}  
  .mob-banner .percentage{ right: 16%;}
      .b-friday-mob .percentage {
        right: 4%;
      }
}
@media (max-width: 500px) {
  .mob-banner .percentage h1 {    font-size: 30px;} 
  .mob-banner .percentage{ right: 8%;} 
  
}
@media (max-width: 420px) {
  .mob-banner .percentage h1 {    font-size:25px;}  
}
@media (max-width: 380px) {
  .mob-banner .percentage h1 {    font-size: 20px;}  
  .xmas-banner p{
        line-height: 12px;
        font-size: 11px;
  }
  .off-div{
      padding: 2px 8px;
          font-size: 12px;
  }
}
@media (min-width: 1400px) {
   .xmas-banner p {
        line-height: 20px;
        font-size: 16px;
    }
    .off-div {
        font-size: 18px;
        padding: 5px 10px;
        line-height: 20px;
        letter-spacing: 0.3px;
    }
}
@media (min-width: 1500px) {
   .desk-banner .percentage{    right: 20%;}
  .desk-banner .percentage h1 {    font-size: 52px;}  
}
@media (min-width: 1700px) {
  .desk-banner .percentage h1 {    font-size: 62px;} 
  .xmas-banner p {
    line-height: 24px;
    font-size: 20px;
} 
    .off-div {
        padding: 5px 10px;
        font-size: 16px;
        border-radius: 30px;
    }
}
@media (min-width: 2000px) {
  .desk-banner .percentage h1 {    font-size: 72px;margin: 0 8px;}
    .xmas-banner p {
        line-height: 30px;
    font-size: 26px;
    }
    .off-div {
        padding: 8px 15px;
        font-size: 22px;
        line-height: 20px;
    }
}
@media (min-width: 2300px) {
  .desk-banner .percentage h1 {    font-size: 82px;}  
}
@media (min-width: 2600px) {
  .desk-banner .percentage h1 {    font-size: 92px;        margin: 0 10px;}  
  .xmas-banner p {
    line-height: 35px;
    font-size: 35px;
}
/* .off-div {
    padding: 12px 26px;
    font-size: 28px;
    line-height: 20px;
} */
}


/***********memorial banner design ************ */

.memorial-desk img, .memorial-mob img {
    object-fit: cover;
    width: 100%;
}

.memorial-banner .memorial-desk,
.memorial-banner .memorial-mob{
   position: relative;
}
.memorial-banner .percentage{
    display: flex;
    justify-content: center;
    align-items: center;
     color: #dd3131;
     position: absolute;
    top: 54%;
    right: 21%;
    transform: translateY(-50%);
}
.memorial-banner .percentage p{
    color: #1c5c8a;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0;
    margin-right: 5px;
}
.memorial-banner .percentage h1{
    font-weight: 900;
    margin-bottom: 0;
    font-size: 36px;
    margin-right: 5px;
}
.memorial-banner .percentage .off-div{
    border-radius: 0;
    background: url(../images/index-new-image-banner/ban-offdiv-bg.png) no-repeat center;
    background-size: cover;
    display: inline-block;
}

@media( min-width: 1500px){
.memorial-banner .percentage h1{
    font-size: 50px;
}
.memorial-banner .percentage p{
        font-size: 20px;
    line-height: 25px;
}
.memorial-banner .percentage{
    right: 20%;
}
}

@media( max-width: 1200px){
    .memorial-banner .percentage{
        right: 20%;
    }
   .memorial-banner .percentage p{
           font-size: 12px;
    line-height: 15px;
    margin-right: 2px;
   }
    .memorial-banner .percentage h1{
            font-size: 32px;
            line-height: 40px;
            margin-right: 0;
    }
  
}

@media( max-width: 991px){
 .memorial-banner .percentage{
        right: 19%;
    }
    .memorial-banner .percentage h1{
        font-size: 30px;
    }
     .memorial-banner .percentage .off-div{
            padding: 2px 7px;
               font-size: 14px;
                line-height: 15px;
    }
}

@media( max-width: 768px){
    .memorial-banner .percentage {
        top: 50%;
        right: 18%;
    }
       .memorial-banner .percentage h1 {
        font-size: 28px;
        line-height: 38px;
    }
        .memorial-banner .percentage p {
        font-size: 12px;
        line-height: 12px;
    }
}


@media( max-width: 600px){
        .memorial-banner .percentage {
        right: 20%;
    }
}
@media( max-width: 500px){
   
    .memorial-banner .percentage h1 {
        font-size: 38px;
        line-height: 38px;
        margin-bottom: -6px;
    }
    .memorial-banner .percentage p{
        font-size: 15px;
    line-height: 15px;
    }
    .memorial-banner .percentage .off-div{
            padding: 2px 7px;
                font-size: 12px;
                line-height: 13px;
    }
}

@media( max-width: 420px){
        .memorial-banner .percentage h1 {
        font-size: 30px;
        line-height: 29px;
    }
    .memorial-banner .percentage{
        top: 48%;
    }
    
}
@media( max-width: 360px){
    .memorial-banner .percentage h1 {
        font-size: 25px;
        line-height: 16px;
        
    }
    
}



/***********mothers day banner design ************ */

.mother-desk img, .mother-mob img {
    object-fit: cover;
    width: 100%;
}

.mother-banner .mother-desk,
.mother-banner .mother-mob{
   position: relative;
}
.mother-banner .percentage{
    display: flex;
    justify-content: center;
    align-items: center;
     color: #f76a4e;
     position: absolute;
    top: 54%;
    right: 21%;
    transform: translateY(-50%);
}
.mother-banner .percentage p{
    color: #e9974b;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0;
    margin-right: 5px;
}
.mother-banner .percentage h1{
    font-weight: 900;
    margin-bottom: 0;
    font-size: 36px;
    margin-right: 5px;
}
.mother-banner .percentage .off-div{
    /* border-radius: 0; */
    background-color: #f6644b;
    display: inline-block;
}

@media( min-width: 1500px){
    .mother-banner .percentage{
        right: 18%;
    }
    .mother-banner .percentage h1{
        font-size: 60px;
    }
    .mother-banner .percentage p{
            font-size: 22px;
    line-height: 28px;
    }
    
}
@media( max-width: 1300px){
    .mother-banner .percentage{
        right: 18%;
    }
    
}
@media( max-width: 1025px){
    .mother-banner .percentage{
        right: 16%;
    }

}
@media( max-width: 992px){
    .mother-banner .percentage{
        right: 14%;
    }
    .mother-banner .percentage h1{
            font-size: 30px;
    }
    .mother-banner .percentage p{
        font-size: 14px;
    line-height: 16px;
    }

}
@media( max-width: 768px){
    .mother-banner .percentage{
            right: 12%;
    }
}

@media( max-width: 480px){
    .mother-banner .percentage{
            right: 8%;
    }
}
@media( max-width: 400px){
    .mother-banner .percentage h1 {
        font-size: 30px;
    }
}





/***********spring sale banner design ************ */

.spring-desk img, .spring-mob img {
    object-fit: cover;
    width: 100%;
}

.spring-banner .spring-desk,
.spring-banner .spring-mob{
   position: relative;
}
.spring-banner .percentage{
    display: flex;
    justify-content: center;
    align-items: center;
     color: #ec9842;
     position: absolute;
    top: 54%;
    right: 21%;
    transform: translateY(-50%);
}
.spring-banner .percentage p{
    color: #7291ad;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0;
    margin-right: 5px;
   
}
.spring-banner .percentage h1{
    font-weight: 900;
    margin-bottom: 0;
    font-size: 36px;
    margin-right: 5px;
  
}
.spring-banner .percentage p, .spring-banner .percentage h1{
    text-shadow: 2px 2px 0 #fff;
     font-weight: 700; 
}
.spring-banner .percentage .off-div{
    /* border-radius: 0; */
    background-color: #7291ad;
    display: inline-block;
    color: #fff;
}

/***********Summer sale banner design ************ */

.summer-desk img, .sumer-mob img {
    object-fit: cover;
    width: 100%;
}

.summer-banner .summer-desk,
.summer-banner .summer-mob{
   position: relative;
}
.summer-banner .percentage{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b70249;
    position: absolute;
    top: 54%;
    right: 21%;
    transform: translateY(-50%);
}
.summer-banner .percentage p{
    color: #124f26;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0;
    margin-right: 5px;
    
}
.indp-banner .percentage p{
    color: #1e5281;
}
 .percentage .text-shadow-c{
      text-shadow: 
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff; 
} 
.summer-banner .percentage h1{
    font-weight: 900;
    margin-bottom: 0;
    font-size: 36px;
    margin-right: 5px;
      text-shadow: 
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff; 
}
.mid-summer-banner .percentage h1 {
     text-shadow: 
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff; 
    color: #358500;
}
.summer-banner .percentage .off-div{
    /* border-radius: 0; */
    background-color: #c0004b;
    display: inline-block;
    color: #fff;
}
.mid-summer-banner .percentage .off-div{
     background-color: #358500;
}
.school-b .percentage {
    right: 24%;
    transform: translateY(-50%);
}
.school-b .percentage p {
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0;
    margin-right: 5px;
}
.school-b .percentage .off-div {
    /* border-radius: 0; */
    background-color: #d52d2d;
    display: inline-block;
    color: #fff;
}
.school-b .percentage h1 {
  text-shadow: 
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff; 
    color: #d4302f;
    font-size: 40px;
}
/* .indp-banner .percentage .off-div {
    background-color: #1777e7;
    display: inline-block;
    color: #fff;
} */
.indp-banner .percentage .off-div {
    border-radius: 0;
    background: url(../images/index-new-image-banner/ban-offdiv-bg-blue.png) no-repeat center;
    background-size: cover;
    display: inline-block;
    color: #fff;
}

@media( min-width: 1500px){
    .spring-banner .percentage{
        right: 18%;
    }
    .spring-banner .percentage h1{
        font-size: 60px;
    }
    .spring-banner .percentage p{
        font-size: 22px;
        line-height: 28px;
    }

    .summer-banner .percentage{
        right: 18%;
    }
    .summer-banner .percentage h1{
        font-size: 44px;
        /* -webkit-text-stroke: 1px white; */
    }
    .summer-banner .percentage p{
        font-size: 22px;
        line-height: 28px;
    }
    
}
@media( max-width: 1300px){
    .spring-banner .percentage{
        right: 18%;
    }
    .summer-banner .percentage{
        right: 18%;
    }
    
}
@media( max-width: 1025px){
    .spring-banner .percentage{
        right: 16%;
    }
    .summer-banner .percentage{
        right: 16%;
    }

}
@media( max-width: 992px){
    .spring-banner .percentage{
        right: 13%;
    }
    .spring-banner .percentage h1{
            font-size: 30px;
    }
    .spring-banner .percentage p{
        font-size: 14px;
        line-height: 16px;
    }

    .summer-banner .percentage{
        right: 13%;
    }
    .summer-banner .percentage h1{
            font-size: 30px;
    }
    .summer-banner .percentage p{
        font-size: 14px;
        line-height: 16px;
    }
    .summer-mob .percentage p {
    font-size: 12px;
    line-height: 15px;
}

}
@media( max-width: 768px){
    .spring-banner .percentage{
        right: 15%;
    }
    .summer-banner .percentage{
        right: 15%;
    }
    .per-b{
        display: flex;
    align-items: center;
    }
     .school-mob .percentage {
    right: 21%;
    display: flex;
    flex-direction: column;
}
.indp-banner .percentage .off-div {
    font-size: 12px;
    line-height: 15px;
}
.school-b .percentage {
    right: 21%;
}
.school-b .school-mob .percentage {
    right: 23%;
}
}
@media( max-width: 530px){
    .spring-banner .percentage{
        right: 12%;
    }
    .summer-banner .percentage{
        right: 12%;
    }
    .school-b .percentage {
    right: 23%;
}
.school-b .school-mob .percentage {
        right: 21%;
    }
}
@media( max-width: 480px){
    .spring-banner .percentage{
            right: 10%;
    }
    .spring-banner .percentage h1 {
        font-size: 26px;
    }
    .summer-banner .percentage{
            right: 10%;
    }
    .summer-banner .percentage h1 {
        font-size: 26px;
    }
    .summer-mob .percentage h1 {
    font-size: 27px;
}
.school-b .school-mob .percentage {
        right: 20%;
    }

}
@media( max-width: 400px){
    .spring-banner .percentage{
        right: 7%;
    }
    .summer-banner .percentage{
        right: 7%;
    }
    .school-mob .percentage {
    right: 21%;
}
    
}

/* next css */
.summer-banner.late-summer p {
    color: #fff;
    text-transform: uppercase;
    }
    .summer-banner.late-summer h1 {
    font-weight: 900;
    margin-bottom: 0;
    font-size: 36px;
    margin-right: 5px;
    text-shadow: none;
    color: #8fde8a;
}
  .summer-banner.late-summer h1 {
    font-weight: 900;
    margin-bottom: 0;
    font-size: 36px;
    margin-right: 5px;
    text-shadow: none;
    color: #8fde8a;
}
.summer-banner.late-summer .off-div {
      background-color: #8fde8a;
    display: inline-block;
    color: #330088;
}
.late-summer .percentage {
    right: 24%;
}
.late-summer .percentage p {
        font-size: 14px;
    line-height: 16px;
  }

  @media( max-width: 1300px){
     .late-summer .percentage {
    right: 20%;
}
  }
  @media( max-width: 992px){
      .late-summer .percentage {
    right: 21%;
}
  }
@media( max-width: 768px){
    .summer-banner.late-summer .percentage {
    right: 24%;
} 
}

@media( max-width: 480px){
    .summer-banner.late-summer .percentage {
    right: 23%;
    }
    .summer-banner.late-summer h1 {
      font-size: 27px;
    }
}

/* ===labor day=== */
    .summer-banner.labor-day .percentage .off-div {
    border-radius: 0;
    background: url(../images/index-new-image-banner/ban-offdiv-pink.png) no-repeat center;
    background-size: cover;
    display: inline-block;
}
.summer-banner.labor-day .percentage h1 {
       text-shadow: -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
    color: #d62e2e;
}
.summer-banner.labor-day .percentage p {
    color: #0b57ad;
     text-shadow: -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
    font-size: 14px;
    line-height: 16px;
   }
 .summer-banner.labor-day .percentage, .summer-banner.fall-day .percentage, .halloween .percentage {
       right: 25%;
 
}
.summer-banner.fall-day .percentage h1 {
      color:#65160C;
 
}
.summer-banner.fall-day .percentage p, .halloween .percentage p, .thanksgiving .percentage p {
    color: #fff;
     font-size: 14px;
    line-height: 16px;
   }
.summer-banner.thanksgiving .off-div {
    background-color: #dc5221;
}
.summer-banner.thanksgiving .percentage h1 {
      color:#dc5221;
 }
 .summer-banner.new-year .off-div {
    background-color: #ca090a;
}
.summer-banner.fall-day .off-div {
    /* border-radius: 0; */
    background-color: #65160C;
}
.summer-banner.fall-day .percentage {
    display: flex;
    justify-content: center;
    align-items: center;
   
}
.halloween .percentage h1{
  background: -webkit-linear-gradient(-90deg, #fff800 37%, #ff9a0c 65%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter: drop-shadow(1px 2px 2px black);
   
}
.halloween .percentage .off-div {
    /* border-radius: 0; */
    background-color: #2e0048;
} 
.summer-banner.thanksgiving .percentage{
  right: 24%;  
}
.new-year .percentage h1 {
    text-shadow: -1px -1px 0 #00539f, 1px -1px 0 #00539f, -1px 1px 0 #00539f, 1px 1px 0 #00539f;
    color: #fff;
}
.new-year .percentage p {
    font-size: 14px;
    line-height: 16px;
   color: #fff;
   text-shadow: -1px -1px 0 #00539f, 1px -1px 0 #00539f, -1px 1px 0 #00539f, 1px 1px 0 #00539f;
}
.valentine .percentage h1 {
    color: #fff;
    text-shadow: -1px -1px 0 #db5d77, 1px -1px 0 #db5d77, -1px 1px 0 #db5d77, 1px 1px 0 #db5d77;
}
.valentine .percentage p {
    color: #fff;
    text-shadow: -1px -1px 0 #db5d77, 1px -1px 0 #db5d77, -1px 1px 0 #db5d77, 1px 1px 0 #db5d77;
}
.summer-banner.valentine .off-div {
 background-color: #c80a0c;
}
.new-year .percentage p{
    color: #fff;
}
.summer-banner.new-year .percentage{
  right: 25%;  
}
.summer-banner.winter-clear .percentage{
  right: 22%;  
}

@media( max-width: 1300px){
 .summer-banner.labor-day .percentage, .halloween .percentage, .summer-banner.thanksgiving .percentage{
    right: 22%;
}
 .summer-banner.new-year .percentage {
    right: 21%;
}
.summer-banner.winter-clear .percentage {
    right: 18%;
}
}
@media( max-width: 1200px){
.summer-banner.thanksgiving .percentage {
        right: 21%;
    }
}
@media( max-width: 992px){
    .summer-banner.labor-day .percentage {
    right: 17%;
}
.summer-banner.fall-day .percentage {
    right: 20%;
}
.summer-banner.thanksgiving .percentage {
    right: 16%;
}
.summer-banner.new-year .percentage {
    right: 19%;
}
.summer-banner.winter-clear .percentage {
    right: 15%;
}
.halloween .percentage {
    right: 18%;
}
}
@media( max-width: 767px){
    .summer-banner.labor-day .percentage .off-div {
        font-size: 12px;
        line-height: 15px;
    }
    .summer-banner.labor-day .percentage {
    right: 18%;
}
.summer-banner.fall-day .percentage {
    right: 19%;
}
.halloween-mob .percentage .off-div{
    background-color: #ff9002;
}
.halloween .percentage {
    right: 18%;
}
.summer-banner.thanksgiving .percentage {
    display: flex;
    flex-direction: column;
}
 .summer-banner.thanksgiving .percentage {
    right: 28%;
}
.summer-banner.new-year .percentage, .summer-banner.valentine .percentage {
    right: 25%;
    flex-direction: column;
    font-size: 17px;
    line-height: 13px;
    }
}

@media( max-width: 600px){

.summer-banner.labor-day .percentage {
        right: 26%;
    }
  .summer-banner.new-year .percentage {
    right: 21%;
}
 .halloween .percentage p {
    font-size: 12px;
    line-height: 16px;
}
}
@media( max-width: 480px){
    .summer-banner.labor-day .percentage {
    right: 22%;
}
.summer-banner.fall-day .percentage {
    right: 11%;
}
.halloween .percentage {
    right: 11%;
}
.summer-banner.thanksgiving .percentage {
    right: 23%;
}
.summer-banner.new-year .percentage, .summer-banner.valentine .percentage {
    right: 12%;
}

}

/* == Yellow banner 12-12-24 ==*/
.holiday-banner {
    font-family: 'Poppins';
    background-color: #FFFACC;
    padding: 10px;
    border-radius: 8px;
    line-height: 24px;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.banner-title {
    color: #F25606;
    font-size: 12px;
    line-height: 29px;
    font-weight: 700;
    margin: 0;
}
.banner-text {
    color: #000000;
    font-size: 12px;
    font-weight: 400;
    margin-top: 0px; 
    margin-bottom: 0px;
    line-height: 24px;
}
.container-custom{ 
    max-width: 915px;
    margin:20px auto 0;
}


@media (max-width: 767px) {
  .container-custom{
      padding: 0 15px;
  }
}

/* Boxing Week banner */
.percentage{font-family: "Montserrat", serif;}
.summer-banner-b.boxing .percentage {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 28%;
    transform: translateY(-50%);
    flex-direction: column;  
    
}
.summer-banner-b.boxing .percentage h1 {
    color: #d13910;
    text-shadow: none;
    font-weight: 900;
    margin-bottom: 2px;
    font-size: 36px;
    margin-right: 5px;
    display: inline-block;
    line-height: 33px;
    text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
    
}

.summer-banner-b.boxing .off-div {
    background-color: #d13910;
        
}
.summer-banner-b.boxing .percentage p {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0px;
    margin-right: 5px;
    text-shadow: -1px -1px 0 #e43636, 1px -1px 0 #e43636, -1px 1px 0 #e43636, 1px 1px 0 #e43636;
}


@media (min-width: 2000px) {
.summer-banner-b.boxing .percentage p {    font-size: 20px;
    line-height: 22px;}
.summer-banner-b.boxing .percentage h1{    font-size: 42px;    line-height: 40px;}
.new-year .percentage p, .black-friday p{
    font-size: 22px;
    line-height: 24px;
}
.summer-banner .percentage h1 {        font-size: 55px;}
}

@media (min-width: 2600px) {
.summer-banner-b.boxing .percentage p {
    font-size: 26px;
    line-height: 28px;
}
.summer-banner-b.boxing .percentage h1 {
    font-size: 55px;
    line-height: 52px;
}
.off-div {
    padding: 11px 16px;
    font-size: 24px;
    line-height: 20px;
}
    .new-year .percentage p, .black-friday p {
        font-size: 28px;
        line-height: 28px;
    }
    .summer-banner .percentage h1 {
        font-size: 68px;
    }
}

@media (max-width: 2000px) {
.new-year .percentage p, .black-friday p{
    font-size: 18px;
    line-height: 20px;
}
}
@media (max-width: 1500px) {
     .summer-banner-b.boxing .percentage h1 {
        font-size: 26px;
        line-height: 24px;
    }
    .summer-banner-b.boxing .percentage p{
            font-size: 14px;
    line-height: 20px;
    }
    .off-div{
            line-height: 22px;    font-size: 14px;    padding: 1px 8px;

    }
}
@media (max-width: 1200px) {
 .summer-banner-b.boxing .percentage {
        right: 27%;
    }
    .summer-banner-b.boxing .percentage p{
        font-size: 10px;
    line-height: 14px;
    }
        .summer-banner-b.boxing .percentage h1 {
        font-size: 24px;
        line-height: 24px;
    }
    .off-div{
            padding: 1px 6px;    font-size: 10px;    line-height: 15px;
    }
}
@media (max-width: 1024px) {
    .summer-banner-b.boxing .percentage {
        right: 27%;
    }
    .summer-banner-b.boxing .percentage p{
        font-size: 10px;
    line-height: 14px;
    }
    .summer-banner-b.boxing .percentage h1 {
        font-size: 20px;
        line-height: 14px;
    }
    .off-div{
            padding: 1px 6px;    font-size: 10px;    line-height: 15px;
    }

    .new-year .percentage p, .black-friday p{
        font-size: 12px;
    line-height: 14px;
    }
    .summer-banner .percentage h1 {
        font-size: 26px;
    }
}

@media (max-width: 767px) {
 .summer-banner-b.boxing .percentage {
        right: 28%;
   
}
.summer-banner-b.boxing .percentage h1{
        font-size: 28px;
        line-height: 32px;
        
    }
.summer-banner-b.boxing .percentage p {
        font-size: 12px;
        line-height: 12px;
    }
    .off-div {
        padding: 2px 10px;font-size: 13px;
    }
}

@media (max-width: 575px) {
.summer-banner-b.boxing .percentage {
    right: 26%;
}
.summer-banner-b.boxing .percentage h1 {
    font-size: 22px;
    line-height: 21px;
}
.black-friday .percentage {
    right: 15%;
}
}