@font-face {
    font-family: "Poppins-Regular";
    src: url(../fonts/Poppins-Regular.ttf);
}
@font-face {
    font-family: "Montserrat-Bold.ttf";
    src: url(../fonts/Montserrat-Bold.ttf);
}

body{
    padding: 0;
    margin: 0;
    font-family: "Poppins-Regular";
}

.inner-container{
    padding:4% 88px;
    height: 100%;  
}

.inner-box{
    display: flex; 
    height: 25em;
    width: 100%;
    box-shadow: 9px 13px 22px -7px #494949;
    /* border-radius: 15px; */
    /* margin: 0 auto;
    max-width: 1160px;
    min-width: 320px; */
    
}
.left-side-box{
  
    display: flex;
    flex-direction: column;
    width: 25%;
    /* background: #eff1f4;
    text-align: center;
    align-items: center;
    padding: 1%;
    gap: 1%;
    border-radius: 15px 0 0 15px; */
}

 /* .left-side-box{
        width: 25%;
        height: 45%;
      } */

    .left-upper{


    display: flex;
    flex-direction: column;
    /* width: 25%; */
    height: 60%;
    background: #eff1f4;
    text-align: center;
    align-items: center;
    padding: 1%;
    gap: 1%;
    /* border-radius: 15px 0 0 15px; */
      }

      
    .left-lower{
    /* display: flex; */
    height: 40%;
    background-color: #005ba1;
    /* border-radius: 0px 0px 15px 0px; */
    justify-content: center; 
    align-items: center;
    gap: 50px; 
    padding: 10px 2%;
    text-align: center;
    color: #ffe600;
    padding-top: 36px;
    font-size: 16px;
    border-right: 2px solid #dbdbdb;
    }

.left-lower .saving{
    font-family: 'Montserrat-Bold.ttf';
    font-size: 32px;
    color: #ffffff;
    font-style: italic;
    text-align: center;
    margin-bottom: -18px;
}



.left-side-box .bbp-logo{
    height: 4.5rem;
}

.left-side-box img{
    height: 4.5rem;
    
    mix-blend-mode: multiply;
    object-fit: contain;
    margin-top: 7px;

}
.left-side-box h3{ 
    font-size: 2.5rem;
    font-weight: 600;
    margin-top: 20px;
    
}

.left-side-box p{
   
    font-size: 1.5rem;
    margin-top: 20px;
    cursor: default;
}
.left-side-box p span{
    
    font-size: 1rem;
    margin-top: -1px;
    cursor: default;
    
}


.thumb img{
    margin-top: -15px;
    height: 9rem;
    width: 9rem;
   
}

.upperlower {
    position: relative;
    background-color: transparent;
    width: 75%;
}

.upper {
    text-align: center;
    display: flex;
    height: 60%;
    background-color: white;
    /* border-radius: 0px 15px 0px 0px; */
    justify-content: center; 
    gap: 50px;
    align-items: center;
    padding: 10px 2%; 
}

.compare:hover {
    background-color: #eff1f4;
}

.lower {
    display: flex;
    height: 40%;
    background-color: #005ba1;
    /* border-radius: 0px 0px 15px 0px; */
    justify-content: center; 
    align-items: center;
    gap: 50px; 
    padding: 10px 2%;
}

.compare {
    flex: 1; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    padding: 2% 0;
}

.compare img {
    height: 6rem;
    mix-blend-mode: multiply;
    object-fit: contain;
    margin-top: 5px;
}

.compare h3 {
    margin-top: 20px;
    font-size: 2.3rem;
    cursor: default;
}

.compare p {
    font-size: 1rem;
}

.compare-per { 
    align-items: center;
    line-height: 99px;
    text-align: center;
    flex: 1; 
    /* padding: 38px; */
}

.compare-per:hover {
    transform: scale(1.05);
}

.compare-per h3 {
    font-size: 2.3rem;
    color: white;
    cursor: default;
    margin: 0; 
    text-align: center;
}

.radio-box {
    display: none;
    position: absolute; 
    width: 31rem;
    background-color: #ffa500;
    z-index: 1;
    border-radius: 20px;
    border: 1.3px solid rgb(5, 5, 5);
    top: 55%;
    left: 0;
    right: 0;
    margin: auto; 
    color: rgb(0, 0, 0);
    line-height: 4px;
    padding: 1px 0px;
    text-align: center;
}

.radio-box p {   
    font-size: 15px;
    text-align: center;
}

    .radio-box:hover  {
        transform:scale(1.05);
       
    }

    @media screen and (max-width: 1250px) {
        .inner-container{
            padding: 4% 20px;
        }
    }

    @media (max-width: 1037px){
        .inner-container{
            padding: 10px 20px;
        }
      

        .upperlower{
            width: 75%;
        }
       
    }

    @media (max-width: 968px){

        .left-side-box h3{
            font-size: 32px;
        }
        .compare h3{
            margin-top: 16px;
            font-size: 28px;
        }
        .compare img{
    
            height: 4.5rem;
            mix-blend-mode: multiply;
            object-fit: contain;
            margin-top: 5px;
        }
        .left-side-box{
            width: 35%;
        }
        /* .radio-box{
            left: 27%;
        } */
        .upper{
            gap: 35px;
            }

          .lower{
            /* padding: 0; */
            gap: 35px;
          }

        .compare-per h3{
            font-size: 28px;
            
        }
        .left-side-box p{
            font-size: 1.2rem;
            margin-top: 4px;
        }
        .left-side-box .bbp-logo{
            height: 6rem;
        }
    }

    @media (max-width: 768px) {

        
    .inner-container{
           width: 100%;
           rotate: 90deg;
           margin-top: 18%;
           margin-bottom: 58%;
      }

      .thumb img{
        height: 9rem;
        width: 9rem;
       
    }
      .inner-box{
        /* flex-direction: column; */
        height: 31.7em;
        width:100vh;
        text-align: center;

      }

      .left-side-box{
        width: 50%;
        line-height: 1rem;
        padding: 0;
        /* border-radius: 15px 15px 0 0px; */
      }

     .left-upper{
        flex-direction: row;
     }
    
        .left-side-box .bbp-logo {
            rotate: -90deg;
        }

      .left-side-box h3{  
        font-size: 2.5rem;
        margin-top: 20px;
        rotate: -90deg;
        margin-left: -12px;
    }
      .left-side-box p{  
        font-size: 2rem;
        line-height: 1.8rem;
        margin-bottom: 0px;
        margin-top: 20px;
        rotate: -90deg;
        margin-left: -32px;
    }

    .left-lower .saving{
        margin: 10px;
    }

      .upperlower{
        width: 100%;
        /* font-size: small; */
        height: 100%;
      }
      
      .upper{
        gap: 6px;
      }
      .lower{
        /* padding: 0 6% 0 0%; */
        /* border-radius: 0px 0px 15px 15px; */
        gap: 6px;
      }
      .compare{

        /* margin-left: 31px; */
        line-height: 1px;
        /* padding: 2px 0px; */
        rotate: 270deg;
    }
    .compare h3{
        margin-top: 0px;
        font-size: 28px;
    }
    .radio-box{

        /* height: 2rem; */
        width: 30rem;  
        margin-top: 0%;
  
        line-height: 4px;
    }
    .radio-box p{
        font-size: 14px;
        margin-top: 0px;
    }

    .compare img{
        height: 4rem;
        mix-blend-mode: multiply;
        object-fit: contain;
        margin-top: 5px;
    }

    .compare-per{
        rotate: 270deg;
    }

    .compare-per h3{
        font-size: 2rem;
        
    }
 }

@media (max-width:600px){
    .inner-container{
        margin-bottom: 513px;
    }

  .price-sec .container{
        width: 90%;
    }
}

@media(max-width:480px){
    .inner-box{
        height: 27em;
    }
}

@media(max-width:400px){
    .inner-container{
        margin-bottom: 570px;
    }
    
    .inner-box{
        height: 25em;
    }
}