@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* Bootstrap Icon CDN */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Raleway";
}

:root {
    --color_main: #00091d;
    --color_second: #ff8b34;
}

.pt-100 {
    padding-top: 100px;
}

.pb-100 {
    padding-bottom: 100px;
}

.p-100 {
    padding: 100px 0;
}

.color {
    color: #ff8b34;
}

.color_main {
    color: #00091d;
}

p {
    color: #a7a7a7;
    font-weight: 400;
    font-size: 18px;
}

.butn {
    border: 0;
    padding: 15px 30px;
    font-weight: 600;
    background-color: var(--color_second);
    color: white;
    transition: all 0.3s ease-in-out;
}

.butn:hover {
    transform: translateY(-10px);
    background-color: var(--color_main);
    transition: all 0.3s ease-in-out;
}

li:hover {
    color: var(--color_second);
    transition: 0.2s;
    cursor: pointer;
}

input:focus {
    outline: none;
}

textarea:focus {
    outline: none;
}

/* nav */
.navbar {
    background-color: white;
}

.nav-item .nav-link {
    font-weight: 600;
    color: black;
}

.nav-item .nav-link:hover {
    color: var(--color_second);
    transition: all 0.3s ease-in-out;
}

.Consultation {
    background-color: var(--color_main);
    color: white;
}

/* nav end  */

/* Modern start */
.Modern {
    background: url("../../../frontend/assets/images/bekary.jpg") no-repeat
        center/cover;
    width: 100%;
    height: 90vh;
    position: relative;
    z-index: 1;
}

.Modern::before {
    position: absolute;
    content: "";
    top: 0;
    right: 60%;
    width: 100%;
    height: 100%;
    background-color: #00091dab;
    z-index: -1;
}

.Modern_body {
    background-color: white;
    width: 45%;
}

/* Modern end */

/* about section */
.about .hand {
    background: url("../../../frontend/assets/images/rotary.txt") no-repeat
        center/cover;
    width: 100%;
    height: auto;
}

.about .Solid {
    position: absolute;
    top: 74%;
    left: 0%;
    width: 100%;
}

.about .Build,
.Build1,
.Build2 {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
        conic-gradient(var(--color_second) 87%, lightblue 0%);
}

.about .Build1 {
    background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
        conic-gradient(var(--color_second) 96%, lightblue 0%);
}

.about .Build2 {
    background: radial-gradient(closest-side, white 79%, transparent 80% 100%),
        conic-gradient(var(--color_second) 80%, lightblue 0%);
}

/* .about .Build::before {
    position: absolute;
    content: "";
    border-radius: 50%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 10px solid var(--color_second);

} */

/* about end  */

/* swiper slider  */

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 200px;
    height: 100%;
    object-fit: cover;
}

.swiper-pagination {
    position: relative;
    text-align: center;
    transition: 0.3s opacity;
    margin-top: 30px;
    transform: translate3d(0, 0, 0);
    z-index: 10;
}

/* media quary */

/* solution start  */

.solution {
    position: relative;
    z-index: 1;
}

.solution::before {
    position: absolute;
    content: "";
    top: 0;
    right: 40%;
    width: 100%;
    height: 100%;
    background-color: var(--color_main);
    z-index: -1;
}

.solution .who_body {
    padding: 20px 100px;
}

.solution .progress {
    height: 12px;
}

.solution .progress-bar {
    background-color: var(--color_second);
    width: 90%;
}

/* solution end  */

/* service start */
.robot {
    cursor: pointer;
}

.robot:hover h5 {
    color: var(--color_second);
    transition: all 0.3s ease-in-out;
}

/* end */

/* system grid */
.system_main {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.system_main img {
    height: 550px;
}

.system_main::before {
    position: absolute;
    content: "";
    left: 0;
    top: 550px;
    height: 100%;
    width: 100%;
    background-color: #00091da0;
    transition: all 0.3s ease-in-out;
}

.system_body {
    padding: 10px 20px;
    position: absolute;
    bottom: 0;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.system_main:hover .system_body {
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

.system_main:hover::before {
    top: 0px;
    transition: all 0.5s ease-in-out;
}

/*end  */

/* client start */
.client {
    background-color: var(--color_main);
}

/* client end  */

/* footer start */

footer {
    background-color: var(--color_main);
}

.facebook_main {
    display: flex;
    align-items: center;
    justify-content: center;
}

.facebook {
    background-color: var(--color_second);
    padding: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    margin: 0 5px;
    justify-content: center;
}

/* footer end */
/* home page end  */
/* about page start */
.about_page {
    background: url(../../../frontend/assets/images/bekary13.jpg) no-repeat
        center/cover;
    width: 100%;
    height: 500px;
    position: relative;
    z-index: 1;
}

.about_page::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    background-color: #00091db2;
    z-index: -1;
}

.smart {
    position: absolute;
    top: 70%;
    left: 10%;
}

.Integrated {
    position: absolute;
    top: 80%;
    left: 0%;
}

.Trusted_Clients {
    position: absolute;
    top: 90%;
    left: 73%;
    width: 40%;
    transform: translate(-50%, -50%);
}

.Archer_main {
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.Archer_main::before {
    position: absolute;
    content: "";
    left: 0;
    top: 100%;
    width: 100%;
    height: 100%;
    background-color: #00091da6;
    transition: all 0.3s ease-in-out;
}

.Archer {
    position: absolute;
    top: 75%;
    left: 50%;
    width: 75%;
    transform: translate(-50%, 50%);
    background-color: #ffff;
}

.facebook_about {
    background-color: var(--color_second);
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

.facebook_main_about {
    position: absolute;
    top: 45%;
    left: 0%;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.Archer_main:hover::before {
    top: 0;
    transition: all 0.3s ease-in-out;
}

.Archer_main:hover .facebook_main_about {
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

/* serviec page start */
.service_page {
    background: url(../../../frontend/assets/images/service.jpg) no-repeat
        center/cover;
    width: 100%;
    height: 500px;
    position: relative;
    z-index: 1;
}

.service_page::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    background-color: #00091db2;
    z-index: -1;
}

/* service end  */

/* team page  start*/

.team_page {
    background: url(../../../frontend/assets/images/team.jpg) no-repeat
        center/cover;
    width: 100%;
    height: 500px;
    position: relative;
    z-index: 1;
}

.team_page::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    background-color: #00091db2;
    z-index: -1;
}

/* team page */

/* blog page  start*/

.blog_page {
    background: url(../../../frontend/assets/images/blog_page.jpg) no-repeat
        center/cover;
    width: 100%;
    height: 500px;
    position: relative;
    z-index: 1;
}

.blog_page::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    background-color: #00091db2;
    z-index: -1;
}

.Question {
    background: url(../../../frontend/assets/images/blog3.jpg) no-repeat
        center/cover;
    width: 100%;
    height: 300px;
    position: relative;
    z-index: 1;
}

.Question::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    background-color: #00091dc8;
    z-index: -1;
}

.Question ul {
    color: white;
}

/* blog page */

/* contact page start */
.contact_page {
    background: url(../../../frontend/assets/images/contactpage.jpg) no-repeat
        center/cover;
    width: 100%;
    height: 300px;
    position: relative;
    z-index: 1;
}

.contact_page::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    background-color: #00091dc8;
    z-index: -1;
}

.social {
    width: 50px;
    height: 50px;
    background-color: var(--color_main);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-right: 10px;
    cursor: pointer;
}

.social:hover {
    background-color: var(--color_second);
    transition: all 0.1s ease-in-out;
}

/* contact end  */

@media (max-width: 1024px) {
    .Modern_body {
        width: 100%;
    }

    .about .Solid {
        position: absolute;
        top: 0%;
        left: 0%;
    }

    .solution::before {
        right: 0%;
    }

    .solution .who_body {
        padding: 20px 10px;
    }

    .Trusted_Clients {
        left: 50%;
    }

    .Archer {
        top: 55%;
    }
    .facebook_main {
        display: block;
    }
}

/* product css */

@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");
*,
ul,
ol,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Dosis", sans-serif;
}
/* font-family: 'Poiret One', cursive; */
body {
    font-family: "Dosis", sans-serif;
}
/* custom css classes start*/

:root {
    --primary: #69b84a;
    --secondary: #ecfad5;
}
html {
    scroll-behavior: smooth;
}
/* text var */
.text-primary {
    color: var(--primary) !important;
}
.text-secondary {
    color: var(--secondary) !important;
}
/* bg var */
.bg-primary {
    background-color: var(--primary) !important;
}
.bg-secondary {
    background-color: var(--secondary) !important;
}
/* button var */
.btn-primary {
    background-color: var(--primary) !important;
}
.btn-secondary {
    background-color: var(--secondary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}
.border-secondary {
    border-color: var(--secondary) !important;
}

.py-100 {
    padding: 100px 0px !important;
}

.pt-100 {
    padding-top: 100px !important;
}

.pb-100 {
    padding-bottom: 100px !important;
}

/* font size classes */
.fs-18 {
    font-size: 18px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-14 {
    font-size: 14px !important;
}
.fs-12 {
    font-size: 12px !important;
}
.fs-10 {
    font-size: 10px !important;
}

a {
    font-weight: bold;
    text-decoration: none;
}

.btn {
    transition: all 0.2s;
}

.btn:hover {
    transform: translateY(-2px);
}

/* custom css classes end */

.form-control:focus {
    box-shadow: none !important;
    border-color: black !important;
}

/* Progress bar */
#progress {
    position: fixed;
    bottom: 20px;
    right: 10px;
    height: 55px;
    width: 55px;
    display: none;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
#progress-value {
    display: block;
    height: calc(100% - 15px);
    width: calc(100% - 15px);
    background-color: #ffffff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: #69b84a;
}