﻿.section {
    /* padding-inline: 8% !important; */
}

.rel-top{
    /* padding-inline: 8% !important; */

}

.relationship-content{
    /*padding-inline: 8% !important;*/
    gap: 54px !important;
    display: flex;
    flex-direction: column;
}

.relationship-section{
    background: #CEEDDE;
}

.img-header {
    max-width: 100%;
    position: relative;
    text-align: center;
    /* padding-inline: 8% !important; */
}

.img-header img {
    max-width: 100%;
    width: 100%;
    border-radius: 25px;

}

.img-header h6 {
    font-size: 1.8vw ;
    max-width: 100% ;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1B8354;
    z-index: 5;
    font-family: "IBMPlexSans-bold" !important;

}

.content-half {
    /* width: 44% !important; */
    border-radius: 25px 0px 0px 25px;

}

.image-half {
    /* width: 40% !important; */
    width: 100% ;
    border-radius: 25px;

}

.slide {
    place-content: center;
}

.bot-prev-btn {
    left: 0% !important;
    direction: rtl;

}

.bot-next-btn {
    right: 0% !important;
    direction: rtl;

}

.parag {
    background: unset !important;
    /* padding-inline: 8% !important; */
    text-align: start ;
    text-align-last: start ;
}

.slider-container {
    box-shadow: none;
}

.section>div {
    gap: 54px;
}

.mid-img-container {
    /* padding-inline: 8% !important;
    text-align: center; */
}

.mid-img-container img {
    /* height: 300px !important;
    width: auto !important; */
}

.mid-text {
    height: 100% ;
    width: 100% ;
    text-align: center ;
}

.rel-mid {
    background: url(/en/Relationship/PublishingImages/Other/SaudiHistory.jpg) top center no-repeat !important;
    background-size: cover !important ;
    padding: 2vw 0 ;
    color: #fff;
    ;
    /* background-size: contain;
    max-height: 100% ;
    height: 500px;
    width: 80% ;
    place-self: center;
    color: whitesmoke;
    background-repeat: no-repeat !important; */
    border-radius: 25px;
}

.mid-start-side {
    place-self: center ;
    width: 100% ;
    height: 100% ;
    align-items: center;
    padding: 2em;
    text-align: start;
}

.mid-start-side h1 {
    font-size: 1.8vw ;
    padding-inline-start: 0.5em;
    font-family: 'IBMPlexSans-light' !important;

}

.mid-end-side {
    place-self: center;
    height: 100% ;
    display: inline-flex;
    text-align: start;
    flex-direction: column;
}

.mid-end-side h6 {
    place-self: center;
    line-height: 2em ;
    display: inline-flex;
    font-size: 1vw ;
    font-family: 'IBMPlexSans-light' !important;
    padding: 1vw ;
    text-align: start ;
    text-align-last: start ;
}

.mid-end-bottom {
    justify-content: end;
    padding-inline: 4% ;
    /* padding-top: 2em !important; */
}

.mid-end-bottom a {
    color: whitesmoke ;
    font-size: 1vw ;

}

.rel-bot-title {
    padding-bottom: 24px ;
}

.rel-bot-title h2 {
    font-size: 1.4vw ;
    color: #1B8354;
    text-align: center;
    font-family: 'IBMPlexSans-bold' !important;

}

.bot-img-container img {
    border-radius: 50%;
    width: 150px;

}

.bot-img-container {
    display: flex;
    flex-direction: column;
    width: 25%;
    align-items: center;
}

.bot-img-container  h6{
    color: #1B8354 ;
    font-family: 'IBMPlexSans-bold' ;
    padding-bottom: 0.4em ;
    padding-top: 0.4em;

}

.bot-slider-container {
    display: flex;
    flex-direction: row ;
    gap: 0px !important;
    width: 100% ;
    height: 250px;
    position: relative;
    overflow: hidden;
    /* border-radius: 20px; */
}

.bot-slider-container>div {
    display: flex;
    flex-direction: row ;
    align-items: start ;
    text-align: center;
    gap: 2em ;
}

.bot-slider-container .navigation{
    gap: 1em ;
}

.bot-text-container {
    box-shadow: 0 4px 6px #E8EBEA;
    padding: 2em;
    border-radius: 25px;
    width: 100%;
    height: 70%;
    /* top: 22px; */
    display: inline-flex
;
    position: relative;
    align-items: center;
}

.bot-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-100%);
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #2c3e50;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 3px;
}

.bot-slider-btn:hover {
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.bot-nav-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background 0.3s ease;
}

.bot-nav-btn.active {
    background: lightgray;
}

.bot-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    padding-inline: 5vw;
}

.bot-slide.active {
    opacity: 1;
}

.section-title{
    padding-inline: 8% ;
    padding-bottom: 1em ;
    display: flex ;
}

.image-half::before{
    background: unset ;
}

.image-half::after{
    background: unset ;
}

.rel-mid h1, .rel-mid h6{
    color: #fff;
}

.bot-img-container> * {
    margin: 0;
}