:root{
    --lightBlue: #2070dc;
    --darkBlue: #1a1a1a;
    --white: #ffffff;
    
    --lightGrey:#6f86e9;
    --card-text: #bfc1c8;
    --darkGrey: #222530;
    
}

body{
    background-color:#3c1e61;
}
.nav-info i{
    
    font-size: 50px;
    color: var(--lightBlue);

}
.nav-info div h1 {
    font-size: 16px;
    font-weight: 700;
    color: white;
    left: 10px;
    top: 10px;
}
.nav-info div small {
    color: #BFC1C8;
    font-size: 10px;
    font-weight: 300;
    left: 10px;
    bottom: 8px;
}
.nav-item{
    padding: 5px 25px;
   transition :all 0.5s;
}
 .navbar-nav .nav-link.active{
    border: 2px solid var(--lightBlue);
border-radius: 20px;
color: var(--lightBlue);
}
 .nav-item :hover{
border: 2px solid var(--lightBlue);
border-radius: 20px;

}













section {
    background-image: url(../images/banner.png);
    background-size: auto;
    background-position: top;
    background-repeat: no-repeat;
}
.input {
    background-color: var(--darkGrey);
    color: white;
}

.input ::placeholder{
    color: white;
}
.inputBtn {
    background-color: var(--lightBlue);
    top: 6px;
    right: 6px;
    color: white;
}
   

.header-custom-light {
    background-color: #2D303D;
    color: var(--card-text);
}


.body-custom-light {
    background-color: var(--lightGrey);
}
.body-custom-light h5 {
    color: var(--card-text);
}


.degree h1 {
    font-size: 60px;
    color: white;
    font-weight: 700;
    line-height: 135px;
}

.degree img {
    width: 90px;
    height: 90px;
}

.weatherCondition {
    color: var(--lightBlue);
}
.body-custom-light span {
    font-size: 14px;
    color: var(--card-text);
}
.body-custom-light span img {
    width: 14px;
    height: 14px;
}
.body-custom-light span img {
    width: 14px;
    height: 14px;
}




.header-custom-dark {
    background-color: #222530;
    color: var(--card-text);
}
.body-custom-dark {
    background-color: #b3b4ba;
    padding: 25px 20px 35px;
}
.cardImg {
    margin: 0 0 20px;
}

.cardImg img {
    width: 50px;
    height: 50px;
}
.degreeAfter h4 {
    color: white;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
}
.sub-top {
    vertical-align: top;
}
small {
    color: var(--card-text);
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}
.body-custom-dark p {
    margin-block: 24.5px;
}
.weatherCondition {
    color: var(--lightBlue);
}


.body-custom-light2 {
    background-color: var(--lightGrey);
    padding: 25px 20px 35px;
}
.body-custom-light2 p {
    margin-block: 24.5px;
}