@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"); 
body { margin: 0px; padding: 0px; font-family: Roboto, sans-serif; overflow-x: hidden; color: rgb(33, 33, 33);}
p, li {color: rgb(33, 33, 33);font-size: 15px;line-height: 26px;font-weight: 400;margin: 0px 0px 15px;letter-spacing: 0.5px;font-family: Roboto, sans-serif;}
.main-table li {color: rgb(33, 33, 33);font-size: 15px;line-height: 25px;margin: 0px 0px 10px 0;font-family: Roboto, sans-serif;}
a { font-family: Roboto, sans-serif; text-decoration: none !important;}
h1, h2, h3, h4, h5, h6 { font-family: Roboto, sans-serif; color: rgb(33, 33, 33);}
.main-table { text-align: left; padding: 5% 0px;}

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

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

#HomepagecontentControl_C {/* margin-top: -21px; */}

#HeaderControl, #HeaderControl_C { height: auto !important;}
#HeaderControl.RadDock_Default .rdMiddle .rdCenter, #HeaderControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#MenuControl_C .bg-light { --bs-bg-opacity: 1; height: 100%; background-color: transparent !important;}
#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: -65px; background: rgb(255, 255, 255); }
    #MenuControl, #MenuControl_C { height: 0px !important; }
    #HeaderControl, #HeaderControl_C {background: rgb(0 0 0);} 
    .navbar-collapse {background: rgb(12 18 34);margin-top: -10px;}
}

@media (min-width: 769px) { 
    #HeaderControl {position: absolute;left: 5%;top: 8px;z-index: 99;width: 22%;text-align: center;}
    #MenuControl {position: absolute;right: 5%;top: 15px;width: 65%;z-index: 99 !important;}
}

.otherpagecss #RadDockZone1.container { max-width: 100%;}
.otherpagecss #RadDockZone1.container #HomepagecontentControl_C table { margin-top: 0px !important;}
.otherpagecss #WidgetControl5 { display: none;}

.custom-btn { display: inline-block; padding: 14px 36px; background: rgb(239, 124, 0); color: rgb(255, 255, 255); font-size: 16px; font-weight: 600; letter-spacing: 0.8px; transition: 0.2s ease-in-out;}
.custom-btn:hover { transform: scale(1.05); color: rgb(255, 255, 255); background: #eb5c05;}
.contact-us { display: inline-block; padding: 14px 36px; background: rgb(255, 255, 255); color: rgb(31, 31, 31); font-size: 16px; font-weight: 600; letter-spacing: 0.8px; transition: 0.2s ease-in-out;}
.contact-us:hover { transform: scale(1.05); color: rgb(31, 31, 31);}
.heading p {font-size: 13px;padding: 0px 0px 0px 40px;font-weight: 500;text-transform: uppercase;letter-spacing: 1.4px;color: rgb(76, 82, 98);display: inline-block;position: relative;margin: 0 0 10px 0;}
.heading p::after { position: absolute; content: ""; width: 30px; height: 1px; background: #ef7c00; left: 0px; top: 12px;}
.heading h2 {color: rgb(43, 43, 43);font-size: 32px;margin: 0px 0px 20px;font-weight: 500;line-height: 1.37;}
.heading h3 {color: rgb(43, 43, 43);font-size: 26px;margin: 0px 0px 20px;font-weight: 500;line-height: 1.37;}
.sub-heading { color: rgb(51, 51, 51); font-size: 30px; margin: 0px 0px 20px; font-weight: 600; letter-spacing: 0.5px;}
.title {color:#ef7c00;font-size: 17px;margin: 0 0 8px 0;font-weight: 700;}

header{padding: 14px 0;}

.banner-section { position: relative;}
.banner-section {position: relative;height: 100vh;padding: 4% 0;background: #000;overflow: hidden;}
.banner-section video {width: 80%;margin: 0 10%;}
.banner-section .banner-content {width: 100%;height: 99%;position: absolute; top: 0px;left: 0px;}
.banner-section .banner-content .text {position: absolute;left: 20%;top: 36%;width: 60%;text-align: center;}
.banner-section .banner-content .text h1 {color: rgb(255, 255, 255);font-size: 50px;font-weight: 700;margin: 0px 0px 15px 0;}
.banner-section .banner-content .text h4 {color: #fff;text-transform: uppercase;letter-spacing: 1px;font-weight: 400;margin: 0 0 30px 0;font-size: 18px;}
.banner-section .banner-content .text p { color: #ebebeb; font-size: 18px; margin: 0 0 40px 0; line-height: 1.5;}

.service-section { padding: 5% 0px; background: #f3f7fa;}

.SAP-services { padding: 5% 0px;}
.SAP-services .service-card { position: relative; overflow: hidden; transition: 0.4s; margin: 20px 0px 0px; padding: 30px;}
.SAP-services .service-card:hover { transform: translateY(-8px);}
.SAP-services .service-card .icon-box { width: 110px; height: 110px; background: rgb(244, 247, 251); display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; border: 1px solid rgba(255, 106, 0, 0.12);}
.SAP-services .service-card .icon-box img { transition: 0.4s;}
.SAP-services .service-card:hover .icon-box img { transform: scale(1.08) rotate(-2deg);}
.SAP-services .service-card .line {width: 70px;height: 2px;background: linear-gradient(to right, #ff6a00, #ff9f4d);margin: 30px 0px 20px;}
.SAP-services .service-card .service-title {font-size: 22px;line-height: 1.3;font-weight: 800;color: rgb(43, 43, 43);margin-bottom: 16px;}
.SAP-services .service-card p {text-align: justify;}
.SAP-services .custom-btn1 { display: inline-flex; align-items: center; font-size: 14px; letter-spacing: 0.3px; gap: 10px; padding: 10px 20px; background: linear-gradient(135deg, rgb(239 124 0), #eb5c05); color: rgb(255, 255, 255); transition: 0.4s;}
.SAP-services .custom-btn1:hover { background: linear-gradient(135deg, rgb(24, 59, 99), rgb(41, 89, 141)); color: rgb(255, 255, 255); transform: translateY(-3px);}
.SAP-services .carousel-control-next-icon, .SAP-services .carousel-control-prev-icon  { filter: brightness(.2);}
.SAP-services .carousel-control-next, .SAP-services .carousel-control-prev { width: 30px;}
.SAP-services .carousel-control-next { right: -30px;}
.SAP-services .carousel-control-prev { left: -30px;}

.about-section { padding: 5% 0px; background: rgb(243, 247, 250);}
.about-section .about-pic { position: relative;}
.about-section .about-pic::after { content: ''; position: absolute; width: 95%; height: 95%; top: 10%; left: 0; background: #ef7c00; opacity: .9;}
.about-section .about-pic img { width: 95%; margin-left: 5%; position: relative; z-index: 1; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}

.why-choose-us { padding: 5% 0px;}
.why-choose-card { background: #f3f7fa; padding: 30px; border-left: 4px solid #ef7c00; border-radius: 20px;}
.why-choose-card h4 {font-size: 20px;color: #2b2b2b;margin: 0 0 15px 0;}
.why-choose-card p {margin: 0;font-size: 14px;line-height: 26px;}

.success-stories { padding: 5% 0px; background: rgb(243, 247, 250);}
.success-stories .case-study .pic { background: rgb(255, 255, 255); padding: 24px; margin: 20px 0px;}
.success-stories .case-study h4 { color: rgb(43, 43, 43); font-size: 22px; line-height: 1.4;}

.get-in-touch { padding: 8% 0px; background-image: url("image/get-in-touch.jpg"); background-size: cover;}

footer {background-image: url("image/footer-bg.jpg");background-size: cover;padding: 4% 0px 0px;position: relative;margin: -7px 0 0 0;}
footer::after { content: ""; position: absolute; width: 100%; height: 100%; background-image: linear-gradient(60deg, rgb(9, 15, 39), rgb(0, 0, 0)); top: 0px; left: 0px; opacity: 0.9;}
footer .links { position: relative; z-index: 3;}
footer .footer-bottom {position: relative;z-index: 3;margin: 3% 0px 0px 0;background: rgba(2, 2, 2, 0.38);padding: 15px 0px;}
footer h4 { color: rgb(255, 255, 255); font-size: 22px; margin: 0px 0px 18px; font-weight: 500; letter-spacing: 0.5px;}
footer p, footer p a {color: #dfdfdf;font-size: 14px;margin: 0px 0px 5px 0;}
footer p a:hover { color: rgb(255, 255, 255);}
footer p i { color: rgb(255, 255, 255); margin: 0px 5px 0px 0px;}
footer .social-icon a { color:#fff; margin: 0 8px 0 0;}

.banner-bottom {padding: 5% 0;background-image: linear-gradient(90deg, #0c1222 65%, #ffffff00 50%);margin: -6% 0 0 0;position: relative;z-index: 2;}
.banner-bottom h1 {color: #fff;font-size: 42px;margin: 0;line-height: 1.3;text-align: start;letter-spacing: .5px;}

.vision-section { background-image: url(image/get-in-touch.jpg); background-size: cover; background-attachment: fixed;}
.vision-section .mission-card {background: #0c1222;padding: 80px 80px 60px 60px;min-height: 640px;} 
.vision-section .mission-card p {color: #f0f0f0dd;line-height: 1.8;font-size: 16px;}
.vision-section .mission-card h2 {font-size: 46px;margin: 30px 0 30px 0;width: 50%;line-height: 1.3;}
.vision-section .vision-card {background: #ff9f4d;padding: 35px;margin: 100% 0 0 -12%;}
.vision-section .vision-card h3 {color: #020202;font-size: 29px;margin: 0px 0 12px 0;}
.vision-section .vision-card p {margin: 0;line-height: 1.7;font-size: 14px;} 

.contact-banner { background: #0c1222; min-height: 180px;}
.breadcrumb { background: rgb(243, 247, 250); padding: 8px 0;}
.breadcrumb p, .breadcrumb p a { color: #2b2b2b; font-size: 18px; font-weight: 500;}

.contact-page .contact-form .form-control { padding: 12px; margin: 0 0 12px 0;}
.contact-page .contact-form input[type='button'] {background: #0c1222;color: #fff;padding: 12px 30px;border: 0;border-radius: 5px;}
.contact-page .contact-info h4 {font-size: 20px;color: #0c1222;margin: 10px 0;}
.contact-page .contact-info h4 i {color: #ef7c00; margin: 0 12px 0 0;font-size: 19px;}
.contact-page .contact-info p, .contact-page .contact-info p a {color: #505050;font-size: 16px;margin: 0 0 20px 0;}

.industries-section { padding: 5% 0; background: #f3f7fa;}
.industries-section .industry-card {background: #fff; padding: 30px 10px;border-top: 4px solid #ef7c00;border-radius: 20px;text-align: center;margin: 10px 0;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;min-height: 160px;}
.industries-section .industry-card img {width: 48px;}
.industries-section .industry-card h4 {color: #2b2b2b;font-size: 16px;margin: 10px 0 0 0;letter-spacing: .4px;font-weight: 500;}  

@media (min-width: 320px) and (max-width: 768px) {
    p, li { font-size: 14px;line-height: 24px;}
    .main-table li {font-size: 14px;line-height: 20px;margin: 0px 0px 8px 0;}
    
    .custom-btn { padding: 10px 30x; font-size: 14px;}
    .heading h2 {font-size: 27px; line-height: 1.37;}
    .heading h3 {font-size: 21px; line-height: 1.45}
    .sub-heading { color: rgb(51, 51, 51); font-size: 30px; margin: 0px 0px 20px; font-weight: 600; letter-spacing: 0.5px;}
    .title {color:#ef7c00;font-size: 17px;margin: 0 0 8px 0;font-weight: 700;}
    
    header{padding: 5px 0;}
    header img { width: 280px}
    
    .banner-section { position: relative;}
    .banner-section {position: relative;height: 300px;padding: 4% 0;background: #000;overflow: hidden;}
    .banner-section video {width: 90%;margin: 0 5%;}
    .banner-section .banner-content .text { left: 10%;top: 40%;width: 80%;}
    .banner-section .banner-content .text h1 {font-size: 20px;font-weight: 700;margin: 0px 0px 10px 0;}
    .banner-section .banner-content .text h4 { margin: 0 0 20px 0;font-size: 14px;}
    .banner-section .banner-content .text p {font-size: 13px; margin: 0 0 30px 0;}
    .banner-section .banner-content .text a { display: none}

    .contact-banner { min-height: 0 }
    
    .service-section { padding: 7% 0px; background: #f3f7fa;}
    
    .SAP-services .service-card { position: relative; overflow: hidden; transition: 0.4s; margin: 20px 0px 0px; padding: 20px;}
    .SAP-services .service-card .icon-box { width: 90px; height: 90px;}
    .SAP-services .service-card .service-title {font-size: 18px; margin-bottom: 12px;}
    .SAP-services .carousel-control-next { right: -10px;}
    .SAP-services .carousel-control-prev { left: -10px;}
    
    .about-section { padding: 5% 0 9% 0;}
    .about-section .about-pic::after { content: ''; position: absolute; width: 95%; height: 95%; top: 10%; left: 0; background: #ef7c00; opacity: .9;}
    .about-section .about-pic { margin: 20px 0}
    
    .success-stories .case-study h4 { font-size: 20px;}

    .banner-bottom { background-image: linear-gradient(90deg, #0c1222 65%, #0c1222 50%);}
    .banner-bottom h1 { font-size: 24px;}

    .vision-section .mission-card { padding: 30px;min-height: 240px; margin: 20px 0 0 0} 
    .vision-section .mission-card p { line-height: 1.6;font-size: 15px; margin: 0}
    .vision-section .mission-card h2 {font-size: 26px;margin: 0 0 20px 0;}
    .vision-section .vision-card { padding: 30px;margin: 20px 0;}
    .vision-section .vision-card h3 {color: #020202;font-size: 26px;}
    .vision-section .vision-card p { margin: 0} 
}

#HomepagecontentControl, #HomepagecontentControl_C {min-height: auto !important;}