* {
   box-sizing: border-box;
}

body {
   font-family: 'Open Sans', sans-serif;
   font-size: 18px;
   font-weight: 400;
   text-align: center;
   color: #2F2969;
   background: #9DBCFC;
   position: relative;
   min-height: 100vh;
}

.search-menu {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-bottom: 60px;
}

.search-menu__group {
   display: flex;
   gap: 20px;
   align-items: center;
}

.search-menu__label-icon, .search-menu__btn-icon {
   max-width: 25px;
   width: 100%;
}

.search-menu__input {
   height: 100%;
   border: none;
   background: transparent;
   font-family: inherit;
   color: inherit;
   font-size: 18px;
   position: relative;
   font-weight: 600;
   outline: none;
}

.search-menu__input-wrapper {
   position: relative;
   height: 100%;
}

.search-menu__input-wrapper::after {
   content: '';
   width: 100%;
   height: 4px;
   bottom: -10px;
   background-color: rgba(255, 255, 255, .5);
   position: absolute;
   right: 0;
   left: 0;
   border-radius: 15px;
   
}

.search-menu__input::placeholder {
   font-family: inherit;
   color: inherit;
}

.search-menu__btn {
   padding: 0;
   margin: 0;
   cursor: pointer;
   background: none;
   border: none;
   display: flex;
   justify-content: center;
   align-items: center;
}

.weather-forecast-today {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 40px;
}

.container {
   margin: 0 auto;
   padding: 30px 10px;
   max-width: 1275px;
   width: 100%;
}

.header__title {
   margin-top: 20px;
   font-size: 30px;
}

.weather-forecast-today__mark {
   margin-bottom: 20px;
   font-size: 22px;
}

.weather-forecast-today__img {
   max-width: 250px;
   display: block;
   margin-bottom: 30px;
   width: 100%;
}

.weather-forecast-today__deg {
   font-size: 100px;
   font-weight: 800;
   font-family: 'Dosis', sans-serif;
   margin-bottom: 30px;
}

.weather-forecast-today__feauture {
   display: flex;
   gap: 20px;
   align-items: center;
}

.weather-forecast-today__feauture-icon {
   max-width: 25px;
}

.weather-forecast-today__feauture-item {
   display: flex;
   align-items: center;
   gap: 5px;
   font-weight: 600;
}

.weather-forecast__slider {
   margin-bottom: 20px;
}

.weather-forecast__slider-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   background: rgba(255, 255, 255, .5);
   border-radius: 10px;
}

.weather-forecast__slider-item-day {
   margin-bottom: 20px;
}

.weather-forecast__slider-item-icon {
   max-width: 100%;
   display: block;
   margin-bottom: 20px;
}

.weather-forecast__slider {
   display: flex;
   gap: 20px;
}

.weather-forecast__slider-item {
   padding: 15px;
   margin: 0px 10px;
}

.weather-forecast__slider-item-day-deg {
   font-size: 42px;
   font-weight: 800;
   font-family: 'Dosis', sans-serif;
}

.slick-track {
   display: flex !important;
   margin-left: 0px;
}

.weather-forecast {
   opacity: 0;
   transform: translateY(-40px);
   transition: .4s;
   display: none;
}

.weather-forecast.show {
   opacity: 1;
   transform: translateY(0px);
}

.city-notfound {
   position: fixed;
   bottom: 0;
   width: 100%;
   left: 0;
   padding: 20px;
   background-color: red;
   color: #fff;
   font-size: 22px;
   transition: .2s;
   transform: translateY(180%);
}

.city-notfound.show {
   transform: translateY(0);
}

.gradient-bg {
   z-index: -1;
   opacity: 0;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   transition: .5s;
}

.gradient-bg.show {
   opacity: 1;
}

.rain-bg {
   background: linear-gradient(#5CE6FF, #5BCBFC);
}

.sun-bg {
   background: linear-gradient(#FAE078, #FFBD95);
}

.cloudy-bg {
   background: linear-gradient(#6DF9E5, #72EEEE);
}

/* .weather-forecast {
   margin: 50px 0px;
}
.weather-forecast__inner {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 30px;
}
.weather-forecast__item {
   padding: 10px 20px;
   border: 4px solid rgb(0, 160, 0);
   border-radius: 10px;
}
.weather-forecast__item-name {
   font-size: 20px;
   text-transform: uppercase;
   margin: 10px 0;
   font-weight: 700;
   color: rgb(2, 110, 2);
}
.weather-forecast__item-deg {
   font-size: 40px;
   position: relative;
   margin: 10px 0;
   padding: 10px 0;
   display: block;
   font-weight: 700;
}

.weather-forecast__item-deg::before, .weather-forecast__item-deg::after{
   content: '';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 100px;
   height: 1px;
   background-color: rgb(224, 224, 224);
}

.weather-forecast__item-deg::before {
   top: 0;
}

.weather-forecast__item-deg::after {
   bottom: 0;
}

.weather-forecast__item-mark {
   margin-bottom: 10px;
   display: block;
}

.weather-forecast__item-icon {
   margin-bottom: 10px;
   text-align: center;
}

.weather-forecast__item-icon img{
   max-width: 100px;
   width: 100px;
   height: 100px;
}

.weather-forecast__item-features {
   list-style: none;
}
.weather-forecast__item-features-li {
   margin-bottom: 10px;
}

.weather-forecast__item-features-li:last-child {
   margin-bottom: 0;
}

.weather-forecast__item-date {
   margin-top: 20px;
   display: block;
   position: relative;
   padding-top: 10px;
   font-size: 25px;
   font-weight: 300;
}

.weather-forecast__item-date::before{
   content: '';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 100px;
   height: 1px;
   top: 0;
   background-color: rgb(224, 224, 224);
}

.weather-forecast__item--nextday > .weather-forecast__item-name {
   width: 300px;
}

.search-City {
   border-radius: 10px;
   outline: none;
   border: 1px solid rgb(173, 173, 173);
   padding: 5px 15px;
   font-size: 18px;
   height: 40px;
   margin-right: 10px;
}

.search-City__btn {
   background-color: rgb(4, 179, 33);
   border: none;
   padding: 10px 20px;
   font-size: 18px;
   height: 40px;
   color: #fff;
   border-radius: 10px;
   cursor: pointer;
} */

@media (max-width: 1250px) {
   .weather-forecast__inner {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 950px) {
   .weather-forecast__inner {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 950px) {
   .weather-forecast__inner {
      grid-template-columns: repeat(1, 1fr);
   }
}