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

body{
    user-select: none;
    font-family: sans-serif;
    background-color: #000;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

button{
    cursor: pointer;
}

.type-big{
    /* opacity: 0 !important; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(246, 238, 249);
    /* background-image: "https://www.gettyimages.com/detail/photo/african-megacity-lagos-nigeria-royalty-free-image/1320231994"; */
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    /* background-image: linear-gradient(rgb(244, 237, 246), rgba(190, 134, 205, 0.653)),  url("https://source.unsplash.com/1600x900/?city,lagos"); */
}

.weather, .preloadermin, .login, .gettingstarted, .customer-care{
    display: none;
}

.hamburger{
    font-size: 20px;
}


/* preloader starts here */
    .preloader-circle{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 6px solid rgba(76, 0, 130, 0.156);
        border-bottom-color: rgb(81, 49, 103);
        animation: preloader-circle 2s linear forwards infinite;
    }

    @keyframes preloader-circle {
        0%{}
        100%{transform: rotate(700deg);}
    }
    .priority.preloader{
        background-color: #fff;
        opacity: 1;
        visibility: visible;
        transition: all 0.5s ease;
    }

    .preloader{
        background-color: rgba(255, 255, 255, 0.85);
        display: flex;
        z-index: 100;
        /* backdrop-filter: blur(5px); */
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
    }

    .show.preloader{
        opacity: 1;
        visibility: visible;
    }

/* preloader ends here */

/* menu starts here */

.menu{
    position: fixed;
    width: 75vw;
    height: 100%;
    max-width: 400px;
    /* overflow: hidden; */
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(244, 230, 249);
    background-color: rgb(28, 20, 31);
    color: rgb(60, 40, 72);
    color: #fff;
    transform: translateX(-130%);
    transition: all 0.5s ease;
    /* box-shadow: 0px 0px 10px #0007; */
    /* opacity: 0; */
    /* transform: translateX(0); */
}

.preloader{
    /* display: none; */
}

.site-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    width: 100%;
    padding: 0 30px;
    gap: 30px;
}

.site-info div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-size: 20px;
    position: relative;
}

.site-info button{
    background-color: #fff;
    width: 30px;
    height: 30px;
    border: none;
    color: rgb(42, 25, 52);
    font-size: 15px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    position: absolute;
    transform: translateY(50px);
}

.my-links{
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    font-size: 15px;
}

.site-info:hover .my-links{
    opacity: 1;
    visibility: visible;
}

.site-info:hover button{
    opacity: 0;
    visibility: hidden;
}


.my-links a{
    color: #a198a1;
    transition: all 0.5s ease;
}

.my-links a:hover{
    /* opacity: 1; */
    color: #fff;
}

.show-menu .menu{
    transform: translateX(0);
    /* opacity: 1; */
}

.menu-links-holder{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vh;
    font-size: 15px;
    letter-spacing: 1.5px;
}



.menu-links-holder .link{
    opacity: 0.6;
    transition: all 0.5s ease;
    /* background-color: #fff; */
    padding: 10px;
    border-radius: 10px;
    border: 4px solid transparent;
    cursor: pointer;
}

.customer-care{
    /* transform: translateX(-50px); */
    width: 50px;
    height: 50px;
    display: flex;
    border-radius: 50% !important;
    background-color: #fff;
    color: rgb(45, 38, 49);
    opacity: 1 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5vh;
    font-size: 20px;
    box-shadow: 0px 0px 10px #0004;
    border: 2px solid transparent !important;
    background-color: transparent;
    border-color: #fff !important;
    color: #fff;
    scale: 1.1;
    text-decoration: none;
}

.customer-care:hover{
    scale: 1.5;
    opacity: 0.2 !important;
    /* background-color: transparent; */
}

.menu-links-holder .link.active{
    /* opacity: 1; */
    /* font-size: 18px; */
    /* font-weight: bold; */
}

.menu-links-holder .link:hover{
    opacity: 1;
    /* border-color: #fff3; */
}



.menu-links-holder .link.search{
    font-size: 18px;
    display: none;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 5vh;
    opacity: 1;
    background-color: rgb(243, 235, 242);
    padding: 0 10px;
    border-radius: 30px;
    color: rgb(45, 38, 49);
    width: 160px;
    height: 55px;
    transition: all 0.5s ease;
    width: 180px;
    /* border: 2px solid red; */
}

.link.search:hover{
    width: 200px;
}

.link.search input{
    border: none;
    /* width: 100%; */
    width: 100px;
    padding: 5px 5px;
    background-color: transparent;
    /* padding: 0 7px; */
    border: 3px solid rgba(58, 46, 66, 0);
    border-radius: 20px;
    height: 35px;
    transition: all 0.5s ease;
}

.link.search input:hover, .link.search input:focus{
    /* border: 3px solid rgba(58, 46, 66, 0.47); */
    /* border: none; */
    outline: none;
}

.link.search button{
    min-width: 35px;
    height: 35px;
    border: none;
    background-color: rgb(44, 37, 46);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 50%;
}


/* .menu-links-holder i.fa{
    font-size: 40px;
} */

.menu .hamburger{
    /* color: rgb(45, 38, 49); */
    color: rgb(244, 230, 249);
    color: #fff;
    /* color: rgb(45, 38, 49); */
    font-size: 25px;
    width: 40px;
    height: 40px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    /* scale: 0; */
    visibility: hidden;
    top: 5px;
    /* right: -10px; */
    right: -25px;
    transform: translateX(10vw);
    transition: all 0.5s ease;
    border: 3px solid ;
    border-radius: 10px;
    border-color: transparent;
    display: none;
}

.menu .hamburger:hover{
    border-color: rgba(64, 50, 74, 0.5);
}

.show-menu .menu .hamburger{
    opacity: 1;
    visibility: visible;
    scale: 1.1;
    /* transform: translateX(10px); */
}

.backdrop{
    width: 100vw;
    height: 100vh;
    position: fixed;
    /* top: 0; */
    /* left: 0; */
    z-index: 9;
    background-color: rgba(40, 35, 44, 0.595);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    /* backdrop-filter: blur(7px); */
}

.show-menu .backdrop{
    opacity: 1;
    visibility: visible;
}

/* menu ends here */

/* getstarted starts here */

.gettingstarted{
    display: flex;
    justify-content: flex-start;
    /* align-items: flex-start; */
    flex-direction: column;
    /* display: none; */
    opacity: 0;
    /* transform: translateX(-100%); */
    visibility: hidden;
    transition: all 0.5s ease;
    background-image: linear-gradient(rgba(243, 229, 243, 0.435),rgb(187, 148, 189)), url(xoweather.png) !important;
}

.show.gettingstarted{
    /* transform: translateX(0); */
    opacity: 1;
    visibility: visible;
}

.gettingstarted .navbar{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    /* background-color: #fff8; */
    padding: 5px 10px;
    /* height: 50px; */
    overflow: hidden;
}

.gettingstarted .hamburger{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 3px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.5s ease;
    z-index: 10;
    border-color: transparent;
    cursor: pointer;
}

.gettingstarted .hamburger:hover{
    border-color: rgba(70, 50, 84, 0.417);
}

.gettingstarted .hamburger i{
    position: absolute;
    transition: all 0.5s ease;
}

.gettingstarted .hamburger i.fa-close{
    scale: 0;
    opacity: 0;
}

.gettingstarted .gotologin{
    opacity: 0.4;
    transition: all 0.5s ease;
    cursor: pointer;
    padding: 0 10px;
    font-size: 15px;
    cursor: default;
    /* cursor: pointer; */
    /* display: none; */
}

.gettingstarted .gotosignup{
    cursor: pointer;
    width: 150px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #fff;
    background-color: rgb(71, 38, 95);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    box-shadow: 0px 0px 5px rgba(58, 1, 98, 0.5);
    transition: all 0.5s ease;
    animation: gotosignup 1s ease forwards infinite alternate;
}

@keyframes gotosignup {
    0%{transform: translateY(3px);}
    100%{transform: translateY(-3px);}
}

.gettingstarted .gotosignup:hover{
    background-color: #333;
    scale: 1.05;
}

.gettingstarted .content{
    /* padding: 50px; */
    /* border: 2px solid; */
    margin-top: 10vh;
    width: 100%;
    max-width: 300px;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: #fff7;
    border-radius: 20px;
    box-shadow: 0px 0px 10px rgba(40, 34, 43, 0.01);
}

.gettingstarted .content h2{
    color: rgba(58, 1, 98, 1);
    margin-bottom: 10px;
}

.gettingstarted .content h1{
    color: rgb(45, 38, 49);
    margin-bottom: 20px;
    letter-spacing: 7px;
    font-size: 60px; 
    text-shadow: 0px 0px 5px rgba(85, 43, 85, 0.801);
}

.gettingstarted .content h3{
    margin-bottom: 40px;
    opacity: 0.6;

}

.gettingstarted .content p{
    color: rgb(115, 74, 145);
    margin: 10px;
    font-size: 17px;
    letter-spacing: 2px;
}

.gettingstarted .content p span{
    font-size: 20px;
    font-weight: bold;
}



/* getstarted ends here */

/* signup starts here */

.signup{
    display: flex;
    flex-direction: column;
    /* justify-content: flex-start;
    align-items: flex-start; */
    opacity: 0;
    transition: all 0.5s ease;
    /* transform: translateX(100%); */
    /* border-left: 2px solid rgba(40, 35, 44, 0.595); */


    visibility: hidden;
}

.show.signup{
    /* border-left-color: transparent; */
    /* transform: translateX(0); */
    opacity: 1;
    visibility: visible;
}

.signup .returntogetstarted{
    position: absolute;
    top: 5px;
    left: 10px;
    width: 40px;
    height: 40px;
    /* border: 4px solid ; */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    border-color: transparent;
    color: rgb(71, 38, 95);
}

.signup .returntogetstarted:hover{
    /* border-color: rgba(68, 43, 85, 0.389); */
}

.signup form{
    display: flex;
    flex-direction: column;
    /* border: 2px solid; */
    gap: 10px;
    padding: 20px;
}

.signup form input{
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
}

.signup form button{
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    margin-top: 30px;
    color: #fff;
    background-color: rgb(71, 38, 95);
    border: 3px solid transparent;
    transition: all 0.5s ease;
}

.signup form button:hover{
    background-color: #222;
    /* border-color: #fff5; */
}

.signup h2{
    margin-bottom: 50px;
    color: rgb(71, 38, 95);
    font-size: 30px;
}

.signup .gotologin{
    /* opacity: 0.7; */
    margin-top: 30px;
    color: rgba(59, 42, 72, 0.6);
    font-size: 15px;
    padding: 10px;
    border: 3px solid;
    border-radius: 10px;
    border-color: transparent;
}

.signup .gotologin span{
    opacity: 0.8;
}

.signup .gotologin:hover{
    border-color: rgba(59, 42, 72, 0.5);
}




/* signup ends here */


/* login starts here */
.login{
    display: flex;
    flex-direction: column;
    /* justify-content: flex-start; */
    /* align-items: flex-start; */
    /* display: none; */
    opacity: 0;
    /* transform: translateX(-100%); */
    visibility: hidden;
    transition: all 0.25s ease;
}

.show.login{
    /* transform: translateX(0); */
    opacity: 1;
    visibility: visible;
}

.login .navbar{
    width: 100%;
    display: flex;
    padding: 5px 10px;
    position: absolute;
    top: 0;
    left: 0;
    /* z-index: ; */
}

.login .hamburger{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 3px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.5s ease;
    z-index: 10;
    border-color: transparent;
    cursor: pointer;
}

.login .hamburger:hover{
    border-color: rgba(70, 50, 84, 0.417);
}

.login .hamburger i{
    position: absolute;
    transition: all 0.5s ease;
}

.login .hamburger i.fa-close{
    scale: 0;
    opacity: 0;
}

.login form{
    display: flex;
    flex-direction: column;
    /* border: 2px solid; */
    gap: 10px;
    padding: 20px;
}

.login form input{
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
}

.login form button{
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    margin-top: 30px;
    color: #fff;
    background-color: rgb(71, 38, 95);
    border: 3px solid transparent;
    transition: all 0.5s ease;
    letter-spacing: 3px;
}

.login form button:hover{
    background-color: #222;
    /* border-color: #fff5; */
}

.login h2{
    /* margin-top: 40px; */
    margin-bottom: 50px;
    color: rgb(71, 38, 95);
    font-size: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #0002;
}

.login .gotoforgotpassword{
    font-size: 15px;
    text-align: right;
    padding: 10px;
    opacity: 0.5;
    border: 3px solid;
    border-radius: 10px;
    border-color: transparent;
    transition: all 0.5s ease;
}

.login .gotoforgotpassword:hover{
    border-color: rgba(59, 42, 72, 0.5);
}

/* login ends here */


/* weather starts here */

    .weather{
        display: flex;
        flex-direction: column;
        padding: 0 30px;
        opacity: 0;
        /* transform: translateX(100%); */
        visibility: hidden;
        transition: all 0.25s ease;
        /* display: none; */
    }

    .show.weather{
        /* transform: translateX(0); */
        opacity: 1;
        visibility: visible;
    }

    .weather .navbar{
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 5px 10px;
        position: absolute;
        top: 0;
        left: 0;
        align-items: center;
        color: rgb(71, 38, 95);
        /* z-index: ; */
    }
    
    .weather .hamburger{
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 3px solid;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: all 0.5s ease;
        z-index: 10;
        border-color: transparent;
        cursor: pointer;
    }
    
    .weather .city--name{
        /* width: 40px; */
        height: 40px;
        /* padding: 0 10px; */
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 2px solid; */
        opacity: 0.5;
        font-weight: bold;
        letter-spacing: 4px;
        overflow: hidden;
    }
    
    .weather .user--login{
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid;
        border-radius: 50%;
        transition: all 0.5s ease;
        border-color: transparent;
        background-color: #fffd;
        margin-right: 10px;
        box-shadow: 0px 0px 10px #0001;
        font-size: 17px;
    }

    .weather .user--login:hover{
        border-color: rgba(70, 50, 84, 0.417);
    }
    
    .weather .hamburger:hover{
        border-color: rgba(70, 50, 84, 0.417);
    }
    
    .weather .hamburger i{
        position: absolute;
        transition: all 0.5s ease;
    }
    
    .weather .hamburger i.fa-close{
        scale: 0;
        opacity: 0;
    }
    
    .preloader{
        /* display: none; */
    }

    .login, .signup, .gettingstarted{
        /* display: none; */
    }

    .weather h2{
        text-transform: uppercase;
        /* font-weight: bold; */
        letter-spacing: 2px;
        margin-bottom: 50px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        /* padding-bottom: 10px; */
        /* border-bottom: 2px solid #0003; */
    }

    .weather h2::before{
        content: "";
        position: absolute;
        /* width: 100%; */
        width: 100%;
        height: 3px;
        background-color: rgb(41, 16, 56);
        border-radius: 50px;
        bottom: -16px;
        opacity: 0.4;
        transition: all 0.5s ease;
        /* transform: scaleX(0.4); */
        width: 20% !important;
    }
    
    .show.weather h2::before{
        width: 20% !important;
        /* opacity: 0; */

    }

    .weather .weather-details{
        /* border: 2px solid; */
        padding: 50px 30px;
        border-radius: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(242, 234, 242, 0.672);
        color: rgb(71, 38, 95);
        box-shadow: 0px 0px 10px #0001;
        max-width: 400px;
        transition: all 0.5s ease;
        backdrop-filter: blur(5px);
    }
    
    .weather .weather-details .weather--condition{
        /* border: 2px solid; */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }
    
    .weather .weather-details .weather--condition .condition{
        opacity: 0.6;
        font-size: 17px;
        letter-spacing: 2px;
        margin-bottom: 40px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        gap: 50px;
        /* border: 2px solid; */

    }

    .weather .weather-details .weather--condition .temp{
        display: flex;
        justify-content: center;
        /* align-items: center; */
        font-size: 60px;
        font-weight: bold;
        /* gap: 100px; */
        margin-bottom: 20px;
        /* border: 2px solid; */
    }
    
    .weather .weather-details .weather--condition .temp span{
        font-size: 30px;
        position: relative;
        transform: translateY(10px);
    }
    
    .weather-details .weather--condition .condition img{
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(146, 146, 243);
        border-radius: 20px;
        /* opacity: 0.5; */
    }

    .weather .weather-details .weather--condition .date{
        /* border: 2px solid; */
        /* border: 2px solid #000; */
        /* opacity: 0; */
        gap: 10px;
        margin-bottom: 40px;
    }
    
    .weather .other--data{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        margin-bottom: 40px;
    }

    .weather .weather-details .weather--condition .date :first-child{
        border-right: 3px solid;
        padding: 0 10px;
        margin-right: 10px;
    }

    .weather .favourite{
        /* width: 100%; */
        /* border: 2px solid; */
        display: none;
        justify-content: flex-end;
        align-items: center;
        font-size: 27px;
        position: fixed;
        bottom: 30px;
        left: 20px;
        /* margin-bottom: 30px; */
        /* margin-bottom: 50px; */
    }

    .weather .favourite .heart{
        /* color: #fff; */
        display: none;
        /* color: transparent; */
        /* border: 2px solid #000; */
        /* text-shadow: 0px 0px 10px rgba(44, 36, 49, 0.689);  */
        transition: all 0.5s ease;
        color: rgb(224, 71, 71);
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        border: 3px solid transparent;
        border-radius: 10px;
    }

    
    .weather .favourite img{
        width: 30px;
        /* background-color: red; */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-clip: text; */
        background-color: transparent;
        transition: all 0.5s ease;
    }

    .weather .favourite .default{
        display: flex;
        font-size: 17px;
        color: rgb(49, 49, 76);
        font-weight: bold;
        justify-content: center;
        gap: 10px;
        align-items: center;
    }



    .weather .favourite .default .setdefault{
        color: #fff;
        width: 20px;
        height: 20px;
        display: flex;
        font-size: 12px;
        justify-content: center;
        align-items: center;
        border: 2px solid ;
        color: rgb(49, 49, 76);
        /* background-color: rgb(49, 49, 76); */
        border-radius: 10px;
    }

    .weather .favourite .default .setdefault i{
        transition: all 0.5s ease;
        scale: 0;
        opacity: 1;
    }

    .weather .favourite .is.default .setdefault i{
        scale: 1;

    }
    
    @media screen and (max-height: 800px) {
        .weather .weather-details{
            height: 70vh;
            max-height: 400px;
            overflow: scroll;
            justify-content: flex-start;
            /* position: static; */
        }

        .weather .favourite{
            position: fixed;
            bottom: 30px;
            left: 20px !important;
            /* width: ; */
        }

    }
    
    @media screen and (max-height: 300px) {
        .hamburger{
            display: none !important;
        }

        .weather .navbar{
            justify-content: center;
        }

        .weather{
            opacity: 1;
            visibility: visible;
        }

        .weather .weather-details{
            width: fit-content;
        }

        .city--name{
            /* padding-left: 10px; */
        }

        .user--login{
            display: none !important;
        }

        .weather .searchforcity, .gettingstarted, .signup, .login, .menu, .preloader, .settings, .searchpage{
            display: none !important;
        }
        
        .weather .weather-details{
            height: 100px !important;
            overflow: scroll;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            /* padding: 10px 50px; */
        }

        .weather .favourite, .weather .other--data, .weather .date, .weather .weather--condition .condition{
            display: none !important;
        }
        
        .weather h2{
            font-size: 15px;
            margin-top: 10px;
            margin-bottom: 10px;
            /* margin-bottom: 10px; */
        }
        
        .weather h2::before{
            display: none;
        }
        
        .weather .temp{
            margin-bottom: 0;
            font-size: 30px !important;
            align-items: center;
        }

        .weather .temp span{
            font-size: inherit !important;
            transform: translateY(0) !important;
        }
    }


    .about--city{
        font-size: 15px;
        opacity: 0.4;
        /* text-decoration: underline; */
    }

    .searchforcity{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        background-color: rgb(61, 39, 74);
        position: fixed;
        bottom: 20px;
        right: 20px;
        transition: all 0.5s ease;
        cursor: pointer;
    }

    .searchforcity:hover .ripple:before, .searchforcity:hover .ripple::after{
        /* opacity: 0; */
        /* scale: 0; */
        background-color: transparent;
    }

    .show-menu .searchforcity{
        transform: translateX(200px);
        /* opacity: 0; */
        /* visibility: hidden; */
    }

    .ripple{
        position: relative;
        z-index: -1;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* scale: 2; */
        background-color: rgb(60, 40, 72);
        border-radius: 50%;
        transition: all 0.5s ease;
    }
    
    .ripple::before{
        transition: all 0.5s ease;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(60, 40, 72);
        background-color: rgba(68, 36, 86, 0.664);
        /* scale: 2; */
        z-index: -1;
        border-radius: inherit;
        animation: search-ripple 2s linear forwards infinite;
    }

    .ripple::after{
        transition: all 0.5s ease;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(68, 36, 86);
        background-color: rgba(68, 36, 86, 0.664);
        /* scale: 2; */
        z-index: -1;
        border-radius: inherit;
        /* display: none; */
        animation: search-ripple 2s linear forwards infinite;
        animation-delay: 1s;
    }

    @keyframes search-ripple {
        0%{}
        100%{scale: 3;opacity: 0;}
    }

    .searchforcity:hover{
        background-color: #333;
    }


    
/* weather ends here */


/* search starts here */

.searchpage{
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    flex-direction: column;
    background-color: rgba(246, 238, 249, 0.816);
    backdrop-filter: blur(10px);
}

.show.searchpage{
    /* border-left: 2px solid transparent; */
    /* transform: translateX(0); */
    opacity: 1;
    visibility: visible;
}

.searchpage .backtoweather{
    width: 40px;
    height: 40px;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 10px;
    left: 10px;
    border-radius: 10px;
    transition: all 0.5s ease;
    color: rgb(45, 38, 49);
    border: 4px solid rgba(44, 34, 52, 0.303);
    border-color: transparent;
}

.searchpage .gotohistory{
    width: 40px;
    height: 40px;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 10px;
    /* left: 10px; */
    right: 10px;
    border-radius: 10px;
    transition: all 0.5s ease;
    color: rgb(45, 38, 49);
    border: 4px solid rgba(44, 34, 52, 0.303);
    border-color: transparent;
    font-size: 20px;
    opacity: 0.2;
}


.hamburger{
    border-width: 4px !important;
}

.searchpage .search-container{
    text-align: center;
    position: relative;
    transition: all 0.5s ease;
    /* width: 100%; */
}

.searchpage .show.search-container{
    transform: translateY(-20vh);
}

.searchpage h3{
    position: absolute;
    top: 20px;
    letter-spacing: 1.5px;
}

.searchpage form{
    /* margin-top: 20px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 60px; */
}

.searchpage form .search-bar{
    /* border: 2px solid; */
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    background-color: #fff;
    border-radius: 20px;
    /* width: 150px; */
    width: 200px;
    box-shadow: 0px 0px 10px #0002;
    transition: all 0.5s ease;
}

.searchpage form .search-bar:hover{
    width: 250px;
}

.searchpage form .search-bar input, .searchpage form .search-bar button{
    /* height: 100%; */
}

.searchpage form .search-bar input{
    /* height: 100%; */
    border: none;
    padding: 5px 10px;
    height: 100%;
    width: 100%;
    outline: none;
}

.searchpage form .search-bar button{
    height: 100%;
    /* width: 50px; */
    background-color: rgb(54, 21, 74);
    color: #fff;
    border: none;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: all 0.5s ease;
}

.searchpage form .search-bar button:hover{
    /* width: 0px; */
    opacity: 0.5;
    /* transform: translateX(100%); */
}

.searchpage form .options{
    border: none;
    margin-top: 40px;
    display: flex;
    gap: 10px;
    background-color: transparent;
    opacity: 0.1;
    /* opacity: 0.4; */
    font-size: 14px;
    color: rgb(45, 38, 49);
}

.searchpage .search-data{
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    text-align: center;
    /* gap: 30px; */
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    /* padding: 30px; */
    overflow-x: hidden;
    overflow-y: scroll;
    height: 40vh;
    min-height: 300px;
    width: 100%;
    /* transform: translateY(100%); */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #fffc; */
    /* box-shadow: 0px 0px 10px #0001; */
    /* opacity: 0; */
}

.searchpage h1{
    /* position: absolute; */
    color: rgb(54, 21, 74);
    font-weight: bold;
    opacity: 1;
    /* visibility: hidden; */
    transition: all 0.5s ease;
}

.searchpage .cod{
    position: fixed;
    /* bottom: 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 2px solid; */
    width: 70%;
    max-width: 600px;
    max-height: 600px;
    min-width: 300px;
    min-height: 300px;
    background-color: #fffa;
    backdrop-filter: blur(5px);
    flex-direction: column;
    gap: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px #0001;
    transition: all 0.5s ease;
    /* transform: translateY(100%); */
    opacity: 0;
    scale: 0;
    visibility: hidden;
}

.searchpage .cod button{
    border: none;
    background-color: rgb(74, 41, 93);
    position: absolute;
    color: #fff;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 0.5s ease;
}

.searchpage .cod button:hover{
    scale: 1.5;
    background-color: rgb(42, 25, 52);
}

.searchpage .show.cod{
    visibility: visible;
    scale: 1;
    opacity: 1;
}

.searchpage .cod h1:first-child{
    font-size: 50px;
    color: rgb(224, 71, 71);
}

.searchpage .weather-details{
    /* margin-top: 40px; */
    width: 75vw !important;
    max-width: 400px;
    position: absolute;
    /* border: 2px solid; */
    padding: 50px 30px;
    border-radius: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgb(71, 38, 95);
    box-shadow: 0px 0px 10px #0001;
    max-width: 400px;
    transition: all 0.5s ease;
    backdrop-filter: blur(5px);
    /* height: 0px; */
    opacity: 0;
    transition: all 0.5s ease;
    /* position: relative; */
    bottom: 30px;
    transform: translateY(100%);
    /* overflow: hidden; */
    background-color: rgba(253, 245, 252, 0.4) !important;
}

.searchpage h2{
    height: 50px;
}

.searchpage .show.weather-details{
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-height: 680px) {
    .searchpage .weather-details{
        max-height: 300px;
        overflow-y: scroll;
        justify-content: flex-start;
    }
}

.searchpage .weather-details .weather--condition{
    /* border: 2px solid; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.searchpage .weather-details .weather--condition .condition{
    opacity: 0.6;
    font-size: 17px;
    letter-spacing: 2px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 50px;
    /* border: 2px solid; */

}

.searchpage .weather-details .weather--condition .temp{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    font-size: 60px;
    font-weight: bold;
    /* gap: 100px; */
    margin-bottom: 20px;
    /* border: 2px solid; */
}

.searchpage .weather-details .weather--condition .temp span{
    font-size: 30px;
    position: relative;
    transform: translateY(10px);
}

.searchpage .weather-details .weather--condition .condition img{
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* opacity: 0.5; */
}

.searchpage .weather-details .weather--condition .date{
    /* border: 2px solid; */
    /* border: 2px solid #000; */
    /* opacity: 0; */
    gap: 10px;
    margin-bottom: 40px;
}

.searchpage .other--data{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.searchpage .weather-details .weather--condition .date :first-child{
    border-right: 3px solid;
    padding: 0 10px;
    margin-right: 10px;
}

.searchpage .weather-details .favourite{
    /* width: 100%; */
    /* border: 2px solid; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 27px;
    /* margin-bottom: 30px; */
    /* margin-bottom: 50px; */
}

.searchpage .weather-details .favourite .heart{
    /* color: #fff; */
    display: none;
    /* color: transparent; */
    /* border: 2px solid #000; */
    /* text-shadow: 0px 0px 10px rgba(44, 36, 49, 0.689);  */
    transition: all 0.5s ease;
    color: rgb(224, 71, 71);
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border: 3px solid transparent;
    border-radius: 10px;
}


.searchpage .weather-details .favourite img{
    width: 30px;
    /* background-color: red; */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-clip: text; */
    background-color: transparent;
    transition: all 0.5s ease;
}

.searchpage .weather-details .favourite .default{
    display: flex;
    font-size: 17px;
    color: rgb(49, 49, 76);
    font-weight: bold;
    justify-content: center;
    gap: 10px;
    align-items: center;
}



.searchpage .weather-details .favourite .default .setdefault{
    color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    border: 2px solid ;
    color: rgb(49, 49, 76);
    /* background-color: rgb(49, 49, 76); */
    border-radius: 10px;
}

.searchpage .weather-details .favourite .default .setdefault i{
    transition: all 0.25s ease;
    scale: 0;
    opacity: 0;
}

.searchpage .weather-details .favourite .is.default .setdefault i{
    scale: 1;
    opacity: 1;
}


/* .preloader{
    display: none;
} */

.gotosearchend{
    position: fixed;
    bottom: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #fffd;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}




/* search ends here */

.gettingstarted{
    z-index: 8;
}

.signup{
    z-index: 7;
}

.login{
    z-index: 6;
}

.weather{
    z-index: 5;
}

.searchpage{
    z-index: 8;
}

.preloader{
    /* display: none; */
}

.settings{
    z-index: 20;
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.trash{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 25px;
    font-size: 20px;
    background-color: rgb(47, 33, 55);
    color: #fff;
    position: fixed;
    z-index: 2;
    bottom: 5vh;
    /* opacity: 0.3; */
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
    /* width: 150px; */
    transition: all 0.5s ease;
    /* padding-right: 20px; */
    overflow: hidden;
    /* color: rgb(55, 32, 32); */
    cursor: pointer;
    transform: translateY(50px);
    opacity: 0;
    scale: 1.2;
    /* display: none; */
    /* transform: translateX(50px); */
}

.show.settings .trash{
    transform: translateY(0);
    opacity: 1;
}

.trash:hover{
    width: 150px;
    opacity: 1;
    /* scale: 1.1; */
}

.trash i{
    margin-left: 16px;
    transition: all 0.5s ease;
}

.trash button{
    position: absolute;
    right: 10px;
    border: none;
    /* padding: 10px 15px; */
    border-radius: 25px;
    width: 90px;
    height: 30px;
    color: rgb(45, 38, 49);
    /* background-color: rgb(45, 38, 49); */
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    transform: translateX(200px);
    font-weight: bold;
}

.trash:hover button{
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.trash:hover button:hover{
    background-color: #000;
    color: #fff;
}

.show.settings{
    opacity: 1;
    visibility: visible;
}

.settings-container{
    width: 300px;
    height: 300px;
    background-color: rgb(48, 35, 56);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    /* overflow-y: scroll; */
    overflow: hidden;
    scale: 0;
    transition: all 0.5s ease;
    box-shadow: 0px 0px 10px #0005;
    /* gap: 50px; */
}

.show.settings .settings-container{
    scale: 1;
}

.settings-container form{
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin-bottom: 50px;
}

.settings-container form div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}

.settings-container form button{
    padding: 5px 10px;
    min-width: 100px;
    color: rgb(48, 35, 56);
    font-size: 18px;
    border: none;
    font-weight: bold;
    border-radius: 20px;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 20px #000b;
    transition: all 0.5s ease;
}

.settings-container form button:hover{
    scale: 1.15;
}

.premium{
    color: gold;
    padding: 10px;
    border: 2px solid;

    transition: all 0.5s ease;
    opacity: 0.8;
    word-spacing: 6px;
}

.settings .settings-backdrop{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgba(19, 9, 18, 0.684);
    transition: all 0.5s ease;
    opacity: 0;
}

.show.settings .settings-backdrop{
    opacity: 1;
}

/* .settings-backdrop:hover{
    opacity: 0;
} */


::-webkit-scrollbar{
    height: 0px;
    width: 6px;
}

.login, .gettingstarted, .signup{
    /* display: none; */
}

::-webkit-scrollbar-button{
    width: 0px;
    height: 20px;
}
    
::-webkit-scrollbar-track{
    background-color: rgba(249, 247, 250, 0.434);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb{
    border-radius: 20px;
    background-color: rgba(65, 39, 80, 0.284);
}

::-webkit-scrollbar-thumb:hover{
    background-color: rgba(65, 39, 80, 0.7);
}


.preloader, .login, .signup, .gettingstarted, .weather, .search{
    /* display: none; */
}

.custom-care{
    background: rgb(22, 17, 25) !important;
    color: #fff;
    opacity: 0;
    transition: all 0.5s ease;
    visibility: hidden;
    z-index: 10;
    /* scale: 0.8; */
    /* transform: translateX(100%); */
}

.show.custom-care{
    /* transform: translateX(0); */
    opacity: 1;
    /* scale: 1; */
    visibility: visible;
}

.custom-care .goback{
    width: 100px;
    position: absolute;
    top: 10px;
    left: 10px;
    height: 30px;
    background-color: rgb(224, 71, 71);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0px 0px 10px #0003;
}

.custom-care .goback:hover{
    background-color: #000;
}

.custom-care .okay{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 9, 14, 0.8);
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.5s ease;
    visibility: hidden;
    padding: 20px;
}

.custom-care .show.okay{
    opacity: 1;
    visibility: visible;
}

.custom-care .okay .okay-container{
    width: 80%;
    position: relative;
    max-width: 500px;
    max-height: 500px;
    min-width: 300px;
    min-height: 300px;
    border-radius: 30px;
    background-color: rgba(240, 232, 243, 0.8);
    backdrop-filter: blur(7px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: rgb(35, 24, 42);
    gap: 10px;
    transition: all 0.5s ease;
    scale: 0;
}

.custom-care .show.okay .okay-container{
    scale: 1;
}

.custom-care .okay .okay-container .sendwhatsapp{
    width: 100px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(64, 35, 74);
    color: #fff;
    margin-top: 30px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.5s ease;
    letter-spacing: 1px;
    font-size: 600;
    /* font-weight: bold; */
}

.custom-care .okay .okay-container .sendwhatsapp:hover{
    background-color: #000;
}



.custom-care .message{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 2px solid; */
    width: 100%;
    gap: 30px;
}

.custom-care .message h2{
    position: relative;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* border: 2px solid; */
    margin-bottom: 30px;
}

.custom-care .message h2::before{
    content: "";
    position: absolute;
    bottom: -20px;
    height: 3px;
    background-color: rgb(85, 75, 85);
    opacity: 0;
    width: 300px;
    border-radius: 30px;
    transition: all 1s ease;
}

.show.custom-care .message h2::before{
    width: 50px;
    opacity: 1;
}

.custom-care .message form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    /* color: rgb(41, 16, 56); */
    /* padding: 20px; */
}

.custom-care .back, .custom-care .copyrt{
    position: absolute;
}

.custom-care .back{
    top: 20px;
    left: 20px;
    transition: all 0.5s ease;
}

.custom-care .back:hover{
    opacity: 0.3;
}

.custom-care .copyrt{
    bottom: 5vh;
    opacity: 0.2;
}

.custom-care .message form > input{
    border: 1px solid #eee5ed39;
    outline: none;
    padding: 10px;
    width: 300px;
    border-radius: 10px;
    max-width: 80%;
    transition: all 0.5s ease;
    background-color: rgb(246, 238, 249);
    background-color: transparent;
    color: #fff;
}

.custom-care .message form div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}

.custom-care .message form textarea{
    /* opacity: 0.3; */
    /* background-color: rgb(246, 238, 249); */
    width: 300px;
    max-width: 300px;
    /* min-width: 300px; */
    border-radius: 10px;
    min-width: 300px;
    border: none;
    outline: none;
    padding: 10px;
    min-height: 100px;
    max-height: 200px;
    transition: all 0.5s ease;
    background-color: transparent;
    border: 1px solid #eee5ed39;
    color: #fff;
    /* width: 300px; */
}

.custom-care .message form textarea:hover, .custom-care .message form textarea:focus{
    border-color: gold;
    background-color: transparent;
}

.custom-care .message form > input:focus, .custom-care .message form > input:hover{
    background-color: transparent;
    border-color: gold;
    /* background-color: rgb(246, 238, 249); */
}

.custom-care .message form .done{
    margin-top: 30px;
    padding: 10px 20px;
    min-width: 200px;
    background-color: rgb(244, 230, 249);
    border: none;
    /* border: 2px solid rgb(246, 238, 249); */
    border-radius: 20px;
    font-weight: 600;
    font-size: 20px;
    color: rgb(246, 238, 249);
    color: rgb(28, 20, 31);
    letter-spacing: 1px;
    transition: all 0.5s ease;
    cursor: pointer;
    opacity: 0.1;
}

.custom-care .message form .show.done{
    opacity: 1;
}



@media screen and (min-width: 500px) {
    .container{
        width: 100%;
        max-width: 500px;
        height: 90vh;
        max-height: 1000px;
        min-height: 800px;
        position: fixed;
        overflow: hidden;
        border-radius: 40px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 7px 7px 10px rgba(41, 0, 44, 0.194);
        background-color: transparent;
    }



    body{
        height: 100vh;
        width: 100vw;
        background-color: #fff;
        background: linear-gradient(#fbe2f58e, #38002dc8) !important;
    }

    .menu{
        width: 70%;
    }
}