*{
    font-family: "poppin", sans-serif;
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
}
.container{
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
}
body{
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}
:root{
    --reb-black-color:#89162F;
    --yellow-color: #DBB128;
    --reb-main-color:#E12810;
    --gray-color:#B1B5C3;
    --big-borde-hero: 30vh;
    --main-liner-gradeint: linear-gradient(to right,var(--reb-black-color),var(--reb-main-color));
}
header{
    width: 100%;
    z-index: 100;
    height: 10vh;
    background: #ffffff5f;
    backdrop-filter: blur(5px);
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
}
.mobile-navbar{
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    z-index: 150;
    top: 0;
    left:  -100vw;
    align-items: center;
    justify-content: center;
    background: #89162fab;
    border-radius: 0 0 750% 0;
    transition: .5s all ease-in;
    /* background: #000; */
}
.mobile-navbar.active{
    border-radius: 0;
    left: 0;
}
.mobile-navbar .close-element{
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    /* background: #DBB128; */
}
.nav-bar{
    width: 95%;
    /* background: green; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-bar .logo{
    width: 58px;
}
.nav-bar .link{
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: end;
}
.nav-bar .link ul{
    display: flex;
    gap: 40px;
    list-style: none;
}
.nav-bar .link ul li a{
    color: #000;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: 400;
    cursor: pointer;
    font-size: 15px;
}
.nav-bar .link ul li a:current,
.nav-bar .link ul li a:hover,
.nav-bar .link ul li a.active{
    color: var(--reb-black-color);
}
.nav-bar .right-icons ul{
    display: flex;
    align-items: center;
    align-items: center;
    list-style: none;
    position: relative;
    gap: 10px;
}
.nav-bar .right-icons ul li{
    color: var(--reb-black-color);
}
.nav-bar .right-icons ul li.search-container{
    background: transparent;
    padding: 0;
    border-radius: 50px;
    transition: .3s all ease-in;
}
.nav-bar .right-icons ul li.search-container:hover{
    padding: 5px 10px;
    /* position: absolute; */
    /* left: calc(0 - 70px); */
    background: #E7E7E7BD;
}
.nav-bar .right-icons ul li.search-container input{
    border: none;
    width: 0;
    background: none;
    outline: none;
    transition: .3s all ease-in;
}
.nav-bar .right-icons ul li.search-container:hover input{
    width: 150px;
}
.nav-bar .right-icons{
    display: flex;
    align-items: center;
}
.nav-bar .right-icons .bars{
    /* display: none; */
    width: 30px;
    margin: 15px;
    height: 30px;
    display: none;
    align-items: center;
    flex-direction: column;
    gap: 3px;
}
.nav-bar .right-icons .bars.active{
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000;
}
.nav-bar .right-icons .bars .bar{
    background: #000;
    height: 3px;
    border-radius: 10px;
    width: 100%;
    transition: .3s all ease;
}
.nav-bar .right-icons .bars .bar.i-1{
    width: 90%;
    transition: .3s all ease;
}
.nav-bar .right-icons .bars:hover .bar.i-1{
    width: 50%;
}
.nav-bar .right-icons .bars .bar.i-2{
    width: 50%;
    transition: .3s all ease;
}
.nav-bar .right-icons .bars:hover .bar.i-2{
    width: 90%;
}
.nav-bar .right-icons .bars .bar.i-3{
    width: 100%;
    transition: .3s all ease;
}
.nav-bar .right-icons .bars:hover .bar.i-3{
    width: 50%;
}
.nav-bar .right-icons .bars .bar.i-4{
    width: 50%;
    transition: .3s all ease;
}
.nav-bar .right-icons .bars:hover .bar.i-4{
    width: 90%;
}
.hero-slide-section{
    /* background: url("") no-repeat center center;
    background-size: cover; */
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* flex-direction: column; */
    /* gap: 30px; */
    position: relative;
}
.hero-slide-section .one-slide{
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s all ease-in;
}
.hero-slide-section .one-slide.active{
    visibility: visible;
    opacity: 1;
}
.hero-slide-section .background-img{
    width: 100%;
    height: 100%;
    object-position: 0 -5px;
    top: 0;
    left: 0;
    z-index: -1;
    transform: scaleX(-1);
    /* opacity: 0.3; */
    object-fit: cover;
    position: absolute;
}
.hero-slide-section .one-slide:nth-child(2) .background-img{
    transform: scaleX(1);
}
.hero-slide-section h1{
    opacity: 1;
}
/* .hero-slide-section .content{
    background: #89162F;   
} */
.hero-slide-section .content{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /* background: linear-gradient(30deg, #89162fd0 0%, transparent 100%); */
    background: linear-gradient(
        to right,
        rgba(137, 22, 47, 0.9) 0%,
        rgba(137, 22, 47, 0.7) 30%,
        rgba(137, 22, 47, 0.4) 55%,
        rgba(137, 22, 47, 0.1) 75%,
        transparent 100%
    );
}
.hero-slide-section .content .texture-side{
    width: 30%;
    display: flex;
    padding-left: 15vh;
    padding-top: 15vh;
    flex-direction: column;
    align-items: baseline;
    gap: 50px;
}
.hero-slide-section .one-slide:nth-child(2) .content .texture-side{
    gap: 30px;
}
.hero-slide-section .content .texture-side h1{
    font-size: 30px;
    color: #fff;
}
.hero-slide-section .content .texture-side p{
    font-size: 18px;
    color: #fff;
    font-weight: 400;
}
.hero-slide-section .content .texture-side p span{
    font-size: 18px;
    font-weight: 700;
}
.hero-slide-section .one-slide .texture-side .services button{
    background: #ffffff2b;
    padding: 10px;
    margin: 5px;
    color: #fff;
    border-radius: 10px;
}
.hero-slide-section .content .texture-side button{
    background: var(--main-liner-gradeint);
    padding: 15px;
    font-size: 20px;
    border: none;
    border-radius: 5px;
    color: #fff;
}
.hero-slide-section .dots{
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 50px;
    gap: 5px;
    justify-content: center;
}
.hero-slide-section .dots .dot{
    background: #fff;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    transition: all .3s ease-in;
    cursor: pointer;
}

.hero-slide-section .dots .dot.bigger{
    width: 9px;
    height: 9px;
}
/* .hero-slide-section .dots .dot:hover{
} */
.hero-slide-section .dots .dot.active{
    background: var(--reb-black-color);
    width: 18px;
    height: 18px;
}

.hero-slide-section .content .image-side .circle-one{
    width: 70vh;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: -15vh;
    border: var(--big-borde-hero) solid transparent;
    background: linear-gradient(#0000000e, #0000000e) padding-box,linear-gradient(to right, #0000000e 30%, #fff 60%) border-box;
}
.hero-slide-section .content .image-side .circle-two{
    width: 50vh;
    height: 50vh;
    border-radius: 50%;
    background: #00000018;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-slide-section .content .image-side .circle-one .circle-two img{
    width: 30vh;
    height: 30vh;
    border-radius: 50%;
    border: 1vh solid #fff;
}
/* about style sheet starts here */
.our-service,
.contact-us,
.about-us{
    display: flex;
    flex-direction: column;
    /* width: 100%; */
    padding: 13vh 0;
    /* height: 80vh; */
    align-items: center;
    position: relative;
    overflow: hidden;
    justify-content: center;
}
.about-us .about-us-bg-image{
    opacity: 0.2;
    width: 100%;
    top: -600px;
    position: absolute;
}
.contact-us .main-title,
.our-service .main-title,
.about-us .main-title{
    font-size: 40px;
    text-transform: capitalize;
    padding-bottom: 30px;
    color: var(--reb-black-color);
}
.about-us .bg{
    width: 100%;
    padding-top: 5rem;
    display: flex;
    flex-direction: column;
    z-index: 1;
    align-items: center;
    background: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, #ffffff 27%);

}
.about-us .bg .content{
    display: flex;
    user-select: none;
    position: relative;
    width: 75%;
    margin-top: 2.5rem;
    /* background: var(--reb-black-color); */

    /* justify-content: space-between; */
    flex-direction: column;
    align-items: center;
}
.about-us .content .tab-button{
    display: flex;
    align-self: self-start;
    gap: 20px;
}
.about-us .content .tab-button button{
    font-size: 15px;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    background: transparent;
    border: none;
}
.about-us .content .tab-button button:hover,
.about-us .content .tab-button button.active{
    border-bottom: 2px solid var(--reb-black-color);
    color: var(--reb-black-color);
}
.about-us .content .tabs{
    position: relative;
    width: 100%;
    /* padding-top: ; */
    height: 50vh;
}
.about-us .content .tab{
    position: absolute;
    opacity: 0;
    transition: .5s all ease-in;
}
.about-us .content .whoweare{
    display: flex;
    gap: 3vw;
    height: 40vh;
    padding: 4em 0;
    justify-content: space-between;
    align-items: end;
    visibility: hidden;
}
.about-us .content  .whoweare .image-side{
    width: 40vw;
    height: 53.5vh;
    /* background: var(--reb-black-color); */
    display: flex;
    justify-content: space-between;
    position: relative;
}
.about-us .content .whoweare .image-side img{
    /* backdrop-filter: blur(500px); */
    filter: saturate(0);
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--reb-black-color);
    border-radius: 15px;
    transition: .3s all ease-in;
}
.about-us .content .whoweare .image-side img:hover{
    filter: saturate(1);
}
.about-us .content .whoweare .image-side img:first-child{
    width: 320px;
}
.about-us .content .whoweare .image-side img:last-child{
    width: 245px;
}
.about-us .content .whoweare .image-side .dots{
    position: absolute;
}
.about-us .content .whoweare .text-side{
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.about-us .content .whoweare .text-side p{
    font-size: 20px;
}
.about-us .content .whoweare .text-side span{
    font-weight: 700;
}
.about-us .content .leadership{
    display: flex;
    justify-content: space-between;
    gap: 100px;
    /* background: var(--reb-black-color); */
    justify-self: center;
    margin: 5rem;
    /* align-self: center; */
    align-items: center;
    visibility: hidden;
}
.about-us .content .leadership .single-leader{
    display: flex;
    width: 30vw;
    height: 250px;
    justify-content: space-between;
    /* background: #89162F; */
    align-items: center;
}
.about-us .content .leadership .single-leader img{
    width: 200px;
    height: 250px;
    filter: saturate(0);
    object-fit: cover;
    border-radius: 14px;
    transition: .3s all ease-in;
}
.about-us .content .leadership .single-leader img:hover{
    filter: saturate(1);
}
.about-us .content .leadership .single-leader .text{
    width: 45%;
    height: 100%;
    /* background: #E12810; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.about-us .content .leadership .single-leader .text h1{
    color: var(--reb-black-color);
    font-size: 20px;
}
.about-us .content .leadership .single-leader .text p{
    font-size: 15px;
    font-weight: 400;
}
.about-us .content .leadership .single-leader .text button{
    border: none;
    border-top: 2px solid var(--reb-black-color);
    border-left: 2px solid var(--reb-black-color);
    background: transparent;
    width: 120px;
    border-radius: 8px;
    padding: 10px;
    color: var(--reb-black-color);
    transition: .3s all ease-in;
}
.about-us .content .leadership .single-leader .text button:hover{
    background: var(--reb-black-color);
    /* border: none; */
    color: #fff;
}
.about-us .model-container{
    position: fixed;
    user-select: none;
    background: #0000004a;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    z-index: 200;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: .3s all ease-out;
}
.model-container.elias-baingana.active{
    visibility: visible;
    opacity: 1;
}
.model-container.francis-nsengiyumva.active{
    visibility: visible;
    opacity: 1;
}
.about-us .model-container .middle-modal{
    background: #ffffff;
    width: 65vw;
    padding: 5rem;
    border-radius: 50px;
    display: flex;
    align-items: start;
    justify-content: space-between;
}
.about-us .model-container .middle-modal .image-side{
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.about-us .model-container .middle-modal .image-side img{
    width: 100%;
    height: 311;
    border-radius: 20px;
}
.about-us .model-container .middle-modal .image-side h1{
    color: var(--reb-black-color);
    font-size: 30px;
}
.about-us .model-container .middle-modal .icon-div h1{
    font-size: 300px;
    margin: 0;
    margin-top: 0;
    padding: 0;
    padding-top: 0;
    color: var(--reb-black-color);
}

.about-us .model-container .middle-modal .content-div{
    width: 50%;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* our service style starts here ---------------------------------------------------*/
.contact-us .heading-captions,
.our-service .heading-captions{
    display: flex;
    justify-content: center;
    width: 80%;
    height: 15vh;
    gap: 20px;
    align-items: center;
}
.our-service .heading-captions svg{
    /* width: 75px; */
    height: 100%;
}
.our-service .heading-captions p{
    font-size: 20px;
    width: 60%;
    margin-left: 15px;
    text-align: center;
}
.our-service .services-container{
    display: flex;
    width: 100vw;
    /* background: #000; */
    padding: 10vh;
    /* height: 55vh; */
    gap: 2.5rem;
    /* align-items: center; */
    justify-content: center;
    flex-wrap: wrap;
}
.our-service .services-container .service-row{
    display: flex;
    /* background: #000; */
    flex-direction: column;
    gap: 2.5rem;
    margin: 0 5rem 0 0;
    /* overflow: hidden; */
    height: 100%;
    /* padding: 0; */
    align-items: start;
    justify-content: space-between;
    position: relative;
    width: 300px;
    height: 600px;
}
.our-service .services-container .service-row:hover .red-background{
    background: var(--reb-black-color);
    height: 100%;
}
.our-service .services-container .service-row .service{
    display: flex;
    flex-direction: column;
    width: calc(100% - 5.1rem);
    height: 200px;
    border: 1px solid var(--reb-black-color);
    /* justify-content: space-between; */
    padding: 2.5rem;
    border-radius: 14px;
    gap: 2rem;
    transition: .3s all ease-out;
}
.our-service .services-container .service-row .service:first-child{
    top: 0;
}
.our-service .services-container .service-row .service:last-child{
    bottom: 0;
}
.our-service .services-container .service-row .service ul{
    display: none;
    color: #fff;
}

.our-service .services-container .service-row .service.active{
    height: 100%;
    position: absolute;
    visibility: visible;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 1;
    background: var(--reb-black-color);
}
.our-service .services-container .service-row .service.active ul{
    display: block;
}
.our-service .services-container .service-row .service h1{
    color: var(--reb-black-color);
    font-size: 24px;
}
.our-service .services-container .service-row:hover .service h1{
    color: #fff;
}
.our-service .services-container .service-row .service p{
    font-size: 15px;
}
.our-service .services-container .service-row:hover .service p{
    color: #fff;
}
/* our contacts starts here------------------------------------------ */
.contact-us{
    background: #FFF9E6;
}
.contact-us .content-section{
    display: flex;
    gap: 50px;
    justify-content: center;
    width: 80vw;
}
.contact-us .content-section svg{
    width: 400px;
}
.contact-us .content-section .text-side{
    background: #FFF9E6;
    display: flex;
    flex-direction: column;
    padding: 35px 25px;
    gap: 1rem;
    width: 265px;
}
.contact-us .content-section .text-side .contact-type{
    display: flex;
    gap: 10px;
}
.contact-us .content-section .text-side .contact-type i{
    font-size: 25px;
    color: var(--reb-black-color);
}
.contact-us .content-section .text-side .contact-type p{
    font-size: 12px;
}
.contact-us .content-section .form-side{
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact-us .content-section .form-side h1{
    font-size: 25px;
    font-weight: 400;
    color: var(--reb-black-color);
    text-transform: capitalize;
}
.contact-us .content-section .form-side .input{
    color: #B1B5C3;
    width: 100%;
}
.contact-us .content-section .form-side .input label{
    font-size: 15px;
    font-weight: 600;
}
.contact-us .content-section .form-side textarea,
.contact-us .content-section .form-side input{
    margin-top: 5px;
    border-radius: 7px;
    display: block;
    width: 100%;
    border: 1px solid var(--gray-color);
}
.contact-us .content-section .form-side input{
    height: 40px;
}
.contact-us .content-section .form-side textarea{
    height: 110px;
    padding-top: 10px;
    padding-left: 10px;
}
.contact-us .content-section .form-side button{
    width: 100px;
    margin-top: 5px;
    background: none;
    color: var(--reb-black-color);
    border: 1px solid var(--reb-black-color);
    border-radius: 7px;
    padding: 10px;
}
/* footer section start here---------------------------------------------------------------------- */
footer{
    width: 100%;
    border-top: 20px solid #751328;
}

footer .content{
    width: 100%;
    padding: 3rem 0;
    background: var(--reb-black-color);
    display: flex;
    align-items: center;
    justify-content: space-around;
}
footer .content img{
    width: 120px;
}
footer .content .column-content-container{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
footer .content .column-content-container h1{
    color: #fff;

}
footer .content .column-content-container .links{
    color: #fff;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
footer .content .column-content-container .links .colum{
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    display: flex;
    justify-content: space-between;
    text-decoration: none;
}
footer .content .column-content-container .links .colum a{
    font-size: 13px;
    color: #fff;
    text-decoration: none;
}
footer .content .icons{
    display: flex;
    gap: 5px;
    flex-direction: column;
}
footer .content .icons a{
    color: #fff;
    text-decoration: none;
    font-size: 20px;
}
footer .copy-right{
    padding: 10px 5rem;
    color: #858585;
    font-size: 14px;
}
footer .content.mobile{
    display: none;
}
/* js applications styles  */
.about-us .content #tab{
    transition: .3s all ease;  
}
.tab.active{
    visibility: visible;
}
.whoweare.tab.active{
    opacity: 1;
    visibility: visible;
}
.leadership.tab.active{
    opacity: 1;
    visibility: visible;
}
#whoweare-btn.active{
    border-bottom: 2px solid var(--reb-black-color);
    color: var(--reb-black-color);
}
#leadership-btn.active{
    border-bottom: 2px solid var(--reb-black-color);
    color: var(--reb-black-color);
}