.carousel-control-prev, .carousel-control-next {
    background-color: #FF69B4; /* Change to your desired background color */
    border-radius: 50%; /* Optional: make the buttons circular */
    width: 50px; /* Optional: adjust the size */
    height: 50px; /* Optional: adjust the size */
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    background-color: #22AFB9; /* Change to your desired hover background color */
}

.mymap{
    height:470px;
}

.mypic{
    height:470px;
}

@media only screen and (orientation: portrait) {
    .mymap {
        height:240px;
    }
    .mypic {
        height:325px;
    }
}
@media only screen and (orientation: landscape) and (max-height: 500px) {
    .mymap {
        height:300px;
    }
    .mypic {
        height:300px;
    }
}

@media only screen and (orientation: landscape) and (max-height: 660px) {
    .mymap {
        height:380px;
    }
    .mypic {
        height:380px;
    }
}