body {
    font-family: "Roboto", "Open Sans", sans-serif;
}

/* Navbar Styling */
.navbar { 
    background-color: #1e202b;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
}

.navbar .btn.active {
    border: solid 1px #009ad8;
    border-radius: 20px;
}

.navbar a {
    font-size: 14px;
    transition: all 0.2s ease-in-out;
}

.navbar a:hover {
    color: #009ad8 !important;
}

.navbar-brand {
    font-size: 32px !important;
}

/* Home Section Styling */
#home {
    background-image: url(../images/pexels-pixabay-268791.jpg);
    background-size: cover;
    background-position: top;
    background-attachment:fixed;
}

#home-content {
    position: relative;
    top: 40px;
}

#otherRelatdeInfo img {
    width: 21px;
    height: 21px;
    margin-right: 8px;
}

#otherRelatdeInfo span {
    font-size: 14px;
}

.row {
    color: #bdbcbc !important;
    padding-bottom: 80px;
}

#currentTemp, #TomorrowHigherTemp, #afterTomorrowHigherTemp {
    color: #fff;
}

#currentTemp {
    font-size: 75px;
}

#todayWeather, #afterTomorrowWeather {
    background-color: #323544;
}
#todayWeather {
    border-radius: 10px 0 0 0;
}
#todayWeather .dateInfo {
    border-radius: 10px 0 0;
}

#afterTomorrowWeather .dateInfo {
    border-radius: 0 10px 0 0;
}

#afterTomorrowWeather {
    border-radius: 0 10px 0 0;
}

#TomorrowWeather, #FifthDayWeather {
    background-color: #262936;
}

#TomorrowWeather .dateInfo, #FifthDayWeather .dateInfo {
    background-color: #222530;
    font-size: 15px;
}

#FourthDayWeather .dateInfo, #SixthDayWeather .dateInfo {
    background-color: #2d303d;
    font-size: 15px;
}


#todayWeather .dateInfo, #afterTomorrowWeather .dateInfo  {
    background-color: #2d303d;
    font-size: 15px;
}

#currentWeatherStatus, #TomorrowWeatherStatus, #afterTomorrowWeatherStatus {
    font-size: 15px;
    color: #009ad8 !important;
}

#subscribeBtn {
    background-color: #009ad8;
    color: #fff !important;
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
}

.relocate {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}
#relocateBtn {
    color: #06374b;
    padding: 0;
    margin: auto 5px;
    transition: all 0.2s ease-in-out;
}

#relocateBtn:hover {
    color: #05719c;
}

/* Accordion Styling */
.accordion-item, .accordion-body, .accordion-header, .accordion-collapse {
    border-radius: 0 0 10px 10px !important;
}

.accordion-item {
    background-color: #323544;
}

.accordion-body  .titles {
    font-size: 14px;  
}

.accordion-body  .values {
    color: #fff;
}

.accordion-button {
    background-color: #faf9f9;
    color: #000;
}

.extraStatus {
    font-size: 15px;
}

/* Footer Section Styling */
#footer {
     background-color: #1e202b;
}

#contactList {
    list-style: none;
}

#contactList li {
    padding-right: 15px;
    font-size: 25px;
}

#contactList li a{
    -webkit-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

#contactList li a:hover {
    color: #d1d0d0;
}

.subscribe_Contacts .input-group {
    width: 70% !important;
}

#credits p {
    font-size: 14px;
    color: #bdbcbc !important;
}

.mailAlert::-webkit-input-placeholder {
    color: rgb(167, 38, 38);
}

.mailAlert::-moz-placeholder {
    color: rgb(167, 38, 38);
}

.mailAlert:-ms-input-placeholder {
    color: rgb(167, 38, 38);
}

.mailAlert::-ms-input-placeholder {
    color: rgb(167, 38, 38);
}

.mailAlert::placeholder {
    color: rgb(167, 38, 38);
}



/* Responsive Design for smaller screen PCs */
@media screen and (max-width: 1000px) {
    #currentTemp {
        font-size: 55px;
    }
}

/* Responsive Design for tablet size screen */
@media screen and (max-width: 765px) {
    #home-content .input-group {
        width: 80% !important;
    }

    #currentTemp {
        font-size: 55px;
    }

    #TomorrowWeather, #afterTomorrowWeather {
        padding-bottom: 15px;
    }

    #todayWeather {
        border-radius: 10px 10px 0 0;
    }

    #todayWeather .dateInfo {
        border-radius: 10px 10px 0 0;
    }

    #afterTomorrowWeather .dateInfo {
        border-radius: 0;
    }

    #collapseOne .d-flex {
        padding-bottom: 10px;
    }

    .subscribe_Contacts {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .subscribe_Contacts .input-group {
        width: 90% !important;
        margin-right: 0 !important;
    }

    #contacts {
        margin-left: 0 !important;
    }

    #contactList {
        padding-left: 0 !important;
    }
}

/* Responsive Design for smaller Tablet and mobile screen  */
@media screen and (max-width: 576px) {
    .navbar {
        padding-right: 7px;
        padding-left: 7px;
    }
    .navbar .btn {
       border: none !important;
       /* border-bottom: solid 0.5px #7e7c7c !important; */
    }

    .navbar .btn.active {
        color: #009ad8 !important;
    }

    #home-content .input-group {
        width: 90% !important;
    }

    .relocate {
        right: 5%;
    }

    #TodayWeatherInfo {
        text-align: center;
    }

    #currentTempInfo {
        text-align: center;
    }

    #currentTemp {
        padding-right: 0 !important;
    }

    .subscribe_Contacts .input-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    #mailInput {
        width: 90%;
    }

    #subscribeBtn {
        position: relative;
        padding: 8px !important;
        width: 60%;
        margin-top: 8px;
        margin-bottom: 15px;
    }
}