*{
    margin:0 ;
    padding:0 ;
}
/* header */
.navbar-brand img{
    height: 50px;
    width: 50px;
}
/* Main */
/* Recharge or pay Bills */
.recharge-bill{
    padding: 30px 0 40px;
}
.inner-bill{
    display: flex;
    justify-content: center;
}
.inner-bill .btn{
    margin: 0 12px 0 0;
    font-size: 12px;
    border-radius: 32px;
    padding: 8px 14px;
}
#prepaid{
    margin: 0 12px 0 27px;
    background-color: black;
    color: white;
}
#phone{
    width: 350px;
    border: 1px solid #e3e5ff;
    border-radius: 10px;
    font-size: 14px;
    padding: 15px 12px;
}
#info{
    margin-top: 15px;
}
#recharge-btn{
    background-color: black;
    width: 294px;
    color: white;
    cursor: pointer;
}
/* Offer-design */
.offer-design{
    background-color:rgba(255, 0, 0,0.78);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; 
    font-size: 14px;
    font-weight: 500;
    padding: 2px;
}
.offer-design img{
    height:35px;
    margin: 0 6px  0;
}
.offer-design p{
    margin: 0;
}

#btn{
    border: none;
    background-color: #ff4949;
    border: 1px solid white;
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    padding: 5px 8px;
    line-height: 12px;
    font-weight: 500;
    cursor: pointer;
}
h4{
    font-size: 32px;
}
/*Buy a new Connection */
.pay-bill{
    padding:32px 0;
}
.Bills, .recharge, .Airtel-cards,.img-content{
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;

}
.connection{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 42px;
    flex-wrap: wrap;
    padding-bottom: 40px;

}
.btns{
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: black;

}
.btns .btn{
    height: 56px;
    width: 56px;
    border-radius: 50px;
    color: black;
}
.btns p{
    font-size: 12px;
    margin: 4px 0 0 0;
}

/* .btn{
    background-color: #e3e5ff;;
    color: black;
} */
.inner-bill .btn, .connection .btn, .img-btns .btn{
    background-color: #e3e5ff;;
    color: black;  
}


/* Switch to aritel */
.switch-airtel{
    background-color: #ff4949;
    border-radius: 20px;
    padding: 6px;  
    max-width: 540px; 
    margin: auto;
    border: 1px solid #e90000;
}
.airtel-img2 img{
    height:50px;
    margin: 0 6px  0;
}
.box1{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}
.box1 p{
    margin: 0;
    font-size: 12px;
    color: white;
}
.box1 p + p{
font-size: 10px;
letter-spacing: 0.01em;
}

.content{
    display: flex;
    justify-content:space-between;
    gap: 8px;
    align-items: end;
    flex-wrap: wrap;
    flex: 1;
}

/* Cards Parts of Airtel */
.Airtel-cards{
    padding: 32px 0 72px;
    border-top: 1px solid #dee2e6;
    background-color: #f7f7fa;
}
.card-title{
    color: #ff4949;
}
.text{
    font-size: 12px;
    color: grey;
}
.cards{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.card{
    border-radius: 20px;
}
.card img{
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
.card{
    margin: 0 12px 24px 12px;
}
.card a + a{
    text-decoration: none;
    margin-left: 10px;
}
/* IMG Part */
.img{
    height: 600px;
    width: 100%;
    padding: 60px 20px 40px;
    background-image: url(img/road.jpeg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}
.img-card{
    text-align: center;
    background-color: #f4f5ff;
    height: 400px;
    box-shadow:6px 20px 50px rgba(1, 49, 101, 0.1);
}
.img-btns{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;
}
.img-btns .btn{
    border-radius: 25px;
    width: 150px;
}.img-card .card-body{
    padding: 25px;
}
/* Business Part */
.business{
    padding:70px;
    background-color: #f7f7fa;
}
.business img{
    width: 50px;
}
.pra1{
    font-size: 14px;
    color: grey;
    margin:0 ;
}
.pra2{
    font-size: 12px;
    color:#027BFc;
    margin: 10px 0;
}
.arow-icon{
    color: #027BFc;
    font-size: 12px;
}
.business-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}



/* footer  */
.footer-lists{
    margin: 0 66px;
    padding: 48px 0 24px;
    display: flex;
    justify-content: space-between;
}
.footer-lists ul{
    padding: 0;
}
.footer-lists ul li{
    list-style: none;
    margin: 12px 0;
}
.footer-lists a{
    text-decoration: none;
    color: #292c31;
    font-size: 14px;
}

.top{
    font-size: 16px;
    font-weight: 900;
}
/* Get Apps */
.get-app{
    margin: 0 66px;
    padding: 1rem 0 2rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
/* One  */
.one{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}
.one img{
    width: 40px;
    height: 40px;
}
.two,.three{
    width: 30%;
}
.one, .four{
    width: 20%;
}
/* Two */
.two,.three{
    display: flex;
    gap: 12px;
    align-items: center;
}
.two p, .three p{
    margin: 0;
    font-size: 12px;
}
.two .link{
    width: 33%;
    height: 35px;
    border-radius: 4px;
    cursor: pointer;
}
.two img{
    width: 100%;
    height: 100%;
}
/* three */
.circle{
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 6px;
    cursor: pointer;
}
.icons{
    display: flex;
    font-size: 12px;
    align-items: center;
    gap: 5px;
}


/* four */
.back{
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}
.four .btn{   
    border: 1px solid black;
}
.back a{
    text-decoration: none; 
    color: black;
}


/*Position Fix on the screen */
.fix{
    width: 44%;
    padding:25px 28px 25px 20px;
    border-radius: 14px;
    background-color: #3e4146;
    color: white;
    font-size: 12px;
    position: fixed;
    bottom: 60px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    left: 28%;
    right: 28%;
}
.fix p{
    margin: 0;
    color: #D4D5D6;
}
.fix .btn{
    border: 1px solid white;
    color: white;
    font-size: 12px;
    border-radius: 20px;
    font-weight: 500;
    line-height: 12px;
}
/* what happen when our screen size is 950px */
@media (max-width:950px){
    .business-container{
        flex-wrap: wrap;
        margin-top: 20px;
    }
    .business{
        padding: 30px 25px;
    }
    .footer-lists,.get-app{
        margin: 0 36px;
        flex-wrap: wrap;
    }
}
@media(max-width:600px){
    .one, .two, .three, .four, .four .btn{
     width: 100%;
    }
}
@media (max-width:500px){
    .box1 .airtel-img{
        margin-bottom:16px ;
    }
    .offer-design{
        padding: 6px 16px;
    }
}
/* What happen when we hover the selector element */
.footer-lists a:hover{
    color: #e90000;
}
.btn:hover{
 border: 1px solid rgba(128, 0, 126,0.3);
    
    
}
#phone:hover{
    border: 1px solid #027BFc;
    }
#recharge-btn:hover, #bak:hover{
    background-color: #e3e5ff;
    color: black;
    transform: none;
}
#btn:hover{
    background-color: #3e4146;
}
.circle:hover{
    transform: scale(1.2);
    opacity: 0.6;
}