@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

*,
*::before ,
*::after {
   padding: 0;
   margin: 0;
   border: 0;
   box-sizing: border-box;
}

html,
body {
   width: 100%;
}

a {
   text-decoration: none;
}

ul,
ol,
li {
   list-style: none;
}

textarea:focus, input:focus{
    outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

html ,
body {
   height: 100% ;
   line-height: 1;
   margin: 0;
   padding: 0;
}

body {
   background: #d6d7db;
   font-family: 'Poppins', sans-serif;
}

section {
   padding: 25px 0px;
}

.container-xl {
   background: #f7f6f9;
   border-radius: 16px;
   box-shadow: 0 0.125rem 0.45rem rgb(0 0 0 / 2%);
}

.container-xl > .row {
   position: relative;
}

.today {
   background: #fff;
   border-top-left-radius: 16px;
   border-bottom-left-radius: 16px;
}

.today,
.week {
   padding: 40px;
}

.title {
   font-weight: 500;
}

.btn-switch-c,
.btn-switch-f {
   height: 40px;
   width: 40px;
   background: #fff;
   border-radius: 50%;
   cursor: pointer;
   pointer-events: auto;
   margin-left: 10px;
   font-weight: 600;
   font-size: 16px;
   text-align: center;
   float: right;
   color: #000;
}

.btn-switch-c.active,
.btn-switch-f.active {
   background: #000;
   color: #fff;
}

.btn-switch-c.disabled,
.btn-switch-f.disabled {
   pointer-events: none;
   cursor: not-allowed;
}

.row.search {
   height: 40px;
}

.row.search input {
   font-size: 16px;
}

.head {
   margin-bottom: 50px;
}


.forecast-wrap {
   display: flex;
   justify-content: space-between;
   flex-wrap: nowrap;
   overflow-x: auto;
   padding-bottom: 60px;
}

.forecast-wrap::-webkit-scrollbar, .scrolling-gallery::-webkit-scrollbar {
   width: 0;
}

.forecast-card {
   background: #fff;
   text-align: center;
   padding: 15px;
   font-size: 16px;
   border-radius: 16px;
   max-width: 140px;
   flex: 0 0 auto;
   margin-left: 20px;
}

.forecast-card:first-child {
   margin-left: 0px;
}

.forecast-card img {
   width: 90px;
}

.max-degree,
.min-degree{
   font-size: 15px;
}

.min-degree {
   color: #c3c3c3;
   margin-left: 15px;
}

.highlights-card {
   background: #fff;
   border-radius: 16px;
   padding: 20px;
   margin-top: 30px;
}

.highlights-card .title {
   font-weight: 400;
   color: #c3c3c3;
   margin-bottom: 20px;
}

.today img {
   width: 100%;
   height: auto;
}

.today-degree {
   font-size: 84px;
   margin-bottom: 20px;
}

.date-time {
   font-size: 20px;
   padding-bottom: 30px;
   border-bottom: 1px solid #c3c3c3;
   margin-bottom: 20px;
}

.time {
   color: #c3c3c3;
}

.cityname {
   font-size: 32px;
   margin-bottom: 20px;
}

.add-info {
   text-transform: capitalize;
}

.feels-like,
.wind-speed,
.pressure,
.humidity,
.visibility {
   font-size: 40px;
}

.load {
   position: absolute;
   background: #fff;
   height: 100%;
   border-radius: 16px;
   display: flex;
   align-items:center;
   justify-content: center;
}

.load svg {
   max-width: 200px;
}

@keyframes aim { 
   0% {
     opacity: 1;
   }
 
   100% {
     opacity: 0;
   }
 }

 .sunrise,
 .sunset {
   font-size: 25px;
}

.more-info {
   align-items: center;
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
}

.lvl-img,
.humidity-img {
   max-width: 40px;
}

.ss-img {
   max-width: 55px;
}

.more-info.vsb {
   margin-top: 22px;
   margin-bottom: 12px;
}

.activities {
   font-size: 16px;
   line-height: 32px;
}

.start {
   width: 100%;
   padding: 40px;
   /* height: calc(100vh - 50px); */
   height: 100vh;
   position: absolute;
   background: #fff;
   border-radius: 16px;
}

@keyframes disappear-up {
   from {
     transform: translateY(0);
     opacity: 1;
   }
   to {
     transform: translateY(-100%);
     opacity: 0;
   }
 }

.start .row {
   justify-content: center;
   align-items: center;
   height: 100%;
   text-align: center;
   line-height: 28px;
}

.start h1 {
   font-size: 38px;
}

.start h1,
.start p {
   margin-bottom: 30px;
}

.start input {
   width: 100%;
   font-size: 22px;
   text-align: center;
   border: 1px solid #d6d7db;
   padding: 15px;
   border-radius: 16px;
}

.modal {
   position: fixed;
   top: -100%;
   left: 50%;
   transform: translateX(-50%);
   width: 30%;
   padding: 15px;
   line-height: 26px;
   background-color: white;
   box-shadow: 0 .125rem .25rem rgba(0,0,0, .075);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #DD5353;
   color: #fff;
   z-index: 999;
 }
 
 @keyframes slide-in {
   from { top: -100%; }
   to { top: 2%; }
 }

 @keyframes slide-out {
   from { top: 2%; }
   to { top: -100%; }
 }
 
 .modal-content {
   text-align: center;
   font-size: 16px;
 }

.btn-welcome {
   padding: 20px 25px;
   font-size: 22px;
   border-radius: 16px;
   cursor: pointer;
   background: #2192FF;
   color: #fff;
}

.wrap-collection{
   margin-top: 60px;
}

@media only screen and (max-width: 1199.98px) {
   .start .row {
      align-items: unset;
   }
   .start h1 {
      margin-top: 50%;
   }
}


@media only screen and (max-width: 991.98px) {
   .wrap-collection {
      display: flex;
      align-items: center;
   }

   .row.search input {
      font-size: 22px;
      width: 100%;
   }

   .row.search svg {
      width: 22px;
      height: 22px;
   }

   .today {
      border-bottom-left-radius: 0px;
      border-top-right-radius: 16px;
   }

   .modal {
      width: 40%;
   }

   .start h1 {
      font-size: 32px;
   }
}

@media only screen and (max-width: 767.98px) {
   .today-degree {
      font-size: 48px;
   }
   .cityname {
      font-size: 22px;
   }
   .modal {
      width: 60%;
   }
}

@media only screen and (max-width: 575.98px) {
   .wrap-collection {
      display: block;
   }
   .today,
   .week {
      padding: 30px;
   }
   .modal {
      width: 90%;
   }

   .forecast-wrap {
      display: block;
   }

   .forecast-card {
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 0px;
      padding: 15px 30px;
      margin-bottom: 25px;
   }

   .forecast-card img {
      width: 50px;
   }

   .forecast-card .day {
      min-width: 50px;
      text-align: left;
   }


   .start {
      padding: 20px;
   }

   .start h1 {
      font-size: 24px;
   }
}