*{
    padding: 0;
    margin: 0;
}
.products svg,
footer .up .three svg{
    margin-bottom: 5px;
    margin-left: 10px;
}
.call_btn_up{
    position: fixed;
    z-index: 1000;
    bottom: 20px;
    right: 20px;
    background-color: #023047;
    border-radius: 100%;
    animation: glow 0.9s infinite alternate;
}
.call_btn_up a{
    text-decoration: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}
.call_btn_up svg{
    color: white;
}
nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%; /* Ensures it spans the full width */
    margin: 0 auto; /* Centers it horizontally */
    text-align: center; /* Center-aligns the content inside the nav */
}
nav .navbar{
    padding: 25px 0px;
}
nav .navbar .logo img{
    width: 100px;
}
nav .navbar .main ul{
    display: flex;
    margin: 0;
}
nav .navbar .main li,.mobile_nav li{
    list-style: none;
}
nav .navbar .main ul a,
.mobile_nav ul a{
    color: black;
    font-size: 18px;
    text-decoration: none;
    margin: 0px 20px;
    cursor: pointer;
    font-weight: 400;
}
/* nav .navbar .main ul li svg{
    padding: 0px 10px;
} */
nav .line_1{
    width: 100%;
    background-color: grey;
    height: 0.8px;
}
/* -----------------------------------hamburger btn-------------------------------------*/
.hamburger_btn{
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
/* .hamburger_btn #cross{
    display: none;
} */
/* -----------------------------------Mobile Nav--------------------------------------- */
.mobile_nav{
    background-color: white;
    position: absolute;
    top: 82px;
    width: 100%;
    /* display: none; */
    transform: translateY(-293px);
    transition: 0.2s ease-in-out;
    opacity: 0;
    z-index: -10;
}
.mobile_nav ul{
    padding:5px 20px 10px 2px;
    margin: 0;
}
.mobile_nav ul li{
    padding: 10px 0px;
    text-align: right;
}
.mobile_nav ul li a{
    margin: 0;
}
.active_mob_menu{
    /* display: block; */
    opacity: 1;
    z-index: 1;
    transform: translateY(0px);
}
/* ------------------------------------------------------------------------------------------------- */
.home {
    position: relative;
    width: 100%;
    /* display: flex; */
    padding-top: 200px;
    display: flex;
    grid-template-columns: 7fr 3fr;
}

.background-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/static/image/home.jpg') no-repeat center center;
    background-size: cover;
    filter: blur(4px);
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.8);
}
.background-blur::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* White overlay with 80% opacity */
    z-index: -1;
}

.home .left .heading h1 {
    font-size: 60px;
    font-weight: 700;
    color: #023047;
    z-index: 1; /* Ensures text is above the background */
    transition: color 0.3s ease; /* Smooth transition on hover */
}

.home .left .heading h1.effect {
    color: #677791;
}

.home .left .heading:hover > h1.effect{
    color: black;
}


.home .left .line-container {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}


.home .left .dot {
    width: 5px;
    height: 5px;
    background-color: #6D7B8D; /* Adjust color to match your style */
    border-radius: 50%;
    margin-right: 5px;
}


.home .left .dot_line {
    height: 4px;
    width: 100px;
    background-color: #6D7B8D;
    margin-left: 5px;
}
.home .left .content p{
    color: #6D7B8D;
    font-size: 20px;
    width: 90%;
}

.home .right img{
    width: 300px;
    border-radius: 250px;
    /* margin: 30px; */
    border: 10px white solid;
    box-shadow: 0px 0px 40px lightgray;
    z-index: -1;
    
}
.glow_button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    padding: 15px;
    font-size: 30px;
    text-decoration: 0;
    color: white;
    background-color: #023047; /* Button color */
    border: none;
    border-radius: 100%;
    cursor: pointer;
    animation: glow 0.9s infinite alternate; /* Animation */
    position: absolute;
    bottom: 80px;
    margin-left: -0px;
    z-index: 1;
}

@keyframes glow {
    0% {
        box-shadow: 0px 0px 0px #023047;
    }
    100% {
        box-shadow: 0px 0px 5px 3px #023047;
    }
}
/* -------------------------------------------marketing---------------------------------------- */
.marketing{
    margin: 60px 0px;
    display: flex;
    border-radius: 12px;
    background-color: #677791;
    /* padding: 0px 40px; */
    justify-content: space-evenly;
    flex-wrap: wrap ;
    box-shadow: 0px 0px 40px rgb(194, 194, 194);

}
.marketing .one,
.marketing .two,
.marketing .four{
    padding:  35px 30px 30px 30px;
    width: 220px;
}
.marketing .three{
    transform:scale(1.2);
    margin: 0px 30px;
    border-radius: 12px;
    position: relative;
    transform-origin: center;
    background-color: #023047;
    padding:  35px 30px 30px 30px;
    width: 220px;

}
.marketing .one img,
.marketing .two img,
.marketing .three img,
.marketing .four img{
    width: 40px;
    margin: auto;
    display: flex;
    transition: none;
}
.marketing >div>div h3{
    font-size: 20px;
    transition: none;
}.marketing >div>div p{
    font-size: 15px;
    transition: none;
}
.marketing .one .up h3,
.marketing .one .down p,
.marketing .two .up h3,
.marketing .two .down p,
.marketing .three .up h3,
.marketing .three .down p,
.marketing .four .up h3,
.marketing .four .down p{
    color: white;
    text-align: center;
    margin-top: 15px;
    transition: none;
}
/* -------------------------------------------------About us---------------------------------------------- */
.about_us{
    display: flex;
    margin: 200px 0px 150px 0px;
    border-radius: 20px;
    /* overflow: hidden; */
}
.about_us .one .up{
    position: relative; /* Ensure relative positioning for stacking */
    background: url('/static/image/about_1.jpg') no-repeat center center;
    background-size: cover;
    height: 50%;
    width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px 0px 0px 0px;
} 
.about_us .one .down{
    position: relative; /* Ensure relative positioning for stacking */
    background: url('/static/image/about_2.jpg') no-repeat center center;
    background-size: cover;
    height: 50%;
    width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px 0px 0px 0px;
}
.about_us .one .down{
    border-radius: 0px 0px 0px 20px;
}

.about_us .one .up::before {
    content: "";
    position: absolute; /* Overlay needs to be absolutely positioned */
    top: 0;
    left: 0;
    height: 100%; 
    width: 100%; 
    background-color: rgba(27, 78, 82, 0.8); /* Semi-transparent black overlay */
    z-index: 1; /* Set a higher z-index so it's above the background */
    border-radius: 20px 0px 0px 0px;

}
.about_us .one .up img,
.about_us .one .down img{
    display: none;
}
.about_us .one .up>a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    padding: 15px;
    font-size: 30px;
    text-decoration: 0;
    color: white;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    animation: glow_2 0.9s infinite alternate; /* Animation */
    z-index: 2;
    position: relative;
}

@keyframes glow_2 {
    0% {
        box-shadow: 0px 0px 0px white;
    }
    100% {
        box-shadow: 0px 0px 5px 3px white;
    }
}
/* .about_us .one .down{
    position: relative;
    background: url('/static/image/about_2.jpg') no-repeat center center;
    background-size: cover;
    height: 50%;
    width: 25%;
} */
.about_us .two{
    background-color: #677791;
    color: white;
    padding: 80px 31px 80px 30px;
    transform: scale(1.2);
    width: 1200px;
    border-radius: 20px;
    z-index: 10;
    position: relative;
}
.about_us .two h3{
    font-size: 25px;
}
.about_us .two p{
    font-size: 15px;
    margin-top: 20px;
}

.about_us .three{
    box-shadow: 0px 0px 20px rgb(165, 164, 164);
    border-radius: 0px 20px 20px 0px;
    padding: 50px;
    color: #023047;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.about_us .three .top p{
    margin-top: 20px;
}
.about_us .three .up,
.about_us .three .middle,
.about_us .three .down
{
    display: flex;
}
.about_us .three .up .icon svg,
.about_us .three .middle .icon svg,
.about_us .three .down .icon svg{
    background-color: #023047;
    color: white;
    padding: 10px;
    border-radius: 10px;
    margin-right: 20px;
}
.about_us .three .up .content,
.about_us .three .down .content,
.about_us .three .middle .content{
    flex-grow: 1;
}
.about_us .three .up .content h4,
.about_us .three .down .content h4,
.about_us .three .middle .content h4{
    margin-top: 10px;
}
.about_us .three .up .content p,
.about_us .three .down .content p,
.about_us .three .middle .content p{
    margin-top: 20px;
}
/* -------------------------------------------- Monitor ---------------------------------------- */
.monitor {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-size: cover;
    background-color: rgba(103, 119, 145, 0.8);
    padding: 30px 30px 0px 30px;
    color: white; 
    border-radius: 20px;  
}

.monitor::before {
    content: "";    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/static/image/about_1.jpg') no-repeat center center;
    background-size: cover;
    /* filter: blur(4px); */
    z-index: -1; 
    background-color: rgba(103, 119, 145, 0.8);
    border-radius: 20px;
}
.monitor .one,.monitor .two,.monitor .three {
    position: relative; /* Keep content on top of the background */
    z-index: 1; /* Ensure it is above the background */
}
.monitor .one{
    width: 38%;
}
.monitor .two{
    width: 20%;
}
.monitor .two img{
    margin-top: 100px;
    width: 100%;
}
.monitor .three {
    width: 38%;
    padding: 20px;
}
.monitor .three form{
    display: flex;
    flex-direction:  column;
}
.monitor .three form input, 
.monitor .three form textarea{
    outline: none;
    padding: 5px 10px;
    font-size: 17px;
    background: none;
    border: 2px white solid;
    border-radius: 7px;
    margin: 0px 0px 20px 0px;
    color: white;
    columns: 10;
}
.monitor .three form input::placeholder, 
.monitor .three form textarea::placeholder {
    color: white; /* Set placeholder text color to white */
    opacity: 0.7; /* Ensure opacity is fully visible */
}
.monitor .three form .btn_call{
    display: flex;
    justify-content: space-between;
}
.monitor .three form button,.monitor .three form a{
    padding: 5px 20px 5px 20px;
    text-decoration: none;
    align-self: flex-start;
    border-style: none;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
    background-color: #023047;
    color: white;
    font-size: 17px;
}
/* ------------------------------------------Work process-------------------------------------------------- */
.work{
    margin: 100px 0px;
    text-align: center;
}
.work .up p{
    padding: 0px 250px;
}
.work .down{
    display: flex;
    align-items: center;
    margin-top: 100px;
}
.work .down svg{
    width: 100px;
    height: 100px;
    margin: 0px 20px;
}
.work .down img{
    width: 100px;
    background-color: #677791;
    border-radius: 100%;
    position: relative;
    top: -50px;
}
.work .down .one,
.work .down .two,
.work .down .three{
    background-color: #fafafa;
    border-radius: 20px;
    box-shadow: 0px 6px 12px 0px rgba(87.375, 87.375, 87.375, 0.15);
    padding: 20px;
}
.work .down .two img{
    top: -60px;
    background-color: #023047;
}
.work .down .two{
    background-color: #677791;
    color: white;
    border: 10px white solid;
}
/* ------------------------------------------Products---------------------------------------- */
.products .head{
    text-align: center;
    padding: 0 100px;
    margin-bottom:40px;
}
.products .product_list{
    display: flex;
    justify-content: space-between;
    color: #023047;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.products .product_list .one,
.products .product_list .two,
.products .product_list .three,
.products .product_list .four{
    width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fafafa;
    /* border-radius: 20px; */
    /* border: 10px #023047 solid; */
    margin-bottom: 30px;
}
.products .product_list .one>div,
.products .product_list .two>div,
.products .product_list .three>div,
.products .product_list .four>div{
    width: 45%;
    background-color: #fafafa;
    padding: 20px;
    /* text-align: center; */
}
.products .product_list img{
    width: 100%;
    border-radius: 10px;
    margin: 30px 0px;
    order: 2;
    border-radius: 30px;
    /* padding: 30px; */
    /* transition: s ease-in-out; */
}
/* 
.products .product_list img:hover {
    transform: rotate(2deg);
}*/
.products .product_list ul{
    /* list-style: none; */
    padding: 0;
    order: 1;
}
.products .product_list > div a {
    background-color: #023047;
    color: white;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 10px;
    align-self: flex-start;
    margin-top: 30px;
    display: inline-block; /* Changed from block to inline-block */
    flex-grow: 0;
    width: auto; /* This will now be based on the content size */
}
/* -------------------------------------------Secure---------------------------------------- */
.secure{
    display: flex;
    background-color: #fafafa;
    padding: 30px;
    color: #023047;
    /* margin-bottom: 40px; */
}
.secure h1{
    padding: 0px 20px;
}

.secure .right a{
    color: #023047;
    text-decoration: none;
}
.secure .right a:hover{
    text-decoration: underline;
}
/* --------------------------------------------Tesitinomial----------------------------- */
.testimonial{
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    align-items: center;
    background-color: #023047;
    margin: 20px 0px 50px 0px;
}
.testimonial img{
    width: 50%;
}
#carouselExampleControls{
    width: 50%;
    background-color: #023047;
    color: white;
    /* display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content; */
    padding: 10px 30px;
}
.carousel-control-prev,.carousel-control-next{
    opacity: 0 !important;
}
/* #carouselExampleControls .carousel-inner{
    display: flex;
    align-items: center;
    flex-direction: column;
} */
.testimonial .stars svg{
    color: #FEC42D;
    /* background-color: #FEC42D; */
}
.testimonial p{
    margin-top: 20px;
}
.testimonial .profile{
    display: flex;
    align-items: center;
    margin-top: 30px;
}.testimonial .profile img{
    width: 70px;
    border-radius: 100%;
}
.testimonial .profile .names{
    margin-left: 20px;
}
/*---------------------------------------------Footer-----------------------------------------*/
footer{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-size: cover;
    background-color: rgba(103, 119, 145, 0.8);
    padding: 40px;
    color: white; 
}

footer::before {
    content: "";    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/static/image/about_1.jpg') no-repeat center center;
    background-size: cover;
    /* filter: blur(4px); */
    z-index: -1; 
    background-color: rgba(103, 119, 145, 0.8);
}
footer .up{
    display: flex;
    justify-content: space-between;
}
footer .up >div{
    width: 32%;
    margin-bottom: 40px;
}
footer .up .one{
    width: 40%;
}
footer .up .one .logo img{
    width: 200px;
    margin-bottom: 30px;
}
footer .up .one .logo{
    width: 70%;
}
footer .up .one .social_media svg{
    background-color: #023047;
    padding: 12px;
    color: white;
    border-radius: 10px;
}
footer .up .two{
    width: 20%;
}
footer .up .two h5,
footer .up .three h5{
    margin-bottom: 30px;
}
footer .up .two a{
    color: white;
    text-decoration: none;
}
footer .up .three p{
    margin-bottom: 30px;
}
footer .up .three a{
    background-color: #023047;
    color: white;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 10px;
    margin-top: 20px;
    display: inline-block;
}
footer .footer_line{
    width: 100%;
    height: 1px;
    background-color: white;
}
footer .down{
    margin-top: 30px;
    margin-bottom: 10px;
}
/* ------------------------------------------Responsive work------------------------------------------------------------*/
@media screen and (max-width: 992px) {
    .home .left .heading h1 {
        font-size: 40px !important;
    }
    .home .left .content p {
        font-size: 15px;
    }
    nav .navbar .main{
        display: none;
    }   
    .hamburger_btn{
        display: block;
    }
    .about_us{
        flex-direction: column;
    }
    .about_us .one,
    .about_us .two,
    .about_us .three{
        width: 100% !important;
    }
    .about_us .one .up, .about_us .one .down {
        width: 100%;
        border-radius: 20px 20px 0px 0px;
    }
    .about_us .one .up::before{
        width: 100%;
        border-radius: 20px 20px 0px 0px;

    }
    .about_us .one .up img,
    .about_us .one .down img{
        display: block;
        width: 100%;
    }
    .about_us .one .up img{
        border-radius: 20px 20px 0px 0px;
    }
    .about_us .one .up>a {
        position: absolute;
    }
    .about_us .two {
        border-radius: 0;
        transform: none;
    }
    .about_us .three {
        border-radius: 0px 0px 20px 20px;
        padding: 30px;
        text-align: center;
    }
    .about_us .three .up, .about_us .three .middle, .about_us .three .down {
        flex-direction: column;
        margin-bottom: 20px;
    }
    .monitor{
        justify-content: space-evenly;
        padding-bottom: 30px;
    }
    .monitor .one,
    .monitor .three{
        width: 49%;
        padding: 0;
    }
    .monitor .two{
        display: none;
    }
    .work .up p {
        padding: 0px 0px;
    }
    .work .down {
        flex-direction: column;
    }
    .work .down svg{
        display: none;
    }
    .work .down .one,
    .work .down .two{
        margin-bottom: 100px;
    }
    .secure{
        flex-direction: column;
        text-align: center;
    }
    .secure h1{
        padding: 0;
        margin-bottom: 30px;
    }
    .testimonial{
        flex-direction: column;
    }
    .testimonial >img{
        width: 100%;
        /* display: none; */
    }
    #carouselExampleControls {
        width: 100%;
    }
    .products .head {
        padding: 0;

    }
    .products .product_list div{
        width: 100%;
        margin-bottom: 40px;
    }
    footer .up{
        flex-direction: column;
    }
    footer .up >div {
        width: 100% !important;
        margin-bottom: 70px;
    }
}

@media screen and (max-width: 767px) {
    .home {
        padding-top: 150px;
        flex-direction: column;
    }
    .home .right{
        order: 1;
        margin-bottom: 60px;
    }   
    .home .left{
        order: 2;
    }
    .home .right img {
        width: 100% !important;
    }
    .glow_button {
        position: relative !important;
        bottom: 0;
        margin-top: -70px;
    }
    .marketing{
        flex-direction: column;
    }
    .marketing .one,
    .marketing .two,
    .marketing .three,
    .marketing .four{
    width: 100%;
    transition: none !important;
    transform: none;
    margin: unset;
    }
    .marketing{
        padding: 0px 10px;
    }
    .monitor{
        justify-content: space-evenly;
        flex-direction: column;
        padding: 15px;
        text-align: center;
    }
    .monitor .one{
        margin-bottom: 30px;
    }
    .monitor .one,
    .monitor .three{
        width: 100%;
    }
    .monitor .three form .btn_call{
        flex-direction: column;
    }
    .monitor .three form button ,.monitor .three form a{
        margin-bottom: 20px;
        width: 100%;
    }
    .products .product_list .one, .products .product_list .two, .products .product_list .three, .products .product_list .four {
        flex-direction: column;
    }
    .products .product_list .one>div, .products .product_list .two>div, .products .product_list .three>div, .products .product_list .four>div {
        width: 100%;
        padding: 0 30px;
    }    
    .products .product_list img {
        margin: 30px 0px 0px 0px;
    }
    .work .down .one,
    .work .down .two{
        margin-bottom: 50px;
    }
    .work .down img {
        width: 75px;
    }
    .work .down .two img {
        top: -50px;
    }
    footer{
        padding: 20px;
    }
    footer .up .one .logo {
        width: 100%;
    }
}
/* @media screen and (max-width: 767px) {} */