@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html { overflow-x: hidden;}
body {margin: 0;padding: 0;font-family: "Open Sans", sans-serif;overflow-x: hidden;color: #2c2c2c;background: #eceef0 !important;}
*{font-size: 15px;}
#Div_body, #WidgetControl1, #WidgetControl1_C, #widgetsControl_C, #HomepagecontentControl_C {background: #eceef0 !important;}
p, .main-table li {color: #364e52;font-size: 16px;line-height: 27px;margin: 0 0 15px 0;font-family: "Open Sans", sans-serif;}
.main-table li {color: #2c2c2c; font-size: 15px;line-height: 25px;margin: 0 0 10px 0; font-family: "Open Sans", sans-serif;}
a { text-decoration: none !important; font-family: "Open Sans", sans-serif;}
h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", sans-serif; color: #2c2c2c}

img { filter: brightness(96%);}

.main-table {text-align: left;padding: 5% 0;}
#RadDockZone2 .container-fluid { padding: 0 6% !important;}

#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: #ffffff;font-size: 16px;font-weight: 500;}
#MenuControl .nav-fill{width:100%;/* background: #10102e; */}
#MenuControl .bg-light {background: #ffffff00 !important;height: 100%;}

#HeaderControl.RadDock_Default .rdMiddle .rdCenter,
#HeaderControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#MenuControl.RadDock_Default .rdMiddle .rdCenter, #MenuControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}

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

/* center #form1 #HeaderControl{background: #f9f7f4; position: relative}
center #form1 #MenuControl{background: #f9f7f4 !important;}
center #form1 #MenuControl .nav-link {color: #2c2c2c;text-shadow: none !important;} */

@media (min-width: 320px) and (max-width: 768px ){ 
  .navbar-toggler { position: absolute; right: 15px; top: -60px; background: #fff}
  #HeaderControl, #HeaderControl_C {background: #181743;}
  #HeaderControl, #HeaderControl_C { height: 70px !important}
  #MenuControl, #MenuControl_C { height: 0 !important}
  .navbar-collapse {background: #605c53;margin-top: -8px;}
  #WidgetControl5 { display: none !important}
}

@media (min-width: 769px)  {
  #HeaderControl {position: absolute;left: 2%;top: 30px;z-i;z-index: 3;width: 18%;text-align: center;background: rgb(255 255 255 / 12%);backdrop-filter: blur(10px); border-radius: 15px 0 0 15px}
  #MenuControl {position: absolute;right: 10%;top: 30px;width: 70%;z-index: 8 !important;background: rgb(255 255 255 / 12%) !important;backdrop-filter: blur(10px);}
  #WidgetControl5 {position: absolute;z-index: 9;width: 8%;right: 2%;top: 30px;padding: 33px 2% 52px;border-radius: 0 15px 15px 0}
}

/* innr-pg-c Start */
.otherpagecss #RadDockZone1.container { max-width: 100%;}
.otherpagecss #RadDockZone1.container #HomepagecontentControl_C table { margin-top: 0 !important;}

.bg-1 { background: #f2ede7 !important}
.bg-2 { background: #605c53 !important}
.text-color { color: #f2ede7;}
.title {font-size: 18px;line-height: 28px;letter-spacing: .5px;margin: 0 0 20px 0;}
.heading p {font-size: 14px;font-weight: 700;display: inline-block;background: #ffffff;padding: 4px 20px;border-radius: 20px;margin: 0 0 18px 0;text-transform: uppercase;color: #373895;letter-spacing: .5px;}
.heading p img {width: 12px;margin: -3px 11px 0 0;}
.heading h2 {font-size: 40px;color: #131335;font-weight: 600;margin: 0 0 45px 0;line-height: 47px;letter-spacing: -1px;}
.sub-heading {font-size: 32px;font-weight: 600;letter-spacing: .6px;margin: 0 0 16px 0;color: #111135;}
.custom-btn {display: inline-block;background: #373895;padding: 6px 6px 6px 30px;border-radius: 30px;color: #fff;}
.custom-btn .btn-icon {display: inline-block;background: #131335;width: 40px;height: 40px;border-radius: 50%;padding: 7px;text-align: center; margin: 0 0 0 8px}
.custom-btn .btn-icon img { width: 12px}

.link {display: inline-block;background: #373895;padding: 8px 8px 8px 30px;border-radius: 30px;color: #fff; animation: fadeInUp 1.2s ease-in-out 100ms both;}
.link .read-more { height: 20px; overflow: hidden;}
.link .read-more span {display: block;transition: all .4s ease-in-out;line-height: 1.2;font-size: 15px;letter-spacing: .2px;}
.link:hover .read-more span { transform: translate(0, -20px); color: #fff;}
.link .link-icon {display: inline-block;background: #131335;width: 35px;height: 35px;border-radius: 50%;padding: 6px;text-align: center;transition: all .4s ease-in-out;margin: 0 0 0 8px}
.link .link-icon img {width: 10px;}
.link:hover .link-icon {transform: rotate(45deg);}


header {position: absolute;width: 100%;z-index: 2;top: 10px;left: 20px;}
header .logo {padding: 4px 0;}

.banner-section { padding: 15px;}
.banner-section .carousel { overflow: hidden; border-radius: 15px;}
.banner-section .carousel-item { position: relative;}
.banner-section .carousel-inner .carousel-item .banner-img{ animation: zoom 8s; object-fit: cover;}
.banner-section .carousel-item::after { content: ''; position: absolute; width: 100%; height: 100%; background-image: linear-gradient(90deg, #131335 10%, transparent); top: 0; left: 0;}
.banner-section .carousel .carousel-caption { text-align: left; width: 30%; z-index: 4; top: 25%;}
.banner-section .carousel .carousel-caption h1 {color: #fff;font-size: 90px;font-weight: 700;margin: 0 0 25px 0;line-height: 87px; animation: fadeInUp 1.2s ease-in-out 100ms both;} 
.banner-section .carousel .carousel-caption p {color: #dfdfdf;font-size: 18px;width: 90%;margin: 0 0 24px 0;line-height: 28px; animation: fadeInUp 1.2s ease-in-out 100ms both;}
.banner-section .carousel-indicators {bottom: 2%; justify-content: end;}
.banner-section .carousel-indicators [data-bs-target]:first-child { background-image: url('image/banner1.jpg'); background-size: cover;}
.banner-section .carousel-indicators [data-bs-target]:nth-child(2) { background-image: url('image/banner2.jpg'); background-size: cover;}
.banner-section .carousel-indicators [data-bs-target]:nth-child(3) { background-image: url('image/banner3.jpg'); background-size: cover;}
.banner-section .carousel-indicators [data-bs-target] {width: 80px;height: 80px;opacity: 1;border: 3px solid #3739956b; border-radius: 10px;margin: 0 5px 0; }
.banner-section .carousel-indicators .active { border: 3px solid #fff !important;}
.banner-section .carousel-control-next, .banner-section .carousel-control-prev { width: 50px; height: 50px; opacity: 1; border: 1px solid #ffffff4d; border-radius: 50%; padding: 15px; top: 46%; transition: all .3s ease-in-out;}
.banner-section .carousel-control-next { right: 5%;}
.banner-section .carousel-control-prev { left: 5%}
.banner-section .carousel-control-next:hover, .banner-section .carousel-control-prev:hover { background: #ffffff1a;}

@keyframes zoom {
    from { transform: scale(1,1);}
    to { transform: scale(1.12, 1.12);}
}   

.about-section { position: relative; z-index: 1; padding: 6% 0;}
.about-section .about1 {width: 90%;height: 660px;background-image: url('../image/about-us1.jpg');border-radius: 20px;overflow: hidden;animation: ZoomOut 1s ease-in-out 300ms both; background-position: top;}
.about-section .right-text { animation: fadeInUp .8s ease-in-out 200ms both;}
.about-section .right-text p { text-align: justify}
.about-section .counts { border-top: 1px solid #cecece; margin: 30px 0 0 0; position: relative; padding: 30px 0 0 0 ;}
.about-section .counts::after { content: ''; position: absolute; width: 60px; height: 3px; background: #373895; left: 0; top: -2px; border-radius: 3px;}
.about-section .counts .count-bx { padding: 10px;}
.about-section .counts .count-bx h2 span {color: #373895;font-size: 60px;font-weight: 600;letter-spacing: -1px;}
.about-section .counts .count-bx p {font-size: 15px;line-height: 23px;text-align: start;}
.about-section .counts .count-bx.line { border-right: 1px dashed #cecece}

.why-choose-section {padding: 0 0 5% 0;background-size: cover;margin: 15px;border-radius: 15px;}
.why-choose-section .why-choose {background: #fff;padding: 15px;border-radius: 15px;}
.why-choose-section .why-choose .pic { width: 45%; border-radius: 15px; overflow: hidden}
.why-choose-section .why-choose .text { width: 56%; padding: 0 0 0 4%}
.why-choose-section .why-choose .text h3 {color: #131335;font-size: 21px;font-weight: 600;margin: 0 0 14px 0;line-height: 28px;}
.why-choose-section .why-choose .text p {font-size: 15px;margin: 0;line-height: 24px;}
.why-choose-section .carousel-indicators {margin-bottom: -40px;}
.why-choose-section .carousel-indicators [data-bs-target] {background-color: #37399533; width: 15px;height: 8px;opacity: 1;border: 0;border-radius: 10px !important;margin: 0 2px;}
.why-choose-section .carousel-indicators .active { background-color: #373895 !important; width: 40px !important}

.service-section {padding: 6% 0;background-image: url('image/ser-bg.jpg');background-size: cover;margin: 15px;border-radius: 15px;}
.service-section .cs_case_study_1_list {display: flex;gap: 20px;margin: 20px;}
.service-section .cs_case_study_1_list > .cs_case_study.cs_style_1 {flex: .7;border-radius: 15px;border-radius: 15px;overflow: hidden;position: relative;}
.service-section .cs_case_study_1_list > .cs_case_study.cs_style_1::after { position: absolute; content: ''; width: 100%; height: 100%; background: #19191926; left: 0; top: 0; backdrop-filter: blur(.5px)}
.service-section .cs_case_study.cs_style_1 {height: 620px; display: flex;align-items: flex-end;position: relative;overflow: hidden;transition: all 0.4s ease;}
.service-section .cs_case_study.cs_style_1 .cs_case_study_thumb {position: absolute;height: 100%;width: 100%;left: 0;top: 0;}
.service-section .cs_case_study_thumb {background-image: url(Image/ser1.jpg);background-position: center;background-size: cover;background-repeat: no-repeat;}
.service-section .cs_case_study_thumb2 {background-image: url(Image/ser2.jpg);background-position: center;background-size: cover;background-repeat: no-repeat;}
.service-section .cs_case_study_thumb3 {background-image: url(Image/ser3.jpg);background-position: center;background-size: cover;background-repeat: no-repeat;}
.service-section .cs_case_study_thumb4 {background-image: url(Image/ser4.jpg);background-position: center;background-size: cover;background-repeat: no-repeat;}
.service-section .cs_case_study_thumb5 {background-image: url(Image/ser5.jpg);background-position: center;background-size: cover;background-repeat: no-repeat;}
.service-section .cs_case_study_thumb6 {background-image: url(Image/ser6.jpg);background-position: center;background-size: cover;background-repeat: no-repeat;}
.service-section .cs_case_study_1_list .cs_case_study.cs_style_1.active{flex: 2.8;}
.service-section .cs_case_study .content-area { opacity: 0; visibility: hidden; transform: translateY(200px); transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease; padding: 25px; background-image: linear-gradient(transparent, #00000075); width: 100%; z-index: 1;}
.service-section .cs_case_study .content-area .ser-name {width: 70%;}
.service-section .cs_case_study .content-area .ser-name h4 { color: #fff; font-size: 30px; margin: 0; font-weight: 600;}
.service-section .cs_case_study .content-area .icon { width: 30%; text-align: end;}
.service-section .cs_case_study .content-area .icon a { display: inline-block; width: 50px; height: 50px; background: #ffffff2d; border: 1px solid #ffffff2d; border-radius: 50%; backdrop-filter: blur(2px); text-align: center; padding: 10px; transition: all .3s ease-in-out;}  
.service-section .cs_case_study .content-area .icon a:hover { background: #373895;}
.service-section .cs_case_study .content-area .icon a:hover {transform: rotate(45deg);}
.service-section .cs_case_study.active .content-area { opacity: 1; visibility: visible; transform: translateY(0);}

.process-section { padding: 5% 0;}
.process-card { position: relative; background: #ffffff; border-radius: 12px; padding: 30px 30px 35px; min-height: 380px; height: 100%;}
.process-number { font-size: 88px; line-height: 1; font-weight: 700; margin-bottom: 25px;background: linear-gradient(180deg, #6865bd 0%, #8582cf 45%, #ffffff 100%); background-clip: text; color: transparent;}
.process-title { color: #131335; font-size: 24px; line-height: 1.3; font-weight: 700; margin-bottom: 22px;}
.process-text { color: #617277; font-size: 17px; line-height: 1.45; margin-bottom: 0;}

/* Connecting arrow */
.process-arrow {position: absolute;top: 50%;right: -33px;transform: translateY(-50%);width: 62px;height: 62px;background: #ffffff;border: 7px solid #eceef0;border-radius: 50%;display: flex;align-items: center;justify-content: center;z-index: 30;}
.process-arrow i { color: #4d50b5; font-size: 22px; line-height: 1;}

    /* Tablet / Mobile */
    @media (max-width: 991.98px) {
        .process-card {
            min-height: auto;
        }

        .process-arrow {
            top: auto;
            right: auto;
            left: 50%;
            bottom: -40px;
            transform: translateX(-50%) rotate(90deg);
        }

        .process-number {
            font-size: 72px;
        }

        .process-title {
            font-size: 21px;
        }
    }

    @media (max-width: 575.98px) {
        .process-section {
            padding: 20px 0 35px;
        }

        .process-card {
            padding: 25px 22px 30px;
        }

        .process-number {
            font-size: 65px;
        }

        .process-title {
            font-size: 20px;
        }

        .process-text {
            font-size: 16px;
        }
    }

footer { padding: 5% 0 0 0; background-image: url('image/ser-bg.jpg'); background-size: cover; margin: 15px; border-radius: 15px; }
footer .footer-logo { width: 200px;}
footer .footer-top {padding: 30px;background: #ffffff12;border-radius: 15px;border: 1px solid #ffffff17;}
footer h4 {color: #fff;font-size: 18px;font-weight: 600;margin: 0 0 12px 0;}
footer h3 { color: #fff; font-size: 24px; margin: 0 0 20px 0}
footer p, footer p a {color: #d5d5d5;font-size: 14px;margin: 0 0 8px 0;}
footer p a:hover {color: #ffffff;}
footer p i { color: #fff; margin: 0 5px 0 0;}
footer .footer-bottom {margin: 4% 0 0 0; border-top: 1px solid #ffffff18; padding: 25px 0;}
footer .footer-bottom p { margin: 0;}
footer .contact-details .icon i{color: #fff;font-size: 17px;margin: -3px 12px 0 0;display: inline-block;}
footer .contact-details .text h5{color: #fff;font-size: 16px;margin: 0 0 4px 0;font-weight: 600;} 
footer .contact-details .text p { color: #c9c9c9; margin: 0; font-size: 14px;}
footer .contact-details hr { background-color: #ffffff47;}
footer .social-icon a {position: relative;color: #fff;background: rgba(255, 255, 255, .1);width: 42px;height: 42px;margin: 0 5px;display: inline-block;border-radius: 6px;text-align: center;line-height: 2.8;transition: all .2s ease-in-out;font-size: 15px;}
footer .social-icon a i { position: relative; z-index: 3;}
footer .social-icon a:hover { transform: translate(0, -4px); box-shadow: 0 1.25rem 2.5rem #001d2866;}

.inner-page-banner { margin: 15px; border-radius: 15px; overflow: hidden;}
.inner-page-banner .banner-bg { background-image: url('image/inner-banner.jpg'); background-size: cover; position: relative; padding: 25% 0 5% 0;}
.inner-page-banner .banner-bg::after { content: ''; position: absolute; width: 100%; height: 100%; background-image: linear-gradient(90deg, #131335 10%, transparent); top: 0; left: 0;}
.inner-page-banner .banner-bg h1 { color: #fff; position: relative; z-index: 2; font-size: 54px; font-weight: 600; margin: 0 0 10px 0; text-align: start;}
.inner-page-banner .banner-bg p { color: #e6e6e6; position: relative; z-index: 2; text-align: start; font-size: 16px; margin: 0;}
.inner-page-banner .banner-bg p a { color: #e6e6e6;}
.inner-page-banner .banner-bg p img { width: 13px; margin: -1px 4px 0 0;}

.service-page ul { list-style-image: url('image/right-arrow.png');}
.service-page ul li { font-size: 17px; transition: all .2s ease-in-out;}
.service-page ul li:hover { padding: 0 0 0 8px; cursor: pointer;}

.contact-bx { background-image: url('image/ser-bg.jpg'); border-radius: 10px; margin-top: -120px; position: relative; z-index: 2;}
.contact-bx .contact-info { text-align: center; padding: 40px 30px; border-right: 1px solid #37399562;}
.contact-bx .contact-info i { color: #373895; font-size: 26px;}
.contact-bx .contact-info h5 { margin: 15px 0px 10px; color: rgb(255, 255, 255); font-size: 20px;}
.contact-bx .contact-info p, .contact-bx .contact-info p a { color: rgba(255, 255, 255, 0.698); margin: 0px; font-size: 15px;}

.menu-toggle-bg {height: 0px;}
.menu-toggle {cursor: pointer;position: absolute;z-index: 3;right: 0;top: 0;background: rgb(255 255 255 / 12%) !important;backdrop-filter: blur(12px);width: 100%;height: 100%;padding: 30px;border-radius: 0 15px 15px 0;}
.menu-toggle .top-bar, .menu-toggle .middle-bar, .menu-toggle .bottom-bar { width: 30px; height: 3px; background: #fff; border-radius: 3px;}
.menu-toggle .top-bar { animation: toggler 1.7s infinite;}
.menu-toggle .middle-bar { animation: toggler 1.3s infinite;}
.menu-toggle .bottom-bar { animation: toggler 2.2s infinite;}

@keyframes toggler {
    0% { width: 30px;}
    50% { width: 18px;}
    100% { width: 30px;}
}
.menu-overlay {position: fixed;inset: 0;backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);opacity: 0;visibility: hidden;transition: opacity 0.35s ease, visibility 0.35s ease;z-index: 998;width: 100%;height: 100%;}
.side-panel {position: fixed;top: 15px;right: 15px;bottom: 0;height: 96vh;width: 500px;background-image: linear-gradient(45deg, #131335 40%, #1a1a42);box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;color: white;border-radius: 10px;transform: translateX(calc(100% + 20px));transition: transform 0.4s ease;z-index: 999;padding: 50px;overflow-y: auto;}

/* ------------------------- OPEN STATE ------------------------- */
body.menu-open .menu-overlay { opacity: 1; visibility: visible;}
body.menu-open .side-panel { transform: translateX(0);}
.close-button { position: absolute; top: 35px; right: 35px; width: 30px; height: 30px; border: 0; background: transparent; color: white; font-size: 32px; font-weight: 200; cursor: pointer;}

/* ------------------------- Panel content ------------------------- */
.logo-img img{width: 170px;padding: 7px 0;/* margin: 0 0 40px 0; */}
.description { color: #438cff; line-height: 1.6; margin-bottom: 35px; font-size: 18px;}
.side-panel h3 { margin-top: 25px; margin-bottom: 15px; font-size: 27px;color: #fff;font-weight: 600;margin: 20px 0;}
.contact { margin-top: 30px;}
.contact-item { margin-bottom: 20px; }
.contact-item span { display: block; color: #438cff; font-size: 15px; margin-bottom: 5px;}
.social { position: absolute;bottom: 35px;}
.social-icons a{ display: inline-block; width: 35px; height: 35px; border-radius: 50%; background: #ffffff3b; font-size: 14px; text-align: center; color: #fff; line-height: 2.3; margin: 0 4px 0 0; border: 1px solid #ffffff17;}

/* Mobile */
@media (max-width: 600px) {
    .side-panel { width: calc(100% - 10px);}
}



/* =========================================================
   RESPONSIVE CSS
   Existing HTML structure remains unchanged
========================================================= */


/* =========================================================
   LARGE DESKTOP
   1400px and above
========================================================= */

@media (min-width: 1400px) {

    .container {
        max-width: 1320px;
    }

    .banner-section .carousel .carousel-caption {
        width: 34%;
        top: 25%;
    }

    .banner-section .carousel .carousel-caption h1 {
        font-size: 82px;
        line-height: 82px;
    }

    .service-section .cs_case_study.cs_style_1 {
        height: 620px;
    }

}


/* =========================================================
   DESKTOP
   1200px - 1399px
========================================================= */

@media (min-width: 1200px) and (max-width: 1399.98px) {

    .banner-section .carousel .carousel-caption {
        width: 38%;
        top: 28%;
    }

    .banner-section .carousel .carousel-caption h1 {
        font-size: 58px;
        line-height: 66px;
    }

    .banner-section .carousel .carousel-caption p {
        font-size: 17px;
        line-height: 27px;
    }

    .service-section .cs_case_study.cs_style_1 {
        height: 570px;
    }

    .service-section .cs_case_study .content-area .ser-name h4 {
        font-size: 26px;
    }

    .about-section .about1 {
        height: 600px;
    }

}


/* =========================================================
   SMALL DESKTOP / LARGE TABLET
   992px - 1199px
========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Global */

    .main-table {
        padding: 4% 3%;
    }

    .heading h2 {
        font-size: 34px;
        line-height: 42px;
    }

    .title {
        font-size: 17px;
        line-height: 27px;
    }


    /* Header */

    header {
        left: 15px;
    }

    header .logo-img img {
        max-width: 180px;
    }


    /* Banner */

    .banner-section {
        padding: 10px;
    }

    .banner-section .carousel .carousel-caption {
        width: 45%;
        top: 20%;
    }

    .banner-section .carousel .carousel-caption h1 {
        font-size: 58px;
        line-height: 62px;
        margin-bottom: 18px;
    }

    .banner-section .carousel .carousel-caption p {
        font-size: 16px;
        line-height: 25px;
        width: 100%;
    }

    .banner-section .carousel-indicators [data-bs-target] {
        width: 65px;
        height: 65px;
    }


    /* About */

    .about-section {
        padding: 7% 0;
    }

    .about-section .about1 {
        width: 95%;
        height: 520px;
    }

    .about-section .counts .count-bx h2 {
        font-size: 48px;
    }


    /* Why Choose */

    .why-choose-section {
        margin: 10px;
    }

    .why-choose-section .why-choose {
        padding: 12px;
    }

    .why-choose-section .why-choose .text h3 {
        font-size: 19px;
        line-height: 25px;
    }

    .why-choose-section .why-choose .text p {
        font-size: 14px;
        line-height: 22px;
    }


    /* Services */

    .service-section {
        margin: 10px;
    }

    .service-section .cs_case_study_1_list {
        gap: 12px;
        margin: 12px;
    }

    .service-section .cs_case_study.cs_style_1 {
        height: 500px;
    }

    .service-section .cs_case_study_1_list
    > .cs_case_study.cs_style_1.active {
        flex: 2.5;
    }

    .service-section .cs_case_study .content-area {
        padding: 18px;
    }

    .service-section .cs_case_study .content-area .ser-name h4 {
        font-size: 22px;
        line-height: 28px;
    }

    .service-section .cs_case_study .content-area .icon a {
        width: 44px;
        height: 44px;
        padding: 8px;
    }


    /* Process */

    .process-card {
        padding: 25px;
        min-height: 350px;
    }

    .process-number {
        font-size: 72px;
    }

    .process-title {
        font-size: 21px;
    }

    .process-text {
        font-size: 16px;
    }


    /* Footer */

    footer {
        margin: 10px;
    }

}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

    /* Global */

    .main-table {
        padding: 5% 4%;
    }

    .heading h2 {
        font-size: 32px;
        line-height: 40px;
    }

    .title {
        font-size: 16px;
        line-height: 25px;
    }


    /* Header */

    #HeaderControl,
    #HeaderControl_C {
        height: 80px !important;
    }

    header {
        left: 15px;
        top: 5px;
    }

    header .logo-img img {
        max-width: 170px;
    }


    /* Banner */

    .banner-section {
        padding: 10px;
    }

    .banner-section .carousel .carousel-caption {
        width: 50%;
        top: 17%;
    }

    .banner-section .carousel .carousel-caption h1 {
        font-size: 48px;
        line-height: 52px;
        margin-bottom: 15px;
    }

    .banner-section .carousel .carousel-caption p {
        font-size: 15px;
        line-height: 23px;
        width: 100%;
    }

    .banner-section .carousel-indicators {
        bottom: 2%;
    }

    .banner-section .carousel-indicators [data-bs-target] {
        width: 55px;
        height: 55px;
    }


    /* About */

    .about-section {
        padding: 8% 0;
    }

    .about-section .about1 {
        width: 100%;
        height: 450px;
    }

    .about-section .right-text {
        padding-left: 25px;
    }

    .about-section .counts .count-bx h2 {
        font-size: 44px;
    }

    .about-section .counts .count-bx p {
        font-size: 14px;
        line-height: 21px;
    }


    /* Why Choose */

    .why-choose-section {
        margin: 10px;
    }

    .why-choose-section .why-choose {
        display: block !important;
    }

    .why-choose-section .why-choose .pic {
        width: 100%;
        margin-bottom: 15px;
    }

    .why-choose-section .why-choose .text {
        width: 100%;
        padding: 0;
    }


    /* Services */

    .service-section {
        margin: 10px;
        padding: 8% 0;
    }

    .service-section .cs_case_study_1_list {
        gap: 8px;
        margin: 10px;
    }

    .service-section .cs_case_study.cs_style_1 {
        height: 430px;
    }

    .service-section .cs_case_study_1_list
    > .cs_case_study.cs_style_1.active {
        flex: 2.2;
    }

    .service-section .cs_case_study .content-area {
        padding: 15px;
    }

    .service-section .cs_case_study .content-area .ser-name {
        width: 75%;
    }

    .service-section .cs_case_study .content-area .ser-name h4 {
        font-size: 19px;
        line-height: 25px;
    }

    .service-section .cs_case_study .content-area .icon {
        width: 25%;
    }

    .service-section .cs_case_study .content-area .icon a {
        width: 40px;
        height: 40px;
        padding: 7px;
    }


    /* Process */

    .process-section {
        padding: 7% 0;
    }

    .process-card {
        padding: 25px;
        min-height: 330px;
    }

    .process-number {
        font-size: 65px;
    }

    .process-title {
        font-size: 20px;
    }

    .process-text {
        font-size: 15px;
        line-height: 23px;
    }

    .process-arrow {
        right: -28px;
        width: 54px;
        height: 54px;
    }


    /* Footer */

    footer {
        margin: 10px;
    }

}


/* =========================================================
   MOBILE
   576px - 767px
========================================================= */

@media (min-width: 576px) and (max-width: 767.98px) {

    body {
        font-size: 15px;
    }

    p,
    li {
        font-size: 15px;
        line-height: 25px;
    }


    /* Header */

    header {
        left: 10px;
        top: 5px;
    }

    header .logo-img img {
        max-width: 160px;
    }


    /* Banner */

    .banner-section {
        padding: 8px;
    }

    .banner-section .carousel .carousel-caption {
        width: 65%;
        top: 18%;
        left: 8%;
    }

    .banner-section .carousel .carousel-caption h1 {
        font-size: 38px;
        line-height: 42px;
        margin-bottom: 12px;
    }

    .banner-section .carousel .carousel-caption p {
        font-size: 14px;
        line-height: 21px;
        width: 100%;
        margin-bottom: 15px;
    }

    .banner-section .carousel-indicators {
        bottom: 2%;
    }

    .banner-section .carousel-indicators [data-bs-target] {
        width: 45px;
        height: 45px;
        border-width: 2px;
    }

    .banner-section .carousel-control-next,
    .banner-section .carousel-control-prev {
        width: 38px;
        height: 38px;
        padding: 10px;
    }


    /* About */

    .about-section {
        padding: 12% 0;
    }

    .about-section .about1 {
        width: 100%;
        height: 400px;
        margin-bottom: 35px;
    }

    .about-section .right-text {
        padding: 0 15px;
    }

    .heading h2 {
        font-size: 30px;
        line-height: 37px;
        margin-bottom: 25px;
    }

    .about-section .counts .count-bx h2 {
        font-size: 42px;
    }


    /* Why Choose */

    .why-choose-section {
        margin: 8px;
        padding-bottom: 12%;
    }

    .why-choose-section .why-choose {
        display: block !important;
        padding: 15px;
    }

    .why-choose-section .why-choose .pic {
        width: 100%;
        margin-bottom: 18px;
    }

    .why-choose-section .why-choose .text {
        width: 100%;
        padding: 0;
    }


    /* Services */

    .service-section {
        margin: 8px;
        padding: 10% 0;
    }

    .service-section .cs_case_study_1_list {
        gap: 8px;
        margin: 8px;
    }

    .service-section .cs_case_study.cs_style_1 {
        height: 400px;
    }

    .service-section .cs_case_study .content-area {
        padding: 15px;
    }

    .service-section .cs_case_study .content-area .ser-name h4 {
        font-size: 17px;
        line-height: 23px;
    }

    .service-section .cs_case_study .content-area .icon a {
        width: 38px;
        height: 38px;
        padding: 6px;
    }


    /* Process */

    .process-section {
        padding: 10% 0;
    }

    .process-card {
        min-height: auto;
        padding: 25px;
    }

    .process-number {
        font-size: 62px;
    }

    .process-title {
        font-size: 21px;
    }

    .process-text {
        font-size: 15px;
        line-height: 24px;
    }

    .process-arrow {
        top: auto;
        right: auto;
        left: 50%;
        bottom: -39px;
        transform: translateX(-50%) rotate(90deg);
    }


    /* Footer */

    footer {
        margin: 8px;
        padding-top: 10%;
    }

    footer .footer-top {
        padding: 20px;
    }

}


/* =========================================================
   SMALL MOBILE
   320px - 575px
========================================================= */

@media (max-width: 575.98px) {

    body {
        font-size: 14px;
    }

    p,
    li {
        font-size: 14px;
        line-height: 24px;
    }

    .main-table {
        padding: 10% 15px;
    }


    /* -----------------------------------------
       Header
    ----------------------------------------- */

    header {
        left: 8px;
        top: 5px;
    }

    header .logo {
        padding: 5px 0;
    }

    header .logo-img img {
        max-width: 145px;
    }


    /* -----------------------------------------
       Navigation
    ----------------------------------------- */

    .navbar-toggler {
        right: 10px;
        top: -52px;
    }

    #MenuControl .nav-item .nav-link {
        font-size: 13px;
        letter-spacing: .4px;
    }


    /* -----------------------------------------
       Banner
    ----------------------------------------- */

    .banner-section {
        padding: 5px;
    }

    .banner-section .carousel {
        border-radius: 10px;
    }

    .banner-section .carousel .carousel-caption {
        width: 78%;
        top: 14%;
        left: 8%;
        right: auto;
    }

    .banner-section .carousel .carousel-caption h1 {
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 10px;
    }

    .banner-section .carousel .carousel-caption p {
        font-size: 12px;
        line-height: 18px;
        width: 100%;
        margin-bottom: 12px;
    }

    .banner-section .custom-btn {
        padding: 4px 4px 4px 18px;
        font-size: 13px;
    }

    .banner-section .custom-btn .btn-icon {
        width: 32px;
        height: 32px;
        padding: 5px;
    }
    .banner-section .link { display: none}

    .banner-section .carousel-indicators {
        bottom: -3%;
        margin-right: 3%;
    }
    
    .banner-section .carousel-indicators [data-bs-target] {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        margin: 0 2px;
        border-width: 1px;
    }

    .banner-section .carousel-control-next,
    .banner-section .carousel-control-prev {
        display: none;
    }


    /* -----------------------------------------
       Common Heading
    ----------------------------------------- */

    .heading p {
        font-size: 10px;
        padding: 4px 12px;
        margin-bottom: 12px;
    }

    .heading p img {
        width: 9px;
        margin-right: 7px;
    }

    .heading h2 {
        font-size: 27px;
        line-height: 34px;
        letter-spacing: -.5px;
        margin-bottom: 25px;
    }

    .title {
        font-size: 15px;
        line-height: 24px;
    }


    /* -----------------------------------------
       About
    ----------------------------------------- */

    .about-section {
        padding: 5% 0;
    }

    .about-section .about1 {
        width: 100%;
        height: 330px;
        margin-bottom: 30px;
        border-radius: 15px;
        display: none;
    }

    .about-section .right-text {
        padding: 0 15px;
    }

    .about-section .right-text p {
        text-align: left;
    }

    .about-section .counts {
        margin-top: 25px;
        padding-top: 20px;
    }

    .about-section .counts .count-bx {
        padding: 5px;
    }

    .about-section .counts .count-bx h2 {
        font-size: 36px;
        margin-bottom: 5px;
    }

    .about-section .counts .count-bx p {
        font-size: 13px;
        line-height: 19px;
    }


    /* -----------------------------------------
       Why Choose
    ----------------------------------------- */

    .why-choose-section {
        margin: 5px;
        padding: 0 0 15% 0;
    }

    .why-choose-section .why-choose {
        display: block !important;
        padding: 12px;
        border-radius: 12px;
        margin: 6px 0px;
    }

    .why-choose-section .why-choose .pic {
        width: 100%;
        margin-bottom: 15px;
        border-radius: 10px;
    }

    .why-choose-section .why-choose .text {
        width: 100%;
        padding: 0;
    }

    .why-choose-section .why-choose .text h3 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 10px;
    }

    .why-choose-section .why-choose .text p {
        font-size: 13px;
        line-height: 21px;
    }

    .why-choose-section .carousel-indicators {
        margin-bottom: -30px;
    }


    /* -----------------------------------------
       Services
    ----------------------------------------- */

    .service-section {
        margin: 5px;
        padding: 12% 0;
        border-radius: 12px;
    }

    .service-section .container > .row > .col-md-6 {
        margin-bottom: 20px;
    }

    .service-section .text-end {
        text-align: left !important;
    }

    .service-section .cs_case_study_1_list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 5px;
    }

    .service-section .cs_case_study.cs_style_1 {
        flex: none !important;
        width: 100%;
        height: 180px;
        min-height: 180px;
        border-radius: 12px;
    }

    .service-section .cs_case_study_1_list
    > .cs_case_study.cs_style_1.active {
        flex: none !important;
        height: 280px;
    }

    .service-section .cs_case_study .content-area {
        padding: 18px;
        opacity: 1 !important;
    }

    .service-section .cs_case_study .content-area .ser-name {
        width: 75%;
    }

    .service-section .cs_case_study .content-area .ser-name h4 {
        font-size: 18px;
        line-height: 24px;
    }

    .service-section .cs_case_study .content-area .icon {
        width: 25%;
    }

    .service-section .cs_case_study .content-area .icon a {
        width: 40px;
        height: 40px;
        padding: 7px;
    }


    /* -----------------------------------------
       Process
    ----------------------------------------- */

    .process-section {
        padding: 12% 0;
    }

    .process-card {
        min-height: auto;
        padding: 25px 20px 30px;
        border-radius: 12px;
    }

    .process-number {
        font-size: 58px;
        margin-bottom: 18px;
    }

    .process-title {
        font-size: 20px;
        line-height: 27px;
        margin-bottom: 15px;
    }

    .process-text {
        font-size: 14px;
        line-height: 23px;
    }

    .process-arrow {
        top: auto;
        right: auto;
        left: 50%;
        bottom: -37px;
        width: 54px;
        height: 54px;
        transform: translateX(-50%) rotate(90deg);
    }


    /* -----------------------------------------
       Inner Page Banner
    ----------------------------------------- */

    .inner-page-banner {
        margin: 5px;
        border-radius: 10px;
    }

    .inner-page-banner .banner-bg {
        padding: 45% 20px 10% 20px;
    }

    .inner-page-banner .banner-bg h1 {
        font-size: 34px;
        line-height: 40px;
    }

    .inner-page-banner .banner-bg p {
        font-size: 14px;
        line-height: 22px;
    }


    /* -----------------------------------------
       Service Page
    ----------------------------------------- */

    .service-page ul {
        padding-left: 22px;
    }

    .service-page ul li {
        font-size: 15px;
        line-height: 24px;
    }


    /* -----------------------------------------
       Contact
    ----------------------------------------- */

    .contact-bx {
        margin-top: -50px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .contact-bx .contact-info {
        padding: 25px 15px;
        border-right: 0;
        border-bottom: 1px solid #37399562;
    }

    .contact-bx .contact-info:last-child {
        border-bottom: 0;
    }


    /* -----------------------------------------
       Footer
    ----------------------------------------- */

    footer {
        margin: 5px;
        padding: 12% 15px 0;
        border-radius: 10px;
    }

    footer .footer-top {
        padding: 20px 15px;
    }

    footer .footer-logo {
        width: 160px;
    }

    footer h3 {
        font-size: 21px;
    }

    footer h4 {
        font-size: 17px;
    }

    footer p,
    footer p a {
        font-size: 13px;
        line-height: 22px;
    }

    footer .contact-details .text h5 {
        font-size: 14px;
    }

    footer .contact-details .text p {
        font-size: 13px;
    }

    footer .social-icon a {
        width: 38px;
        height: 38px;
        line-height: 2.5;
    }


    /* -----------------------------------------
       Side Menu
    ----------------------------------------- */

    .side-panel {
        top: 5px;
        right: 5px;
        bottom: 5px;
        width: calc(100% - 10px);
        padding: 35px 25px;
        border-radius: 10px;
    }

    .close-button {
        top: 20px;
        right: 20px;
        font-size: 28px;
    }

    .logo-img img {
        width: 160px;
        margin-bottom: 25px;
    }

    .description {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .side-panel h3 {
        font-size: 22px;
    }

    .contact {
        margin-top: 20px;
    }

    .social {
        position: relative;
        bottom: auto;
        margin-top: 30px;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
   Below 400px
========================================================= */

@media (max-width: 399.98px) {

    .banner-section .carousel .carousel-caption {
        width: 82%;
        top: 12%;
    }

    .banner-section .carousel .carousel-caption h1 {
        font-size: 24px;
        line-height: 28px;
    }

    .banner-section .carousel .carousel-caption p {
        font-size: 11px;
        line-height: 16px;
    }

    .banner-section .carousel-indicators [data-bs-target] {
        width: 27px;
        height: 27px;
    }

    .heading h2 {
        font-size: 24px;
        line-height: 31px;
    }

    .about-section .about1 {
        height: 260px;
        display: none;
    }

    .about-section .counts .count-bx h2 {
        font-size: 32px;
    }

    .service-section .cs_case_study.cs_style_1 {
        height: 160px;
        min-height: 160px;
    }

    .service-section .cs_case_study_1_list
    > .cs_case_study.cs_style_1.active {
        height: 250px;
    }

    .process-number {
        font-size: 52px;
    }
    .about-section .counts .count-bx h2 span { font-size: 34px}

}

.dropdown-menu { padding: 0; min-width: 200px}
.dropdown-menu .dropdown-item { padding: 8px 15px}
.dropend .dropdown-toggle::after { position: absolute; right: 10px; top: 15px}