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


:root{
    --Very-Dark-Gray: hsl(0, 0%, 17%);
    --Dark-Gray: hsl(0, 0%, 59%);
}


body,html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    overflow-x: hidden;
    background: rgb(21, 27, 27);
    scroll-behavior: smooth;
}

.cal{
    position: relative;    
}
.bg{
    position:relative;
    top: 0;
    right: 0;
    z-index: 2;
}
.container{
    text-align: center;
    position: relative;
    padding: 15px 30px;
    position:absolute;
    top: 0;
    left: 10vw;
    right: 10vw;
    max-width: 750px;
    z-index: 5;
    margin: 0 auto;
}


header{
    margin-bottom: 30px;
}
header input{
    font-size: 18px;
    padding: 12px;
    border: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    width: 100%;
    max-width: 500px;
}
header button{

    background: var(--Very-Dark-Gray);
    border: none;
    padding: 14px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

}
header button:hover , input:hover{
    cursor: pointer;
}

header .ser{
    display: flex;
    align-items: center;
    justify-content: center;
}
header h2{
     color:white;
}

.info{
    background:white;
    border-radius: 10px;
    padding: 7px;
    max-width: 500px;
    margin: 0 auto;
}
.info h1{
    color: var(--Very-Dark-Gray);
}
.info p{
    color: var(--Dark-Gray);
}

/* map section*/

#map {
    
    height: 70vh;
    position:relative;
    bottom: 0;
    left: 0;
    z-index: 1;

}




@media(min-width:1000px){


    header{
        margin-top: 55px;
    }
    .container{
        margin: 0 auto;
    }

       .info{
           display: flex;
           justify-content: center;
           align-items: center;
           padding: 0px;
           max-width: none;
       }
       .n{
          text-align: start;
          padding-right: 40px;
       }
       #map {
    
        height: 59vh;
    }
}
@media(min-width:1360px){


       .container{
           margin: 0 auto;
       }

       .info{
           display: flex;
           justify-content: center;
           align-items: center;
           padding: 0px;
           max-width: none;
       }
       .n{
          text-align: start;
          padding-right: 40px;
       }

       #map {
    
        height: 61vh;
    }
}