:root {
    --helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --inter: "Inter", sans-serif;
}


body, button{
    font-family: var(--inter);
}

body{
    background-color: rgb(20, 20, 20);
}

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

header{
    width: 100%;
    background-color: rgb(39, 39, 39);
}


nav{
    width: 100%;
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.nav-left img{
    width: 150px;
    object-fit: cover;
}

.nav-left{
    display: flex;
    align-items: center;
    gap: 40px;
}

.input{
    width: 700px;
    height: 45px;
    position: relative;
}

.input input{
    width: 100%;
    height: 100%;
    padding: 4px 4px 4px 24px;
    border-radius: 20px;
    border: none;
    outline: none;
    font-size: 16px;
    background-color: #101518;
    outline: 2px solid rgb(44, 54, 63);
    color: rgb(240, 243, 245);
}

#searchBtn{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    color: rgb(44, 54, 63); 
    width: 80px;
    height: 100%;
    border-radius: 26px;
    border: none;
    background-color: #957efc;
    color: #000;
}

#inputClick{
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
    color: rgb(96, 111, 126);
    border: none;
    background-color: transparent;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

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

.links a{
    color: #b0b9c1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.links a:hover{
    color: #957efc;
}


body.light .links a:hover{
    color: #7c49fc;
}

.nav-right{
    display: flex;
    align-items: center;
    gap: 10px;
}

#mail{
    background-color: #101518;
    color: #957efc;
    border: 2px solid #957efc;
    width: 80px;
    height: 40px;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

#mail:hover{
    border: 2px solid #7c49fc;
    color: #7c49fc;
}

body.light #mail:hover{
    border: 2px solid #7c49fc;
    color: #7c49fc;
}

#signIn{
    background-color: #101518;
    color: #f0f3f5;
    border: 2px solid #f0f3f5;
    width: 80px;
    height: 40px;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

#signIn:hover{
    color: #957efc;
}

body.light #signIn:hover{
    border-color: #141414;
}


.places{
    width: 100%;
    background-color: rgb(20, 20, 20);
}

.places1{
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 12px 0;
}

.place-text h2{
    color: #b0b0b0;
    font-size: 13px;
    font-family: var(--inter);
    font-weight: 600;
}

.place-text p{
    color: #979ea8;
    font-size: 13px;
    font-family: var(--inter);
}

.place{
    background-color: #1d1d1d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    width: 200px;
    border: 1px solid #383838;
    border-radius: 4px;
}

.place-left{
    display: flex;
    align-items: center;
    gap: 10px;
}

.place-name{
    display: flex;
    flex-direction: column;
}

.place-name h2{
    color: #f5f5f5;
    font-size: 12px;
    font-family: var(--inter);
    display: flex;
    align-items: center;
    gap: 3px;
}

.place-name h2 svg{
    width: 15px;
    height: 15px;
    object-fit: cover;
}

.place-name p{
    color: #f5f5f5;
    font-size: 12px;
    font-family: var(--inter);
}

#grad{
    color: #f0f3f5;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--inter);
}

.hero-section{
    width: 100%;
    height: 500px;
    position: relative;
}

.hero-section1{
    max-width: 1200px;
    margin: auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 25%;
}

.hero-section-text{
    color: #f0f3f5;
    width: 500px;
    padding: 24px;
    border-radius: 8px;
    background-color: #272727;
}

.hero-text-up{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.hero-text-up-left h2{
    font-size: 16px;
    color: #b0b0b0;
    font-weight: 400;
    font-family: var(--inter);
}

.hero-text-up-left h1{
    font-size: 36px;
    color: #f5f5f5;
}

.hero-text-up-right{
    text-align: right;
}

.hero-text-up-right h1{
    font-size: 16px;
    color: #b0b0b0;
    font-weight: 400;
    font-family: var(--inter);
}

.hero-text-up-right h2{
    font-size: 32px;
    color: #f5f5f5;
}

.hero-section-text p{
    font-size: 16px;
    color: #f5f5f5;
    font-family: var(--inter);
    line-height: 24px;
}

.grad-desc{
    display: flex;
    align-items: center;
    gap: 15px;
    margin:  12px 0;
}

.grad-desc h2{
    font-size: 16px;
}

.sunrise, .sunset{
    display: flex;
    align-items: center;
    gap: 5px;
    color: #b0b0b0;
}

.sunrise p, .sunset p{
    color: #b0b0b0;
}

#follow{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 16px;
    color: #1d1d1d;
    background-color: #f5f8fa;
    border: none;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    font-family: var(--inter);
}

#follow svg{
    margin-bottom: 2px;
}

#follow:hover{
    transform: scale(1.05);
}

.forecast{
    max-width: 1350px;
    margin: auto;
    background-color: rgb(39, 39, 39);
    padding: 3rem;
    border-radius: 20px;
    transform: translateY(-40px);
}

.forecast1-up{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forecast1-up h2{
    color: #f5f5f5;
    font-size: 20px;
    font-family: var(--inter);
}

.forecast1-up-right{
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme, .display-settings{
    position: relative;
}

#themeBtn, #displaySettings{
    padding: 8px 14px;
    color: #f5f5f5;
    background-color: #101518;
    border: 2px solid rgb(44, 54, 63);
    border-radius: 20px;
    font-family: var(--inter);
    font-weight: 600;
    cursor: pointer;
}

#displaySettings{
    background-color: #f5f5f5;
    border: 2px solid #f5f5f5;
    font-size: 14px;
    color: #000;
}

.theme-settings, .display-settings-modal{
    width: 320px;
    background-color: #101518;
    border: 2px solid rgb(44, 54, 63);
    border-radius: 8px;
    position: absolute;
    bottom: -180px;
    left: -225px;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

.theme-settings-up, .display-settings-up{
    padding: 4px 16px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.theme-settings-up h3, .display-settings-up h3{
    color: #828a93;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--inter);
}

.theme-settings-up span, .display-settings-up span{
    width: 100%;
    height: 0.5px;
    background-color: #828a93;
}

#darkTheme, #lightTheme, #non-metric, #metric, #uk-hybrid{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.dark-theme-text{
    display: flex;
    gap: 8px;
    align-items: center;
}

.dark-theme-text h2, .light-theme-text h2, #non-metric h2, #metric h2, #uk-hybrid h2{
    color: #b0b0b0;
    font-size: 16px;
    font-family: var(--inter);
    font-weight: 500;
}

.active-theme, .active-unit{
    background-color: #220039;
}

.active-theme .dark-theme-text h2, .active-unit #non-metric h2, .active-unit #metric h2, .active-unit #uk-hybrid h2{
    color: #a595f8;
}

.active-theme:hover, .active-unit:hover{
    background-color: #340056cb;
}

#lightTheme:hover, #darkTheme:hover, #non-metric:hover, #uk-hybrid:hover{
    background-color: #430070cb;
}

#themeSettings.active {
    opacity: 1;
    pointer-events: auto;
}

#displaySettingsModal.active {
    opacity: 1;
    pointer-events: auto;
}


#map{
    height:450px;
    max-width:900px;
    border-radius:10px;
    filter: grayscale(60%);
}

body.dark{
    background-color: rgb(20, 20, 20);
}

body.light{
    background-color: #f5f5f5;
}

.active-theme.removeActive{
    background-color: transparent;
}

.active-theme.removeActive h2{
    color: #b0b0b0;
}

#lightTheme.active{
    background-color: #220039;
}

#lightTheme.active h2{
    color: #a595f8;
}

.forecats-conditions{
    max-width: 900px;
    font-family: var(--inter);
}

.forecats-conditions h2{
    color: #f5f5f5;
    font-size: 20px;
    font-family: var(--inter);
    margin-bottom: 12px;
}

.forecast-boxs{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forecast-box{
    display: flex;
    flex-direction: column;
}

.forecast-box-up, .forecast-box-down{
    display: flex;
    align-items: center;
    width: 280px;
    justify-content: space-between;
    padding: 8px;
}

.forecast-box-up{
    border-bottom: 1px solid #383838;
}


.forecast-box-up-left{
    display: flex;
    align-items: center;
    gap: 10px;
}

.forecast-box-up-right{
    display: flex;
    align-items: center;
    gap: 8px;
}

.forecast-box-up-left button{
    background-color: transparent;
    border: none;
}

.forecast-box-up-left p{
    color: #f5f5f5;
    font-size: 14px;
}

#high, #dry, #moderate, #moderate1, #waxing{
    background-color: #083020;
    border: none;
    padding: 8px;
    color: #80f28f;
    font-family: var(--inter);
    font-size: 14px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dry{
   background-color: #141414;
    color: #f5f5f5;
}

#moderate{
    background-color: #361300;
    color: #ffa116;
}

#moderate1{
    background-color: #3a3100;
    color: #fff38a;
}

#waxing{
    background-color: #000e39;
    color: #96d2fa;
}

.forecast1-map h2{
    color: #f5f5f5;
    font-size: 20px;
    font-family: var(--inter);
    margin-bottom: 12px;
}

#weatherImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.forecast1-weather{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.forecast-day{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    background-color: #1d1d1d;
    height: 130px;
    justify-content: center;
    width: 150px;
}

.forecast-day h3{
    width: 100%;
    text-align: center;
    padding: 15px 0 8px 0;
    color: #f5f5f5;
    font-family: var(--inter);
}

.forecast-day p{
    color: #b0b0b0;
    margin-top: 8px;
}

footer{
    width: 100%;
    padding: 32px 64px;
    background-color: #000;
}

.footer-links{
    max-width: 1350px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 3rem;
}

.footer-links a{
    font-size: 14px;
    color: #fff;
}

.footer-links p{
    font-size: 11px;
    color: #fff;
}

.hour-slider{
    display:flex;
    align-items:center;
    gap:10px;
    overflow: hidden;
}

.slider-content{
    display:flex;
    gap:10px;
    overflow:hidden;
}

.hour-slider button{
    background:#333;
    border:none;
    color:white;
    font-size:18px;
    cursor:pointer;
    padding:10px;
    border-radius:6px;
}


.forecastDays{
    display: flex;
    align-items: center;
    gap: 0;
}

.forecast-days-box{
    padding: 8px 16px 8px 8px;
    background-color: #141414;
    flex-grow: 1;
    border-bottom: 1px solid rgb(44, 54, 63);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.forecast-days-box h2{
    color: #b0b0b0;
    font-size: 14px;
    font-weight: 400;
}

.forecast-days-box p{
    color: #b0b0b0;
    font-size: 13px;
}

#active-day{
    background-color: #1d1d1d;
    border-bottom: none;
    position: relative;
}

#active-day::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #f5f5f5;
}

#active-day h2{
    color: #f5f5f5;
    font-size: 14px;
    font-weight: 400;
}

.leftBtn{
    position: absolute;
    left: 30px;
    z-index: 100;
    background-color: #141414;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white;
    border: none;
    font-size: 12px;
    cursor: pointer;
}

.rightBtn{
    position: absolute;
    right: 30px;
    z-index: 100;
    background-color: #141414;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white;
    border: none;
    font-size: 12px;
    cursor: pointer;
}

.forecast-days{
    display:flex;
    gap:0;
    transition: transform 0.45s cubic-bezier(.25,.8,.25,1);
    will-change: transform;
}

.forecastDays{
    margin-top: 20px;
}

.forecast-days{
display:flex;
transition: all 0.4s ease;
}

.forecast-day{
min-width:100px;
padding:15px;
background:#1d1d1d;
color:white;
text-align:center;
}

.fa-sun{
    color: rgb(255, 204, 0);
}

header.fixed{
  width: 100%;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  background-color: rgb(39, 39, 39);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from{
    opacity: 0;
    transform: translateY(-50px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-mobile{
    display: none;
}


#mobileNav{
    display: none;
}


.forecast-day .fa-moon {
    color: #7c49fc;
}

body.light header{
    background-color: #fff;
}

body.light .input input{
    outline: 2px solid  rgb(199, 205, 210);
    background-color: #f5f8fa;
    color: #323232;
}

body.light .links a{
    color: #5b636a;
}

body.light #mail{
    background-color: transparent;
    border: 2px solid #461f8c99;
    color: #7d2eff;
}

body.light #signIn{
    color: #232a31;
    border: 2px solid rgb(199, 205, 210);
    background-color: transparent;
}

body.light .places{
    background-color: #f5f5f5;
}

body.light .place-text h2{
    color: #323232;
}

body.light .place-text p{
    color: #5b636a;
}

body.light .place{
    color: #323232;
    background-color: #fff;
    border-color: #b0b0b0;
}

body.light .place-name h2{
    color: #323232;
}

body.light .place-name p{
    color: #5b636a;
}

body.light #grad{
    color: #323232;
}

body.light .hero-section-text{
    background-color: #fff;
}

body.light #country, body.light #realFeel, body.light .sunrise p, body.light .sunset p{
    color: #323232;
}

body.light #city, body.light #gradCelsius, body.light .grad-desc{
    color: #141414;
}

body.light #textForWeatherDay{
    color: #323232;
}

body.light #follow{
    background-color: #141414;
    color: #f5f5f5;
}

body.light .forecast{
    background-color: #fff;
}

body.light .next7{
    color: #141414;
}

body.light #active-day::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #141414;
}

body.light #active-day{
    background-color: #fff;
}

body.light .forecast-days-box{
    background-color: #f5f5f5;
}

body.light #active-day .day-name, body.light .day-name{
   color: #141414;
}

body.light .forecast-day{
    background-color: #fff;
}

body.light .forecast-day h3{
    color: #141414;
}

body.light .forecast-day p{
    color: #323232;
}

body.light .leftBtn, body.light .rightBtn{
    background-color: #fff;
    color: #141414;
    border: 2px solid #323232;
}

.forecats-conditions{
    margin: 30px 0;
}

body.light .forecats-conditions h2{
    color: #141414;
}

body.light .forecast-box-up-left p{
    color: #323232;
}

#rain-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

.raindrop{
    position: absolute;
    width: 2px;
    height: 15px;
    background: rgba(255,255,255,0.5);
    animation: rainFall linear infinite;
}

@keyframes rainFall{
    0%{
        transform: translateY(-20px);
        opacity: 0;
    }
    10%{
        opacity: 1;
    }
    100%{
        transform: translateY(100vh);
        opacity: 0;
    }
}


#wind-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 998;
}




.forecast1-albanian{
    margin-top: 30px;
    max-width: 900px;
}

.forecast1-albanian h1{
    color: #f5f5f5;
    font-size: 20px;
    font-family: var(--inter);
    margin-bottom: 12px;
}

.forecast1-albanian-boxs{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.forecast1-box{
    background-color: #1d1d1d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    width: 213px;
    border: 1px solid #383838;
    border-radius: 4px;
    color: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.forecast1-box:hover, .place:hover{
    border-color: #f5f5f5;
    background-color: #6429fa0b;
}

.place{
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.forecast1-box-left{
    display: flex;
    align-items: center;
    gap: 10px;
}


.forecast1-box-left h2{
    color: #f5f5f5;
    font-size: 12px;
    font-family: var(--inter);
    align-items: center;
    font-weight: 500;
}

#albanianTemp{
    color: #f0f3f5;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--inter);
}

.forecast1-box button{
    font-size: 16px;
    background: transparent;
    border: none;
}


.forecast1-albanian .fa-moon{
    color: #7c49fc;
}

.forecast1-albanian .fa-sun{
    color: rgb(255, 204, 0);
}

.forecast1-albanian .fa-cloud, .forecast1-albanian .fa-cloud-showers-heavy{
    color: #ffff;
}

body.light .forecast1-albanian .fa-cloud, body.light .forecast1-albanian .fa-cloud-showers-heavy{
    color: #828a93;
}

body.light .forecast1-map h2, body.light .forecast1-albanian h1{
    color: #141414;
}

body.light .forecast1-box{
    color: #323232;
    background-color: #fff;
    border-color: #b0b0b0;
}

body.light .forecast1-box-left h2{
    color: #141414;
}

body.light .forecast1-box:hover, body.light .place:hover{
    cursor: pointer;
    border-color: #323232;
    transition: all 0.3s ease-in-out;
    background-color: #f5f5f5;
}
   
#logo, #mobileLogo{
    cursor: pointer;
}

#searchBtn{
    cursor: pointer;
}

.forecastTemp{
    color: #b0b0b0;
}

body.light .forecastTemp{
    color: #323232;
}

.forecast1-box-text{
    display: flex;
    flex-direction: column;
}

.albanianDesc{
    font-size: 12px;
}


.forecastTemp{
    font-size: 12px;
}

.forecast-faq{
    max-width: 900px;
}

.forecast-faq h1{
    color: #f5f5f5;
    font-size: 20px;
    font-family: var(--inter);
    margin: 30px 0 30px 0;
}

body.light .forecast-faq h1{
    color: #141414;
}

.forecast-faq-boxs{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.forecast-faq-box{
    padding-bottom: 5px;
    border-bottom: 1px solid #383838;
    width: 470px;
}

.forecast-faq-box-show{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.forecast-faq-box-show h2{
    font-size: 16px;
    color: #f0f3f5;
    font-weight: 500;
}

body.light .forecast-faq-box-show h2{
    color: #323232;
}

.forecast-faq-box-show button{
    color: #f5f5f5;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

body.light .forecast-faq-box-show button{
    color: #323232;
}

.forecast-faq-box-show button i {
    transition: all 0.3s ease-in-out;
}

.forecast-faq-box p{
    color: #b0b0b0;
    font-size: 14px;
    line-height: 22px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}


body.light .forecast-faq-box p{
    color: #5b636a;
}

.forecast-faq-box.active p{
    max-height: 200px;
    opacity: 1;
}


.forecast-faq-box-show button i {
    transition: transform 0.3s ease;
}

.forecast-faq-box.active button i{
    transform: rotate(180deg);
}

.nav-right-hamburger{
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 6px;
    cursor: pointer;
}

.nav-right-hamburger span{
    width: 30px;
    height: 1.5px;
    background-color: #f5f5f5;
    transition: all 0.4s ease-in-out;
}

.nav-right-hamburger span:nth-child(1){
    width: 15px;
    height: 1.6px;
}

.nav-right-hamburger span:nth-child(2){
    width: 25px;
}

.nav-right-hamburger:hover  span:nth-child(1), .nav-right-hamburger:hover span:nth-child(2){
    width: 30px;
}

body.light .nav-right-hamburger span{
    background-color: #141414;
}

.get-in-touch{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -100%;
    background-color: rgb(0 0 0 / .65);
    z-index: 10000;
    transition: all 0.5s ease-in-out;
}

.get-in-touch-box{
    position: fixed;
    width: 30%;
    height: 100vh;
    background-color: #f5f5f5;
    right: -30%;
    padding: 2rem;
    transition: all 1s ease-in-out;
}

.get-in-touch-box-close{
    display: flex;
    justify-content: end;
}

#closeGetInTouch{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #141414;
    color: #141414;
    background-color: transparent;
    cursor: pointer;
}

#closeGetInTouch i{
    transition: all 0.4s ease-in-out;
}

#closeGetInTouch:hover  i{
    transform: rotate(360deg);
}

.get-in-touch-box-text img{
    width: 150px;
    object-fit: cover;
    margin-top: 25px;
    margin-bottom: 18px;
}

.get-in-touch-box-text p{
    color: #323232;
    font-size: 14px;
    line-height: 21px;
}

.get-in-touch-box-text h2{
    color: #141414;
    font-size: 22px;
    margin: 18px 0;
}

.get-in-touch-box-text-boxs{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.get-in-touch-box-text-box{
    display: flex;
    align-items: center;
    gap: 20px;
}

.get-in-touch-box-text-box button{
    border: 1.5px solid #323232;
    color: #323232;
    background-color: transparent;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.get-in-touch-box-text input{
    border: none;
    outline: none;
    border-bottom: 1px solid #32323224;
    color: #323232;
    background-color: transparent;
    padding-bottom: 10px;
    width: 250px;
}

.get-in-touch.active{
    right: 0;
}

.get-in-touch-box.active{
    right: 0;
}

@media screen and (max-width: 768px){
    .nav-left img, .nav-left .links{
        display: none;
    }

    .nav-right{
        display: none;
    }

    .nav-mobile{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 90%;
        margin: auto;
    }

    nav{
        display: flex;
        flex-direction: column;
    }
    
    .nav-left{
        width: 90%;
    }

    .input{
        width: 100%;
    }

    .nav-up-mobile{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .hamburger{
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
    }

    .hamburger span{
        background-color: #fff;
        width: 30px;
        height: 2px;
    }

    .nav-up-mobile img{
        width: 150px;
        object-fit: cover;
    }

    .nav-down-mobile{
        width: 100%;
    }

    .input{
        width: 100%;
    }

    .places1{
        width: 90%;
        margin: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .hero-section{
        width: 100%;
    }

    .hero-section1{
        width: 90%;
        left: 50%;
    }

    .hero-section-text{
        width: 100%;
    }

    .forecast{
        width: 100%;
        padding: 2rem;
    }

    .forecastDays{
        width: 100%;
        overflow: hidden;
    }

    .forecast-days-box{
        padding: 12px 24px;
    }

    .rightBtn{
        right: 18px;
    }

    .leftBtn{
        left: 18px;
    }

    .forecast-boxs{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .forecast-box{
        width: 100%;
    }

    .forecast-box-up, .forecast-box-down{
        width: 100%;
        padding: 8px 0;
    }

    .forecats-conditions{
        margin: 20px 0;
    }

    #map{
        width: 100%;
        height: 300px;
    }

    footer{
        padding: 24px 0;
    }

    #mobileNav{
    width: 70%;
    height: 100vh;
    background-color: rgb(16, 21, 24);
    position: fixed;
    left: -70%;
    top: 0;
    z-index: 999;
    padding: 20px;
    transition: all 0.4s ease-in-out;
    display: block;

}

    .places1{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .place-text{
        width: 100%;
        text-align: left;
    }

    .place{
        width: 100%;
    }

#closeMoileNav{
    position: relative;
    right: -212px;
    color: #fff;
    background-color: transparent;
    border: none;
    font-size: 18px;
}

.mobile-nav-link{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 80px;
}

.mobile-nav-link a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 4px;
}

#bottom-p{
    color: rgb(176, 185, 193);
    font-size: 14px;
    margin-top: 30px;
}




    .forecast1-albanian-boxs{
        gap: 10px;
        justify-content: space-between;
    }

    .forecast1-box{
        width: 48%;
    }

    body.light .hamburger span{
        background-color: black;
    }

    .forecast-faq, .forecast-faq-boxs, .forecast-faq-box{
        width: 100%;
    }

    .get-in-touch-box.active{
        width: 71%;
    }

}