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

::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Noto Rashi Hebrew', serif;
    height: 100%;
    background-image: url(../img/henry-co-tqu0IOMaiU8-unsplash.jpg);
    overflow-x: hidden;
}

.navbar {
    padding: 20px 100px;
    font-size: 24px;
    font-weight: 600;
}

.navbar-brand {
    padding-left: 30px;
}

.nav-title {
    font-size: 36px;
    font-weight: 600;
    color: #800000;
}

.nav-options {
    margin-right: 50px;
}

.nav-options a:hover {
    text-decoration: none;
}

.nav-option {
    padding-right: 30px;
}

.nav-option span {
    transition: all ease .3s;
    padding: 5px;
}

.nav-option span:hover {
    color: black;
    padding: 5px;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 5px;
}


.dropdown-item {
    font-size: 18px;
    font-weight: 600;
}

.welcome-text {
    margin: 120px 0px;
}

.welcome-text p {
    margin-top: 30px;
    font-size: 24px;
}

.qbe-span {
    position: relative;
    padding: 10px 600px 10px 10px;
    margin-right: -600px;
    background: linear-gradient(to right, #ffffff 0%, #f0f0f0 100%);
    border-radius: 20px;
    color: black;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.1),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
}

.btn-findout {
    color: black;
    font-weight: 600;
}

.add-marginbottom {
    margin-bottom: 80px;
}

.simple-carousel {
    padding: 0px 100px;
}

.background-transparent {
    background-color: rgba(255, 255, 255, .3);
}

.card-title,
.card-text {
    font-weight: 600;
    padding: 30px 0px;
}

.card {
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.1),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        8.5px 8.5px 6px rgba(0, 0, 0, 0.035),
        12.3px 12.3px 13.9px rgba(0, 0, 0, 0.042),
        21.8px 21.8px 13.4px rgba(0, 0, 0, 0.05),
        50px 50px 100px rgba(0, 0, 0, 0.07);
    z-index: 900;
}

.card-title a {
    color: #800000;
}

.card-title a:hover {
    text-decoration: none;
}

.card-text {
    font-size: 18px;
    padding: 0;
    margin-bottom: 5px;
}

.card-text-important {
    margin-left: 30px;
    font-size: 22px;
    color: black;
    font-weight: 900;
}

.card-location {
    font-size: 24px;
}

.breaking-line {
    width: 65%;
    border: 1px solid rgba(0, 0, 0, .3);
}

@media (max-width: 767px) {
    .breaking-line {
        width: 100%;
    }
}

.small-br {
    margin: 5px;
    width: 50%;
    border: 1px solid rgba(0, 0, 0, 1);
}

.card-icon {
    color: rgba(0, 0, 0, .5);
    margin-right: 10px;
}

.photo-gallery {
    color: #313437;
    background-color: #fff;
}

.photo-gallery p {
    color: #7d8285;
}

.item img {
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.1),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        8.5px 8.5px 6px rgba(0, 0, 0, 0.035),
        12.3px 12.3px 13.9px rgba(0, 0, 0, 0.042),
        21.8px 21.8px 13.4px rgba(0, 0, 0, 0.05),
        50px 50px 100px rgba(0, 0, 0, 0.07);
}

.photo-gallery h2 {
    font-weight: bold;
    margin-bottom: 40px;
    padding-top: 40px;
    color: inherit;
}

@media (max-width:767px) {
    .photo-gallery h2 {
        margin-bottom: 25px;
        padding-top: 25px;
        font-size: 24px;
    }
}

.photo-gallery .intro {
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto 40px;
}

.photo-gallery .intro p {
    margin-bottom: 0;
}

.photo-gallery .photos {
    padding-bottom: 20px;
}

.photo-gallery .item {
    padding-bottom: 30px;
}

.item a img {
    margin-bottom: 30px;
}

.apartment-details {
    margin: 80px 0px;
}

.title {
    margin-bottom: 50px;
    text-transform: uppercase;
}

.card-title {
    text-align: center;
    width: 20%;
    background-color: white;
    padding: 20px;
    margin-top: 50px;
    margin-bottom: -50px;
    margin-left: 80px;
    border-radius: 20px;
    position: relative;
    z-index: 1000;
}

@media (max-width:767px) {
    .card-title {
        width: 100%;
        margin-left: 0px;
    }
}

.card-block {
    font-size: 1em;
    position: relative;
    margin: 0;
    padding: 1em;
    border: none;
    box-shadow: none;

}

.card {
    font-size: 1em;
    overflow: hidden;
    padding: 10px;
    border: none;
    border-radius: 20px;
    margin-top: 20px;
}

.carousel-row {
    padding: 30px;
}

.google-maps {
    padding: 50px;
}

.google-maps iframe {
    width: 100%;
    height: 700px;
    border-radius: 20px;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.1),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        8.5px 8.5px 6px rgba(0, 0, 0, 0.035),
        12.3px 12.3px 13.9px rgba(0, 0, 0, 0.042),
        21.8px 21.8px 13.4px rgba(0, 0, 0, 0.05),
        50px 50px 100px rgba(0, 0, 0, 0.07);
    border: 2px solid rgba(0, 0, 0, .3);
}

.btn-apartmentdetails {
    margin-top: 50px;
    color: black;
    font-weight: 900;
}

.removed-padding {
    padding-right: 0;
}

.ftco-section {
    margin: 30px;
    padding: 30px;
    background: rgba(255, 255, 255, .7);
}

.ftco-section .container {
    border-radius: 50px;
}

.map-contact iframe {
    width: 100%;
    height: 100%;
}

.dbox .icon {
    background-color: #7d8285;
}

.footer {
    background: rgba(255, 255, 255, .7);
    padding: 30px 0px;
    font-family: 'Play', sans-serif;
    text-align: center;
}

.footer .row {
    display: inline-block;
    width: 100%;
    margin: 1% 0%;
    padding: 0.6% 0%;
    color: gray;
    font-size: 0.8em;
}

.footer .row a {
    text-decoration: none;
    color: gray;
    transition: 0.5s;
}

.footer .row a:hover {
    color: black;
}

.footer .row ul {
    width: 100%;
}

.footer .row ul li {
    display: inline-block;
    margin: 0px 30px;
}

.footer .row a i {
    font-size: 2em;
    margin: 0% 1%;
}

@media (max-width:720px) {
    .footer {
        text-align: left;
        padding: 5%;
    }

    .footer .row ul li {
        display: block;
        margin: 10px 0px;
        text-align: left;
    }

    .footer .row a i {
        margin: 0% 3%;
    }
}

.footer-text p {
    font-size: 18px;
}

.arrow-up-icon {
    font-size: 30px;
    color: black;
}

.arrow-up-icon:hover {
    color: #313437;
}

.details-container {
    margin-top: 50px;
}

.details-apartment {
    padding: 100px;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 20px;
    width: 95%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    justify-content: center;
    gap: 2rem;
    list-style: none;
}

.details-apartment li {
    max-width: 12rem;
    justify-self: center;
    display: grid;
    grid-template:
        "icon"
        "line"
        "dot"
        "title"
        "descr" 1fr;
    justify-items: center;
    align-items: flex-start;
    text-align: center;
}

.details-apartment li .icon {
    color: #c1c1c1;
    grid-area: icon;
    width: 6rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: white;
    font-size: 2.5rem;
    border: 0.4rem solid var(--bgColor);
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: -0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.45),
        inset -0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.45);
}

.details-apartment li::before {
    content: "";
    grid-area: line;
    height: 2rem;
    border-right: 2px dotted currentColor;
}

.details-apartment li::after {
    content: "";
    grid-area: dot;
    width: 1rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent-color);
    justify-self: center;
    margin-bottom: 0.5rem;
}

.details-apartment li .title {
    grid-area: title;
    margin-block: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.details-apartment li .descr {
    font-size: 20px;
}

.splide__track {
    border-radius: 10px;
}

.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.center-vertically {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.1),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        8.5px 8.5px 6px rgba(0, 0, 0, 0.035),
        12.3px 12.3px 13.9px rgba(0, 0, 0, 0.042),
        21.8px 21.8px 13.4px rgba(0, 0, 0, 0.05),
        50px 50px 100px rgba(0, 0, 0, 0.07);
}

.image-1 {
    width: 80%;
    height: 500px;
    border-radius: 21px 21px 21px 21px;
    background-image: url(/img/slika1.jpg);
    background-size: cover;
}

.image-2 {
    width: 80%;
    height: 500px;
    border-radius: 21px 21px 21px 21px;
    background-image: url(/img/slika2.jpg);
    background-size: cover;
}

@media only screen and (max-device-width: 480px) {
    main{
        width: 100%;
        overflow-x: hidden;
    }
    .navbar {
        padding: 20px;
    }

    .nav-options {
        margin-right: 0;
    }

    .nav-option {
        padding-right: 0;
    }
    
    .me-3 {
        margin-right: 0 !important;
    }

    .nav-option:nth-child(2) {
        padding: 0px 5px;
    }

    .image-1 {
        height: 250px;
    }

    .image-2 {
        height: 250px;
    }

    .qbe-span {
        background: none;
        box-shadow: none;
    }

    .welcome-text{
        margin: 30px 0;
    }

    .simple-carousel{
        padding: 0px 20px;
    }

    .card-title{
        margin-top: 10px;
    }

    .ftco-section{
        margin: 0;
        padding: 20px;
    }
}