@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

body { margin: 0; padding: 0;  font-family: "Nunito Sans" !important, sans-serif; overflow-x: hidden;}
p, li {color: #525963;font-size: 15px;line-height: 1.6;margin: 0 0 15px 0;font-family: "Nunito Sans", sans-serif;}
.main-table li {color: #525963;font-size: 16px; line-height: 1.6;margin: 0 0 8px 0; font-family: "Nunito Sans", sans-serif;}
a { text-decoration: none !important; font-family: "Nunito Sans", sans-serif;}
h1, h2, h3, h4 { font-family: "Fraunces", serif;}
h5, h6 { font-family: "Nunito Sans", sans-serif;}
.main-table { text-align: left; padding: 6% 0;}
.main-table  ul { list-style-image: url(image/angle-double-right.png);}

#widgetsControl_C, #widgetsControl{ height: auto !important;}
#Div_body .container-fluid { margin: 0; padding: 0;}

#MenuControl .nav-item { margin: 0}
#MenuControl .nav-item .nav-link {color: #525963;font-size: 15px;padding: 15px;font-weight: 700;}
#MenuControl .nav-fill{ width:100%;}
#MenuControl .bg-light {background: #fff!important;height: 100%;}

#HomepagecontentControl_C { margin-top: -21px}

#HeaderControl.RadDock_Default .rdMiddle .rdCenter,
#HeaderControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#MenuControl_C .bg-light { --bs-bg-opacity: 1; background-color: transparent !important; height: 100%;}
#MenuControl.RadDock_Default .rdMiddle .rdCenter, #MenuControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}

#HeaderControl, #MenuControl, #MenuControl_C {height: 85px !important;}

@media (min-width: 320px) and (max-width: 768px ){ 
    .navbar-toggler { position: absolute; right: 15px; top: -60px; background: #fff}
    #MenuControl, #MenuControl_C { height: 0 !important;}
    #HeaderControl, #HeaderControl_C {height: 75px !important;background: #001b4f;}
    .navbar-collapse { background: #002346; margin-top: -10px}
}

@media (min-width: 769px)  {
    #HeaderControl {position: absolute;left: 15%;top: 25px;z-index: 2;width: 20%; text-align: center;background: #fff;border-radius: 12px 0 0 12px;}
    #MenuControl {position: absolute;right: 15%;top: 25px;z-index: 8 !important;width: 50%;background: #fff;border-radius: 0 12px 12px 0;}
}

.heading { font-size: 40px; color: #002060; font-weight: 700; margin: 0 0 30px 0;}
.heading span { color: #47d45a;}
.heading1 p { color: #47d45a !important; text-transform: uppercase; font-weight: 600; font-size: 16px; letter-spacing: 1.5px; margin: 0 0 15px 0;}
.heading1 h2 { font-size: 40px; color: #002060; font-weight: 700; margin: 0 0 30px 0;}
.heading-title {color: #001b4f;font-size: 22px;line-height: 30px;}
.blue-color { color: #001b4f;}
.bg-color { background: #001b4f !important;}
.green-color { color: #47d45a;}
.text-color { color: #ddd !important; font-size: 16px;}
.bg1 { background: #47d45a !important;}
.team-name {font-size: 32px;color: #002060;font-weight: 700;margin: 0 0 15px 0;}
.custom-btn { background: transparent; display: inline-block; border-radius: 10px; color: #fff; padding: 12px 40px; border: 2px solid #47d45a; box-shadow: 0 3px 14.6px 0 rgb(1 226 118 / .27); letter-spacing: .7px; transition: all .3s ease-in-out;}
.custom-btn:hover { background: #47d45a; color: #fff;}
.title {background: #001b4f;margin: 20px 0 0 0;color: #fff;font-size: 16px;padding: 15px;border-radius: 8px;letter-spacing: .2px;display: inline-block;}
.title1 { background: #fff; color: #001b4f; margin: 20px 0 0 0; font-size: 16px; font-weight: 600; padding: 15px; border-radius: 8px; display: inline-block;}
.radius-4 { border-radius: 10px;}

header img {padding: 10px 0; width: 130px}

.banner-section { background-image: url(image/banner-bg.png); padding:18% 0 12% 0; background-size: cover; background-attachment: fixed;}
.banner-section h1 { color: #fff; font-size: 45px; line-height: 58px; font-weight: 700; margin: 0 0 60px 0; position: relative;}
.banner-section h1::after { content: ''; position: absolute; width: 240px; height: 6px; background-image: linear-gradient(45deg, #47d45a, #002060); border-radius: 5px; left: 0; bottom: -30px;}
.banner-section p { font-size: 18px; line-height: 30px; color: #fff; margin: 0 0 30px 0;}
.banner-section a { display: inline-block; background: #47d45a; color: #fff; padding: 13px 24px; border-radius: 5px; font-size: 16px; transition: all .5s ease-in-out;}
.banner-section a:hover { background: #002060; transform: translateY(10px);}

.about-section { padding: 7% 0; background-image: linear-gradient(rgba(0, 239, 207, .12), #fff 40%);}
.about-section .count-bx h2 {color: #47d45a;font-size: 50px;font-weight: 700;margin: 0 0 5px 0;}

.contact-page { padding: 12% 0 5% 0; background-image: linear-gradient(rgba(0, 239, 207, .12), #fff 40%);}
.contact-page .form { margin: 5% 0 0 0;}
.contact-page .form label { color: #001b4f; font-weight: 600; margin: 0 0 3px 0;}
.contact-page .form .form-control { padding: 10px; margin: 0 0 10px 0;}
.contact-page .form input[type=button] { display: inline-block; background: #47d45a; color: #fff; padding: 12px 24px; border-radius: 5px; font-size: 16px; transition: all .5s ease-in-out; border: 0; letter-spacing: .5px; margin: 10px 0 0 0;}

.team-page {padding: 12% 0 5% 0;background-image: linear-gradient(rgba(0, 239, 207, .12), rgba(0, 239, 207, .12) 40%);}
.team-page p { margin: 0 0 10px 0}
.team-page li { line-height: 1.3; font-size: 15px}
.team-page .team-profile .team-pic {position: relative;margin: 0 0 32px 0;}
.team-page .team-profile .team-pic img { position: relative; z-index: 2; border: 1px solid #ddd; border-radius: 5px;}
.team-page .team-profile .team-pic::after {content: '';position: absolute;width: 100%;height: 100%;left: -12px;bottom: -12px;background: #47d45a;border-radius: 5px;}
.team-page .team-profile h4{color: #001b4f;text-transform: uppercase;font-size: 21px;font-weight: 600;margin: 0 0 14px 0;}
.team-page .team-profile p a { color: #525963;}
.team-page .team-profile p i { color: #001b4f; margin: 0 5px 0 0; font-size: 14px;}

.inner-banner { background-image: url(image/inner-banner.jpg); padding:18% 0 12% 0; background-size: cover; background-attachment: fixed; background-position: top;}
.inner-banner h2 { color: #fff; text-align: center; font-size: 42px; font-weight: 700; margin: 0 0 20px 0;}
.inner-banner p {color: #fff; text-align: center; font-size: 20px;}

.solution-card { border: 1px solid #cccccc; border-radius: 10px; margin: 0 0 24px 0; min-height: 340px;}   
.solution-card h4{ background: #001b4f; padding: 15px; color: #fff; font-size: 20px; letter-spacing: .5px; border-radius: 8px;}
.solution-card .text { padding: 10px;}
.solution-card .text li {margin: 0 0 8px 0; line-height: 1.4;}

.about-text {padding: 7% 0 0 0;}
.about-text .left-content p {font-size: 16px;}
.about-text .snapshot { position: relative;}
.about-text .snapshot::after { content: ''; position: absolute; width: 1px; height: 84%; left: -20px; top: 8%; background: #001b4f; }
.about-text .snapshot p { background: #001b4f; padding: 15px; color: #fff; border-radius: 8px; margin: 0; font-size: 17px; margin: 0 0 10px 0; position: relative;}
.about-text .snapshot p::after { content: ''; position: absolute; width: 20px; height: 1px; left: -20px; top: 50%; background: #001b4f; }

.solution-section { background: #001b4f; padding: 7% 0;}
.solution-section .solution-card1 {background: #fff;padding: 30px;border-radius: 10px;margin: 20px 0 0 0;min-height: 340px;transition: all .5s ease-in-out;}
.solution-section .solution-card1:hover { transform: scale(1.03);}
.solution-section .solution-card1 .icon img {width: 70px; margin: 0 0 20px 0;}
.solution-section .solution-card1 h4 {color: #001b4f;font-size: 20px;font-weight: 600;}
.solution-section .solution-card1 p { margin: 0;}

.Delivery-Approach {padding: 7% 0;background-image: linear-gradient(#00efcf1f, #fff 40%);}
.Delivery-Approach .left-content p{font-size: 16px;}
.Delivery-Approach .left-content p span {color: #001b4f;font-size: 18px;font-weight: 700;font-family: "Fraunces", serif;}
.Delivery-Approach .delivery-approach-bx, .Delivery-Approach .delivery-approach-bx1 { border:2px solid #47d45a; border-radius: 10px; padding:20px 20px 30px 20px; text-align: center; position: relative;}
.Delivery-Approach .delivery-approach-bx1 { border-color: #001b4f; padding: 30px 20px 20px 20px;}
.Delivery-Approach .delivery-approach-bx img, .Delivery-Approach .delivery-approach-bx1 img { width: 65px;}
.Delivery-Approach .delivery-approach-bx .text p, .Delivery-Approach .delivery-approach-bx1 .text p { position: absolute; background: #47d45a; color: #fff; padding: 8px 5px; border-radius: 10px; width: 130px; font-weight: 600; letter-spacing: .5px; bottom: -30px; right: -15px;}
.Delivery-Approach .delivery-approach-bx1 .text p { background: #001b4f; top: -20px; bottom: auto;}
.Delivery-Approach ul { list-style-image: url(image/angle-double-right.png); position: relative; z-index: 3}
.Delivery-Approach ul li {font-size: 16px;margin: 0 0 8px 0;background: #e3e3e3;padding: 10px;position: relative;z-index: 4;color: #1f1f1f}
.Delivery-Approach ul li::after {content: '';position: absolute;height: 100%;width: 30px;background: #001b4f;left: -30px;top: 0;z-index: -1;}
.Delivery-Approach ul li:nth-child(1) { margin-right: 120px}
.Delivery-Approach ul li:nth-child(2) { margin-left: 30px; margin-right: 90px}
.Delivery-Approach ul li:nth-child(3) { margin-left: 60px; margin-right: 60px}
.Delivery-Approach ul li:nth-child(4) { margin-left: 90px; margin-right: 30px}
.Delivery-Approach ul li:nth-child(5) { margin-left: 120px}
.Delivery-Approach .left-pic img { border-radius: 10px;}
.how-we-deliver, .how-we-deliver1 { position: relative;}
.how-we-deliver .dot, .how-we-deliver1 .dot { width: 25px; height: 25px; border-radius: 50%; background: #47d45a; margin: auto; position: relative; box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px; border: 2px solid #fff; z-index: 2;}
.how-we-deliver1 .dot { background: #001b4f;}
.how-we-deliver .dot::after, .how-we-deliver1 .dot::after { content: ''; position: absolute; width: 2px; height: 30px; background: #47d45a; top: -25px; left: 49%;}
.how-we-deliver1 .dot::after { background: #001b4f; top: auto; bottom: -25px;}
.how-we-deliver .text, .how-we-deliver1 .text { font-weight: 600; position: absolute; margin: auto; width: 100%; top: -50px; font-size: 17px;}
.how-we-deliver1 .text { bottom: -50px; top: auto;}
.Delivery-Approach .main-bx{ position: relative;}
.Delivery-Approach .main-bx::after { content: ''; position: absolute; width: 100%; height: 1px; background: #cccccc; top: 49%;}
.Delivery-Approach .heading-title { margin: 100px 0 80px 0; border-radius: 8px; text-align: center; min-width: 400px; font-size: 32px; font-weight: 700;}
.Delivery-Approach .heading-title span { color: #47d45a;}

footer { background: #001b4f; padding: 6% 0 2% 0;}
footer .line { border-right: 1px solid rgba(255, 255, 255, .3)}
footer p, footer p a { color: #d6d6d6; margin: 0 0 8px 0;}
footer p { font-size: 14px;}
footer p a:hover { color: #47d45a;}
footer p i {margin: 0 7px 0 0;}
footer h4 { color: #fff; font-size: 21px; margin: 0 0 20px 0; letter-spacing: .8px; line-height: 1.6;}
footer .logo img { margin: 30px 0 20px 0; width: 170px;}
footer a i {color: #fff;}
footer .contact-btn { display: inline-block; border: 1px solid #47d45a; color: #fff; padding: 6px 18px; margin: 0 0 0 12px; border-radius: 6px;}

.about-banner {padding: 12% 0 7% 0;background: #001b4f;}
.about-banner .heading-title, .about-banner p { color: #ddd;}
.about-banner ul { list-style-image: url(image/angle-double-right.png);}
.about-banner ul li { color: #ddd; font-size: 15px; margin: 0 0 10px 0;}

.industry-experience {background: #001b4f;}
.industry-experience.bg-light { background: #e1fdfa !important}
.industry-experience p{ font-size: 16px; color: #ddd}
.industry-experience p span {color: #ffffff;font-size: 18px;font-weight: 500;font-family: "Fraunces", serif;}

.ser-card { background: #fff; border-radius: 10px; padding: 30px; transition: all .3s ease-in-out; margin: 10px 0 0 0;}
.ser-card:hover { transform: scale(1.04);}
.ser-card img { width: 100px; margin: 0 0 10px 0;}
.ser-card p { color: #525963;}

.service2 {padding: 12% 0 7% 0;background-image: linear-gradient(rgba(0, 239, 207, .3), #fff 50%)}
.service2 .card1 { position: relative;}
.service2 .card1 .text { position: relative; background: rgba(255, 255, 255, .9); border: 1px solid #001b4f; border-radius: 8px; padding: 40px 10px; text-align: center; z-index: 2;}
.service2 .card1::after { content: ''; position: absolute; width: 100%; height: 100%; background: #001b4f; top: -15px; left: -15px; border-radius: 8px;}
.service2 .card1::before { content: ''; position: absolute; width: 1px; height: 22px; bottom: -22px; left: 0; right: 0; margin: 0 auto; background: #afafaf;}
.service2 .card1 h5 { font-size: 20px; margin: 0; font-weight: 600;}
.service2 .card2 {position: relative;}
.service2 .card2 .text{ position: relative; background: rgba(255, 255, 255, .9); border: 1px solid #47d45a; border-radius: 8px; padding: 20px 10px; text-align: center; margin: 55px 0 0 0; z-index: 2;}
.service2 .card2::after { content: ''; position: absolute; width: 100%; height: 100%; background: #47d45a; top: -15px; left: -15px; border-radius: 8px;}
.service2 .card2::before { content: ''; position: absolute; width: 1px; height: 20px; top: -35px; left: 0; right: 0; margin: 0 auto; background: #afafaf;}
.service2 .card2 p {margin: 0; font-size: 16px; font-weight: 500;}
.service2 .why-its-matters {position: relative;}
.service2 .why-its-matters::after { content: ''; position: absolute; width: 71%; height: 1px; background: #afafaf; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

/* .service3 { background-image: linear-gradient(rgba(0, 239, 207, .12), #fff 40%);} */
.service3 .card1 { background: #001b4f; height: 130px; padding: 10px; display: flex; align-items: center; position: relative;}
.service3 .card1 p { text-align: center; color: #fff; font-size: 16px; font-weight: 600; margin: 0;}
.service3 .card1 .arrow { position: absolute; left: 100%;}
.service3 .card1 .arrow img { width: 50px;}

.service4 { background: #dbf7f2;}
.service4 .card1 { background: #ffffff; display: flex; align-items: center; border-radius: 50px;}
.service4 .card1 .icon { background: #47d45a; width: 100px; height: 100px; border-radius: 50%; padding: 30px;}
.service4 .card1 .text p{ font-size: 18px; margin: 0 0 0 20px; font-weight: 600;}

.client-bx {border: 1px solid #ddd;border-radius: 10px;padding: 20px;margin: 25px 0 0 0;transition: all .3s ease-in-out;min-height: 210px;}
.client-bx:hover { transform: scale(1.04);}
.client-bx h5 { color: #001b4f; font-weight: 600; font-size: 15px;} 

@media ( min-width: 320px) and (max-width: 767px) {
    .main-table li { font-size: 15px;}
    
    .heading { font-size: 27px; margin: 0 0 15px 0; font-weight: 600;}
    .heading1 p { font-size: 15px; margin: 0 0 10px 0;}
    .heading1 h2 { font-size: 26px; margin: 0 0 20px 0; font-weight: 600;}
    .heading-title { font-size: 19px; line-height: 1.4;}
    .text-color {font-size: 15px;}
    .team-name { font-size: 22px; margin: 0 0 10px 0;}
    .custom-btn { padding: 10px 20px; font-size: 15px; }
    .title { margin: 10px 0 0 0; color: #fff; font-size: 15px;}
    .title1 { margin: 15px 0 0 0;}

    header img {padding: 5px 0;width: 130px}

    .banner-section { padding: 27% 0 10% 0; background-position: center;}
    .banner-section h1 { font-size: 29px; line-height: 40px; font-weight: 600; margin: 0 0 40px 0;}
    .banner-section h1::after {width: 140px; height: 4px; bottom: -20px;}
    .banner-section p { font-size: 15px; line-height: 25px; margin: 0 0 20px 0;}
    .banner-section a { padding: 10px 16px; border-radius: 5px; font-size: 16px; transition: all .5s ease-in-out;}

    .about-section { padding: 10% 0;}
    .about-section .count-bx h2 { font-size: 27px; font-weight: 700; margin: 15px 0 0 0;}
    .about-section .count-bx p { line-height: 20px;}

    .contact-page { padding: 27% 0 5% 0;}
    .contact-page .form input[type=button] { margin: 10px 0 20px 0;}

    .team-page { padding: 27% 0 5% 0;}
    .team-page .team-profile h4{ font-size: 19px; margin: 0 0 10px 0;}

    .inner-banner { padding: 27% 0 12% 0;}
    .inner-banner h2 { font-size: 24px; font-weight: 600;}
    .inner-banner p { font-size: 17px;}

    .solution-card { border: 1px solid #cccccc; border-radius: 10px; margin: 0 0 24px 0; min-height: 100px;}   
    .solution-card h4{ padding: 12px; font-size: 18px;}

    .about-text { padding: 7% 0 8% 0;}
    .about-text .left-content p { font-size: 15px;}
    .about-text .snapshot::after { width: 0px; }
    .about-text .snapshot p { padding: 12px; font-size: 15px;}
    .about-text .snapshot p::after { height: 0px;}

    .Delivery-Approach { padding: 7% 0;}
    .Delivery-Approach .left-content p{ font-size: 15px; margin: 0 0 8px 0;}
    .Delivery-Approach .left-content p span { font-size: 16px; font-weight: 600;}
    .Delivery-Approach .delivery-approach-bx, .Delivery-Approach .delivery-approach-bx1 { padding: 20px 20px 30px 20px; margin: 20px 0 0 0;}
    .Delivery-Approach .delivery-approach-bx1 { border-color: #001b4f; padding: 30px 20px 20px 20px;}
    .Delivery-Approach .delivery-approach-bx img, .Delivery-Approach .delivery-approach-bx1 img { width: 60px;}
    .Delivery-Approach .delivery-approach-bx .text p, .Delivery-Approach .delivery-approach-bx1 .text p { padding: 5px 4px; border-radius: 6px; width: 110px; bottom: -30px; right: -12px; font-size: 14px;}
    .Delivery-Approach .delivery-approach-bx1 .text p { bottom: -30px; right: -12px; top: auto; }
    .Delivery-Approach ul li { font-size: 15px;}
    
    .how-we-deliver .dot, .how-we-deliver1 .dot { width: 15px; height: 15px;}
    .how-we-deliver .dot::after, .how-we-deliver1 .dot::after { content: ''; position: absolute; width: 2px; height: 20px; background: #47d45a; top: -15px; left: 49%;}
    .how-we-deliver1 .dot::after { background: #001b4f; top: auto; bottom: -15px;}
    .how-we-deliver .text, .how-we-deliver1 .text { font-weight: 600; position: absolute; margin: auto; width: 80%; top: -50px; font-size: 13px;}
    .how-we-deliver1 .text { bottom: -50px; top: auto;}
    .Delivery-Approach .main-bx{ position: relative;}
    .Delivery-Approach .main-bx::after { content: ''; position: absolute; width: 100%; height: 1px; background: #cccccc; top: 49%;}
    .Delivery-Approach .heading-title { margin: 80px 0 60px 0; font-size: 24px;}

    footer h4 { font-size: 18px; margin: 0 0 10px 0;}
    footer .logo img { margin: 10px 0 20px 0; width: 120px;}
    footer a i {color: #fff;}

    .industry-experience { background: #dbf7f2; }
    .industry-experience p{ font-size: 15px;}
    .industry-experience p span { color: #001b4f; font-size: 18px; font-weight: 700; font-family: "Fraunces", serif;}

    .about-banner { padding: 27% 0 7% 0; background: #001b4f;}
    .about-banner .col { width: 100%; display: block;}
    .ser-card { padding: 10px;}

    .service2 .card1 { position: relative; background: rgba(255, 255, 255, .9); border: 1px solid #001b4f; border-radius: 8px; padding: 40px 10px; text-align: center;}
    .service2 .card1::after { top: -10px; left: -10px;}
    .service2 .card2 { margin: 30px 0 0 0;}
    .service2 .card2::after { top: -10px; left: -10px;}
    .service2 .card2::before { height: 25px; top: -35px; }
    .service2 .why-its-matters::after { content: ''; position: absolute; width: 0%;}

    .service3 .card1 { background: #001b4f; height: 130px; margin: 0 0 10px 0;}
    .service3 .card1 .arrow img { display: none;}

    .service4 { background: #dbf7f2;}
    .service4 .card1 { background: #ffffff; display: flex; align-items: center; border-radius: 50px;}
    .service4 .card1 .icon { background: #47d45a; width: 100px; height: 100px; border-radius: 50%; padding: 30px;}
    .service4 .card1 .text p{ font-size: 18px; margin: 0 0 0 20px; font-weight: 600;}

}