
.accessibility-section {
    background-size: cover;
    background-position: center 30%;
   
}

.accessibility-wrapper{
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
}

.section-title{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:50px;
}

.section-title h2{
    font-size:42px;
    font-weight:300;
    letter-spacing:2px;
}

.accessibility-wrapper{
    display:flex;
    gap:40px;
}

/* LEFT */

.locations-panel{
    width:35%;
    height:540px;
    overflow-y:auto;
    padding-right:20px;
}

.location-item{
    border-bottom:1px solid #eee;
    padding:25px 0;
}

.location-header{
    display:flex;
    justify-content:space-between;
    cursor:pointer;
}

.location-header h3{
    font-size:16px;
    letter-spacing:3px;
    color:#FFA500;
}

.location-content{
    max-height:0;
    overflow:hidden;
    transition:.4s;
}

.location-item.active .location-content{
    max-height:200px;
    margin-top:20px;
}

.location-content p{
    color:#ffffff;
    line-height:1.9;
  
}


.location-item.active .location-content{
    max-height: 200px;
    margin-top: 20px;
    opacity: 1 !important;
}


.process-section1{
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 100px 0 20px;
}

.process-section1:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #222222;
	opacity: 0.85;
	content: "";
	z-index: 1;
}

.process-section1 .auto-container,
.process-section1 .accessibility-wrapper,
.process-section1 .locations-panel,
.process-section1 .location-item,
.process-section1 .location-content {
	position: relative;
	z-index: 2;
}

.process-section1 .sec-title{
	margin-bottom: 90px;
}

/* RIGHT */

.map-container{
    width:65%;
    position:relative;
    margin-top: 40px; /* adjust value */
}

.map-container img{
    width:100%;
    height: 400px; /* increase as needed */
    object-fit: cover;
    display:block;
}

/* MARKERS */

.marker{
    position:absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#FFA500;
    cursor:pointer;
    transition:.3s;
}

.marker::before{
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.6);
}

.marker.active{
    background:#e27602;
    transform:scale(1.3);
}

/* Marker positions */

.marker-1{
    top:12%;
    left:35%;
}

.marker-2{
    top:32%;
    left:58%;
}

.marker-3{
    top:54%;
    left:9%;
}

.marker-4{
    top:51%;
    left:76%;
}

.marker-5{
    top:62%;
    left:81%;
}















/* =================================
   ACCESSIBILITY SECTION - MOBILE/responsive adjustments
   ================================= */

@media (max-width: 768px) {

    .process-section1 {
        padding: 60px 0;
    }

    .process-section1 .sec-title {
        margin-bottom: 40px;
        text-align: center;
    }

    .accessibility-wrapper {
        flex-direction: column;
        width: 100%;
        gap: 30px;
    }

    /* Locations Panel */
    .locations-panel {
        width: 100%;
        height: auto;
        overflow-y: visible;
        padding-right: 0;
        order: 2;
    }

    .location-item {
        padding: 15px 0;
    }

    .location-header h3 {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .location-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    /* Map */
    .map-container {
        width: 100%;
        margin-top: 0;
        order: 1;
    }

    .map-container img {
        width: 100%;
        height: auto;
        min-height: 250px;
        object-fit: cover;
    }

    /* Markers smaller */
    .marker {
        width: 14px;
        height: 14px;
    }

    .marker::before {
        inset: -4px;
    }

}