:root{
    --white: #ffffff;
    --black: #000000;
    --primary: #291d4b; /* rgba(41,29,75,255) */
    --secondary: #0da8e8; /* rgba(13,168,232,255) */
}


body{
    background-color: var(--white);
}

a{
    text-decoration: none;
}


.hr-40{
    width: 40%;
    height: 3px;
    background-color: var(--secondary);
}

.bprimary{
    background-color: var(--primary);
    color: var(--white);
}

.bprimary:hover{
    background-color: var(--primary);
    color: var(--white);
}

.txt-primary{
    color: var(--primary);
}


.txt-secondary{
    color: var(--secondary);
}

.btnprimary{
    background-color: var(--primary);
    color: var(--white);
}

.btnprimary:hover{
    background-color: var(--primary);
    color: var(--white);
}

.top-bar{
    background-color: var(--secondary);
    color: var(--white);
}

.main-menu{
    background-color: var(--white);
}

.main-menu .navbar-nav .nav-item{
    padding: 0 10px 0 10px;
}

.main-menu .navbar-nav .nav-item .nav-link{
    color: var(--primary);
}


.top-services div:nth-child(odd){
    background-color: var(--secondary);
    color: var(--white);
}


.top-services div:nth-child(odd):hover{
    background-color: var(--white);
    color: var(--secondary);
}

.top-services div:nth-child(even){
    background-color: var(--primary);
    color: var(--white);
}

.top-services div:nth-child(even):hover{
    background-color: var(--white);
    color: var(--primary);
}

.service-card img{
    background-color: var(--white);
    padding: 10px;
    width: 120px;
    height: 120px;
    border-radius: 60px;
}



.carousel-caption{
    position: absolute;
    top: 18%;
    left: 10%;
    width: 50%;
}

.carousel-caption h1{
    text-align: start;
    font-size: 2.5em;
    font-weight: 600;
    color: var(--primary);
}


.carousel-caption p{
    text-align: start;
    font-size: 1.5em;
    font-weight: 200;
    line-height: 1.2em;
    color: var(--white);
}

.carousel-caption button{
    float: start;
    
}


.home-values{
    /* width: 50%; */
    /* display: flex;
    justify-content: space-around;
    align-items: start;
    margin: 10px 0; */
}

.home-values .values-card:nth-child(1){
    /* margin-top: -30px; */
    color: var(--white);
    background-color: var(--primary);
}

.home-values .values-card:nth-child(2){
    /* margin-top: 80px; */
    color: var(--white);
    background-color: var(--secondary);
}

.home-values .values-card:nth-child(3){
    margin-top: 40px;
}

.home-values .values-card{
    margin: 10px 10px;
}

.hm-service-card{
    background-color: #ffffff;
    border-bottom: 0;
    border-top: 2px solid var(--secondary);
    border-left: 2px solid var(--secondary);
    border-right: 0;
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    box-shadow: 6px 9px 0px 0px var(--secondary);



    
    
}

.hm-service-card .icon{
    width: 15%;
}

.hm-service-card .plus{
    position: absolute;
    top: 5%;
    right: 5%;
    display: none;
}

.hm-service-card .counter{
    position: absolute;
    bottom: -10%;
    right: 0;
    font-size: 4em;
    z-index: -1;
    opacity: 0.4;
}

.hm-service-card:hover{
    overflow: hidden;
    background-color: rgba(13,168,232,0.1);
    box-shadow: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.hm-service-card:hover .plus{
    /* position: absolute;
    top: 5%;
    right: 5%; */
    display: block;
}

.hm-service-card:hover .counter{
    display: none;
    /* position: absolute;
    bottom: -10%;
    right: 0;
    font-size: 4em;
    z-index: 1;
    color: var(--secondary);
    opacity: 0.8; */
}

.stats-card{
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 1;
}


.stats-card::before{
    content: "";
    position: absolute;
    top: 8%;
    right: -20%;
    width: 50%;
    height: 50%;
    background-image: url('../images/icons/dental.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.4;
}


.bed-capacity::before{
    content: "";
    position: absolute;
    top: 8%;
    right: -20%;
    width: 50%;
    height: 50%;
    background-image: url('../images/icons/beds.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.4;
}


.specialists-stat::before{
    content: "";
    position: absolute;
    top: 8%;
    right: -20%;
    width: 50%;
    height: 50%;
    background-image: url('../images/icons/doctors.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.4;
}


.theaters-stat::before{
    content: "";
    position: absolute;
    top: 8%;
    right: -20%;
    width: 50%;
    height: 50%;
    background-image: url('../images/icons/theater.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.4;
}


.years-stats::before{
    content: "";
    position: absolute;
    top: 8%;
    right: -20%;
    width: 50%;
    height: 50%;
    background-image: url('../images/icons/years.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.4;
}



.stats-card::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
    height: 1000%;
    background: var(--secondary);
    z-index: -1;
    transform-origin: 0% 0%;
    transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
    transform: translateY(10%) translateX(16%) rotate(-45deg);
    transition: transform .3s;
}

.stats-card:hover h2{
    color: var(--white);
}

.stats-card:hover::before{
    z-index: 999;
    opacity: 1;
}

.stats-card:hover::after{
    transform: translateY(10%) translateX(-158px) rotate(-44deg);
}


.home-clinics{
    background-image: linear-gradient(to left, rgba(41,29,75,0.7), rgba(13,168,232,0.4) ), url('../images/sliders/1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #ffffff;
    height: 400px;
}


.breadcrumb{
    background-image: linear-gradient(to right, rgb(255, 255, 255, 0.9), rgb(255, 255, 255, 0.6), rgb(255, 255, 255, 0.3)), url('../images/bg/breadcrumb.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


.mission-vision{
    display: flex;
    justify-content: space-around;
    align-items: center; 
}

.mission-vision .card:nth-child(1){
    margin-right: 30px;
}

.mission-icon{
    width: 15%;
}

.vision-icon{
    width: 30%;
}


.abt-statistics{
    background-image: linear-gradient(to right, rgb(255, 255, 255, 0.9), rgb(255, 255, 255, 0.7), rgb(255, 255, 255, 0.6)), url('../images/bg/breadcrumb.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.abt-values{
    box-shadow: 4px 5px 0px 0px var(--primary);
}

.abt-values:hover{
    border-bottom: 0;
    border-top: 2px solid var(--secondary);
    border-left: 2px solid var(--secondary);
    border-right: 0;
    /* box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1); */
    box-shadow: 6px 9px 0px 0px var(--secondary);
}


.abt-values:hover .value-num{
    color: var(--secondary);
    -webkit-text-fill-color: var(--secondary);
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: var(--secondary);
}

.value-num{
    color: transparent;
    font-size: 3rem;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: var(--secondary);
}


.testimonial-quote{
    width: 50px;height: 50px;background-color: #0da8e8; color: #ffffff; border-radius: 25px;margin: -20px auto;
}

.testimonial-quote h1{
    text-align: center;padding-top: 10px;
}


.contact-card{
    position: relative;
    background: #ffffff;
    color: var(--primary);
    overflow: hidden;
    z-index: 1;
    padding: 0px;
}

.contact-card h5{
    color: var(--primary);
}

.contact-card::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
    height: 1000%;
    background: var(--secondary);
    z-index: -1;
    transform-origin: 0% 0%;
    transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
    transform: translateY(10%) translateX(16%) rotate(-45deg);
    transition: transform .3s;
}

.contact-card:hover h5{
    color: var(--white);
}

.contact-card:hover p{
    color: var(--white);
}

.contact-card:hover::after{
    transform: translateY(10%) translateX(-158px) rotate(-44deg);
}


footer{
    background-color: var(--primary);
    color: #ffffff;
}
:root {
    --white: #ffffff;
    --black: #000000;
    --primary: #291d4b;
    --secondary: #0da8e8;
    --fontUI: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --fontPoppins: "Poppins", Sans-serif;

}

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
section {
    display: block;
    unicode-bidi: isolate;
}
*, ::after, ::before {
    box-sizing: border-box;
}
.top-bar {
    background-color: var(--secondary);
    color: var(--white);
}
.breadcrumb {
    background-image: linear-gradient(to right, rgb(255, 255, 255, 0.9), rgb(255, 255, 255, 0.6), rgb(255, 255, 255, 0.3)), url('../images/bg/breadcrumb.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
}
*, ::after, ::before {
    box-sizing: border-box;
}
div {
    display: block;
    unicode-bidi: isolate;
}
.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
}
.row_about{
    row-gap:20px;
}
@media only screen and (max-width:600px){
    .row_about > div{
        width:700px;
    }
}
#section-1{
    position: absolute;
    width: 100%;
    display:grid;
    grid-template-columns: repeat(2,1fr);
    display: flex;
    gap: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 0;
}
#section-1 div{
    margin-left: 20px;
    padding: 10px 10px 10px;
    background-color: #c5eeff;
    border-radius: 10px;
    margin-top: 20px;
    position: relative;
    box-shadow: 10px 10px 10px rgba(0, 0, 0,0.3);
}
#section-1 div:hover{
    box-shadow: 10px 10px 10px rgba(0, 0, 0,0.6);
}
#section-1 img{
    object-position: center;
    aspect-ratio: 3/2;
    width: 100%;
    height: 100%;
    position: relative;
}



.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
}
.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}
.col-6 {
    flex: 0 0 auto;
    width: 50%;
}
.text-center {
    text-align: center !important;
}

#footerhome{
    

}


@media only screen and (min-width: 1024px){
    #widthchange{
    width:30%;
}
#homeImages{
    display:flex;
    padding:20px 0  20px;
    flex-direction:column;
}
#homeImages img{
    margin:auto;
    width:90%;
    border-radius:10px;
}
#homeImgDesc #desc{
      width:100%;
      margin:40px 0 0 ;
      height:60%;
    
  }
  #mkubwa{
    display:flex;
    flex-direction: column;
    width: 100%;
    gap:20px;
    position:relative;
    margin-top:50%;
    margin: auto;
}
#homeImageD{
    display: flex;
    flex-direction: row;
    
    position:relative;
    flex-wrap: nowrap;
    height:70%;
    width:90%;
}
#homeImageD .Dimg{
    width:100%;
    margin:10px 30px 0;

}
.Dimg img{
    width:100%;
    object-fit:contain;
    border-radius:10px;
    object-position:center;
    aspect-ratio: 3/2;
}
.desc span{
font:500 20px sans-serif;
border-bottom:1.7px solid #ccc;
margin:10px 6px 15px;
width:700px;
padding:3px 0 5px;
}
.desc p{
        font-family: var(--bs-body-font-family);
}
.desc{
        background-color: var(--secondary);
    display: flex;
    width: 170%;
    margin:auto;
    border-radius: 10px;
    color:white;
    padding:10px 10px 120px;
    height:100%;
    flex-direction: column;
}
.one{
    background-color: var(--primary);
}


}


/*section{*/
/*    display:flex;*/
/*    flex-direction: column;*/
/*    width: 70%;*/
/*    gap:20px;*/
/*    position:relative;*/
/*    margin-top:50%;*/
/*    margin: auto;*/
/*    bordeR:1px solid red;*/
/*}*/
/*#homeImageD{*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    flex-wrap: nowrap;*/
/*    gap:20px;*/
/*    width:80%;*/
/*}*/
/*#homeImageD .Dimg{*/
/*    width:20%;*/
/*    bordeR:1px solid red;*/

/*}*/
/*.Dimg img{*/
/*    width:100%;*/

/*}*/
/*.desc span{*/
/*font:500 20px sans-serif;*/
/*border-bottom:1.7px solid #ccc;*/
/*margin:10px 6px 0;*/
/*width:100px;*/
/*}*/
/*.desc p{*/
/*        font-family: var(--bs-body-font-family);*/
/*}*/
/*.desc{*/
/*        background-color: var(--secondary);*/
/*    display: flex;*/
/*    width: 50%;*/
/*    border-radius: 10px;*/
/*    color:white;*/
/*    flex-direction: column;*/
/*}*/



#homeImages{
    
    display:flex;
    padding:20px 0  20px;
    flex-direction:column;
}
#homeImages img{
    margin:auto;
    width:60%;
    border-radius:10px;
}
#homeImages img:nth-child(2){
    margin-top:30px;
}
  #homeImgDesc #desc{

      width:100%;
      margin:40px 0 0 ;
      height:40%;
    
  }
  
  


/* Mobile - Small Devices */
@media only screen and (max-width: 480px) {
    #section-1 {
        position: absolute;
        width:96%;
        display:grid;
        top:-30px;
        gap: 10px; 
        grid-template-columns: repeat(1,1fr);
    }
    .navbar-brand img{
        width:100%;
        aspect-ratio: 3/2.;
    }
    .navbar-brand{
        display: inline;
        width:50%;
   
    }
    .container-fluid{
        display: flex;
        flex-direction: row;
    }
    .navbar{
        display:flex;
    }

    #section-1 div {
        max-width:100%;
        margin-left: 10px;
        padding: 10px 10px 10px;
        height:100%;
        background-color: #c5eeff;
        border-radius: 10px;
        margin-top: 0;
        flex-direction: column;
        position: relative;
        box-shadow: 10px 10px 10px rgba(0, 0, 0,0.3);
    }
    #section div p{  
        font-size: 27px;
        margin-left: 20px;
        font-weight: 600;
        margin-top: 90px;
    }
    #section-1 img{
        object-position: center;
        aspect-ratio: 3/2;
        height: 90%;
        margin:auto;
        border-radius: 10px;
    }
    
    
    
    
/*    s{*/
/*    display:flex;*/
/*    flex-direction: column;*/
/*    width: 70%;*/
/*    gap:20px;*/
/*    position:relative;*/
/*    margin-top:50%;*/
/*    margin: auto;*/
/*    bordeR:1px solid red;*/
/*}*/
/*#homeImageD{*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    flex-wrap: nowrap;*/
/*    gap:10px;*/
/*    ;*/
/*}*/
/*#homeImageD .Dimg{*/
/*    width:20%;*/
/*    bordeR:1px solid red;*/

/*}*/
/*.Dimg img{*/
/*    width:100%;*/

/*}*/
/*.desc span{*/
/*font-family: var(--bs-body-font-family);*/
/*font-weight: 500;*/
/*font-size: calc(1.275rem + .3vw);*/
/*border-bottom:1.7px solid #ccc;*/
/*margin:10px 6px 0;*/
/*width:100px;*/
/*}*/
/*.desc p{*/
/*    font-family: var(--bs-body-font-family);*/
    
/*}*/
/*.desc{    background-color: var(--secondary);*/
/*    display: flex;*/
/*    width: 50%;*/
/*    border-radius: 10px;*/
/*    color:white;*/
/*    flex-direction: column;*/
/*}*/

/*    #widthchange{*/
/*    width:50%;*/
/*}*/
/*#homeImages{*/
/*    display:flex;*/
/*    padding:20px 0  20px;*/
/*    width:100%;*/
/*    flex-direction:column;*/
/*}*/
/*#homeImages img{*/
/*    margin:auto;*/
/*    width:90%;*/
/*    border-radius:10px;*/
/*}*/
/*#homeImgDesc #desc{*/
/*      width:100%;*/
/*      margin:40px 0 0 ;*/
/*      height:40%;*/
    
/*  }*/
  
  
    #mkubwa{
    display:flex;
    flex-direction: column;
    width: 100%;
    gap:20px;
    position:relative;
    margin-top:50%;
    margin: auto;
}
#homeImageD{
    display: flex;
    flex-direction: row;
    
    position:relative;
    flex-wrap: wrap;
    height:70%;
    gap:10px;
    width:100%;
}
#homeImageD .Dimg{
    width:100%;
    margin:10px 30px 0;

}
.Dimg img{
    width:100%;
    object-fit:contain;
    border-radius:10px;
    object-position:center;
    aspect-ratio: 3/2;
}
.desc span{
font:500 20px sans-serif;
border-bottom:1.7px solid #ccc;
margin:10px 6px 15px;
width:210px;
padding:3px 0 5px;
}
.desc p{
        font-family: var(--bs-body-font-family);
        font-size:calc(.8rem +.3vw);
}
.desc{
        background-color: var(--secondary);
    display: flex;
    width: 80%;
    margin:auto;
    border-radius: 10px;
    color:white;
    padding:10px 10px 20px;
    height:100%;
    flex-direction: column;
}
.one{
    background-color: var(--primary);
}
}

@media only screen and (max-width:480px){
    .mission-vision .card:nth-child(1){
    margin-right: 0px;
}
    .mission-vision{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
#fakmi-row{
    display: flex;
    flex-direction: column;
    row-gap: 20px;

}
}
@media only screen and (min-width:600px){
        #fakmi-row{
   display:grid;
    grid-template-columns:repeat(3,1fr);
    row-gap: 20px;
        

}
}


/* Mobile - Medium Devices */
@media (min-width:481px) and (max-width: 768px) {
    #section-1 {
        position: absolute;
        width:100%;
        display:grid;
        height:130%;
        gap: 10px;
        margin-top:-10%;
        grid-template-columns: repeat(2,1fr);
    }
    .navbar-brand img{
        width:100%;
        aspect-ratio: 3/2.;
    }
    .navbar-brand{
        display: inline;
        width:20%;
   
    }
    .container-fluid{
        display: flex;
        flex-direction: row;
    }
    .navbar{
        display:flex;
    }

    #section-1 div {
        max-width: 100%;
        margin-left: 5px;
        padding: 1px 1px 10px;
        height: 100%;
        width:100%;
        background-color: #c5eeff;
        border-radius: 10px;
        position: relative;
        box-shadow: 10px 10px 10px rgba(0, 0, 0,0.3);
    }
    #section-1 img{
        object-position: center;
        aspect-ratio: 3/2.;
        height: 90%;
        border-radius: 10px;
    }
    #section div p{
        font-size: 17px;
        margin-left: 20px;
        font-weight: 600;
        margin-top: 20px;
    /* font */
    }
      #mkubwa{
    display:flex;
    flex-direction: column;
    width: 100%;
    gap:20px;
    position:relative;
    margin-top:50%;
    margin: auto;
}
#homeImageD{
    display: flex;
    flex-direction: row;
    
    position:relative;
    flex-wrap: nowrap;
    height:70%;
    width:90%;
}
#homeImageD .Dimg{
    width:100%;
    margin:10px 30px 0;

}
.Dimg img{
    width:100%;
    object-fit:contain;
    border-radius:10px;
    object-position:center;
    aspect-ratio: 3/2;
}
.desc span{
font:500 20px sans-serif;
border-bottom:1.7px solid #ccc;
margin:10px 6px 15px;
width:300px;
padding:3px 0 5px;
}
.desc p{
        font-family: var(--bs-body-font-family);
}
.desc{
        background-color: var(--secondary);
    display: flex;
    width: 70%;
    margin:auto;
    border-radius: 10px;
    color:white;
    padding:10px 10px 10px;
    height:100%;
    flex-direction: column;
}
.one{
    background-color: var(--primary);
}
}

 @media (min-width:769px) and (max-width:  998px){ 

    #section-1{
        position: absolute;
        width: 100%;
        display: flex;
        gap: 10px;
        top: 80%;
        flex-direction: row;
        flex-wrap: wrap;        border: 1px solid red;
        margin-top: 0;
        grid-template-columns: repeat(3,1fr);
    }
    .navbar-brand img{

        width:100%;
        aspect-ratio: 3/2.;
    }
    #section-1 div{
        width: 30%;
        margin-left: 20px;
        padding: 10px 10px 10px;
        height: 40%;
        background-color: #c5eeff;
        border-radius: 10px;
        margin-top: 20px;
        position: relative;
        box-shadow: 10px 10px 10px #0000004d;
    }
    #section-1 div:hover{
        box-shadow: 10px 10px 10px #00000099;
    }
    #section-1 img{
        object-position: center;
        aspect-ratio: 3/2.;
        width: 100%;
        height: 100%;
        position: relative;
 }
 #section div p{
    font-size: 17px;
    margin-left: 20px;
    font-weight: 600;
    margin-top: 10px;
/* font */


}

      #mkubwa{
    display:flex;
    flex-direction: column;
    width: 100%;
    gap:20px;
    position:relative;
    margin-top:50%;
    margin: auto;
}
#homeImageD{
    display: flex;
    flex-direction: row;
    
    position:relative;
    flex-wrap: nowrap;
    height:70%;
    width:90%;
}
#homeImageD .Dimg{
    width:100%;
    margin:10px 30px 0;

}
.Dimg img{
    width:100%;
    object-fit:contain;
    border-radius:10px;
    object-position:center;
    aspect-ratio: 3/2;
}
.desc span{
font:500 20px sans-serif;
border-bottom:1.7px solid #ccc;
margin:10px 6px 15px;
width:300px;
padding:3px 0 5px;
}
.desc p{
        font-family: var(--bs-body-font-family);
}
.desc{
        background-color: var(--secondary);
    display: flex;
    width: 70%;
    margin:auto;
    border-radius: 10px;
    color:white;
    padding:10px 10px 10px;
    height:100%;
    flex-direction: column;
}
.one{
    background-color: var(--primary);
}


}

@media  (min-width:999px) and (max-width:1023px)  {
    #section-1{
        position: absolute;
        width: 100%;
        display: flex;
        gap: 10px;
        flex-direction: column;
        flex-wrap: wrap;
        margin-top: 0;
    }
    .navbar-brand img{

        width:10%;
        aspect-ratio: 3/2.;
    }
    #section-1 div{
        width: 30%;
        margin-left: 20px;
        padding: 10px 10px 10px;
        height: 40%;
        background-color: #c5eeff;
        border-radius: 10px;
        margin-top: 20px;
        position: relative;
        box-shadow: 10px 10px 10px #0000004d;
    }
    #section-1 div:hover{
        box-shadow: 10px 10px 10px #00000099;
    }
    #section-1 img{
        object-position: center;
        aspect-ratio: 3/2;
        width: 100%;
        height: 100%;
        position: relative;
 }
 #section div p{
    font-size: 17px;
    margin-left: 20px;
    font-weight: 600;
    margin-top: 20px;
/* font*/
}
      #mkubwa{
    display:flex;
    flex-direction: column;
    width: 100%;
    gap:20px;
    position:relative;
    margin-top:50%;
    margin: auto;
}
#homeImageD{
    display: flex;
    flex-direction: row;
    
    position:relative;
    flex-wrap: nowrap;
    height:70%;
    width:90%;
}
#homeImageD .Dimg{
    width:100%;
    margin:10px 30px 0;

}
.Dimg img{
    width:100%;
    object-fit:contain;
    border-radius:10px;
    object-position:center;
    aspect-ratio: 3/2;
}
.desc span{
font:500 20px sans-serif;
border-bottom:1.7px solid #ccc;
margin:10px 6px 15px;
width:300px;
padding:3px 0 5px;
}
.desc p{
        font-family: var(--bs-body-font-family);
}
.desc{
        background-color: var(--secondary);
    display: flex;
    width: 70%;
    margin:auto;
    border-radius: 10px;
    color:white;
    padding:10px 10px 10px;
    height:100%;
    flex-direction: column;
}
.one{
    background-color: var(--primary);
}


    

}

 @media (min-width:1024px) and (max-width:  1440px){ 
        #section-1 {
        position: absolute;
        width:100%;
        display:grid;
        height:130%;
        gap: 10px;
        margin-top:-10%;
        grid-template-columns: repeat(3,1fr);
    }
    .navbar-brand img{
        width:100%;
        aspect-ratio: 3/2.;
    }
    .navbar-brand{
        display: inline;
        width:20%;
   
    }
    .container-fluid{
        display: flex;
        flex-direction: row;
    }
    .navbar{
        display:flex;
    }

    #section-1 div {
        max-width: 40%;
        margin-left: 5px;
        padding: 1px 1px 10px;
        height: 40%;
        width:100%;
        background-color: #c5eeff;
        border-radius: 10px;
        position: relative;
        box-shadow: 10px 10px 10px rgba(0, 0, 0,0.3);
    }
    #section-1 img{
        object-position: center;
        aspect-ratio: 3/2;
        height: 90%;
        border-radius: 10px;
    }
    #section div p{
        font-size: 17px;
        margin-left: 20px;
        font-weight: 600;
        margin-top: 20px;
    /* font */
    }


 
 }