:root {
    --white: #fff;
    --black: #000;
    --header_and_footer: #79b530
}

*,
::before,
::after {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    scroll-behavior: smooth
}

a {
    color: var(--white);
    text-decoration: none
}

@font-face {
    font-display: swap;
    font-family: "montserrat";
    src: url(/assets/fonts/Montserrat.ttf)
}

@font-face {
    font-display: swap;
    font-family: "poppins";
    src: url(/assets/fonts/Poppins.ttf)
}

body {
    width: 100%;
    min-height: 100vh;
    font-family: "poppins"
}

.announce {
    text-align-last: center;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: #000;
}

.hero {
    background: var(--header_and_footer)
}

.hero .header {
    margin: auto;
    width: 1000px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.hero .header .logo img {
    width: 150px;
    height: 150px
}

.hero .header .navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.hero .header .navbar a:hover {
    cursor: pointer;
    transition: .3s;
    background: #54811c
}

.hero .header .navbar a,
.hero .header .navbar button {
    font-size: 20px;
    border-radius: 3px;
    padding: 14px 15px
}

.hero .header .navbar .dropdown {
    float: left;
    overflow: hidden
}

.hero .header .navbar .dropdown:hover .dropbtn {
    cursor: pointer;
    transition: .3s;
    background: #54811c
}

.hero .header .navbar .dropdown .dropbtn {
    border: none;
    padding: 14px 16px;
    border-radius: 3px;
    color: var(--white);
    font-family: "poppins";
    background: transparent;
    display: flex;
    align-items: center
}

.hero .header .navbar .dropdown .dropbtn i {
    margin-left: 10px
}

.hero .header .navbar .dropdown .dropdown_content {
    z-index: 1;
    width: 250px;
    display: none;
    position: absolute;
    border-radius: 3px;
    background: #d7d7d7
}

.hero .header .navbar .dropdown .dropdown_content:hover .dropbtn {
    background: #54811c
}

.hero .header .navbar .dropdown .dropdown_content a {
    display: block;
    text-align: left;
    padding: 12px 16px;
    color: var(--black)
}

.hero .header .navbar .dropdown:hover .dropdown_content {
    display: block
}

.sprinkastelen {
    display: flex;
    flex-direction: column;
    padding: 50px 0
}

.sprinkastelen .sprinkastelen_container {
    margin: auto;
    width: 1150px
}

.sprinkastelen .sprinkastelen_container h2 {
    font-size: 28px;
    text-align: center
}

.sprinkastelen .sprinkastelen_container p {
    font-size: 18px;
    text-align: center
}

.sprinkastelen .sprinkastelen_container .container_row {
    gap: 50px;
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0;
}

.sprinkastelen .sprinkastelen_container .container_row .container_card {
    width: 350px;
    border-radius: 3px;
    border: 1px solid #eaeaea;
    position: relative;
    
}

.sprinkastelen .sprinkastelen_container .container_row .container_card .card_img img {
    width: 100%;
    height: 250px;
    display: flex;
}

.sprinkastelen .sprinkastelen_container .container_row .container_card .card_img img.extra {
    display: none;
}

.sprinkastelen .sprinkastelen_container .container_row .container_card .card_info {
    display: flex;
    flex-direction: column;
    padding: 12px 15px;
    font-size: 18px
}

.sprinkastelen .sprinkastelen_container .container_row .container_card .card_info span {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.sprinkastelen .sprinkastelen_container .container_row .container_card .card_info span i {
    margin-right: 10px
}

.sprinkastelen .sprinkastelen_container .container_row .container_card .card_info table {
    text-align: left
}

.sprinkastelen .sprinkastelen_container .container_row .container_card .card_info table .test {
    margin-bottom: 5px
}

/* IMAGE SLIDER */


#right{
    position: absolute;
    top: 45%;
    right: 0px;
    background: none;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 30px;
    color: black;
    background: blanchedalmond;
    padding: 5px;
    border-radius: 5px;
    z-index: 999;
}
#left{
    position: absolute;
    top: 45%;
    left: 0px;
    background: none;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 30px;
    color: black;
    background: blanchedalmond;
    padding: 5px;
    border-radius: 5px;
    z-index: 999;
}

/* FOOTER */

.footer {
    padding: 75px 28px;
    color: var(--white);
    background: var(--black)
}

.footer .footer_container {
    width: 800px;
    margin: auto;
    gap: 100px;
    display: flex
}

.footer .footer_container hr {
    width: 100%;
    height: 2px;
    border: none;
    margin: 50px 0;
    background: var(--white)
}

.footer .footer_container .container_column {
    display: flex;
    flex-direction: column
}

.footer .footer_container .container_column span {
    margin-bottom: 15px;
    text-underline-offset: 5px;
    -webkit-text-decoration: 2px solid #fff underline;
    text-decoration: 2px solid #fff underline
}

.footer .footer_container .container_column ul li {
    padding: 5px 0
}

.footer .footer_container .container_column ul li .contact_info {
    display: flex;
    align-items: center
}

.footer .footer_container .container_column ul li .contact_info i {
    margin-right: 10px
}

.footer .footer_container .container_column ul li .hover-underline-animation {
    position: relative
}

.footer .footer_container .container_column ul li .hover-underline-animation::after {
    left: 0;
    height: 2px;
    content: "";
    width: 100%;
    bottom: -5px;
    position: absolute;
    transform: scaleX(0);
    background: var(--white);
    transform-origin: bottom right;
    transition: transform .25s ease-out
}

.footer .footer_container .container_column ul li .hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left
}

.footer .footer_container .container_row {
    width: 100%;
    gap: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.footer .footer_container .container_row .socials i {
    font-size: 32px
}

.copyright {
    padding: 10px;
    text-align: center
}

.copyright a {
    color: var(--black)
}

@media screen and (max-width: 1250px) {
    .sprinkastelen .sprinkastelen_container {
        width: 95%
    }

    .sprinkastelen .sprinkastelen_container .container_row {
        justify-content: center
    }
}

@media screen and (max-width: 1100px) {
    .hero .header {
        width: 100%
    }
}

@media screen and (max-width: 850px) {
    .hero .header {
        flex-direction: column
    }

    .footer .footer_container {
        width: 100%
    }
}

@media screen and (max-width: 750px) {
    .footer .footer_container {
        gap: 50px;
        flex-direction: column
    }
}

@media screen and (max-width: 400px) {
    .sprinkastelen .sprinkastelen_container .container_row .container_card {
        width: 100%
    }
}