.OurHistoryFirstSection{
    align-content: center;
    text-align: center;
    background: transparent url('../../../img/background/ourHistoryFirstSection.webp') 0% 0% no-repeat ;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    height: 350px;
    position: relative;
    padding-top: 2%;
}
.redCircle{
    position: absolute;
    left: 135.5%;
    transform: translate(-50%, 100%);
    width: 10px;
    /*Adjustthesizeoftheinnercircle*/height: 10px;
    /*Adjustthesizeoftheinnercircle*/background-color: #ED1C24 ;
    /*Innercirclecolor*/border-radius: 50%;
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    -ms-transform: translate(-50%, 100%);
    -o-transform: translate(-50%, 100%);
}
.start{
    margin-top: -46px;
    font: normal normal normal 28px/162px KunKun;
    color: #848484;
    text-align: center;
}
.now{
    margin-top: -47px;
    font: normal normal normal 28px/20px KunKun;
    color: #848484;
    text-align: center;
}
.OurHistoryFirstSection.rtlDirection{
    align-content: center;
    text-align: center;
     background: transparent url('../../../img/background/ourHistoryFirstSectionAr.webp') 0% 0% no-repeat ; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    height: 324px;
    position: relative;
    padding-top: 2%;
}




.OurHistoryFirstSection .our_history_header{
    text-align: center;
    font: normal normal bold 40px/50px KunKun;
    letter-spacing: 0px;
    color: #ffffff;
    text-transform: uppercase;
    opacity: 1;
    padding-top: 3%;
}
.OurHistoryFirstSection .breadcrumb-div{
    margin-bottom:-40px;
    position: absolute;
    bottom: 5%;
    padding-left: 2%;
}
.OurHistoryFirstSection .breadcrumb-div .breadcrumb-item{
    text-align: left;
    font: normal normal bold 17px/29px KunKun;
    letter-spacing: 0px;
    color: #000000;
    text-transform: capitalize;
    opacity: 1;
}



*,
*::before,
*::after {
    box-sizing: border-box;
}
.mainDiv{
    background-image: url(../../../img/background/ourHistorySecondSection.svg);
    background-size: 170%;
}
.ourHistorySecondSection {
    /* background-size: 100%; */
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    /* background-image: url(../../../img/background/ourHistorySecondSection.svg); */
}

.timeline {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 15px 0;
}
.footerMaskGroup{
    margin-bottom: -30px;
    width: 100%;
    height: 100%;
}
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: #ED1C24;
    top: 2%;
    bottom: auto;
    left: 50%;
    margin-left: -1px;
    height: 92.1%;
}
.time-line-container {
    padding: 5px 30px;
    position: relative;
    background: inherit;
    width: 50%;
    padding-top: 0%;
}

.time-line-container.left {
    bottom: 32px;
    left: -8%;
}
.time-line-container.right {
    top:-27px;
    left: 55%;
    padding-left: 5%;
    /* padding-bottom: 8%; */
}
/* .time-line-container::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    top: calc(40% - 50px);
    right: -11px;
    background: #ED1C24 0% 0% no-repeat padding-box;
    border-radius: 25px;
    z-index: 1;
} */
.circle-container {
    top: auto;
    left: auto;
    margin: 0 auto;
    position: relative;
    width: 100px;


}
.time-line-container .date {
    text-align: center;
}
.circle-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    border: 2px solid #ED1C24 ;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.inner-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 19px; /* Adjust the size of the inner circle */
    height: 19px; /* Adjust the size of the inner circle */
    background-color: #ED1C24 ; /* Inner circle color */
    border-radius: 50%;
}
.time-line-container.right::after {
    left: -10px;
}
.time-line-container.right .date{
    text-align: left;
    font: normal normal normal 48px/42px KunKun;
    letter-spacing: 0px;
    color: #ED1C24;
    text-transform: capitalize;
    opacity: 1;
}
.time-line-container.right .data{
    text-align: left;
    font: normal normal normal 18px/24px KunKun;
    letter-spacing: 0px;
    color: #000000;
    text-transform: capitalize;
    opacity: 1;
}
.time-line-container.left .date{
    text-align: right;
    font: normal normal normal 48px/42px KunKun;
    letter-spacing: 0px;
    color: #ED1C24;
    text-transform: capitalize;
    opacity: 1;
}
.time-line-container.left .data{
    text-align: right;
    font: normal normal normal 18px/24px KunKun;
    letter-spacing: 0px;
    color: #000000;
    text-transform: capitalize;
    opacity: 1;
}
.ourHistoryThirdSection{
    margin-top: -12%;
    align-content: center;
    text-align: center;
    background: transparent url('../../../img/background/OurHistoryFooter.webp') 0% 0% no-repeat ;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    height: auto;
    position: relative;
    padding-bottom: 5%;
}
.ourHistoryThirdSection.rtlDirection{
    margin-top: -12%;
    align-content: center;
    text-align: center;
    background: transparent url('../../../img/background/OurHistoryFooterAr.webp') 0% 0% no-repeat ;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    height: auto;
    position: relative;
    padding-bottom: 5%;
}
.ourHistoryThirdSection .contact-us-div{
    padding-top: 20%;
}
.ourHistoryThirdSection .contact-us-div .contact-us-header{
    text-align: center;
    font: normal normal bold 31px/45px KunKun;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}
.ourHistoryThirdSection .contact-us-div .contact-us-text{
    text-align: center;
    font: normal normal normal 19px/24px KunKun;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}
.ourHistoryThirdSection .contact-us-div .contact-us-button{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 3px solid #ED1C24;
    border-radius: 35px;
    opacity: 1;
    text-align: center;
    font: normal normal normal 22px/30px KunKun;
    letter-spacing: 0px;
    color: #242424;
    width: fit-content;
    height: 45px;
    margin-top: 2%;
}
.ourHistoryThirdSection .contact-us-div .contact-us-button:hover{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 5px solid #B70D1A;
    border-radius: 35px;
    opacity: 1;
    text-align: center;
    font: normal normal bold 22px/30px KunKun;
    letter-spacing: 0px;
    color: #B70D1A;
}
.OurHistoryFirstSection .our_history_text{
    display: none;
    color: #313131;
    font: normal normal normal 16px/22px KunKun;
}

.whatsIcon{
    width: 35px;
    height: 35px;
    margin-top: -22px;
}
.leftDiv{
    font: bold normal normal 23px/27px KunKun;
    text-align: center;
    bottom: 42px;
    position: relative; /* Add this line */
    padding: 12px;
    left: -25%;
    max-width: 391px;
    border-radius: 26px;
    border: 3px solid red;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    -ms-border-radius: 26px;
    -o-border-radius: 26px;
}
.leftDivText{
    font: normal normal bold 16px/23px KunKun;
    text-align: center;
    bottom: 57px;
    position: relative; /* Add this line */
    padding: 50px;
    left: -292px;
    max-width: 440px;
    border-radius: 26px;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    -ms-border-radius: 26px;
    -o-border-radius: 26px;
}
.rightDivText{
    font: normal normal bold 16px/23px KunKun;
    text-align: center;
    bottom: 54px;
    position: relative; /* Add this line */
    padding: 50px;
    left: 25%;
    max-width: 440px;
    border-radius: 26px;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    -ms-border-radius: 26px;
    -o-border-radius: 26px;
}

.rightDiv{
        text-align: center;
        font: normal normal bold 23px/27px KunKun;
        bottom: 52px;
        position: relative; /* Add this line */
        padding: 13px;
        left: 25%;
        max-width: 390px;
        border-radius: 26px;
        border: 3px solid red;
        -webkit-border-radius: 26px;
        -moz-border-radius: 26px;
        -ms-border-radius: 26px;
        -o-border-radius: 26px;
}
.inner-circle::before, .inner-circle::after {
    content: "● ● ● ●"; /* Add three dots */
    font-size: 14px; /* Adjust the font size as needed */
    color: #808080; /* Dot color */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.inner-circle::before {
    left: -55px; /* Adjust the position of dots */
}

.inner-circle::after {
    right: -55px; /* Adjust the position of dots */
}

.leftDiv, .rightDiv, .leftDivText, .rightDivText {
    position: relative;
    max-width: 30%;
    margin: -21px auto;
    text-align: center;
}

@media screen and (max-width: 1000px)
{
    .OurHistoryFirstSection.rtlDirection{
        align-content: center;
        text-align: center;
        /* background: transparent url('../../../img/background/ourHistoryFirstSectionAr.png') 0% 0% no-repeat ; */
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -o-background-size: 100% 100%;
        background-size: 100% 100%;
        height: 94px;
        position: relative;
        padding-top: 2%;
    }
    .OurHistoryFirstSection .our_history_header{
        text-align: center;
        font: normal normal bold 40px/50px KunKun;
        letter-spacing: 0px;
        color: #513732;
        text-transform: uppercase;
        opacity: 1;
        padding-top: 3%;
    }
    .OurHistoryFirstSection{
        align-content: center;
    text-align: center;
    background: none !important;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    height: 105px;
    position: relative;
    padding-top: 2%;
    z-index: -1; /* Set a lower z-index */
    }
    .ourHistoryThirdSection .contact-us-div{
        padding-top: 20%;
    }
    .ourHistoryThirdSection .contact-us-div .contact-us-header{
        text-align: center;
        font: normal normal bold 18px/45px KunKun;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
    }
    .ourHistoryThirdSection .contact-us-div .contact-us-text{
        text-align: center;
        font: normal normal normal 16px/24px KunKun;
        letter-spacing: 0px;
        color: #FFFFFF;
        opacity: 1;
    }
    .ourHistoryThirdSection .contact-us-div .contact-us-button{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 3px solid #ED1C24;
        border-radius: 35px;
        opacity: 1;
        text-align: center;
        font: normal normal normal 22px/30px KunKun;
        letter-spacing: 0px;
        color: #242424;
        width: fit-content;
        height: 45px;
        margin-top: 2%;
    }
    .ourHistoryThirdSection .contact-us-div .contact-us-button:hover{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 5px solid #B70D1A;
        border-radius: 35px;
        opacity: 1;
        text-align: center;
        font: normal normal bold 22px/30px KunKun;
        letter-spacing: 0px;
        color: #B70D1A;
    }
    .OurHistoryFirstSection .our_history_text{
        display: none;
        color: #313131;
        font: normal normal normal 16px/22px KunKun;
    }

    .OurHistoryFirstSection .breadcrumb-div .breadcrumb-item
    {
        display: none;
    }
    .circle-container::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 18px;
        height: 18px;
        border: 2px solid #ED1C24 ;
        border-radius: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }
    .inner-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        /*Adjustthesizeoftheinnercircle*/height: 12px;
        /*Adjustthesizeoftheinnercircle*/background-color: #ED1C24 ;
        /*Innercirclecolor*/border-radius: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
}
    .redCircle{
        position: absolute;
        left: 128.5%;
        transform: translate(-50%, 100%);
        width: 10px;
        /*Adjustthesizeoftheinnercircle*/height: 10px;
        /*Adjustthesizeoftheinnercircle*/background-color: #ED1C24 ;
        /*Innercirclecolor*/border-radius: 50%;
        -webkit-transform: translate(-50%, 100%);
        -moz-transform: translate(-50%, 100%);
        -ms-transform: translate(-50%, 100%);
        -o-transform: translate(-50%, 100%);
}
    .time-line-container.left {
        bottom: 22px;
    }
    .inner-circle::after {
        right: -40px; /* Adjust the position of dots */
    }
    .inner-circle::before {
        left: -40px; /* Adjust the position of dots */
    }
    .inner-circle::before, .inner-circle::after {
        content: "● ● ● ●"; /* Add three dots */
        font-size: 9px; /* Adjust the font size as needed */
        color: #808080; /* Dot color */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .rightDiv{
        text-align: center;
        font: normal normal bold 14px/20px KunKun;
        bottom:74px;
        position: relative; /* Add this line */
        padding: 11px;
        left: 30%;
        max-width: 390px;
        border-radius: 26px;
        border: 3px solid red;
        -webkit-border-radius: 26px;
        -moz-border-radius: 26px;
        -ms-border-radius: 26px;
        -o-border-radius: 26px;
}
    .leftDiv{
        font: bold normal normal 14px/20px KunKun;
        text-align: center;
        bottom: 73px;
        position: relative; /* Add this line */
        padding: 11px;
        left: -29%;
        max-width: 391px;
        border-radius: 26px;
        border: 3px solid red;
        -webkit-border-radius: 26px;
        -moz-border-radius: 26px;
        -ms-border-radius: 26px;
        -o-border-radius: 26px;
    }
    .leftDivText{
        font: normal normal bold 11px/19px KunKun;
        text-align: center;
        bottom: 55px;
        position: relative; /* Add this line */
        padding: 10px;
        left: -29%;
        max-width: 40% !important;
        border-radius: 26px;
        -webkit-border-radius: 26px;
        -moz-border-radius: 26px;
        -ms-border-radius: 26px;
        -o-border-radius: 26px;
    }
    .rightDivText{
        font: normal normal bold 11px/19px KunKun;
        text-align: center;
        bottom: 64px;
        position: relative; /* Add this line */
        padding: 18px;
        left: 29%;
        max-width: 40% !important;
        border-radius: 26px;
        -webkit-border-radius: 26px;
        -moz-border-radius: 26px;
        -ms-border-radius: 26px;
        -o-border-radius: 26px;
    }
    .leftDiv, .rightDiv, .leftDivText, .rightDivText {
        position: relative;
        max-width: 33%;
        margin: -21px auto;
        text-align: center;
    }
    .time-line-container.right::after {
        left: -10px;
    }
    .time-line-container.right .date{
        margin-left: 19px;
        text-align: left;
        font: normal normal normal 35px/55px KunKun;
        letter-spacing: 0px;
        color: #ED1C24;
        text-transform: capitalize;
        opacity: 1;
    }
    .time-line-container.right .data{
        text-align: left;
        font: normal normal normal 18px/24px KunKun;
        letter-spacing: 0px;
        color: #000000;
        text-transform: capitalize;
        opacity: 1;
    }
    .time-line-container.left .date{
        text-align: right;
        font: normal normal normal 35px/55px KunKun;
        letter-spacing: 0px;
        color: #ED1C24;
        text-transform: capitalize;
        opacity: 1;
    }
    .time-line-container.left .data{
        text-align: right;
        font: normal normal normal 18px/24px KunKun;
        letter-spacing: 0px;
        color: #000000;
        text-transform: capitalize;
        opacity: 1;
    }
    .time-line-container.right {
    top:-27px;
    left: 55%;
    padding-left: 5%;
    /* padding-bottom: 8%; */
}
}