/********** Template CSS **********/
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');
:root {--primary: #06A3DA;--secondary: #F57E57;--light: #EEF9FF;--dark: #091E3E;}
body{font-family: "Raleway", sans-serif !important; overflow-x: hidden !important;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {font-family: "Raleway", sans-serif !important;}
h1, h2, .font-weight-bold {font-weight: 600 !important; }
h3, h4, .font-weight-semi-bold {font-weight: 600 !important; }
h5, h6, .font-weight-medium {font-weight: 500 !important; }
.logo img {max-width: 200px;transition: .5s;}
p{line-height: 26px; font-family: "Raleway", sans-serif !important; color: #303030;}

.text-black{color: #000;}
.text-green{color: #59bc59;}
.text-blue{color: #011942;}
.bg-white{background-color: #fff;}
.bg-grey{background-color: rgb(243, 243, 243);}

.text-justify{text-align: justify;}
.col-text{padding: 0 100px; text-align: center; padding-bottom: 15px;}
ul li{list-style: none;}

a.contact_btn:before {content: "";position: absolute;right: 10px;top: 5px;background-image: url("./img/contact_btn_arrow.png");}
.btn {font-weight: 600;transition: .5s;}

.btn-primary,
.btn-secondary {color: #FFFFFF;}

.btn-primary:hover {background: var(--secondary);border-color: var(--secondary);}
.btn-secondary:hover {background: var(--primary);border-color: var(--primary);}
.btn-square {width: 36px;height: 36px;}
.btn-sm-square {width: 28px;height: 28px;}

.btn-lg-square {width: 46px;height: 46px;}
.btn-square,
.btn-sm-square,
.btn-lg-square {padding-left: 0;padding-right: 0;text-align: center;}

#spinner {opacity: 0;visibility: hidden;transition: opacity .5s ease-out, visibility 0s linear .5s;z-index: 99999;}
#spinner.show {transition: opacity .5s ease-out, visibility 0s linear 0s;visibility: visible;opacity: 1;}

.back-to-top {position: fixed;display: none;right: 45px;bottom: 45px;z-index: 99;background: #86c733;border-color: #86c733;}
.top-shape::before {position: absolute;content: "";width: 35px;height: 100%;top: 0;left: -17px;background: var(--primary);transform: skew(40deg);}


/* navbar css start */
.navbar-light .navbar-nav .nav-link {
    
    padding:6px 13px;
    font-size: 16px;
    color: var(--dark);
    outline: none;
    transition: .5s;
    border-right: 1px solid #ccc;}

.sticky-top.navbar-light .navbar-nav .nav-link {padding: 10px 15px;}
.sticky-top .logo img {height: 70px; padding: 0px 0}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {color: var(--primary);    text-decoration: underline;}
.inner_menu_top{position: inherit !important;}
nav.mynav {position: absolute;top: 0;z-index: 999;width: 100%; height: 80px; transition: .5s;    padding-top: 0px;
    padding-bottom: 0px;}
.sticky-top {
    position: sticky !important;
    top: 0;
    z-index: 1020;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(35deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), url(../img/footer.webp);
    transition: ease-in-out .5s;}

.mynav h1 {color: #fff;}
.mynav .nav-link {color: #fff; padding-left: 1rem !important;padding-right: 1rem !important;position: relative;}
.mynav .nav-link:hover {color: #86c733;}
.mynav .nav-link::before {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background: #90cb3b;transform: scaleX(0);
transform-origin: left;transition: .5s;}
.mynav .nav-link:hover::before {transform: scaleX(1);}

.mynav .nav-item.dropdown {position: static !important;}
.mynav .dropdown-menu {width: 100%;max-width: 100% !important;left: 0;}
.mynav .dropdown-menu {width: 100%;max-width: 100% !important;left: 0;background: transparent !important;border:none !important;}
.main_menu_sec {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(177deg, #0770b4, #0000009c);
background-origin: border-box;background-clip: content-box, border-box;min-height: 300px;padding: 50px;margin-top: 23px;
}

.main_menu_sec .menu_head {display: flex;align-items: center;gap: 20px;margin-bottom: 30px;}
.main_menu_sec .menu_head h2 {color: #fff;font-size: 22px;margin: 0;}
.main_menu_sec .menu_head img {max-width: 50px;}
.submenu_sec {display: flex;gap: 50px;}
.submenu_sec .menu_count {display: flex;flex-direction: column;max-width: 250px;width: 100%;}
.submenu_sec .menu_count:last-child {border-left: 1px solid #fff;padding-left: 20px;}
.submenu_sec .menu_count a {color: #fff;margin-bottom: 10px;}


.section-title h5::before {position: absolute;content: "";width: 45px;height: 3px;right: -55px;bottom: 11px;background: var(--primary);}
.section-title h5::after {position: absolute;content: "";width: 15px;height: 3px;right: -75px;bottom: 11px;background: var(--secondary);}
.twentytwenty-wrapper {height: 100%;}

.bg-offer {background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(299deg, #2d737a, #94d13f);
background-origin: border-box;background-clip: content-box, border-box;margin: 200px 0;}
.offer_box_sec {position: relative;height: 100%;}
.offer-text h2 {position: relative;font-size: 45px;text-align: left;color: #fff;font-weight: 500 !important;}
.offer-text p {font-weight: 300;font-size: 12px;color: #fff;text-align: left; }

.offer_box {background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(0deg, #e7e7e7, #ffffff);
background-origin: border-box;background-clip: content-box, border-box;text-align: center;border-radius: 10px;width: 200px;height: 200px;
display: flex;align-items: center;flex-direction: column;padding: 10px;justify-content: center;transition: .5s;cursor:pointer;}
.offer_box:hover {transform: scale(1.1);}
.offer_box img {width: 80px;}
.offer_box span {font-size: 20px;color: #000;font-weight: bolder;line-height: 24px; margin-top: 10px;margin-bottom: 10px;
display: block;}

.ensure_box {position: absolute;top: -75px;left: 0;border: 1px solid #ffc502;}
.focus_web_box {position: absolute;top: -75px;left: 220px;border: 1px solid #fc5d3d;}
.focus_requirement_box {position: absolute;bottom: -80px;left: 0px;border: 1px solid #71bf03;}
.focus_html_box {position: absolute;bottom: -80px;left: 220px;border: 1px solid #f79a32;}

.our_experties_sec {margin: 60px 0;}


@keyframes example {
0% {width: 0%;}
10% {width: 0%;}
100% {max-width: 100%;}
}

.bara1 {border-radius: 25px;padding: 10px;background-color: #7ac1cf;position: relative;margin-bottom: -20px;z-index: 2;animation-duration: 6s;}
.bara1.animate {animation-name: example;}

.barb1 {border-radius: 25px;padding: 10px;background-color: #adaec2;position: relative;margin-bottom: 20px;z-index: 1;}
.textbox {position: absolute;color: #ffffff;margin-top: -18px;border-radius: 50%;width: 35px;height: 35px;background: #ccc;right: 0;
text-align: center;line-height: 35px;font-weight: bold;}

.bara1.blue {background: #3e51dc;}
.blue .textbox {background: #3e51dc;}
.bara1.yellow {background: #e1c732;}
.yellow .textbox {background: #e1c732;}

.bara1.orange {background: #db6533;}
.orange .textbox {background: #db6533;}
.bara1.lightblue {background: #4196e6;}
.lightblue .textbox {background: #4196e6;}


.our_working_sec h2 {text-align: center;margin-top: 30px;color: #000;margin-bottom: 70px;font-size:35px;}

@keyframes requirements {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes design {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes development {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes testing {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes delivery {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.requirements_box {position: relative;}
.requirements_circle {margin: auto;border: 10px solid #ffffff00;border-radius: 50%;border-top: 10px solid #ffa600;width: 200px;height: 215px;
animation: requirements 10s linear infinite;}
.requirements_box img {width: 200px;height: 200px;border: 2px solid #ffa600;border-radius: 50%;position: absolute;top: 10px;left: 0;right: 0;margin: auto;}
.requirements_box h4 {font-size: 20px;color: #000;text-align: center;position: absolute;top: 135px;left: 0;right: 0;font-weight: bolder !important;}
.requirements_box h4 span {position: relative;display: block;width: 30px;height: 30px;margin: 0 auto 10px;margin-top:131px;background: #ffa600;
border-radius: 50%;text-align: center;line-height: 30px;font-size: 16px;color: #fff;}
.requirements_box h4 span:before {content: "";width: 2px;    height: 57px;
    position: absolute;
    background: #ffa600;
    top: -57px;left: 0;right: 0;margin: auto;}

.design_box {position: relative;}
.gradient-circle{padding: 40px 0;}
.design_circle {margin: auto;border: 10px solid #ffffff00;border-radius: 50%;border-top: 10px solid #39b6ef;width: 200px;height: 215px;
animation: design 8s linear infinite;}
.design_box img {width: 200px;height: 200px;border: 2px solid #39b6ef;border-radius: 50%;position: absolute;top: 10px;left: 0;right: 0;margin: auto;}
.design_box h4 {font-size: 20px;color: #000;text-align: center;position: absolute;top: -95px;left: 0;right: 0;font-weight: bolder !important;}
.design_box h4 span {position: relative;display: block;width: 30px;height: 30px;margin: 0 auto 10px;margin-top: 10px;background: #39b6ef;border-radius: 50%;
text-align: center;line-height: 30px;font-size: 16px;color: #fff;}
.design_box h4 span:before {content: "";width: 2px;height: 47px;position: absolute;background: #39b6ef;top: 25px;left: 0;right: 0;margin: auto;}

.development_box {position: relative;}
.development_circle {margin: auto;border: 10px solid #ffffff00;border-radius: 50%;border-top: 10px solid #9d52f1;width: 200px;height: 215px;
animation: development 6s linear infinite;}
.development_box img {width: 200px;height: 200px;border: 2px solid #9d52f1;border-radius: 50%;position: absolute;top: 10px;left: 0;right: 0;margin: auto;}
.development_box h4 {font-size: 20px;color: #000;text-align: center;position: absolute;top: 131px;left: 0;right: 0;font-weight: bolder !important;}
.development_box h4 span {position: relative;display: block;width: 30px;height: 30px;margin: 0 auto 10px;margin-top: 131px;background: #9d52f1;
border-radius: 50%;text-align: center;line-height: 30px;font-size: 16px;color: #fff;}
.development_box h4 span:before {content: "";width: 2px;    height: 52px;
    position: absolute;
    background: #9d52f1;
    top: -52px;left: 0;right: 0;margin: auto;}

.testing_box {position: relative;}
.testing_circle {
    margin: auto;border: 10px solid #ffffff00;border-radius: 50%;border-top: 10px solid #94dd20;width: 200px;height: 215px; animation: testing 4s linear infinite;}
.testing_box img {
    width: 200px;height: 200px;border: 2px solid #94dd20;border-radius: 50%;position: absolute;top: 10px;left: 0;right: 0;margin: auto;}
.testing_box h4 {
    font-size: 20px;color: #000;text-align: center;position: absolute;top: -95px;left: 0;right: 0;font-weight: bolder !important;}
.testing_box h4 span {
    position: relative;display: block;width: 30px;height: 30px;margin: 0 auto 10px;margin-top: 10px;background: #94dd20;border-radius: 50%; text-align: center;line-height: 30px;font-size: 16px;color: #fff;}
.testing_box h4 span:before {
    content: "";width: 2px;height: 45px;position: absolute;background: #94dd20;top: 25px;left: 0;right: 0;margin: auto;}

.delivery_box {position: relative;}
.delivery_circle {
    margin: auto;border: 10px solid #ffffff00;border-radius: 50%;border-top: 10px solid #d547f3;width: 200px;height: 215px; animation: delivery 12s linear infinite;}
.delivery_box img {
    width: 200px;height: 200px;border: 2px solid #d547f3;border-radius: 50%;position: absolute;top: 10px;left: 0;right: 0;margin: auto;}
.delivery_box h4 {
    font-size: 20px;color: #000;text-align: center;position: absolute;top: 135px;left: 0;right: 0;font-weight: bolder !important;}
.delivery_box h4 span {
    position: relative;display: block;width: 30px;height: 30px;margin: 0 auto 10px;margin-top: 131px;background: #d547f3; border-radius: 50%;text-align: center;line-height: 30px;font-size: 16px;color: #fff;}
.delivery_box h4 span:before {
    content: "";width: 2px;
    height: 57px;
    position: absolute;
    background: #d547f3;
    top: -56px;
    left: 0;
    right: 0;
    margin: auto;}
.sheduleACall_box{margin-top: 20px; padding: 20px;}
.sheduleACall_box h2{color: #026fb0; margin: 10px 0 15px 0;}
.sheduleACall_box p{color: #000; font-size: 15px;}
.sheduleACall_box span{
    color: #04ae04;padding: 4px 0px 0;font-size: 16px; font-weight: 600;font-style: italic;}



.apply_section {margin: 60px 0; padding: 40px 0;}


/* .white_footer_section .container {} */

/* .blink {
    animation: blinker 1.5s linear infinite;
    color: red;
    font-family: sans-serif;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
} */


.fa-angles-right{color: #04ae04; padding-right: 5px;}
.contact-details-footer{border-bottom: 1px solid #ffffff;}
.footer_link_box{text-align: right;}
.footer_link_box li {padding: 4px 19px; border-right: 1px solid #fff; display: inline-block; margin-top: 26px; ;}
.footer_link_box a {color: #8cf11c !important;font-size: 14px !important;letter-spacing: 1px;font-weight: 500; }
.footer_link_box a:hover {color: #0770b4;}
.footer_bg_dark {
    background-position: bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(35deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5)), url(../img/footer.webp);}
    
.footer_bg_dark h3 {font-size: 22px; margin: 1.7rem 0 1rem 0; color: #fff; }
.footer-items{
    font-size: 13px; 
    margin-bottom: 0.6rem; 
    color: #e5e5e5; 
    line-height: 27px; 
    transition: ease-in-out 0.5s;}
    
.footer-items:hover {color: #04ae04; letter-spacing: 0.5px; padding-left: 7px;}
.footer_icon_box img{height: 80px; margin: 5px 0;}
img.fot_logo {max-width: 60px;}
.footer_bg_dark p{font-size: 15px; color: #f1f1f1; text-align: justify;}

.footer_copywrite{font-size: 13px;}
.footer_copywrite a{color: #fff; transition: ease-in-out 0.5s;}
.footer_copywrite a:hover{color: #04ae04;}
.footer_copywrite p{font-size: 15px;}
.footerMenu {margin: 10px 0 30px;}

.contact_detail {margin: 0; padding: 10px 0; display: flex;gap: 7px;align-items: center;}
.contact_detail a,
.contact_detail p {color: #fff;font-size: 13px; margin: 0;}

/* .contact_detail li img {max-width: 30px;height: 30px;margin-right: 10px;} */

.fa-map-location-dot,
.fa-envelope-open-text,
.fa-mobile-screen-button{color: #04ae04; padding-right: 8px; font-size: 18px !important;}


.social_icon {display: flex;gap: 10px; text-align: right;float: right;}
.social_icon a {background: #166ae6;width: 35px;height: 35px;border-radius: 50%;text-align: center;line-height: 35px;color: #fff;font-size: 18px;}
.social_icon a:hover {
    background-color: #626262;
    background-image: none;
}
a.twitter {background: #1c9eef;}
a.linkedin {background: #0a79b5;}
a.youtube {background: #da241a;}
a.instagram {
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
.TopHeader_button{text-align: right;}
.TopHeader_button ul li{display: inline-block;font-size: 17px;padding: 0px 10px; margin: 15px 0 0;
}
.TopHeader_button ul li a{color: #86C733;}
.navbar-brand img{height: 80px; padding-top: 5px;}
canvas{
  display:block;
  vertical-align:bottom;
}
.connect_btn {
    font-size: 14px;
    color: #fff !important;
    background-color: #86C733;
    /* background-image: linear-gradient(45deg, #aae631, #026fb8); */
    padding: 10px 20px;
    border-radius: 33px;
    text-transform: capitalize; ;
}
.connect_btn:hover{
    color: #000;
    background-image: linear-gradient(45deg, #026fb8, #aae631 );transition: 0.2s;
    box-shadow:  0px 0px 7px #fff}
/* ---- particles.js container ---- */

#particles-js{
    width: 100%;
    height: 100%;
    /*  background-color: #020202;*/
    background-image: linear-gradient(#091e3eed, #0440b2db, #030c53e6), url(../img/banner-home.png);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: relative;}

.HomeBanner_Content{position: absolute;text-align: center; top: 250px;left: 77px}
.txt-rotate { color: #9adb3e;font-weight: 600;font-size: 50px;}
.home-ConTent h1 {color: #fff;  font-weight: 600;  font-size: 50px; ;}
.home-ConTent p {color: #fff;  font-weight: 500;  font-size: 16px; text-align: center;padding: 10px 0px; ;}
.btn-get-started{
    padding: 10px 38px;
    border-radius: 33px;
    border: none;
    text-transform: capitalize;
    color: #fff;
    font-size: 18px;
    transition: ease-in-out 0.5s;
    background-image: linear-gradient(35deg, #aae631, #026fb8);}

.btn-get-started:hover{
    color: #000;
    background-image: linear-gradient(35deg, #026fb8, #aae631 );
    box-shadow:  0px 0px 10px 0 #747474;}

.Main_services {
    margin-top: 60px;
    padding: 40px 80px 70px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover; 
    background-image: linear-gradient(rgb(254 254 254 / 68%), rgb(247 247 247 / 51%)), url(../img/ser-bg.png);}
    
.Main_services h2 {
    margin-bottom: 20px;
    font-size: 30px;text-align: center;color: #082962;font-weight: 600 !important;}
.ServiceBox {
    padding: 35px 25px; border-radius: 10px; margin: 10px 0px 20px; transition: ease-in-out 0.5s;}
.ServiceBox:hover {box-shadow: 0px 0px 20px #919191; margin-top: -5px;}
.box_item_content h1{
    color: #fff;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 20px;
    text-transform: capitalize;
    letter-spacing: 1px;}

.box_item_content p{
    font-weight: 500; 
    font-size: 14px; 
    color: #000; 
    margin-bottom: 25px; 
    line-height: 25px; 
    text-align: justify;}

.ServiceImage img{height: 70px; margin-bottom: 10px;}
.service-btn{border-radius: 40px; padding: 8px 25px; font-size: 14px;}
.service-btn:hover{border: 2px solid #fff; color: #fff; background: transparent;}

.btn-ReadM {border: 2px solid #4f9f4f; background-color: #4f9f4f; color: #fff;}
.btn-ReadM2 {border: 2px solid #000; background-color: #000; color: #fff;}
.btn-ReadM3 {border: 2px solid #000; background-color: #000; color: #fff;}
.btn-ReadM4 {border: 2px solid #fff; background-color: #fff; color: #000;}
.btn-ReadM5 {border: 2px solid #ffb34e; background-color: #ffb34e; color: #000;}
.btn-ReadM6 {border: 2px solid #fff; background-color: #fff; color: #000;}
.btn-ReadM7 {border: 2px solid #fff; background-color: #fff; color: #000;}
.btn-ReadM8 {border: 2px solid #fff; background-color: #fff; color: #011942;}
.Box1 { background-color: #126812;}
.Box1 h1{ color: #fff;}
.Box1 p, .Box4 p{ color: #fff;}
.Box2{ background-color: #55a4ff; }
.Box2 h1{ color: #000;}
.Box3{background:linear-gradient(296deg, rgb(243 127 145) 0%, rgb(218 128 239) 50%, rgb(213 242 114 / 60%) 100%)}
.Box3 p{padding: 0px;}
.Box3 ul{margin: 3px 25px;padding: 0px;}
.Box3 ul li{color: #000;font-weight: 600;}
.Box3 h1{color: #090909;}
.Box4{ background-image: linear-gradient(88deg, #f60071, #ec5fa4);}
.Box4 h1{color: #ffffff;}
.Box5 { background-color: #011942;}
.Box5 h1, .Box5 p{color: #ffb34e;}
.Box6 { background:#297ad6;}
.Box6 p{ color: #fff;}
.Box7 { background: linear-gradient(5deg, #d15c04, #f89746);}
.Box7 p{color: #fff}
.Box7 h1{color: #fff;}
.Box8 {background-color: #EB1000;}
.Box8 p{color: #fff;}


/* how-we-work css start */
.how-we-work{
    padding: 90px 0 70px 0;
    background-image: linear-gradient(rgb(30, 30, 30), rgba(33, 33, 33, 0.5)), url("../img/how-we-work.webp");
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;}

.how-we-work h2{color: #59bc59; text-align: center;}
/* .how-we-work-para{color: #fff;} */
.how-we-work-card{
    text-align: center;
    margin-top: 15px;
    padding: 40px 20px 30px; 
    border-radius: 15px; 
    transition: ease-in-out 0.5s;}
.how-we-work-card:hover{box-shadow: 0 0 15px 0 #9bc0ff;}
.how-we-work-title{color: #fff !important;}
.how-we-work-text{font-size: 14px; color: #fff; padding-top: 10px;}
.fa-wand-magic-sparkles, 
.fa-shuffle,
.fa-person-walking{color: #6ea3ff; font-size: 45px; padding-bottom: 20px;}


/* why_choose_us css start */
.why_choose_us_sec {
    margin-top: 40px;
    background-image: linear-gradient(rgb(255 255 255), rgb(255 255 255 / 82%)), url(../img/why-bg.png);
    background-size: cover;
    padding: 30px 0;}

.why_we_are:hover{box-shadow: 0px 0px 8px 0px #082962; transition: ease-in-out 0.6s;}
.why-text{font-size: 15px;color: #000;}
.whyIcon img{height: 55px; margin-right: 10px;    margin-top: 4px;}
.icon-con h4{ padding: 20px 0 20px 10px; font-size: 20px; color: #082962;}
.why_we_are {border-radius: 8px; padding: 5px 12px 0px;border-left: 3px solid #082962;background-color: #f2f2f2;margin: 15px 0;display: flex; transition: ease-in-out 0.6s}
.why2, .why4{border-right: 3px solid #59bc59;border-left: none;}
.why_choose_txt h3{font-size: 30px; color: #59bc59}
.why_choose_txt h6{line-height: 28px;}
.box {width: 100%;height: auto;padding: 10px;margin: 10px 0;border-radius: 5px 32px;}
.box .shadow {position: absolute;width: 100%;height: 100%;background: #eee;}
.box .content .percent {position: relative;    width: 150px;height: 150px;}
.box .content .percent::before {content: attr(data-text);position: absolute;inset: 20px;background: #082962;
    border-radius: 50%;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 40px;font-weight: 600;letter-spacing: 0.1rem;text-transform: uppercase;}
.box .content .percent svg { position: relative;width: 150px;height: 150px;transform: rotate(270deg);}
.box .content .percent svg circle {width: 100%;height: 100%;fill: transparent;stroke-width: 3;stroke: rgba(0,0,0,0.05);transform: translate(5px, 5px);}
.box .content .percent svg circle:nth-child(2) {
  stroke: #86c733;stroke-dasharray: 440;stroke-dashoffset: calc(440 - (440 * var(--num)) / 100);opacity: 0;animation: fadeIn 1s linear forwards;animation-delay: 2.5s;}
.box .content .percent .dot {position: absolute; inset: 5px; z-index: 10; animation: animateDot 2s linear forwards;}
@keyframes animateDot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(calc(3.6deg * var(--num)));
  }
}

.box .content .percent .dot::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #6ab31f;
  border-radius: 50%;}

.box .content .number h2 {font-size: 23px; color: #000; padding-top: 20px;}
.expert_title{border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 10px;color: #59bc59;}
.our_working_sec{
    padding: 170px 0px 200px;
    background-image: linear-gradient(rgba(226, 226, 226, 0.5), rgba(228, 228, 228, 0.5)), url(../img/service-bg.webp);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat; 
    background-attachment: fixed;}

.apply_box p{margin: 0px;padding: 0px;font-size: 15px;color: #fff;}



/* CTA css start */
.cta-bg{
    text-align: center;
    padding: 160px 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-image: linear-gradient(rgb(30, 30, 30), rgba(33, 33, 33, 0.5)), url("../img/cta-bg.webp");}

.cta-title{color: #fff;}
.cta-btn{color: #fff; padding: 12px 45px; border-radius: 25px; border: 1px solid #fff;}
.cta-btn:hover{color: #fff; background-color: #04ae04;}

/* CTA css End */



/* 12. Specifications */

.p-relative {position: relative;}
.specifications-wrap::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 45px;
	background-image: url(../img/palygon_border.png);
	width: 895px;
	height: 851px;
	z-index: -1;
	transform: translateX(-50%);}
    
.speci-content h5 {font-size: 24px; font-weight: 600; margin-bottom: 5px;}
.speci-content p {margin-bottom: 0; padding: 0 15px;}
.specification-shape {position: absolute;}
.sp-shape-one {left: 0; top: -85px; z-index: -1;}
.sp-shape-two {right: 0; bottom: -180px; z-index: -1;}

.cursor-outline {
  width: 15px;
  height: 15px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 99999999999;
  pointer-events: none;
  transition: width 0.2s ease-out, height 0.2s ease-out;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.05);}

.Inner_service_area{padding: 50px 0px 49px;
    margin: 0px;
    background-image: linear-gradient(rgb(254 254 254 / 68%), rgb(247 247 247 / 51%)), url(../img/sucess.png);
    background-position: top left;
    background-repeat: no-repeat;}

.Inner_title h1{font-size: 30px; color: #026faa;}
.Service_Do_box{
    padding: 30px 38px;
    text-align: center;
    margin: 20px 0px;
    height: auto;
    border-radius: 10px;}

.Service_Do_box h2{font-size: 19px; padding: 20px 0 0 0px;}
.Service_Do_box p{font-size: 15px; text-align: justify; color: #000; padding-top: 10px;}
.do-box1{background-color: #febfda}
.do-box2{background-color: #cac6fdb5}
.do-box3{background-color: #ffe8a4}
.do-box4{background-color: #d4ffd6}
.do-box5{background-color: #f6cbc1}
.do-box6{background-color: #d0f9fa}
.do-box7{background-color: #e4fac5}
.do-box8{background-color: #8efbe8}
.accordion{margin: 15px 0px;}
.accordion-button{
    font-size: 18px;
    color: #0f0f10;
    font-weight: 600;}
.services-details__need-help{padding: 15px 0;}
.sidebar__need-help {
    position: relative;
    display: block;
    padding: 33px 40px 33px;
    margin-top: 64px;
    z-index: 1;
    background-color: #fff;
    box-shadow: 0px 0px 7px #8acf4b;
    border-radius: 5px;}

.sidebar__need-help-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
.sidebar__need-help-title {
       font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.72px;
    text-transform: capitalize;
    color: #0678b8;
}
.sidebar__need-help-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.28px;
    color: #151313;
    text-transform: capitalize;
    margin-top: 22px;
    margin-bottom: 22px;
}
.sidebar__need-help-number {
    position: relative;
    display: block;
    font-size: 36px;
    font-weight: 700;
    line-height: 46px;
    letter-spacing: -0.72px;
    text-transform: capitalize;
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-animation 150s linear infinite;
     ;
}
.sidebar__need-help-email {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.4px;
    color: #000;
    margin-top: 25px;
    margin-bottom: 33px;
    position: relative;
    display: block;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.sidebar__need-help-btn-box {
    position: relative;
    display: block;
}
 .sidebar__need-help-btn {
   background-image: linear-gradient(45deg, #aae631, #026fb8);
    padding: 10px 20px;
    border-radius: 33px;
    text-transform: capitalize;
     ;color: #fff;
}
.sidebar__need-help-btn:hover {
    color: var(--thm-base);
    background-color: #fff;
    color: green
}

/* digital marketing page css start*/

.dm-menus{padding: 18px 0; margin-top: 90px;}
.dm-cols{text-align: center; margin: 5px; border-right: 2px solid rgb(231, 231, 231);}
.border-none{border: none;}
.dm-img{height: 35px; margin-bottom: 10px;}
.digital_marketing_content h2 {
    font-weight: 600;
    color: #026dab;
    font-size: 30px;
    text-align: center;
    margin: 0px;
}
.digital_reason_content h6 {
   font-size: 19px;
    font-weight: 700 !important;
    color: #000;
}
.digital_reason_content p {
    font-size: 15px;
    color: #000;
    text-align: justify;
}
.numb_box h2 {
    height: 46px;
    width: 46px;
    margin: 0 12px 0 0;
    background-color: #86c733;
    padding: 0;
    text-align: center;
    border-radius: 50%;
    color: #fff;}

.digital_box {display: flex; margin-top: 15px; padding-right: 25px;}
.digital_mar_reason {
/*
   background: #FFF4F3 url(../img/section-bg-img-2.png) no-repeat;
    background-position: left -100px bottom -250px;
*/
    padding: 50px 0 0;}



.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #ffffff;
    background-color: #091e3e;
    border-color: #e6eaed #dee2e6 #fff;
    border-radius: 5px 5px 0px 0px;
    font-size: 18px;
     
}
.nav-tabs .nav-link {
    margin-bottom: -1px;
    background: none;
    border: 1px solid transparent;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    font-size: 17px;
    color: #000;
     
}
.benefits_circle_box {
    box-shadow: 0px 0px 12px #06090aab;
    background-color: #fff;
    max-width: 367px;
    min-height: 359px;
    border-radius: 50%;
    border: 5px solid #0075ad;
    text-align: center;
    padding: 135px 0px;
    position: relative;
    z-index: 99;
    margin: 0px auto;}

.benefit_small-circle h3 {font-size: 30px;}
.service_benefits1 {
    background-color: #fff;
    padding: 5px 10px;
    margin: 0px;
    box-shadow: 1px 1px 10px #f9f9f9;
    border-radius: 12px;
    position: relative;
    border: 3px solid #0075ad;
}


.benefits_bg h2 {
    font-size: 19px;
    color: #77b715;
    padding: 8px 0;
    margin: 0px;
    font-weight: 600;
}
.benefits_bg p {
    font-size: 14px;
    color: #000;
    padding: 0px;
    margin: 0px;
}
.benefit_box1::after {
   content: '';
    position: absolute;
    width: 140px;
    background-color: #0075ad;
    right: -140px;
    bottom: 56px;
    height: 3px;
    transform: skew(1deg, 22deg);
}
.benefit_box2::after {
       content: '';
    position: absolute;
    width: 54px;
    background-color: #0075ad;
    right: -54px;
    bottom: 63px;
    height: 3px;
    transform: skew(0deg);
}

.benefit_box3::after {
    content: '';
    position: absolute;
    width: 150px;
    background-color: #0075ad;
    right: -150px;
    bottom: 86px;
    height: 3px;
    transform: skew(358deg, 341deg);
}
.benefit_box4::after {
   content: '';
    position: absolute;
    width: 140px;
    background-color: #0075ad;
    left: -140px;
    bottom: 56px;
    height: 3px;
    transform: skew(1deg, 337deg);
}
.benefit_box5::after {
       content: '';
    position: absolute;
    width: 54px;
    background-color: #0075ad;
    left: -54px;
    bottom: 63px;
    height: 3px;
    transform: skew(0deg);
}
.benefit_box6::after {
  content: '';
    position: absolute;
    width: 150px;
    background-color: #0075ad;
    left: -151px;
    bottom: 86px;
    height: 3px;
    transform: skew(358deg, 24deg);
}
.text-rainbow-animation {
  font-size:70px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet, red); 
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
  animation: rainbow-animation 150s linear infinite;
}

@keyframes rainbow-animation {
    to {
        background-position: 4500vh;
    }
}

.technology-line {
    height: 1px;
    width: 100%;
    background-color: #ccc;
    margin: 7px 0 30px;
}
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.technology_logo {
    background-color: #fff;
    margin: 0px;
    padding: 25px;
    box-shadow: 0 0 20px #ccc;
    height: 140px;
    width: 140px;
    border-radius: 50%;
    transition: all ease-in-out 0.4s;
    position: relative;}

.technology_logo img {max-height: 90px;}
.tech_top_bor {
    width: 1px;
    height: 47px;
    background-color: #ccc;
    position: absolute;
    left: 50%;
    top: -47px;
}
.tech_top_bor2 {
    width: 1px;
    height: 79px;
    background-color: #ccc;
    position: absolute;
    left: 50%;
    top: -79px;
}
.digital_marketing_content p{font-size: 16px;color: #000;font-weight: 400}
.ContentWriting {
    background: #fff;
    box-shadow: 0px 0px 10px #ccc;
    border-radius: 5px;
    display: flex;
    margin-top: 12px;
    padding: 20px 30px 20px 15px;
    scale: 0.96;
    transition: all ease-in-out 0.5s;}

.ContentWriting:hover {
    scale: 1;
    cursor: pointer;
    box-shadow: 0px 0 60px 0 rgba(var(--color-secondary-rgb), 0.1);}

.deve_ser_icon img {margin: 15px 6px 15px 0; height: 80px;}
.ContentWriting .deve_content{padding-left: 15px; text-align: justify;}
.deve_content h3 {
    font-size: 17px;
    color: #026faa;
    padding: 5px 0 5px;
    margin: 0px;
    font-weight: 600;}

.deve_content p {padding-top: 5px;}
.main-service-bg {
    background-color: #fff;
    padding: 20px 10px;
    box-shadow: 0 0 16px #ccc;
    border-radius: 5px;
    position: relative;
    border-top: 2px solid #0075ad;
}
.bor-top {
    position: absolute;
    right: -68px;
    height: 1px;
    background-color: #0075ad;
    width: 77px;
    top: -1px;
}
.benefits_num h4 {
 height: 40px;
    width: 40px;
    background-color: #0075ad;
    border-radius: 50%;
    padding: 4px;
    font-size: 24px;
    color: #fff;
    margin: 0 10px 0 0;
    text-align: center;
}
.benefit_heading h2 {
    color: #0075ad;
    font-size: 20px;
}
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.border-right {border-right: 2px solid #0075ad;}
.bor-top2 {
    position: absolute;
    left: -67px;
    height: 1px;
    background-color: #0075ad;
    width: 77px;
    top: -1px;
}
.card-text:last-child {
    margin-bottom: 0;
    font-size: 15px;
}
.main-service-bg:hover {
    transition: 0.2s;
    background-color: #0ea2bd;}

.main-service-bg:hover p {color: #fff;}
.main-service-bg:hover h2 {color: #fff;}
.process_mid_area {
    padding: 40px 0px;
    margin: 0px;
    background-color: #fff;
}
.why_choose-box {
    display: flex;
    margin: 19px 0;
    padding: 15px 7px;
    border-right: 1px solid #ccc;
}
.why_choose-box i {
    font-size: 20px;
    height: 40px;
    width: 40px;
    background-color: #6db712;
    border-radius: 50%;
    text-align: center;
    margin: 0px 10px;
    padding: 10px;
    color: #fff;
}
.process_box h3 {
    font-size: 21px;
    color: green;
    margin: 0px;
    padding: 0px 0 4px;
    font-weight: 600;
}
.process_box p {
    font-size: 15px;
    color: #000;
    margin: 0px;
    padding: 0px;
}

.why_choose-box:hover {
    box-shadow: 0 0 20px #ccc;
    transition: 0.2s;
    cursor: pointer;
    background-color: #fff;
    border: none;
    border-radius: 7px;
}



/*==============Media css start==============*/

@media (max-width: 576px) {
    nav.mynav{padding-top: 0px;}
    .mobile_mail{display: none !important;}   
    .sticky-top .logo img {height: 61px;padding: 0px 0;margin: 0px 0 3px;}
   .navbar-brand img { height: 70px;  margin-top: 5px;}
    .particles-js-canvas-el {height: 400px !important;object-fit: contain;} 
    .HomeBanner_Content {position: absolute;text-align: center;top: 90px;left: 0;}
    .txt-rotate {font-size: 24px;}
    .home-ConTent p{font-size: 14px;}
    .btn-get-started {    padding: 7px 24px;font-size: 17px;}
    .connect_btn {padding: 9px 17px;}
    .Main_services h2 { font-size: 24px;}
    .ServiceBox {    margin: 15px 0px;}
    .our_working_sec {padding: 48px 0px 145px;}
    .apply_section {padding: 40px 0;}
    ul.contact_detail {margin: 0px 0;padding: 0;display: block;}
    ul.contact_detail li {color: #fff;font-size: 14px;padding: 10px 0;}
    .social_icon {display: flex;gap: 9px;text-align: right;float: left;margin: 17px 0 0;}
    .sheduleACall_box img{margin-top: 25px;}
    .box .content .number h2 {font-size: 18px;color: #000;text-align: center;}
    .design_circle {   margin: 231px auto 15px;}
    .testing_circle { margin: 251px auto 16px;}
    .testing_box h4 {top: -85px;}
    .box .content .percent { margin: auto;}
    .expert_title { text-align: center;}
    .gradient-circle{padding: 20px 0; margin: 0 30px;}
}

@media (min-width: 991.98px) {
.banner {position: relative;margin-top: -90px;z-index: 1;}
}


/********* media queries start  *********/
@media screen and (min-device-width: 991px) and (max-device-width: 1024px) {

    .HomeBanner_Content {top: 160px; left: 20px;}
    .delivery_box{display: hidden !important;}

    .Main_services{padding: 40px 25px 70px 25px;}
    .ServiceBox{padding: 25px 14px;}
    .box_item_content h1{font-size: 16px; font-weight: 700 !important;}

    ul.contact_detail li{font-size: 13px;}

    .social_icon{gap: 5px;}
    .col-heading{font-size: 25px !important;}

}

@media screen and (min-device-width: 768px) and (max-device-width: 990px) {
    
    .col-text{padding: 0;}
    
    .HomeBanner_Content{top: 120px; left: 30px;}
    .txt-rotate{font-size: 40px;}
    .Main_services{padding: 40px 15px 70px 15px;}

    .our_experties_img{display: flex; justify-content: center;}
    .gradient-circle-4, .gradient-circle-5{margin-top: 250px;}

    .social_icon{padding-top: 30px;}
    
    .ContentWriting .deve_content{padding-left: 10px;}


}

@media screen and (min-device-width: 425px) and (max-device-width: 767px) {
    
    .col-text{padding: 0;}
    .txt-rotate{font-size: 30px;}
    .Main_services{padding: 40px 15px 70px 15px;}

    .our_experties_img{display: flex; justify-content: center;}
    /* .gradient-circle-4, .gradient-circle-5{margin-top: 250px;} */

    .social_icon{padding-top: 30px;}
    
    .ContentWriting .deve_content{padding-left: 10px;}
    .footer_copywrite div{text-align: center !important; display: block !important; margin-bottom: 10px;}

}

@media screen and (min-device-width: 320px) and (max-device-width: 424px) {
    
    .col-text{padding: 0 15px;}
    .txt-rotate{font-size: 30px;}
    .Main_services{padding: 40px 10px 70px;}

    .our_experties_img{display: flex; justify-content: center;}

    .social_icon{padding-top: 30px;}
    .icon-con h4{font-size: 16px;}
    .sheduleACall_box{padding: 10px;}
    
    .ContentWriting{margin-top: 15px !important;}
    .ContentWriting .deve_content{padding-left: 10px;}
    .footer_copywrite div{text-align: center !important; display: block !important; margin-bottom: 10px;}

}