.marker-wrapper {

    height: 774px;

    position: relative;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    background-size: 100% 100%;

    background-position: center center;

    background-repeat: no-repeat

}

#marker-1 .marker-wrapper {
    background-image:url("./../images/media/ic-mekan-pc.webp")
}
#marker-2 .marker-wrapper {
    background-image:url("./../images/media/dis-mekan-pc.webp")
}

#marker-1-mobil .marker-wrapper {
    background-image:url("./../images/media/ic-mekan-pc.webp")
}
#marker-2-mobil .marker-wrapper {
    background-image:url("./../images/media/dis-mekan-pc.webp")
}


@media only screen and (max-width: 1200px) {

    #marker-1 .marker-wrapper {
        height: 550px;
        background-image:url("./../images/media/ic-mekan-tablet.webp")
    }
    #marker-2 .marker-wrapper {
        height: 550px;
        background-image:url("./../images/media/dis-mekan-tablet.webp")
    }

    #marker-1-mobil .marker-wrapper {
        height: 550px;
        background-image:url("./../images/media/ic-mekan-tablet.webp")
    }
    #marker-2-mobil .marker-wrapper {
        height: 550px;
        background-image:url("./../images/media/dis-mekan-tablet.webp")
    }

}



@media only screen and (max-width: 767px) {
    #marker-1 .marker-wrapper {
        height: 175px;
        background-image:url("./../images/media/ic-mekan-telefon.webp")
    }
    #marker-2 .marker-wrapper {
        height: 175px;
        background-image:url("./../images/media/dis-mekan-telefon.webp")
    }
    #marker-1-mobil .marker-wrapper {
        height: 175px;
        background-image:url("./../images/media/ic-mekan-telefon.webp")
    }
    #marker-2-mobil .marker-wrapper {
        height: 175px;
        background-image:url("./../images/media/dis-mekan-telefon.webp")
    }
}



.marker-wrapper .octf-btn::before,

.marker-wrapper .octf-btn::after {

    display: none;

}



.marker-wrapper .octf-btn {

    padding: 5px 10px;

}





@media only screen and (max-width: 1200px) {

    .marker-wrapper {

        height: 550px

    }

}



@media only screen and (max-width: 767px) {

    .marker-wrapper {

        height: 175px

    }

}







.marker-wrapper .image-pointer {

    position: absolute;

    cursor: pointer

}



#marker-1 .marker-wrapper .image-pointer.pointer-01 {
    top: 71%;
    left: 81%;
}
#marker-1-mobil .marker-wrapper .image-pointer.pointer-01 {
    top: 71%;
    left: 81%;
}

@media only screen and (max-width: 767px) {

    #marker-1 .marker-wrapper .image-pointer.pointer-01 {
        top: 63%;
        left: 81%;
    }

    #marker-1 .marker-wrapper .image-pointer.pointer-01 .pointer-box {
        left: -69px;
    }

    #marker-1-mobil .marker-wrapper .image-pointer.pointer-01 {
        top: 63%;
        left: 81%;
    }

    #marker-1-mobil .marker-wrapper .image-pointer.pointer-01 .pointer-box {
        left: -69px;
    }

}





#marker-1 .marker-wrapper .image-pointer.pointer-02 {
    top: 75%;
    left: 9%;
}
#marker-1-mobil .marker-wrapper .image-pointer.pointer-02 {
    top: 75%;
    left: 9%;
}

@media only screen and (max-width: 767px) {

    #marker-1 .marker-wrapper .image-pointer.pointer-02 {
        top: 75%;
    left: 9%;
    }

    #marker-1 .marker-wrapper .image-pointer.pointer-02 .pointer-box {
        left: 90px;
    }

    #marker-1-mobil .marker-wrapper .image-pointer.pointer-02 {
        top: 71%;
        left: 9%;
    }

    #marker-1-mobil .marker-wrapper .image-pointer.pointer-02 .pointer-box {
        left: 90px;
    }

}


#marker-1 .marker-wrapper .image-pointer.pointer-03 {
    top: 75%;
    left: 49%;
}
#marker-1-mobil .marker-wrapper .image-pointer.pointer-03 {
    top: 75%;
    left: 49%;
}

@media only screen and (max-width: 767px) {

    #marker-1 .marker-wrapper .image-pointer.pointer-03 {
        top: 75%;
    left: 49%;
    }

    #marker-1 .marker-wrapper .image-pointer.pointer-03 .pointer-box {
        left: 0px;
    }

    #marker-1-mobil .marker-wrapper .image-pointer.pointer-03 {
        top: 71%;
        left: 48.5%;
    }

    #marker-1-mobil .marker-wrapper .image-pointer.pointer-03 .pointer-box {
        left: 0px;
    }

}





#marker-2 .marker-wrapper .image-pointer.pointer-01 {
    top: 71%;
    left: 81%;
}
#marker-2-mobil .marker-wrapper .image-pointer.pointer-01 {
    top: 71%;
    left: 81%;
}

@media only screen and (max-width: 767px) {

    #marker-2 .marker-wrapper .image-pointer.pointer-01 {
        top: 63%;
        left: 81%;
    }

    #marker-2 .marker-wrapper .image-pointer.pointer-01 .pointer-box {
        left: -69px;
    }

    #marker-2-mobil .marker-wrapper .image-pointer.pointer-01 {
        top: 63%;
        left: 81%;
    }

    #marker-2-mobil .marker-wrapper .image-pointer.pointer-01 .pointer-box {
        left: -69px;
    }

}







.marker-wrapper .image-pointer i {

    width: 30px;

    height: 30px;

    line-height: 26px;

    border: 2px solid #fff;

    text-align: center;

    font-size: 12px;

    display: inline-block;

    color: #1a1a1a;

    border-radius: 50%;

    background-color: #fff

}



@media (max-width:767px) {

    .marker-wrapper .image-pointer i {

        width: 15px;

        height: 15px;

        line-height: 13px;

        font-size: 8px;

    }

}



.marker-wrapper .image-pointer .pointer-box {

    width: 200px;

    padding: 15px 20px;

    background-color: #fff;

    position: absolute;

    bottom: 40px;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    text-align: center;

    opacity: 0;

    visibility: hidden;

    -webkit-transition: all .3s linear;

    -o-transition: all .3s linear;

    transition: all .3s linear;

    -webkit-box-shadow: 2px 4px 8px rgba(73, 73, 73, .15);

    box-shadow: 2px 4px 8px rgba(73, 73, 73, .15);

    z-index: 5;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.marker-wrapper .image-pointer .pointer-box .name {

    margin-bottom: 0

}



.marker-wrapper .image-pointer .pointer-box .name a {





    font-family: Titillium Web;

    font-size: 20px;

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: 0.03em;

    text-align: center;

    color: #1a1a1a;



}



@media only screen and (min-width: 992px)and (max-width: 1199px) {

    .marker-wrapper .image-pointer .pointer-box .name a {

        font-size: 20px

    }

}



.marker-wrapper .image-pointer .pointer-box .name a:hover {

    color: #000;

}











.marker-wrapper .image-pointer:hover .pointer-box {

    opacity: 1;

    visibility: visible

}