:root{
--_color:hsl(228, 45%, 44%);
--color_Neutral_900:hsl(243, 96%, 9%);
--color_Neutral_800:hwb(244 15% 75%);
--color_Neutral_700: hsl(243, 23%, 24%);
--color_Neutral_600: hsl(243, 23%, 30%);
--color_Neutral_300: hsl(240, 6%, 70%);
--color_Neutral_200: hsl(250, 6%, 84%);
--color_Neutral_0: hsl(0, 0%, 100%);
--color_Orange_500: hsl(28, 100%, 52%);
--color_Blue_500: hsl(233, 67%, 56%);
--color_Blue_700: hsl(248, 70%, 36%);
--font_size_rem:0.6875rem;
--font_size_px:18px;
--font_family_title:'Bricolage Grotesque', sans-serif;
}
body{
    background-color:var(--color_Neutral_900) !important;
    font-family: 'DM Sans', sans-serif;
    color: white !important;

}
hr{
    margin: 0 !important;
}

@media(max-width:992px){
.navbar .container-md {
    
    padding: 10px;
    justify-content:space-around !important;
}
/* Start Nav_section */
.navbar .container-md .logo{
    flex-basis: 40% !important;
   
}
.navbar .container-md .dropdown{
   
 flex-basis: 20%  !important;
    
}
}
.navbar .container-md  .dropdown button {
  background-color: var(--color_Neutral_600);
  width: 100%;
}
.navbar .container-md  .dropdown .dropdown-menu label:not(:first-child){
    color: var(--color_Neutral_300);
}

.navbar .container-md .logo img{
    width: 100% !important;
}
.navbar .container-md .dropdown ul li:hover a,
.navbar .container-md .dropdown ul li:hover i{
    background-color: var(--color_Neutral_300)!important;
  
}
.navbar .container-md .dropdown ul label{
     color: aliceblue;
}
.navbar .container-md .dropdown ul li a{
    color: aliceblue;
    font-size: 12px;
}
/* End Nav_section */

/* Start Hero_section */
.hero_section .container-md{
   
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.hero_section .container-md  .text{
   
    text-align: center;
}
@media(max-width:992px){
    .hero_section .container-md  .text h1{
        font-size: var(--font_size_rem) !important;
    }
}
.hero_section .container-md  .text h1{
  
    padding: 10px 5px !important;
    font-family: var(--font_family_title);
    font-size:40px
}
.hero_section .container-md  .tool{
  
    padding:10px 5px;
    width: 45%;
}
@media(max-width:992px){
   .hero_section .container-md  .tool .input-group{
    flex-direction: column !important;
    align-items: center !important;
   } 
   .hero_section .container-md  .tool .input-group input{
    width:100% !important;
   }
    .hero_section .container-md  .tool .input-group  .btn{
        margin-top: 10% !important;
        width: 100%;
      

    }
}

.hero_section .container-md  .tool .input-group .form-control{
     background-color: var(--color_Neutral_600);
     border: none;
     color: white !important;
} 

.hero_section .container-md  .tool .input-group .form-control::placeholder{
    color: white !important;
    
    text-align: center;
  
} 
@media(max-width:992px){
    .hero_section .container-md  .tool .input-group .form-control::placeholder{
        font-size: 8px;
    }
}
.hero_section .container-md  .tool .input-group .btn{
   border-radius: 6px !important;
    margin-left: 2% !important;
}

/* End Hero_section */
/* Start Today_forcast_section */
.today_forcast .container-md  .degres{
    background-image: url(./assets/images/bg-today-large.svg);
    background-size: cover;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 300px;
    width: 66%;
    border-radius: 8px;
}
@media(max-width:992px){
.today_forcast .container-md  .degres{
      min-height: 50px;
     
}
.today_forcast .container-md {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    
  
}

}
@media(max-width:992px){
 .today_forcast .container-md .degres{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    
 }
}
.today_forcast .container-md  .degres .left{
    padding: 10px 20px;
    
}

.today_forcast .container-md  .degres .right{   
    display: flex;
    justify-content:space-around;
    align-items: center;
}
@media(max-width:992px){
    .today_forcast .container-md  .degres .right{
        display: flex !important;
        justify-content: center !important;
    }
     
     .today_forcast .container-md  .degres .right .icon{
       
         text-align: center !important;
     }
}
.today_forcast .container-md  .degres .right .icon{
    
     text-align: right;
    
}
.today_forcast .container-md  .degres .right .icon img{
    width: 50%;
}
@media(max-width:992px){
    .today_forcast .container-md  .degres .right .icon img{
        width: 100%;
    }
}
.today_forcast .container-md  .degres .right .text{
    display: flex;
    padding: 10px 20px;
   
}
.today_forcast .container-md  .degres .right .text h2{
    font-size: 80px;
}
@media(max-width:992px){
.today_forcast .container-md  .degres .right .icon{
flex-basis: 30%;
}
.today_forcast .container-md  .degres .right .text{
    font-size: 40px;
    
}
}
 .today_forcast .container-md  .degres .right .text span{
    font-size: 40px;
 }
/* End Today_forcast_section */
/* start  details_section */
.details{
    position: relative;
    padding-bottom: 10px;
  
}
@media(max-width:992px){
    .details{
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
.details  .left_details .boxces{
   display: flex;
   justify-content:space-between;
   align-items: center;
}

@media(max-width:992px){
.details{
    display: flex;
    justify-content: center;
    
}
.details  .left_details .container-md{
     display: flex !important;
     justify-content: center !important;
}

.details  .left_details .boxces{
   display: flex;
    flex-wrap: wrap;
   justify-content:space-between;
   align-items: center;
}
}

.details  .left_details .boxces .box{
    margin-top: 10px;
    width: 22%;
    margin-top: 5px
}
.details  .left_details .boxces .box .card-body{
    height:80px;
}

@media(max-width:992px){
 .details  .left_details .boxces .box{
     width: 45%;
  
 }
}
.details  .left_details .boxces .box .card,
.daily_forcas .container-md .boxces .box .card{
    width:100% !important;
     color: var(--color_Neutral_200);
    background-color: var(--color_Neutral_600);
    text-align: left !important;
}
.details  .left_details .boxces .box .card .card-body .card-title{
    font-size: 16px;
}
.details  .left_details .boxces .box .card .card-body  h6{
    color: var(--color_Neutral_200) !important;
    margin-top: 10px !important;
     font-size: 12px;
   
}
@media(min-width:992px ) and ( max-width:1021.33px){
.details  .left_details .boxces .box .card .card-body .card-title,
 .details  .left_details .boxces .box .card .card-body  h6 {
    font-size: 16px !important;
   
   
 }
}
@media(max-width:992px){
 .details  .left_details .boxces .box .card .card-body .card-title,
 .details  .left_details .boxces .box .card .card-body  h6 {
    font-size: 10px !important;
   
 }
}

.details  .hourly{
 background-color: var(--color_Neutral_600);
   border-radius: 8px;
    position: absolute;
    top: -300px;
    width: 20%;
    right:160px;
    padding-bottom: 20px;
}
@media(min-width:993px){
    .details  .hourly{
        right:140px
    }
}

@media(max-width:992px){
    .details  .hourly{
        position: static;
        margin-top: 5%;
    }
}

 @media(max-width:376px){
    .details  .hourly{
      width: 55%;
    }
}
@media(min-width:377px) and (max-width:414px){
    .details  .hourly{
        width: 50%;
    }
}
@media(min-width:415px) and (max-width:500px){
    .details  .hourly{
        width: 47%;
    }
}
@media(min-width:501px) and (max-width:539px){
   .details  .hourly{
    position: static;
    margin-top:2%;
    width: 23%;
   } 
}
@media(min-width:540px) and (max-width:767px){
   .details  .hourly{
    width: 38%;
   } 
}
@media(min-width:768px) and (max-width:852px){
   .details  .hourly{
    width: 26%;
   } 
}
@media(min-width:853px) and (max-width:911px){
   .details  .hourly{
    width: 24% !important;
   
   } 
}
@media(min-width:912px) and (max-width:992px){
   .details  .hourly{
    width: 22% !important;
   
   } 
}
.details  .hourly .top{
    padding: 20px;
   
}
.details  .hourly .top .text{
    
    padding-top: 5px;
}
.details  .hourly .top h5{
    font-size: 12px;
      
}
.details  .hourly .top button{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.details  .hourly ul li a{
    color: aliceblue;
    font-size: 12px;
    translate: all .5s;
}

.details  .hourly ul li:hover a{
     background-color: var(--color_Neutral_300)!important;
}
.details  .hourly .top .btn-group .btn{
    background-color: var(--color_Neutral_700) !important;
    border: none;
    font-size: 12px;
}
.condition{

    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--color_Neutral_700);
    padding: 10px 0px;
    border-radius: 8px;
    margin-top: 10px;
   
}
.condition .left{
    flex-basis: 50%;
    display: flex;
   justify-content:left;
}
.condition .left .icon{
    text-align: center;
    flex-basis: 50%;
    
}
.condition .left img{
    width: 50%;
}
.condition .left .degree{
     padding: 0;
     display: flex;
     align-items: center;
     justify-content:center;
    
}
.condition .left .degree span:last-child{
    text-transform: capitalize;
  
    margin-left: 5px;
}
.condition .right{
    flex-basis: 20%;
}
.daily_forcas .container-md .text h5{
    font-size:16px;
    
}
@media(max-width:992px){
.daily_forcas .container-md{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.daily_forcas .container-md .text{
     width: 62%;
}
}
.daily_forcas .container-md .boxces{
    display: flex;
    justify-content:space-between;
    align-items: center;
}
@media(max-width:992px){

 .daily_forcas .container-md .boxces{
     flex-wrap:wrap;
     
      justify-content:space-around;
 }
}
.daily_forcas .container-md .boxces .box{
    flex-basis: 12.58%;
    height: 30%;
}
@media(max-width:992px){
 .daily_forcas .container-md .boxces .box{
    flex-basis: 30%;
    margin-top: 2%;
 }
}
.daily_forcas .container-md .boxces .box .card{
    width: 100% !important;
}
/* end  details_section */
/* Start_Footer_section  */
footer{
     padding: 15px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
   
}
footer span,
footer span{
     font-size: 12px;   
}
@media(max-width:992px){
    footer{
        flex-direction: column;
    }
}
/* End_Footer_section  */