/* innova */
:root {
    --mainColor:#cb2127;
    --mainTextColor:#7c7c7c; 
}
.text-main {
    color: var(--mainColor) !important ;
} 
*{
    box-sizing: border-box;
}
.but-main{
    font-family: "Open Sans", Sans-serif;
    width: max-content;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    background-color: var(--mainColor);
    border-radius: 5px 5px 5px 5px;
    border: 0px !important;
    padding: .5rem  1rem;
}
.but-main a{
    color: white;
}
a{
    text-decoration: none;
    text-transform: capitalize;
}
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* color: var(--mainTextColor); */
    /* color: var(--maincolor); */
}
@media screen and (max-width: 768px) { /* 0 to 768px  */ 
    
    .section-title{
        display: flex;
        justify-content: center;
        /* background-color: #0092db !important; */
        
    }
    .section-title-h2{
        font-family: "Open Sans", Sans-serif;
        text-transform: uppercase;
        color: var(--mainColor);
        font-size: 1.5rem;
        font-weight: 900;
        width: min-content;
        text-align: center;
        /* background-color: #37b44e; */
        width: max-content;
    }
}
@media screen and (min-width: 768px) { /* 768px to up */
    
    .section-title{
        height: 7rem;
        margin-bottom: 3rem;
        /* background-color: #211f1f !important; */
    }
    .section-title-h2{
        font-family: "Open Sans", Sans-serif;
        text-transform: uppercase;
        color: var(--mainColor);
        width: min-content;
        font-size: 3rem;
        font-weight: bold;
        text-align: left;
        /* background-color: #37b44e; */
    }
}

/* -------------------------------------------------------------------------- */
/*                                   navbar                                   */
/* -------------------------------------------------------------------------- */
#navbar {
    box-shadow: 1px -10px 20px 0px;
}
.navbar-nav li{
    margin: 0 1rem;
    text-transform: capitalize;
    font-weight: bold;
}
.navbar-nav li a{
    color: black;
}
.navbar-nav li button a{
    color: white !important;
}
.navbar-nav a:hover{
    color: var(--mainColor);
}
.navbar-nav button{
    transform: scale(1);
    transition: all 1s;
}
.navbar-nav button:hover{
    transform: scale(.90);
    transition: all 1s;
}

/* -------------------------------------------------------------------------- */
/*                                   header                                   */
/* -------------------------------------------------------------------------- */
.carousel-item{
    padding: 6rem;
}
.carousel-item-photo{
    /* position: absolute; */
    width: 100%;
    height: 120vh;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain ;
    background-size: cover ;
}
.photo1{
    background-image: url(../imgs/12-years-of-exp_4x-scaled.webp);
}
.photo2{
    background-image: url(../imgs/Ecommerce_4x-scaled.webp);
}
.photo3{
    background-image: url(../imgs/group_4459_4x-scaled.webp);
}
.photo4{
    background-image: url(../imgs/Erp_4x-scaled.webp);
}
.caption-content{
    position: absolute;
    text-align: left;
    top:30%;
    left: 10%;
}
/* .carousel-caption h2,h3,p{
    font-size: 200%;
    font-size: 400%;
} */
.carousel-caption h2{
    text-transform: uppercase;
    font-family: 'Open Sans';
    color: #CB2127;
    font-size: 450%;
}
.carousel-caption h3{
    text-transform: uppercase;
    font-family: 'Open Sans';
    margin-bottom: 3rem;
    font-size: 450%;
}
.carousel-caption p{
    text-transform: uppercase;
    font-family: 'Open Sans';
    line-height: 2.5rem;
    font-size: 250%;
}
.carousel-but{
    position: absolute;
    bottom: 25%;
    left: 10%;
}
/* =============================== */
/* -------------------------------------------------------------------------- */
/*                                page-counter                                */
/* -------------------------------------------------------------------------- */
.spcial-section-title{
    display:flex;
    align-items: center;
    text-align: center;
    /* margin-bottom: 2rem; */
}
/* .section-title-h2{
    font-family: "Open Sans", Sans-serif;
    text-transform: uppercase;
    color: var(--mainColor);
    font-size: 2.5rem;
    font-weight: bold;
    width: min-content;
    text-align: left;
    background-color: #37b44e;
} */
.counter-details{
    background-color: #211f1f!important;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    text-transform:capitalize;
    
    
}
.counter-details p{
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    align-items:center; 
    
    
}
@media screen and (max-width: 768px) { /* 0 to 768px  */ 
    
    .spcial-section-title{
        justify-content: center;
    }
    .counter-details{
        width: 45%;
        margin: 2%;
        height: 7rem;
        
    }
}
@media screen and (min-width: 768px) { /* 768px to up */
    
    .spcial-section-title{
        /* background-color: #bf0022 !important; */
        width: 20%;
        height: 7rem;
    }
    .counter-details{
        /* background-color: blue !important; */
        width: 18%;
        height: 7rem;
        margin: 0 1%; 
    }
}
.countries{
    background:url(../imgs/group-20@3x-1536x853-1.png) no-repeat center  ;
    background-size: contain;
}
/* -------------------------------------------------------------------------- */
/*                                 our-service                                */
/* -------------------------------------------------------------------------- */
#our-service .service {
    box-shadow: rgba(128, 128, 128, 0.514) 0 0 12px 2px;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 1% ;
    height: 50vh;
}
@media screen and (max-width: 768px) { /* 0 to 768px  */ 
    
    .section-title{
        display: flex;
        justify-content: center;
    }
    .service{
        background-color: #37b44e;
    }
}
@media screen and (min-width: 768px) { /* 768px to up */
    
    .section-title{
        height: 7rem;
        margin-bottom: 3rem;
    }
    .service{
        /* background-color: #37b44e; */
        width: 48%;
    }
}
/* -------------------------------------------------------------------------- */
/*                                 our-product                                */
/* -------------------------------------------------------------------------- */
.product{
    padding: 2% 1% ;
    border-radius: 10px;
    box-shadow: #ca9834 -0.1px -0.1px 1.4px 0.3px
}
.product:hover{
    box-shadow: 0px 0px 0.4px 0.4px red, 0px 0px 0.4px 0.4px red;
    
}
.product-detalis{
    display: grid;
}
.product-content{
    height: 11rem;
    margin-bottom: 3.5rem;
}
.product figure{
    padding: 1rem 2rem;
    height: 10rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product figure img{
    width: 100%;
    height: 100%;
    padding: 0 5%;
    
}
.product h2{
    width: 100%;
    font-size: x-large;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.product P{
    margin-bottom: 0;
}
.product a{
    color: var(--mainColor);
    font-weight: 700;
}
/* -------------------------------------------------------------------------- */
/*                           worked-on                          */
/* -------------------------------------------------------------------------- */
#worked-on .industries{
    display: flex;
    justify-content: space-evenly;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}
#worked-on .industries img{
    background-color: #f5d3d4;
    border-radius: 50% ;
    width: 25%;
}
#worked-on .industries h2{
    width: 60%;
    text-transform: capitalize ;
}
@media screen and (max-width : 768px){ /* 0 to 768px */
    #worked-on .industries{
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    #worked-on .industries h2{
        width: 60%;
        text-transform: capitalize ;
        font-size: large;
    }
    
} 
/* -------------------------------------------------------------------------- */
/*                                  our-work                                  */
/* -------------------------------------------------------------------------- */
#our-work a,h4,h5{
    color: #838383;
    font-size: large;
}
#our-work h3 a{
font-family: "Plus Jakarta Sans", sans-serif;
text-transform: uppercase;
font-weight: 800;
font-size: 25px;
}
#our-work h4{
    margin-top: 10px;
    font-weight: bolder;
    font: bolder large icon ;
}
#our-work h5{
    line-height: 25px;
}
/* --------------------------- */
.our-work-item-child{
    background-color: rgb(8, 19, 19);
    padding: 10px 20px 20px 20px;
    width: 48%;
    margin: 1%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}
.our-work-item-child-up{
    display: flex;
    align-items: center;
}
.our-work-item-child-up-left{
    width: 50%;
    text-align: start;
}
.our-work-item-child-up-right{
    width: 50%;
    text-align: end;
}
.our-work-item-child-up-right img{
    width: 50%;
    height: auto;
    
}
.our-work-item-child-down{
    height: 30%;
    display: flex;
    align-items: center;
}
.our-work-item-child-down-right{
    width: 50%;
    text-align: start;
}
.our-work-item-child-down-left{
    width: 50%;
    text-align: end;
    padding-right: 5%;
    
}
.our-work-item-child-down a{
        font-size: medium;
}
a button{
    color: white;
    cursor: pointer;    
}

#our-work .hauui{
    background-color: #262a35;
}
#our-work .abla-nazira{
    background-color: #bf0022;
}

#our-work .alo-moves{
    background-color: #1c1c1c;
}
#our-work .careem-bus{
    background-color: #37b44e;
}
#our-work .chillout{
    background-color: #cb2127;
}
#our-work .islamway{
    background-color: #40aadf;
}
@media screen and (max-width : 768px) {
    .our-work-item-child{
        padding: 10px 20px 20px 20px;
        width: 100%;
        margin: 1%;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
    }
    .explore{
        margin: auto;
        width: 50%;
    }
}
/* -------------------------------------------------------------------------- */
/*                                  our-blog                                  */
/* -------------------------------------------------------------------------- */
.our-blog-item-child{
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: gray 0px 0px 1.5px 0px;    
    padding: 0px;
}
.our-blog-item-child-img{
    width: 100%;
}
.our-blog-item-child-img img{
    width: 100%;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}
.our-blog-item-child #a-up{
    padding: 20px;
    width: fit-content;
    font-size:larger ;
} 
.our-blog-item-child-content{
    /* background-color: blue; */
    padding: 5%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.our-blog-item-child-content #p1,#p2{
    padding-bottom: 10px;
    color: red;
}
#p2{
    text-align: end;
}
.our-blog-item-child-content #p3{
    width: fit-content;
    height: fit-content;
}
.our-blog-item-child #a-down{
    padding: 15px;
    width: fit-content;
    font-size:larger ;
    color: red;
} 
@media screen and (max-width: 768px) { /* 0 to 768 */
    .our-blog-item-child{
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        box-shadow: gray 0px 0px 1.5px 0px;    
        padding: 0px;
        width: 100% !important;
        margin: .5%;
    }
    .our-blog-item-child-content{
        padding: 5%;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: .2rem;
        font-size: small;
    }

    
}
@media screen and (min-width: 768px) {
    .our-blog-item-child{
            width: 32% ;
            margin: .5% ;
    }
}

/* -------------------------------------------------------------------------- */
/*                            WHAT OUR CLIENTS SAY                            */
/* -------------------------------------------------------------------------- */
#sp-h2-2{
    width: 40%;
}

.carousel-item{
    width: 100%;
}
.carousel-item img{
    width: 10%;
    border-radius: 50%;
    
}
.carousel-indicators [data-bs-target] {
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    background-color: #1c1c1c;
}
@media screen and (max-width: 768px) { /* 0 to 768 */
    .carousel-item p{
        font-size: .9rem !important;
        font-weight: lighter;
        width: 100%;
}
}
/* -------------------------------------------------------------------------- */
/*                                 FEATURED ON                                */
/* -------------------------------------------------------------------------- */
.feature-item{
    /* background-color: #37b44e; */
    padding: 4% 3%;
    border: 1px gray solid;
    border-radius: 1%;
}
.feature-item:hover{
    /* background-color: #37b44e; */
    padding: 4% 3%;
    border: 1.5px red solid;
    border-radius: 1%;
}
.featured-h2{
    height: 4rem;
}
.feature-item h2{
    text-transform: uppercase;
    font-weight: 700;
    /* background-color: #37b44e; */
    margin-bottom: 0;
    padding-bottom:0 ;
    
}
.featured-content{
    height: 8rem;
}
.feature-item figure{
    /* background-color: rgb(180, 181, 186); */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10rem;
    width: auto;
}
.feature-item img{
    /* background-color: #8037b4; */
    width: 80%;
}
.feature-item a{
    color: var(--mainColor);
    font-weight: 700;
}
#sp-img-1{
    width: 30%;
}
/* -------------------------------------------------------------------------- */
/*                                 OUR CLIENTS                                */
/* -------------------------------------------------------------------------- */
.client{
    border: 1px rgba(128, 128, 128, 0.194) solid;
    display: flex;
    justify-content: center;
    align-items: center;
}
.client figure{
    height: 50%;
    width: 70%;
}
.client img{
    width: 100%;
    height: 100%;
}
/* -------------------------------------------------------------------------- */
/*                                 }OUR EVENTS                                */
/* -------------------------------------------------------------------------- */
.events{
    border: 1px rgba(0, 0, 0, 0.25) solid;
    border-radius: 10px;
    padding: 0;
}
.events:hover{
    border-radius: 10px;
    box-shadow:red 1px 1px 1px 1px, red -1px -1px 1px 1px;
    transition: all .3s;
    
}
.events figure{
    border: 1px rgba(0, 0, 0, 0.25) solid;
    border-radius: 5px;
    
}
.events figure img{
    width: 100%;
    padding: 0;
}
.event-details{
    padding: 4% 10%;
}
.event-details h2{
    text-transform: uppercase ;
    font-weight: 700;
}
.event-details a{
    color: red;
    font-weight: 600 ;
}
.event-content{
    margin-bottom: 3rem;
    /* background-color: #37b44e; */
    height: 12rem;
}
.read-more{
    /* background-color: #523339; */
}
/* -------------------------------------------------------------------------- */
/*                                OUR PARTNERS                                */
/* -------------------------------------------------------------------------- */
.partner figure{
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: gray 0 0 5px -1px;
    height: 100%;
    padding: 10%;
}
.partner figure img{
    width: 100%;
}
/* -------------------------------------------------------------------------- */
/*                                   AWARDS                                   */
/* -------------------------------------------------------------------------- */
.awards figure{
    display: flex;
    justify-content: center;
    align-items: stretch;
    box-shadow: gray 0 0 5px -1px;
    padding: 15%;
    height: 80%;
}
.awards figure img{
    width: 100%;
    height: 100%;
    
}
/* -------------------------------------------------------------------------- */
/*                              SEND US A MESSAGE                             */
/* -------------------------------------------------------------------------- */
form{
    /* background-color: rgba(210, 180, 140, 0.565); */
    /* padding: 0% 15% ; */
}
.form-data{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
form label{
    text-transform: capitalize;
    font-weight:500;
    font-size: x-large;
}
form input{
    background-color: #f5f4f4;
    border: 0;
    box-shadow: gray 0 0 5px -1px;
    height: 4rem;
    padding: 5%;
    margin-bottom: 2rem;
    
}
form textarea{
    height: 6rem;
    font-size: larger ;
}

#submit input{
    background-color: var(--mainColor);
    color: white;
    border-radius: 10px;
    font-weight: 500;
    font-size: larger;
    text-transform: uppercase;

}
/* -------------------------------------------------------------------------- */
/*                                   footer                                   */
/* -------------------------------------------------------------------------- */
#footer{
        border-top: 2px gray solid;
        padding-top: 2rem;
}
#footer .frist{
    /* background-color: #37b44e; */
    
}
#footer .frist figure{
    /* background-color: #37b44e; */
    margin-bottom: 2rem;
    
}
#footer .frist figure img{
    width: 100%;
}
#footer-P{
    font-size: larger;
    margin-bottom: 3rem;;
}
.footer-icon{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.footer-icon a i{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 0, 0);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: white;
}
.footer-icon a i:hover{
    background-color: red;
    transition: all .3s;
}
/* -------------------------------------------------------------------------- */
#footer .second{
    /* background-color: tan; */
    /* box-shadow: gray 0 0 5px -1px;  */
    border-left: .5px solid rgba(128, 128, 128, 0.317) ;
    border-right: .5px solid rgba(128, 128, 128, 0.318) ;
    display: flex;
}
#footer .second .footer-tabs{
    /* background-color: #37b44e; */
    /* border: 2px red solid; */
    padding: 5%;
    
}
#footer .second .footer-tabs a{
    color: black;
    display: flex;
    justify-content: center;
    align-items:center;
    height: 100%;
    width: 100%;
    transition: all .5s;
    font-size: x-large;
    font-weight: 700;
}
#sp-tab a{
    color: var(--mainColor);
}
#footer .second .footer-tabs:hover a{
    color: var(--mainColor);
}
/* -------------------------------------------------------------------------- */
#footer .third h2{
    color: var(--mainColor);
    text-transform: capitalize;
    text-decoration:underline;
    text-underline-offset: 1rem;
    margin-bottom: 3rem;
}
#footer .third ul{
    display: grid;
    list-style-type: none;
    gap: 10px;
}
#footer .third i{
    display: inline-block;
    margin-right: 1rem;
}
#footer .third li{
    font-size: x-large;
}
#footer .third li ul{
    font-size: large;
}
#footer .third a{
    color:black ;
}
/* -------------------------------------------------------------------------- */
.footer-bar{
    background-color: #1c1c1c;
    height: 4rem;
}
.footer-bar p{
    color: white
}
/* -------------------------------------------------------------------------- */
/*                                     END                                    */
/* ----------------------------------4/7/2024 ------------------------------- */