@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

   :root {

       /* Theme based on #0b1c3a */
       --page-bg: #e4e9f1;
       --surface: #ffffff;
       --surface-soft: #f0f4fc;
       --primary: #0b1c3a;
       --primary-dark: #172142;
       --primary-hover: #3466e8;
       /* Brighter, more vivid blue for highlight on hover */
       --primary-active: #00d4ff;
       /* Bright cyan highlight for active state */
       --primary-hover-shadow: 0 0 8px 2px #3466e860;
       /* Subtle glow for hover */
       --primary-active-shadow: 0 0 12px 3px #00d4ff99;
       /* More pronounced glow for active */

       --primary-nav: #00bcd4;
       /* --primary-nav: #ffaa0b; */
       /* --primary-dark: #071229; */
       --primary-light: #344563;
       --bg-warning: #00bcd4;


       --text-dark: #000028;
       --text-muted: #4b5679;
       --text-on-primary: #fff;
       --text-light: #fff;

       --border-soft: #34456333;
       --shadow-soft: 0 8px 24px rgba(11, 28, 58, 0.10);

       /* --main-gradient: linear-gradient(90deg, #0b1c3a 0%, #18b0e8 100%); */
       /* --main-gradient: linear-gradient(135deg, #172142 0%, #243a7a 45%, #5a2b9c 100%); */
       --main-gradient-1: linear-gradient(135deg, #172142 0%, #243a7a 45%, #5a2b9c 100%);
       --main-gradient-2: linear-gradient(120deg, #172142 0%, #3761b2 60%, #5a2b9c 100%);
       --main-gradient: linear-gradient(110deg, #172142 15%, #2a3259 50%, #3d6dc2 100%);
       --main-gradient: radial-gradient(circle at 60% 50%, #2f5f85 0%, #1f4e6f 35%, #143a56 65%, #0b2236 100%);
       /* --main-gradient: radial-gradient(1200px 420px at 20% 20%, rgba(47, 91, 255, 0.35), transparent 55%), radial-gradient(900px 380px at 80% 10%, rgba(124, 58, 237, 0.32), transparent 55%), linear-gradient(180deg, #07163a 0%, #0b1f4b 100%);
        padding: 1rem !important; */
       --main-gradient-opposite: linear-gradient(110deg, #ffaa0b 15%, #d47f00 50%, #805200 100%);

       --secondary-gradient: linear-gradient(90deg, #e0bb38 0%, #0b1c3a 100%);
       --purple-gradient: linear-gradient(90deg, var(--primary-dark) 10%, #313131 150%);
       --card-grad: linear-gradient(90deg, #0D2024 0%, #00307D 35%, #00D4FF 100%);

   }

   #spa-content {
       margin-top: 10rem;
       /* Default desktop */
   }

   @media (max-width: 991.98px) {
       #spa-content {
           margin-top: 7rem;
           /* Tablet */
       }
   }

   @media (max-width: 575.98px) {
       #spa-content {
           margin-top: 6rem;
           /* Mobile */
       }
   }

   /* ===== Theme Helper Classes (replaces inline style="...") ===== */
   .btn-theme-warning {
       background: var(--bg-warning) !important;
       color: var(--text-light) !important;
       border: none !important;
       font-weight: 600;
       transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
   }

   .btn-theme-warning:hover {
       background: transparent !important;
       color: var(--bg-warning) !important;
       border: 1px solid var(--bg-warning) !important;
       transform: translateY(-1px);
   }

   /* About */
   .about-section-row-spacing {
       margin-bottom: 5rem;
   }

   .about-image-minheight {
       min-height: 320px;
   }

   .about-image-inline-wrap {
       position: relative;
       display: inline-block;
   }

   .about-image-frame {
       border: 7px solid #fff;
       border-radius: 8px;
       position: relative;
       z-index: 2;
       box-shadow: 0 4px 22px rgba(0, 0, 0, 0.04);
       background: #fff;
   }

   .about-image-corner-strip {
       position: absolute;
       bottom: -10px;
       right: -10px;
       width: 100%;
       height: 100%;
       border-bottom: 20px solid var(--bg-warning);
       border-right: 20px solid var(--bg-warning);
       border-radius: 9px;
       z-index: 1;
   }

   .theme-accent-small {
       letter-spacing: 1px;
       color: var(--bg-warning) !important;
   }

   .theme-about-title {
       color: var(--text-dark) !important;
       font-size: 2rem;
   }

   .theme-about-lead {
       font-size: 1rem;
   }

   .theme-stat-number {
       color: var(--text-light) !important;
   }


   .stat-mobile-title {
       font-family: 'Montserrat' !important;
       font-weight: 700 !important;
       font-size: 2rem;
       letter-spacing: 0.02em;
       color: #fff;
       text-align: center;
   }

   /* Solving section */
   .solving-section-margins {
       margin: 90px 0 90px 0;
   }

   .solving-left-pad {
       padding-left: 40px;
   }

   .solving-right-pad {
       padding-right: 40px;
   }

   .solving-video-frame {
       width: 100%;
       height: 100%;
       border-radius: 10px;
       overflow: hidden;
       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
   }

   .solving-iframe {
       width: 100%;
       height: 100%;
       min-height: 350px;
       border: none;
       display: block;
   }

   .solving-right-panel {
       /* background: var(--primary-dark); */
       color: var(--text-dark);
       padding: 40px;
       /* border-radius: 0 20px 20px 0; */
       /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); */
       height: 100%;
   }

   .solving-right-heading {
       color: var(--text-dark);
       font-size: 2rem;
       font-weight: 600;
       margin-bottom: 0.4rem;
   }

   .solving-right-subheading {
       color: var(--bg-warning);
       font-size: 1.1rem;
       font-weight: 700;
   }

   .solving-right-text {
       color: var(--text-dark);
   }

   .solving-right-text-spaced {
       color: var(--text-dark);
       margin-top: 1rem;
   }

   /* Service section */
   .service-section-top {
       margin-top: 4rem;
   }

   .service-card-rounded {
       border-radius: 18px;
       overflow: hidden;
   }

   .service-img-hover-rounded {
       border-radius: 4px 4px 0 0;
       overflow: hidden;
   }

   .service-img-rounded {
       border-radius: 18px 18px 0 0;
   }

   .service-img-body-rounded {
       border-radius: 0 0 18px 18px;
   }



   /* FAQ */
   .faq-section-wrapper {
       background: #fff;
       padding: 8px 0 0 0;
       border-bottom: 0.8px solid #dce0eb;
   }

   .faq-container {
       max-width: 960px;
       margin: 0 auto;
   }

   .faq-bg {
       background: linear-gradient(117deg, rgba(104, 223, 255, 0.4) 0%, rgba(184, 254, 234, 0.4) 100%);
       /* fallback: if --main-gradient used in other places, override it here for 40% opacity look */
       /* or use: background: var(--main-gradient); opacity: 0.4; but that would also make children translucent */
   }


   .faq-title {
       text-align: center;
       font-size: 2rem;
       /* font-weight: 700; */
       color: var(--text-dark);
       margin-bottom: 8px;
       letter-spacing: -0.8px;
   }

   .faq-lead {
       text-align: center;
       color: var(--text-dark);
       font-size: 1rem;
       margin-bottom: 33.6px;
   }

   .faq-columns {
       display: flex;
       flex-wrap: wrap;
       gap: 38.4px 35.2px;
       justify-content: center;
   }

   .faq-column {
       flex: 1 1 336px;
       min-width: 272px;
       max-width: 432px;
   }

   .faq-column-heading {
       /* font-weight: 700; */
       color: var(--text-dark);
       font-size: 1rem;
       margin-bottom: 1.6px;
       letter-spacing: -0.4px;
   }

   .faq-column-lead {
       color: #94a3b8;
       font-size: 0.776rem;
       margin-bottom: 14.4px;
   }

   .faq-list-card {
       box-shadow: 0 1.6px 11.2px rgba(21, 31, 71, 0.05);
       border-radius: 6.4px;
       background: #fff;
       overflow: hidden;
   }

   .faq-question {
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-weight: 600;
       color: var(--text-dark);
       padding: 12px 16px;
       cursor: pointer;
   }

   .faq-question-text {
       font-size: 0.8em;
   }

   .faq-question-toggle {
       font-size: 0.984rem;
       color: var(--text-dark);
   }

   .faq-question-inactive {
       font-weight: 500;
       color: var(--text-dark);
       padding: 13.6px 16px;
   }

   .faq-question-inactive .faq-question-text {
       color: var(--text-dark);
       font-weight: 500;
   }

   .faq-question-inactive .faq-question-toggle {
       color: var(--text-light);
       font-size: 0.872rem;
   }

   .faq-answer {
       background: #f8fafb;
       border-top: 0.8px solid var(--bg-warning);
       font-size: 0.808rem;
       color: #25324b;
       padding: 12px 16px 9.6px 16px;
   }

   .faq-item {
       border-top: 0.8px solid #e4e8f1;
   }

   .faq-item.active {
       background: var(--bg-warning);
       border-top: none;
   }

   .newsletter-wrap-theme {
       margin-top: 44px;
       /* background: var(--bg-warning); */
       background: linear-gradient(117deg, #e8f2ff 70%, #f6fafc 100%);
       ;
       padding: 28.8px 0 19.2px 0;
   }

   .newsletter-container {
       max-width: 880px;
       margin: 0 auto;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
       flex-wrap: wrap;
   }

   .newsletter-title {
       font-weight: 700;
       color: var(--text-dark);
       font-size: 1.088rem;
   }

   .newsletter-form-row {
       flex: 1;
       display: flex;
       gap: 12px;
       min-width: 168px;
   }

   .newsletter-input {
       flex: 1 1 160px;
       padding: 10.4px 12px;
       font-size: 0.8rem;
       border-radius: 4.8px;
       border: none;
       outline: none;
       box-shadow: 0 0.8px 6.4px 0 #f3e48a;
       background: #fff;
       margin-right: 4px;
   }

   .newsletter-button {
       background: #174381;
       color: #fff;
       border: none;
       padding: 10.4px 26.4px;
       border-radius: 4.8px;
       font-size: 0.8rem;
       font-weight: 700;
       cursor: pointer;
       transition: background .2s, color .2s;
   }

   .newsletter-button:hover {
       background: var(--primary);
   }

   .newsletter-subtext {
       font-size: 0.768rem;
       color: #757575;
       margin-left: 26.4px;
       margin-top: 3.2px;
       margin-bottom: -6.4px;
   }


   .banner-indicators-offset {
       position: relative;
       top: 10px;
   }

   /* Responsive tweaks for extracted classes */
   @media (max-width: 767.98px) {
       .theme-about-title {
           font-size: 1.6rem;
       }

       .about-section-row-spacing {
           margin-bottom: 30px;
       }

       .solving-left-pad,
       .solving-right-pad {
           padding-left: 15px;
           padding-right: 15px;
       }

       .solving-right-panel {
           border-radius: 0;
       }

       .solving-video-frame {
           border-radius: 20px 20px 0 0;
       }

       .testimonials-hero-title {
           font-size: 1.5rem;
           margin-bottom: 20px;
       }

       .testimonials-hero-subtitle {
           font-size: 1.2rem;
       }

       .faq-title {
           font-size: 1rem;
       }

       .faq-columns {
           gap: 20px 12px;
       }
   }

   /* breakpoint and up - mega dropdown styles */
   .modal-title {
       text-transform: Uppercase;
   }

   .carousel-item {
       width: 100%;
       height: 100%;
       background: transparent !important;
       color: #fff;
   }

   .carousel-control-prev,
   .carousel-control-next {
       width: 4% !important;
   }

   .fa-angle-left,
   .fa-angle-right {
       width: 50px;
       height: 50px;
       background: var(--primary);
       font-size: 30px !important;
       line-height: 45px !important;
       border: 1px solid #219bd8;
   }

   .fa-angle-left:hover {
       background: #fff !important;
       color: #219bd8;
   }

   .fa-angle-right:hover {
       background: #fff !important;
       color: #219bd8;
   }

   .picture-2 {
       background-image:
           linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
           url("../images/banner/banner.jpg");
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       height: 100%;
       max-height: 400px;
   }

   .picture-1 {
       background-image:
           linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
           url("../images/new images/digital-twin-for-vehicles-automotive-header.jpg");
       background-position: 0px 0px;
       background-repeat: no-repeat;
       background-size: cover;
       height: 100%;
       max-height: 400px;
       background-position: center;
   }

   .picture-3 {
       background-image:
           linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
           url("../images/new images/24278.jpg");
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       height: 100%;
       max-height: 400px;
   }



   .carousel-text {
       width: 50%;
   }

   .content-img {
       margin-top: 80px;
   }

   .content-img img {
       position: relative;
       height: 90%;
       width: 90%;
       padding: 120px;
       margin-left: 200px;
       /* moved 20px to the left from the original 100px */
       object-fit: cover;
       opacity: 0;
   }


   .carousel-content {
       color: #fff;
       text-transform: capitalize;
       margin-top: 80px;
       text-align: left;

   }

   .carousel-content h5 {
       font-size: 50px;
       margin-bottom: 20px;

   }

   .carousel-content p {
       width: 550px;
       margin-bottom: 20px;

   }

   .carousel-fade .carousel-item {
       opacity: 0;
       transition-duration: .6s;
       transition-property: opacity;

   }

   .carousel-fade .carousel-item.active,
   .carousel-fade .carousel-item-next.carousel-item-left,
   .carousel-fade .carousel-item-prev.carousel-item-right {
       opacity: 1;

   }

   .carousel-fade .active.carousel-item-left,
   .carousel-fade .active.carousel-item-right {
       opacity: 0;
   }

   .carousel-fade .carousel-item-next,
   .carousel-fade .carousel-item-prev,
   .carousel-fade .carousel-item.active,
   .carousel-fade .active.carousel-item-left,
   .carousel-fade .active.carousel-item-prev {
       transform: translateX(0);
       transform: translate3d(0, 0, 0);
   }

   /*====================carousel===========start============*/
   /* ======about=====*/
   .about-section {
       margin-top: 50px;
       margin-bottom: 50px;

   }

   .about-content {
       text-align: justify;
       margin-top: 0px;

   }

   .about-content h1 {
       font-size: 25px;
       margin-bottom: 10px;
       font-weight: 600;
       margin-top: 0px;
       letter-spacing: 1px;
       color: var(--primary-dark);
       text-transform: uppercase
   }

   .em_bar_bg {
       height: 3px;
       width: 100px;
       background: #1749f0;
       margin: 0px 0px 30px;
       position: relative;
       border-radius: 30px;
   }

   .em_bar_bg:before {
       content: '';
       position: absolute;
       left: 0;
       top: -7px;
       -webkit-animation-duration: 3s;
       animation-duration: 3s;
       -webkit-animation-timing-function: linear;
       animation-timing-function: linear;
       -webkit-animation-iteration-count: infinite;
       animation-iteration-count: infinite;
       -webkit-animation-name: MOVE-BG;
       animation-name: MOVE-BG;
   }

   .about-section .service-card .card-anchor {
       color: #000 !important;
       text-decoration: none !important
   }

   .about-section .service-card:hover .card-anchor h5 {
       color: #251b4a !important;
   }

   .about-content {
       height: auto;
       overflow: hidden;
       width: 100%;
   }

   .about-content img {
       transition: transform .5s ease;
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 0%;
   }

   .about-content img:after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 0;
       background: #000;
       transition: transform .5s ease;
   }

   .about-content img:hover:after {
       height: 100%;
   }

   .about-content:hover img {
       transform: scale(1.1);
   }

   /* ======about====end-=======*/
   /* ======industry==start====*/
   .industry-section {
       background: #f3f3f3;
       padding-top: 50px;
       padding-bottom: 50px;
   }

   .industry-content {
       font-size: 2rem;
       margin-bottom: 10px;
       font-weight: 600;
       margin-top: 0px;
       letter-spacing: 1px;
       color: var(--primary-dark);
       text-transform: uppercase
   }

   .container-sec {
       position: relative;
       width: 100%;
       border: 1px solid #008CBA;
       margin-top: 30px;
       height: 200px;
   }

   .image-sec {
       display: block;
       height: 100%;
       max-height: 100px;
       max-width: 100px;
       border-radius: 0%;
       margin: auto;
       margin-top: 20px;
       object-fit: cover;

   }

   .overlay-sec {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       /* background: var(--card-grad); */
       background: var(--primary-dark);
       overflow: hidden;
       width: 100%;
       height: 30%;
       transition: .5s ease;
   }

   .container-sec:hover .overlay-sec {
       height: 100%;
   }


   .text {
       color: white;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       text-align: center;
       text-transform: uppercase;
   }

   .text h6 {
       font-size: 1rem !important;
       font-weight: 400;
   }

   /* ==============industry============end===============*/
   /*====================portofolio--------------start================*/
   .video-section {
       margin-bottom: 50px;
   }

   .portofolio-card {
       position: relative;
       display: flex;
       flex-direction: column;
       min-width: 0;
       word-wrap: break-word;
       background-color: #fff;
       background-clip: border-box;
       border: 1px solid rgba(0, 0, 0, .125);
       border-radius: .25rem;
       margin-bottom: 0px;
   }

   .portofolio-img-top {
       width: 100%;
       border-top-left-radius: calc(.25rem - 1px);
       border-top-right-radius: calc(.25rem - 1px);
       width: 100%;
       height: auto;
       object-fit: cover;
   }

   img {
       vertical-align: middle;
       border-style: none;
   }

   .portofolio-body {
       flex: 1 1 auto;
       padding: 1.25rem;
   }

   .portofolio-title {
       margin-bottom: .75rem;
   }

   .portofolio-text {
       margin-top: 0;
       margin-bottom: 1rem;
   }

   .video-wrapper {
       margin: 0;
   }

   .video-wrapper {
       background: none;
   }

   .video-wrapper .embed-responsive {
       width: 100%;
       height: auto;
       max-height: 100%;
   }

   .video-wrapper .embed-responsive-item {
       min-width: 100%;
       min-height: 100%;
   }

   .youtube-icons {
       margin: 0;
       position: absolute;
       top: 50%;
       left: 50%;
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       font-size: 50px;
       color: red;
   }

   /*====================portofolio--------------end================*/
   /* ======service=====start=====*/
   .service-section {
       margin-bottom: 50px;
   }

   .industry-content-1 {
       font-size: 2rem;
       font-weight: 600;
       letter-spacing: 1px;
       color: var(--primary-dark);
       text-transform: uppercase;
   }

   .service-section .service-card .card-anchor {
       color: #000 !important;
       text-decoration: none !important
   }

   .service-section .service-card:hover .card-anchor h5 {
       color: #fff !important;
   }

   .service-card {
       height: auto;
       overflow: hidden;
       margin-top: 30px !important;
   }

   .service-section .service-card {
       box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
   }

   .img-hover-zoom {
       height: auto;
       overflow: hidden;
   }

   .img-hover-zoom img {
       transition: transform .5s ease;
       width: 100%;
       height: 200px;
       object-fit: cover;

   }

   .img-hover-zoom img:after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 0;
       background: #000;
       transition: transform .5s ease;
   }

   .img-body h5 {
       font-size: 1rem;
       font-weight: 500;
       text-transform: uppercase;
       margin-top: 10px;
       color: #fff;
   }

   .img-hover-zoom img:hover:after {
       height: 100%;
   }

   .img-hover-zoom:hover img {
       transform: scale(1.1);
   }

   .img-body {
       padding: 10px 20px;
       text-transform: capitalize;
       background: var(--primary-dark);
   }

   .service-section .service-card:hover .img-body {
       background: var(--primary);
   }

   /* ======service=====end=====*/

   .fa-arrow-left,
   .fa-arrow-right {
       width: 50px;
       height: 50px;
       background: #fff;
       font-size: 30px !important;
       line-height: 45px !important;
       border: 1px solid #219bd8;
       color: #219bd8;
   }

   .fa-arrow-left:hover {
       background: #fff !important;
       color: #219bd8;
   }

   .fa-arrow-right:hover {
       background: #fff !important;
       color: #219bd8;
   }

   .btn-learn {
       color: #219bd8 !important;
       padding: 5px 20px;
       border-radius: 0 !important;
       background: #fff !important;
       border: 1px solid #fff !important;
       /* text-transform: uppercase; */

       position: relative;
       z-index: 1;
   }

   .btn-learn:hover {
       color: #fff !important;
   }

   .btn-learn:focus {
       color: #000 !important;
       outline: none !important;
       border: none !important;
   }

   .btn-learn:after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 0%;
       height: 100%;
       background: #219bd8;
       transition: all 0.4s;
       z-index: -1;
   }

   .btn-learn:hover:after {
       width: 50%;
   }

   .btn-learn:before {
       content: "";
       position: absolute;
       bottom: 0;
       right: 0;
       width: 0%;
       height: 100%;
       background: #219bd8;
       transition: all 0.4s;
       z-index: -1;
   }

   .btn-learn:hover:before {
       width: 50%;
   }


   /* ======news==start====*/
   .news-section {
       margin-top: 70px;
       margin-bottom: 70px;
   }

   .case-content {
       font-size: 25px;
       margin-bottom: 30px;
       font-weight: 600;
       margin-top: 0px;
       letter-spacing: 1px;
       color: var(--primary-dark);
       text-transform: uppercase
   }

   .news-card {
       position: relative;
       display: flex;
       flex-direction: column;
       min-width: 0;
       word-wrap: break-word;
       background-clip: border-box;
       border: 1px solid rgba(0, 0, 0, .125);
       border-radius: .25rem;
       height: 300px;
       overflow: hidden;
       width: 100% !important;
       margin-top: 30px !important;

   }

   .news-card .news-img-top {
       transition: transform .5s ease;
       width: 100%;
       height: 400px !important;
       object-fit: cover;
   }

   .news-body {
       -webkit-box-flex: 1;
       -ms-flex: 1 1 auto;
       flex: 1 1 auto;
       padding: 1.0rem !important;
       background: var(--primary) !important;
   }

   .news-text {
       margin-top: 0;
       margin-bottom: 1rem;
   }

   .news-body .news-text a {
       text-decoration: none !important;
       color: #fff !important;
       font-weight: 400;
       letter-spacing: 1px;
   }


   .news-card .news-img-top {
       width: 100%;
       object-fit: cover
   }

   .news-card img:after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 0;
       background: #000;
       transition: transform .5s ease;
   }

   .news-card img:hover:after {
       height: 100%;
   }

   .news-card :hover img {
       transform: scale(1.5);
   }

   .news-body {
       padding: 10px 20px;
       text-transform: capitalize;
   }

   .control-prev {
       left: 0% !important;
   }

   .control-next {
       right: 0% !important;
   }

   .fa-chevron-left,
   .fa-chevron-right {
       background: #219bd8 !important;
       width: 50px !important;
       height: 50px !important;
       font-size: 30px !important;
       line-height: 48px !important;
       color: #fff !important;
       visibility: visible !important;
       opacity: 1 !important;
       border: 1px solid #fff !important;
       -webkit-transition: all 0.5s ease !important;
       -o-transition: all 0.5s ease !important;
       transition: all 0.5s ease !important;
       top: 50% !important;
       -webkit-transform: translateY(-50%) !important;
       -ms-transform: translateY(-50%) !important;
       transform: translateY(-50%) !important;
       z-index: 99 !important;
   }

   /* ======news=======end====*/
   /* ======testimonials=======start========*/
   .slider-area {
       background: #f3f3f3 !important;
       padding: 100px;
       position: relative;

   }

   .carousel-control-left,
   .carousel-control-right {
       background: translate;
   }

   .img-area {
       width: 100px;
       height: 100px;
       margin: auto;
       border: 5px solid #219bd8;
       border-radius: 50%;
       overflow: hidden;
   }

   .img-area img {
       width: 100%;
   }

   .TESTIMONIALS-TEXT {
       position: static;
       padding-bottom: 15px;
       padding-top: 20px;
       text-align: center;

   }

   .TESTIMONIALS-TEXT h3 {
       color: #219bd8;
       font-weight: bold;
       letter-spacing: 2px;
       font-size: 26px;
       margin-bottom: 15px;
   }

   .TESTIMONIALS-TEXT p {
       color: #000
   }

   .TESTIMONIALS-TEXT h3 {
       font-size: 26px;
       margin-bottom: 15px;
   }

   .TESTIMONIALS-TEXT p {
       width: 700px;
       margin: auto;
   }

   .carousel-indicators-list {
       margin: -50px !important;

   }

   .carousel-indicators-list li {
       width: 20px;
       height: 20px;
       border-radius: 50%;
       background: #555;
   }

   .carousel-indicators-list li.active {
       background: #219bd8;
   }

   .fa-long-arrow-left,
   .fa-long-arrow-right {
       color: #fff !important;
       font-size: 30px !important;
       width: 50px;
       height: 50px;
       line-height: 50px !important;
       background: #219bd8;
   }

   /* ==================testimonials====================end===============*/

   /* ================footer===========================start=============*/
   .footer-section {
       background: #484c52 !important;
       border-top: 1px solid #ccc;
   }

   .footer-bottom {
       border-top: 1px solid rgba(255, 255, 255, 0.3);
       padding: 15px 0;
       font-size: 13px;
       position: sticky;
       bottom: 0;
       z-index: 999;
       background: #484c52;
   }


   .footer-text {
       margin-top: 50px;
   }

   .footer-brand {
       display: inline-block;
       padding-top: .3125rem;
       padding-bottom: .3125rem;
       margin-right: 1rem;
       font-size: 1.25rem;
       line-height: inherit;
       white-space: nowrap;
   }

   .footer-brand img {
       width: 100%;
       height: auto;
       max-width: 100px;
   }

   .footer-text h3 {
       color: #fff;
       font-size: 16px;
       letter-spacing: 1px;
       text-transform: uppercase;
       padding: 10px 0;
       font-weight: bold;
   }

   .footer-text p {
       font-size: 14px !important;
       margin-top: 0px;
   }

   .footer_ul {
       list-style: none;
       padding: 0px;
       margin: 0;
   }

   .footer_ul li {
       padding: 2px 0;
       color: #fff !important;
   }

   .footer_ul li a {
       font-weight: 400;
       font-style: normal;
       letter-spacing: 0em;
       text-transform: none;
       line-height: 1.8;
       -webkit-font-smoothing: antialiased;
       font-size: 14px;
       color: #000;
       position: relative;
       z-index: 1;
       color: #fff;

   }

   .footer_ul li a:hover {
       text-decoration: underline;
   }

   .social-icons {
       display: flex;
       float: right;
   }

   .social-icons li {
       list-style: none;

   }

   .social-icons li a {
       width: 30px;
       height: 30px;
       background-color: #fff;
       text-align: center;
       line-height: 30px;
       font-size: 14px;
       margin: 0px 5px;
       display: block;
       border-radius: 0%;
       position: relative;
       overflow: hidden;
       border: 1px solid #aaa;
       z-index: 1;
   }

   .social-icons li a .icons {
       position: relative;
       color: #219bd8;
       transition: .5s;
       z-index: 3;
   }

   .social-icons li a:hover .icons {
       color: #fff;
       transform: rotateY(360deg);
   }

   .social-icons li a:before {
       content: "";
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       height: 100%;
       background: #219bd8;
       transition: .5s;
       z-index: 2;
   }

   .social-icons li a:hover:before {
       top: 0;
   }

   /* .social-icons li:nth-child(1) a:before{
  background: #3b5999;
}
.social-icons li:nth-child(2) a:before{
  background: #3b5999;
}
.social-icons li:nth-child(3) a:before{
  background: #3b5999;
}
.social-icons li:nth-child(4) a:before{
  background: #3b5999;
} */
   /* ======scrollToTopBtn====*/
   #scrollToTopBtn {
       position: fixed;
       background-color: #219bd8;
       border: none;
       outline: none;
       color: #fff;
       bottom: 30px;
       right: 10px;
       border-radius: 50%;
       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
       z-index: 20;
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       -webkit-transition: all 0.2s ease-out;
       transition: all 0.2s ease-out;
       cursor: pointer;
   }

   .pt2 {
       padding: 10px;
   }

   .footer-section p {
       font-size: 14px;
       color: #fff;
       margin-bottom: 0px;
   }

   .footer-section p a {
       color: #243559;
   }

   .footer-section p a:hover {
       text-decoration: underline;
   }

   .design_item {
       background: o;
       padding: 0px 0px;
       margin: 20px 0;
   }

   .design_item p {
       color: #243559;
       font-weight: 600;
   }

   .design_item .design_link {
       text-decoration: none !important;
       color: #fff;
       font-size: 14px;
   }

   /* ================footer==========================end======================*/
   /*====whatsapp chat===*/

   .hidden {
       display: none;
   }

   .sticky-button {
       position: fixed;
       background-color: #25D366;
       bottom: 80px;
       right: 10px;
       border-radius: 50px;
       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
       z-index: 20;
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       -webkit-transition: all 0.2s ease-out;
       transition: all 0.2s ease-out;
   }

   .sticky-button svg {
       fill: #fff;
       width: 30px;
       height: 30px;
       margin: auto;
   }

   .sticky-button a,
   .sticky-button label {
       cursor: pointer;
       display: flex;
       align-items: center;
       width: 40px;
       height: 40px;
       margin: auto;
       -webkit-transition: all .3s ease-out;
       transition: all .3s ease-out;
   }

   .sticky-button label svg.close-icon {
       display: none;
   }

   .sticky-chat {
       position: fixed;
       bottom: 0px;
       right: 80px;
       width: 320px;
       -webkit-transition: all .3s ease-out;
       transition: all .3s ease-out;
       z-index: 21;
       opacity: 0;
       visibility: hidden;
   }

   .sticky-chat a {
       text-decoration: none;
       color: #505050;

   }

   .sticky-chat svg {
       width: 35px;
       height: 35px;

   }

   .sticky-chat .chat-content {
       border-radius: 10px;
       background-color: #fff;
       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25);
       overflow: hidden;
       font-weight: 400;
   }

   .sticky-chat .chat-header {
       position: relative;
       display: flex;
       align-items: center;
       padding: 15px 20px;
       background-color: #219bd8;
       overflow: hidden;
   }

   .sticky-chat .chat-header:after {
       content: '';
       display: block;
       position: absolute;
       bottom: 0;
       right: 0;
       width: 80px;
       height: 80px;
       background: rgba(0, 0, 0, .040);
       border-radius: 70px 0 5px 0;
   }

   .sticky-chat .chat-header svg {
       width: 35px;
       height: 35px;
       flex: 0 0 auto;
       fill: #fff;
   }

   .sticky-chat .chat-header .title {
       padding-left: 15px;
       font-size: 14px;
       font-weight: 600;
       color: #fff;
   }

   .sticky-chat .chat-header .title span {
       font-size: 11px;
       font-weight: 400;
       display: block;
       line-height: 1.58em;
       margin: 0;
       color: #f4f4f4;
   }

   .sticky-chat .chat-text {
       display: flex;
       flex-wrap: wrap;
       margin: 30px 20px;
       font-size: 12px;
   }

   .sticky-chat .chat-text span {
       display: inline-block;
       margin-right: auto;
       padding: 10px;
       background-color: #f0f5fb;
       border-radius: 0px 15px 15px;
   }

   .sticky-chat .chat-text span:after {
       content: '1:40';
       display: inline-block;
       margin-left: 10px;
       font-size: 9px;
       color: #989b9f;
   }

   .sticky-chat .chat-text span.typing {
       margin: 15px 0 0 auto;
       padding: 10px;
       border-radius: 15px 0px 15px 15px;
   }

   .sticky-chat .chat-text span.typing:after {
       display: none;
   }

   .sticky-chat .chat-text span.typing svg {
       height: 13px;
       fill: #505050;
   }

   .sticky-chat .chat-button {
       display: flex;
       align-items: center;
       margin-top: 15px;
       padding: 12px 20px;
       border-radius: 10px;
       background-color: #fff;
       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25);
       overflow: hidden;
       font-size: 12px;
       font-weight: 400;
   }

   .sticky-chat .chat-button svg {
       width: 20px;
       height: 20px;
       fill: #505050;
       margin-left: auto;
       transform: rotate(40deg);
       -webkit-transform: rotate(40deg);
   }

   .chat-menu:checked+.sticky-button label {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
   }

   .chat-menu:checked+.sticky-button label svg.chat-icon {
       display: none;
   }

   .chat-menu:checked+.sticky-button label svg.close-icon {
       display: table-cell;
   }

   .chat-menu:checked+.sticky-button+.sticky-chat {
       bottom: 90px;
       opacity: 1;
       visibility: visible;
   }

   /*========================whatsapp=====end=============================*/
   /*========================whatsapp=====end=============================*/
   /*===================simcenter3D=====start=============================*\
/*=====================banner==start======*/

   .hero-image {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../image/simcenter 3d banner.jpg');
       height: 100%;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       position: relative;
       min-height: 400px;
   }

   .hero-text {
       text-align: left;
       position: absolute;
       top: 50%;
       left: 31%;
       transform: translate(-50%, -50%);
       color: white;
       letter-spacing: 1px;
       text-transform: uppercase;
       width: 600px;
   }

   .hero-text h1 {
       font-size: 40px;
       font-weight: 600
   }

   .page-list {
       margin: 0;
       padding: 0;
   }

   .page-list li {
       font-size: 15px;
   }

   .page-list li:first-child {
       padding-left: 0;
   }

   .page-list li {
       font-weight: 400;
       letter-spacing: 1.32px;
       color: #fff;
       list-style: none;
       display: inline-block;
       position: relative;
   }

   .page-list li a:after {
       position: absolute;
       left: 65px;
       top: 0;
       content: "/";
   }

   .page-list li a {
       text-decoration: none;
       padding: 10px;
       color: #fff;
   }

   .page-list li a:hover {
       color: #219bd8;
   }

   /*===============banner===================end===================*/
   /*==============simcenter_3d_section============start===========*/
   .simcenter_3d_section {
       margin-bottom: 50px;
       margin-top: 50px;
   }

   .column {
       float: left;
       width: 50% !important;
       padding: 0px;
       height: auto;
   }

   .column_bg {
       background: #313131;
       color: #fff;
   }

   .column_text {
       padding: 40px 10%;
   }

   .column_text p {
       text-align: justify;
       font-size: 16px;
   }

   .column img {
       transition: transform .5s ease;
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .simcenter3d_img img:after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 0;
       background: #000;
       transition: transform .5s ease;
   }

   .simcenter3d_img img:hover:after {
       height: 100%;
   }

   .simcenter3d_img:hover img {
       transform: scale(1.0);
   }

   .column_bg_2 {
       background:
           /* #219bd8 */
           linear-gradient(#219bd8 10%, #313131);
       color: #fff;
   }

   .column_text p {
       color: #fff;
   }

   .column_text h3 {
       font-weight: normal;
       margin: 0 0 20px;
       color: #fff;
       text-transform: uppercase;
       font-size: 25px;
   }

   .column_text h6 {
       font-weight: 600;
       margin: 0 0 20px;
       color: #fff;
       font-size: 20px;
       text-transform: capitalize;
   }

   .simcenter_3d_accordian_section {
       margin-bottom: 50px;
   }

   .accordion {
       background-color: #f1f1f1;
       color: #000;
       cursor: pointer;
       padding: 18px !important;
       width: 100%;
       border: none;
       text-align: left;
       outline: none;
       transition: 0.4s;
       font-weight: 600;
       letter-spacing: 0;
       text-transform: uppercase;
       margin: 0px;
   }

   .accordion:hover {
       background: var(--main-gradient);
       /* #219bd8 */
       /* linear-gradient(#219bd8 10%, #313131) !important; */
       color: #fff;
   }

   .accordion.active {
       background: var(--main-gradient);
       /* #219bd8 */
       /* linear-gradient(#219bd8 10%, #313131) !important; */
       color: #fff;
   }

   .accordion:focus {
       outline: none;
       background: var(--main-gradient) !important;
       color: #fff;
   }

   .accordion:after {
       content: '\f107';
       color: #000;
       font-weight: bold;
       float: right;
       margin-left: 5px;
   }

   .accordion.active:after {
       content: "\f106";
       color: #fff;
   }

   .accordion:hover:after {
       color: #fff;
   }

   .accordion:focus:after {
       color: #fff;
   }

   .panel {
       padding: 0px 18px;
       background: #fff;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.2s ease-out;
       line-height: 30px;
       color: #111;
       font-style: normal;
       margin-bottom: 10px;
       box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.2);
       text-align: left !important;
   }

   .panel p {
       margin-top: 20px;
       text-align: justify;
   }

   .panel h4 {
       padding-top: 20px;
       text-transform: capitalize;
       font-weight: 600;
   }

   .simcenter_3d_accordian_text {
       font-weight: bold;
       color: var(--primary);
       margin: 0px 0px 50px;
       text-transform: uppercase;
       font-size: 30px;
   }

   .simcenter_accordian_ul {
       padding: 0px;
       color: #fff;
       font-style: normal;
   }

   .simcenter_accordian_ul li {
       line-height: 30px;
       margin-left: 30px;
   }

   .simcenter_accordian_ul li {
       color: #000;
   }

   .cgfc-box-1 {
       background: #313131;
       position: relative;
       transition: all ease-in-out 0.5s;
       -webkit-transition: all ease-in-out 0.5s;
       height: auto;
   }

   .cgfc-box-1:after {
       position: absolute;
       left: 100px;
       top: 0;
       width: 100%;
       height: 100%;
       content: "";
       background: url(../image/cgfc-1-bg.png);
       background-position: cover;
       background-size: center;
       background-repeat: no-repeat;
       z-index: -1;
   }

   /* .cgfc-box-1:hover{
	background:#555;
} */

   .cgfc-box-2 {
       /* background: #d33030; */
       /* background:
        /* #219bd8 */
       /* linear-gradient(#219bd8 10%, #313131); */
       background: var(--main-gradient);
       position: relative;
       transition: all ease-in-out 0.5s;
       -webkit-transition: all ease-in-out 0.5s;
   }

   .cgfc-box-2:after {
       position: absolute;
       left: 70px;
       top: 0;
       width: 100%;
       height: 100%;
       content: "";
       z-index: -1;
       /* background: url(../image/cgfc-1-after.png) no-repeat left bottom; */
   }

   /* .cgfc-box-2:hover{
	background:#022a6b;
} */
   /* .cgfc-box-3 {
	background:#d33030;
    position: relative;
    transition: all ease-in-out 0.5s;
    -webkit-transition: all ease-in-out 0.5s;
}
.cgfc-box-3:after{
    position: absolute;
    left: 0px;
    top: 0;
    width: 100%;
    height:70%;
    content: "";
    background: url(../image/cgfc-1-after.png) no-repeat left bottom;
}
.cgfc-box-3:hover{
	background:#330101
} */
   .block-content {
       margin: 50px 50px 50px;
   }

   .block-content h3 {
       font-weight: bold;
       color: #fff;
       margin: 0px 0px 50px;
       text-transform: uppercase;
       font-size: 30px;
   }

   .block-content p {
       color: rgba(255, 255, 255, .80);
       font-size: 16px;
       font-weight: 300;
       font-style: normal;
       line-height: 30px;
   }

   .simcenter_3d_ul {
       padding: 0px;
       color: #fff;
       font-style: normal;
       margin: 0;
       list-style-type: square;
   }

   .simcenter_3d_ul li {
       font-weight: 400;
       font-style: normal;
       letter-spacing: 0em;
       line-height: 1.8;
       -webkit-font-smoothing: antialiased;
       margin-left: 20px;

   }

   /* .simcenter_3d_ul li strong{
	color:#fff;
	font-size:16px;
	font-weight:400;
	line-height: 1.8;
	letter-spacing: 0em;
	line-height:40px;
} */
   .simcenter3d_content {
       font-size: 30px;
       font-weight: bold;
       text-transform: uppercase;
       margin-bottom: 70px;
       color: #219bd8;
   }

   .simcenter3d_content:after {
       content: "";
       position: absolute;
       top: 50px;
       left: 15px;
       background: #219bd8;
       width: 200px;
       height: 2px;
   }

   /*=============blog=============start===================*/
   /*----blog----start---*/
   .blog_section {
       margin-bottom: 100px;
       margin-top: 100px;
   }

   .blog-column {
       float: left;
       padding: 0px;
       height: auto;
       background: #313131;
       color: #fff;
   }

   /* Left and right column */
   .blog-column.side {
       width: 25%;
       overflow: hidden;
   }

   .blog-column.side img {
       height: auto;
       transition: 0.4s ease;
       object-fit: cover;
   }

   .blog-column.side:hover img {
       transform: scale(1.1);
   }

   /* Middle column */
   .blog-column.middle {
       width: 75%;
       padding: 40px 5%;
   }

   .blog-column-bg {
       background: #219bd8;
   }

   .blog-column.middle h2 a {
       font-size: 28px !important;
       margin-top: 20px;
       margin-bottom: 20px;
       color: #fff;
       text-decoration: none;
   }

   .blog-column.middle h2 a:hover {
       color: #219bd8;
   }

   .blog-column-bg.middle h2 a:hover {
       color: #313131;
   }

   .blog-column.middle p {
       font-size: 15px;

   }


   /* Clear floats after the columns */
   .row:after {
       content: "";
       display: table;
       clear: both;
   }


   .btn-success {
       background: #fff !important;
       border: 1px solid #219bd8 !important;
       outline: none !important;
       padding: 10px 20px !important;
       border-radius: 0px !important;
       text-transform: uppercase;
       position: relative;
       z-index: 1;
       color: #219bd8;
   }

   .btn-success:after {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 0;
       height: 100%;
       background: #313131;
       transition: 0.4s ease;
       z-index: -1;
       border-radius: 0px !important;
   }

   .btn-success:hover:after {
       width: 50%;
   }

   .btn-success:before {
       content: "";
       position: absolute;
       bottom: 0;
       right: 0;
       width: 0;
       height: 100%;
       background: #313131;
       transition: 0.4s ease;
       z-index: -1;
       border-radius: 0px !important;
   }

   .btn-success:hover:before {
       width: 50%;
   }

   .btn-success:hover {
       color: #fff !important;
   }


   /*=============blog=============end===================*/
   /*===================contact=====start===============================*/
   .wrapper-contact {
       margin-top: 0px;
       margin-bottom: 0px;
       background: #f3f3f3;
       padding: 50px;
   }

   .content {
       display: flex;
       align-items: center;
       justify-content: space-between;
   }

   .content .left-side {
       width: 25%;
       height: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       margin-top: 0px;
       position: relative;
   }

   .content .left-side::before {
       content: '';
       position: absolute;
       height: 100%;
       width: 2px;
       right: -40px;
       top: 50%;
       transform: translateY(-50%);
       background: #219bd8;

   }

   .content .left-side .details {
       margin: 14px;
       text-align: center;
       border: 1px solid #fff;
       position: relative;
       min-width: 100%;
       background:
           /* #219bd8 */
           linear-gradient(#219bd8 10%, #313131);
       border-radius: 0;
       padding: 20px;
       height: 200px;
       z-index: 1;
       color: #fff !important;
   }

   .content .left-side .details:before {
       content: "";
       position: absolute;
       top: 0px;
       left: 0;
       width: 100%;
       height: 0%;
       background: #fff;
       transition: all 0.4s;
       z-index: -1;
       opacity: 0;
       border: 1px solid #ccc;
   }

   .content .left-side .details:hover:before {
       height: 100%;
       opacity: 1;
   }

   .content .left-side .details:hover .text-one {
       color: #000;
   }

   .content .left-side .details:hover .text-two {
       color: #000;
   }

   .content .left-side .details:hover .topic {
       color: #000;
   }

   .content .left-side .details:hover i {
       color: #000;
   }

   .content .left-side .details i {
       font-size: 30px;
       color: #fff;
       margin-bottom: 10px;
   }

   .content .left-side .details .topic {
       font-size: 20px;
       font-weight: 500;
       margin-bottom: 10px;
   }

   .content .left-side .details .text-one,
   .content .left-side .details .text-two {
       font-size: 14px;
       color: #fff;
   }

   .content .right-side {
       width: 75%;
       margin-left: 75px;
       background: #fff;
       padding: 50px;
   }

   .content .right-side .topic-text {
       font-size: 23px;
       font-weight: 600;
       color: #3e2093;

   }

   .content .right-side h2 {
       font-size: 40px;
       font-weight: 600;
       color: #219bd8;
       text-transform: uppercase;
       margin-bottom: 30px;

   }

   .form-control {
       display: block;
       width: 100%;
       padding: .875rem .75rem;
       font-size: 1rem;
       line-height: 1.5 !important;
       color: #495057;
       background-color: #fff;
       background-clip: padding-box;
       border: 1px solid #ced4da;
       border-radius: .25rem;
       transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   }

   .form-control:hover,
   .form-control:focus {
       box-shadow: none !important;
   }

   .select-control {
       display: block;
       width: 100%;
       padding: .875rem .75rem;
       font-size: 1rem;
       line-height: 1.5 !important;
       color: #495057;
       background-color: #fff;
       background-clip: padding-box;
       border: 1px solid #ced4da;
       border-radius: .25rem;
       transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   }

   option {
       text-transform: capitalize !important;
   }

   .thm-btn {
       width: 100%;
       padding: .875rem .75rem;
       font-size: 16px;
       line-height: 1.5 !important;
       color: #fff;
       font-weight: 600;
       /* text-transform: uppercase; */
       background:
           /* #219bd8 */
           linear-gradient(#219bd8 10%, #313131);
   }




   @media(min-width:992px) {
       .dropdown .dropdown-menu {
           display: block;
           visibility: hidden;
           opacity: 0;
           -webkit-transform: translateY(20px);
           -ms-transform: translateY(20px);
           transform: translateY(20px);
           -webkit-transition: all .3s ease-in;
           -o-transition: all .3s ease-in;
           transition: all 0.5s ease-in
       }

       .dropdown:hover>.dropdown-menu {
           -webkit-transform: scaleY(1);
           -ms-transform: scaleY(1);
           transform: scaleY(1);
           opacity: 1;
           visibility: visible;
       }
   }


    .mega-menu.mega-menu-mobile-active {
        display: block !important;
        opacity: 1;
        visibility: visible;
        position: absolute !important;
        left: 0;
        top: 100%;
        width: 100%;
        background: #0b1c3a !important;
        padding: 30px 40px !important;
        border-top: 1px solid #14305d !important;
        display: none;
        z-index: 9999 !important;
        width: 100vw !important;
        height: 60vh !important;
    }

    @media (min-width: 921px) {
        .mega-menu.mega-menu-mobile-active {
            position: absolute;
            top: unset;
            left: unset;
            right: unset;
            max-height: none;
            min-height: unset;
        }
    }

   /*=================navbar==========================end===========*/
   @media screen and (max-width: 768px) {
       p {
           font-weight: 500;
           font-style: normal;
           letter-spacing: 0em;
           text-transform: capitalize;
           line-height: 1.;
           -webkit-font-smoothing: antialiased;
           font-size: 14px;
       }

       .picture-1,
       .picture-2,
       .picture-3 {
           height: 100vh;
           max-height: 100%;
       }

       .carousel-control-prev,
       .carousel-control-next {
           width: 10% !important;
       }

       .fa-angle-left,
       .fa-angle-right {
           width: 50px;
           height: 50px;
           background: var(--primary);
           font-size: 30px !important;
           line-height: 45px !important;
           border: 1px solid #08269aa2;
       }

       .carousel-text {
           width: 100%;
           padding: 50px;
       }

       .content-img {
           margin-top: -100px;
       }

       .content-img img {
           position: relative;
           height: 50%;
           width: 50%;
           padding: 50px;
           margin-left: 0px;
           object-fit: cover;
           opacity: 0;
       }

       .carousel-content {
           color: #fff;
           text-transform: capitalize;
           margin: 10px 30px;
           text-align: left;

       }

       .carousel-content h5 {
           font-size: 30px;
           margin-bottom: 20px;

       }

       .carousel-content p {
           font-size: 15px;
           width: 100%;
           margin-bottom: 20px;

       }

       .dropdown-toggle::after {
           display: inline-block;
           width: 0;
           height: 0;
           margin-left: .255em;
           vertical-align: .255em;
           content: "";
           border-top: .3em solid;
           border-right: .3em solid transparent;
           border-bottom: 0;
           border-left: .3em solid transparent;
           float: right !important;
       }

       .nav-title {
           color: #fff !important;
           text-transform: uppercase;
           font-weight: 700;
           font-size: 14px;
       }

       .nav {
           list-style: none;
           padding: 0;
           margin: 20px 0;
       }

       .nav li a {
           font-size: 13px;
           text-transform: uppercase;
           font-weight: 500;
           color: #000 !important;
           padding: 10px 0;
       }

       .nav li a:hover {
           background: none !important;
           color: #fff !important;
           text-decoration: underline;
       }

       .blog-column_1 {
           width: 100%;
       }

       .slider-area {
           width: 100%;
           padding: 0px;
       }

       .carousel-responsive {
           height: 300px;
       }

       .TESTIMONIALS-TEXT h3 {
           font-size: 14px;
       }


       .sticky-button {
           position: fixed;
           background-color: #25D366;
           bottom: 100px;
           right: 12px;
           border-radius: 50px;
           box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
           z-index: 20;
           overflow: hidden;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 40px;
           height: 40px;
           -webkit-transition: all 0.2s ease-out;
           transition: all 0.2s ease-out;
       }

       .hero-image {
           background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../image/simcenter 3d banner.jpg');
           height: 100vh;
           background-position: center;
           background-repeat: no-repeat;
           background-size: cover;
           position: relative;
           min-height: 100%;
       }

       .hero-text {
           text-align: left;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           color: white;
           letter-spacing: 1px;
           text-transform: uppercase;
           width: 100%;
           padding: 30px;
       }

       .hero-text h1 {
           font-size: 30px;
           font-weight: 600
       }

       .column {
           width: 100% !important;
       }

       .contact-card {
           width: 100%;
           height: auto;
           margin: 0 auto;
       }

       .contact-body {
           padding: 0;
       }

       #scrollToTopBtn {
           position: fixed;
           background-color: #219bd8;
           border: none;
           outline: none;
           color: #fff;
           bottom: 50px;
           right: 10px;
           border-radius: 50%;
           box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
           z-index: 20;
           overflow: hidden;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 40px;
           height: 40px;
           -webkit-transition: all 0.2s ease-out;
           transition: all 0.2s ease-out;
           cursor: pointer;
       }

       .blog-col {
           float: left;
           width: 50% !important;
           padding: 0px;
           height: auto;
       }

       .blog-col img {
           border: 1px solid #fff;
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

   }

   .modal .modal-dialog {
       width: 80% !important;
   }



   /*===========case========*/
   .case-study {
       /*  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../image/simcenter 3d banner.jpg');
	  height: 100vh;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  position: relative;
	  min-height:100%; */
       background: #f1f1f1;
       padding: 70px;
   }

   .btn-download {
       width: 100%;
       padding: 30px;
       color: #ffffff;
       font-size: 16px;
       font-weight: 400;
       letter-spacing: 1px;
       background: #219bd8 !important;
       border: 2px solid #219bd8 !important;
       /* text-transform: capitalize; */
       border-radius: 0;
   }

   .btn-download:hover {
       color: #219bd8 !important;
       background: transparent !important;
       border: 2px solid #219bd8 !important;
   }

   .btn-download:focus {
       box-shadow: none !important;
       outline: none;
   }

   @media screen and (max-width: 540px) {
       .blog-col {
           float: left;
           width: 100% !important;
           padding: 0px;
           height: 100%;
       }

       .picture-1,
       .picture-2,
       .picture-3 {
           height: 500px !important;
           max-height: 100%;
       }

       .about-content {
           margin-bottom: 30px;
       }

       .dropdown-menu {
           width: 100% !important;
           min-width: 0 !important;
           padding: 0 !important;
       }

       .hero-image {
           background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../image/simcenter3dbanner.jpg);
           height: 100%;
           background-position: center;
           background-repeat: no-repeat;
           background-size: cover;
           position: relative;
           min-height: 500px;
       }

       .simcenter_3d_accordian_text {
           font-weight: bold;
           color: var(--primary);
           margin: 0px 0px 20px;
           text-transform: uppercase;
           font-size: 23px;
       }

       .page-list li a:after {
           position: absolute;
           left: 62px;
           top: 0;
           content: "/";
       }

       .chat-menu:checked+.sticky-button+.sticky-chat {
           bottom: 196px !important;
           right: 30px !important;
           opacity: 1;
           visibility: visible;
       }

       .wrapper-contact {
           margin-top: 0px;
           margin-bottom: 50px;
           background: #f3f3f3;
           padding: 0px !important;
           height: 100%;
       }

       .content .left-side {
           width: 100%;
           height: 100%;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           margin-top: 0px;
           position: relative;
       }

       .content .right-side {
           width: 100%;
           margin-left: 0px;
           background: #fff;
           padding: 50px;
       }

       .content .left-side::before {
           content: '';
           position: absolute;
           height: 100%;
           width: 2px;
           right: -40px;
           top: 50%;
           transform: translateY(-50%);
           background:
               /* #219bd8 */
               transparent;
       }

       .content .left-side .details {
           margin: 14px;
           text-align: center;
           border: 1px solid #fff;
           position: relative;
           min-width: 100% !important;
           background:
               /* #219bd8 */
               linear-gradient(#219bd8 10%, #313131);
           border-radius: 0;
           padding: 20px;
           height: 100%;
           z-index: 1;
           color: #fff !important;
       }

       .content {
           display: block !important;
           align-items: center;
           justify-content: space-between;
       }
   }


   .aerospace-defense {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/Aerospace_banner.jpeg')
   }

   .Automotive-EV {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/NX Render eRod Camera V04.jpg') !important;
   }

   .Automotive-EV-nxcadx {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/nxxbannar.tif') !important;
   }

   .Automotive-EV-progressive {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/nx-progressive-die-design-sheetmetal.jpg') !important;
   }

   .mendix-lowcode {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/Technology for success.png') !important;

   }

   .altair-hyperworks {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/Altair_LP_Automotive_Hero_desktop.jpg') !important;
   }

   .nx-cam {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/5-axis-machining4.jpg') !important;
   }

   .q-form {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/extrusion1.webp') !important;
   }

   .tecnomatix {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/Aws Optima 1.png') !important;
   }

   .Acm {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/acm.jpg') !important;
   }

   .solid-edge-b {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/solid edge.jfif') !important;
       background-position: top !important;
   }

   .solid-edge-b-x {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/solid edge x.jfif') !important;
   }

   .cortona3d {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/cortona3d-software.jpg') !important;
   }

   .Consumer-Products {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/CONSUMER PRODUCTS & RETAIL.png')
   }

   .electronic {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/Electronics-banner.jpg')
   }

   .industrial-machinery {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/Industrial Machinery & Heavy Equipment_banner.jpg')
   }

   .medical-devices {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/medical devices banner.jpg')
   }

   .marine {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/Marine-banner.jpg')
   }

   .hero-image {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/simcenter 3d banner.jpg');
       height: 100%;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       position: relative;
       min-height: 400px;
   }

   .simcenter-speed {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/Simcenter-speed.jpg')
   }

   .simcenter-tire {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/simcenter tire1.jpg')
   }

   .str-ccm {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/simcenter_star-ccm.png')
   }

   .floefd {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/Simcenter-floefd.jpg')
   }

   .flotherm {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/flotherm-banner.jpg')
   }

   .scadas {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/Siemens_SimcenterSCADAS_R.jpg')
   }

   .t3ster {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/Simcenter T3STER1.jpg')
   }

   .teraled {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/Simcenter TERALED1.jpg')
   }

   .testlab {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/imgeee.jpeg')
   }

   .Tecnomatix {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/new images/tecnomatix-process-simulate-spot-og-1200x630.avif') !important;
   }

   .battery {

       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
           url('../images/simcenter/flotherm-banner.jpg')
   }

   .Electric-vehicle {
       background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/simcenter/vev.jpg')
   }

   .solutions-section {
       position: relative;
       background: linear-gradient(112deg, var(--primary-dark) 0%, var(--primary) 100%);
       overflow: hidden;
   }

   .solutions-section::before {
       content: "";
       position: absolute;
       inset: 0;
       background-image:
           radial-gradient(circle at 20% 40%, rgba(255, 255, 255, .15) 0, transparent 40%),
           radial-gradient(circle at 80% 60%, rgba(255, 255, 255, .08) 0, transparent 45%),
           linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .06) 40%, transparent 60%);
       animation: bgMove 18s linear infinite;
       opacity: .55;
   }

   .solutions-section::after {
       content: "";
       position: absolute;
       inset: 0;
       background:
           repeating-linear-gradient(120deg,
               rgba(255, 255, 255, .05) 0px,
               rgba(255, 255, 255, .05) 2px,
               transparent 2px,
               transparent 140px);
       animation: waveMove 30s linear infinite;
       opacity: .35;
   }

   .solutions-section .container {
       position: relative;
       z-index: 2;
   }

   .solutions-label {
       color: var(--bg-warning);
       /* font-weight: 800; */
       font-size: 2rem;
       letter-spacing: 1px;
       text-transform: uppercase;
   }

   .em_bar_bg {
       background-color: var(--bg-warning);
       height: 3px;
       width: 70px;
       border-radius: 5px;
       margin-bottom: 8px;
   }

   .solutions-desc {
       color: white;
       font-size: 1rem;
       max-width: 550px;
   }

   .solution-simple-card {
       position: relative;
       overflow: hidden;
       background: rgba(19, 34, 64, .95);
       border-radius: 24px;
       border: 2px solid rgba(255, 255, 255, .6);
       box-shadow:
           0 8px 44px -5px #01e1ff11,
           0 4px 18px -8px #01132c,
           0 12px 32px -10px rgba(0, 0, 0, .15);
       padding: 32px 27px 20px 24px;
       transition: .25s;
       backdrop-filter: blur(6px);
   }

   .solution-simple-card::before {
       content: "";
       position: absolute;
       top: -120%;
       left: -40%;
       width: 60%;
       height: 300%;
       background: linear-gradient(120deg,
               transparent 0%,
               rgba(255, 255, 255, .05) 30%,
               rgba(255, 255, 255, .35) 45%,
               rgba(255, 255, 255, .05) 60%,
               transparent 100%);
       transform: rotate(25deg);
       animation: glowMove 6s linear infinite;
   }

   .solution-simple-card::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: 24px;
       padding: 1px;
       background: linear-gradient(130deg,
               rgba(255, 255, 255, .5),
               rgba(1, 225, 255, .25),
               rgba(255, 170, 11, .35),
               rgba(255, 255, 255, .5));
       -webkit-mask:
           linear-gradient(#000 0 0) content-box,
           linear-gradient(#000 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       opacity: .35;
   }

   .solution-simple-card:hover {
       transform: translateY(-5px) scale(1.03);
       border-color: var(--bg-warning);
       background: rgba(30, 45, 80, .95);
       box-shadow:
           0 20px 60px -10px rgba(255, 170, 11, .25),
           0 10px 40px -10px rgba(0, 0, 0, .25);
   }

   .solution-title {
       color: #fff;
       font-size: 1.5rem;
       font-weight: 700;
       margin-bottom: 4px;
   }

   .solution-text {
       color: white;
       font-size: 1rem;
   }

   @keyframes glowMove {
       0% {
           transform: translateX(-120%) rotate(25deg);
       }

       100% {
           transform: translateX(260%) rotate(25deg);
       }
   }

   @keyframes bgMove {
       0% {
           transform: translateX(-5%) translateY(0);
       }

       50% {
           transform: translateX(5%) translateY(-2%);
       }

       100% {
           transform: translateX(-5%) translateY(0);
       }
   }

   @keyframes waveMove {
       0% {
           background-position: 0 0;
       }

       100% {
           background-position: 700px 0;
       }
   }

   @media(max-width:991px) {
       .solution-simple-card {
           padding: 20px;
       }
   }

   .industry-section .container-sec {
       border-radius: 18px;
       overflow: hidden;
       box-shadow: 0 2px 10px rgba(29, 51, 120, 0.07);
       transition: box-shadow 0.16s;
   }

   .industry-section .container-sec:hover {
       box-shadow: 0 6px 20px rgba(29, 51, 120, 0.15);
   }



   .industry-section .overlay-sec {
       border-radius: 0 0 18px 18px;
   }

   /* Optional: Small margin for visual separation */
   .industry-section .col-md-3 {
       margin-bottom: 18px;
   }

   /* blogscss  */
   /* Apply "dopaly box" style for window size minimum 900px */
   /* Desktop highlight style */
   @media (min-width: 900px) {

       .custom-blog-card {
           box-shadow: 0 4px 32px rgba(33, 155, 216, 0.18),
               0 2px 8px rgba(28, 35, 70, 0.1);
           border: 2.5px solid #219bd8;
           border-radius: 8px;
           background: linear-gradient(135deg, #ffffff 70%, #e6f4fa 100%);
       }

       .blog-section {
           background: #e6f4fa;
       }

       .custom-blog-card-body {
           padding: 3.5rem 1.3rem 1.3rem 1.3rem;
       }

       .blog-image-top {
           height: 220px;
       }

       .blog-banner-text {
           border-bottom-right-radius: 1rem;
           font-size: .93rem;
       }
   }


   /* section background */
   .blog-section {
       background: #f7fafc;
   }

   .blog-page-heading {
       /* font-weight: 700; */
       font-size: 2rem;
       color: var(--primary-dark);
       text-transform: uppercase;
   }


   /* carousel spacing */
   .blog-carousel-gap {
       display: flex;
       justify-content: center;
       gap: 40px;
   }


   /* default = desktop 3 cards */
   .custom-blog-card {
       flex: 0 0 calc(33.33% - 26px);
       max-width: calc(33.33% - 26px);

       min-width: 0;
       background: #fff !important;
       border-radius: 14px;
       border: 1px solid #d2e5f6;
       box-shadow: 0 2px 12px -2px #b4ddf61a,
           0 0.7px 4px -2px #adbfd511;

       overflow: hidden;
       position: relative;
       min-height: 450px;
       width: 100%;
       margin-bottom: 6px;

       transition: box-shadow .18s cubic-bezier(.43, .9, .5, 1.22),
           border-color .14s;

       display: flex;
       flex-direction: column;
   }

   .custom-blog-card:hover {
       box-shadow: 0 4px 20px -4px #01e1ff22,
           0 1.5px 10px -7px #009be311;
       border-color: #9fdfff;
   }


   /* image */
   .blog-image-top {
       background: #1c2346;
       height: 220px;
       position: relative;
       overflow: hidden;
   }

   .blog-image-top img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }


   /* banner */
   .blog-banner-text {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;

       background: rgba(28, 35, 70, 0.85);
       color: #fff;

       font-size: .73rem;
       font-weight: 600;

       z-index: 2;
       border-bottom-right-radius: .5rem;
   }


   /* card body */
   .custom-blog-card-body {
       flex-direction: column;
       flex: 1 1 0;
       padding: 2.15rem .9rem .8rem .9rem;
   }


   /* text styles */
   .blog-card-date {
       font-size: .83rem;
       color: #283864;
       font-weight: 500;
   }

   .blog-card-title {
       font-weight: 700;
       font-size: 1rem;
       color: #222;
       line-height: 1.25;
   }

   .blog-card-desc {
       font-size: .85rem;
       color: #333;
       min-height: 40px;
   }

   .blog-learn-link {
       color: var(--primary-dark);
       font-weight: 600;
       text-decoration: none;
       font-size: 1rem;
       transition: color .14s;
   }

   .blog-learn-link:hover {
       color: var(--bg-warning);
       text-decoration: underline;
   }


   /* arrows */
   .blog-carousel-control {
       width: 46px;
   }

   .blog-carousel-control-icon {
       background-color: #F7FAFC;
       border-radius: 8%;
       filter: drop-shadow(0 1px 4px #b4ddf66a);
   }

   #blogCarousel .carousel-control-prev,
   #blogCarousel .carousel-control-next {
       opacity: .5;
       transition: opacity .2s;
   }

   #blogCarousel:hover .carousel-control-prev,
   #blogCarousel:hover .carousel-control-next {
       opacity: 1;
   }



   /* tablet = 2 cards */
   @media (max-width:991.98px) {

       .custom-blog-card {
           flex: 0 0 calc(50% - 20px);
           max-width: calc(50% - 20px);
           min-height: 170px;
       }

       .blog-image-top {
           height: 120px;
       }

       .blog-carousel-gap {
           gap: 20px;
       }

   }


   /* mobile = 1 card */
   @media (max-width:575.98px) {

       #blogCarousel .carousel-inner .d-flex {
           justify-content: center;
       }

       .custom-blog-card {
           flex: 0 0 92%;
           max-width: 92%;
           min-height: auto;
       }

       .blog-image-top {
           height: 160px;
       }

       .blog-card-title {
           font-size: 1rem;
       }

       .blog-card-desc {
           font-size: .85rem;
       }

       .stat-box-no-mobile-padding {
           max-height: 135px;
       }

   }

   /* end  */
   /* testimonial carousel arrows */

   .testimonial-carousel-control {
       width: 36px;
   }

   .testimonial-carousel-control-icon {
       filter: invert(108%) sepia(82%) saturate(1480%) hue-rotate(356deg);
   }

   /* carousel layout */

   #testimonialCarousel .carousel-inner .d-flex {
       display: flex;
       justify-content: center;
       gap: 26px;
   }

   /* default desktop = 3 cards */

   #testimonialCarousel .card,
   .testimonial-card {
       flex: 0 0 calc(33.33% - 18px);
       max-width: calc(33.33% - 18px);
       border-radius: 14px;
       padding: 26px 22px;
       border: 1.6px solid #219bd8;
       background: linear-gradient(180deg, #fff 60%, #eaf6fd 100%);

       border: 1px solid #d7e7f7;
       box-shadow:
           0 4px 20px rgba(33, 155, 216, 0.12),
           0 2px 6px rgba(28, 35, 70, 0.08);
       min-height: 320px;
       transition: all .25s ease;
   }

   /* highlight hover */

   #testimonialCarousel .card:hover,
   .testimonial-card:hover,
   .custom-blog-card:hover {
       transform: translateY(-6px);
       border: 1.6px solid #219bd8;
       background: #fff;
       box-shadow:
           0 8px 34px rgba(33, 155, 216, 0.25),
           0 3px 12px rgba(28, 35, 70, 0.12);
   }

   /* testimonial content */

   .testimonial-quote {
       font-size: 3rem;
       color: var(--bg-warning);
   }

   .testimonial-text {
       font-size: 1rem;
       color: var(--text-dark);
       margin-bottom: 14px;
       min-height: 170px;
   }

   .testimonial-author {
       font-weight: 700;
       color: #283864;
       font-size: .9rem;
   }

   .testimonial-stars {
       color: var(--bg-warning);
       font-size: .85rem;
   }

   /* tablet = 2 cards */
   @media (max-width: 991.98px) {

       #testimonialCarousel .card,
       .testimonial-card {
           flex: 0 0 calc(50% - 14px);
           max-width: calc(50% - 14px);
           min-height: 280px;
       }

       #testimonialCarousel .carousel-inner .d-flex {
           gap: 18px;
       }

   }

   /* mobile = 1 card */
   @media (max-width: 575.98px) {

       #testimonialCarousel .carousel-inner .d-flex {
           justify-content: center;
           gap: 14px;
       }

       #testimonialCarousel .card,
       .testimonial-card {
           flex: 0 0 90%;
           max-width: 90%;
           min-height: auto;
           padding: 24px 20px;
           border-radius: 16px;
           box-shadow:
               0 6px 26px rgba(33, 155, 216, 0.18),
               0 2px 10px rgba(28, 35, 70, 0.1);
       }

   }

   /* arrow visibility */

   #testimonialCarousel .carousel-control-prev,
   #testimonialCarousel .carousel-control-next {
       opacity: 0.5;
       transition: opacity .2s;
   }

   #testimonialCarousel:hover .carousel-control-prev,
   #testimonialCarousel:hover .carousel-control-next {
       opacity: 1;
   }

   /* testimonial hero section */

   .testimonials-hero {
       background: var(--primary-dark);
       min-height: 200px;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       position: relative;
       overflow: hidden;
       box-shadow:
           0 16px 48px -16px rgba(23, 33, 66, 0.25),
           0 2px 10px rgba(23, 33, 66, 0.06);
   }

   .animated-blue-bg {
       pointer-events: none;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 0;
       filter: blur(2px) brightness(1.07);
   }

   .testimonials-hero-inner {
       position: relative;
       z-index: 1;
       padding: 36px 18px 32px 18px;
       backdrop-filter: blur(1.2px) saturate(120%);
       -webkit-backdrop-filter: blur(1.2px) saturate(120%);
       border-radius: 24px;
       box-shadow: 0 8px 32px 0 rgba(23, 33, 66, 0.16);
   }

   .testimonials-hero-title {
       color: var(--text-light);
       font-size: 2rem;
       font-weight: 500;
       margin-bottom: 12px;
   }

   .testimonials-hero-subtitle {
       color: var(--text-light);
       font-size: 1.5rem;
       font-weight: 600;
   }

   .testimonials-hero-lead {
       color: var(--text-light);
       font-size: 1rem;
   }

   .testimonials-section {
       padding: 40px 0;
       background: #fff;
       overflow: hidden;
   }

   .testimonials-container {
       max-width: 1060px;
       margin: auto;
   }

   @media (max-width: 990px) {
       .faq-section .container {
           flex-direction: column !important;
       }

       .faq-section .faq-list {
           margin-bottom: 24px;
       }
   }

   @media (max-width: 600px) {

       .faq-section .container,
       .newsletter-wrap .container {
           padding: 0 4.8vw !important;
       }

       .newsletter-wrap .container {
           flex-direction: column !important;
           gap: 12.8px !important;
       }

       .faq-section h2 {
           font-size: 1rem !important;
       }

       .faq-list {
           margin-bottom: 12px;
       }

   }

   .faq-question:hover {
       background: rgba(255, 170, 11, 0.25) !important;
   }

   .faq-item.active .faq-answer {
       display: block;
       min-height: 120px;
   }

   .faq-answer {
       display: none;
   }

   .faq-item.active .faq-answer {
       display: block !important;
   }

   /* new csss */

   .partners-title {
       font-size: 2rem;
   }

   .partners-bar-bg {
       background: #00e0ff;
   }

   .partner-logo-carousel-viewport {
       width: 100%;
       max-width: 900px;
       margin: 0 auto;
       position: relative;
       overflow: hidden;
       padding: 0 16px;
   }

   .partner-logo-carousel-track {
       transition: transform 0.6s cubic-bezier(0.49, 0.31, 0.56, 0.92);
       will-change: transform;
   }

   .partner-logo-gap {
       gap: 50px;
   }

   .partner-logo-img {
       max-height: 100px;
       object-fit: contain;
       background: transparent !important;
       border-radius: 8px;
       padding: 8px;
       margin: 0 0;
       transition: max-height 0.2s, padding 0.2s;
   }

   @media (max-width: 1200px) {
       .partner-logo-carousel-viewport {
           max-width: 700px;
       }

       .partner-logo-gap {
           gap: 36px;
       }

       .partner-logo-img {
           max-height: 80px;
           padding: 6px;
       }
   }

   @media (max-width: 900px) {
       .partner-logo-carousel-viewport {
           max-width: 500px;
       }

       .partner-logo-gap {
           gap: 20px;
       }

       .partner-logo-img {
           max-height: 60px;
           padding: 5px;
       }
   }

   @media (max-width: 700px) {
       .partner-logo-carousel-viewport {
           max-width: 100vw;
           padding: 0 4px;
       }

       .partners-title {
           font-size: 1.4rem;
       }

       .partner-logo-gap {
           gap: 12px;
       }

       .partner-logo-img {
           max-height: 38px;
           padding: 2px;
       }
   }

   @media (max-width: 480px) {
       .partner-logo-carousel-viewport {
           max-width: 100vw;
           padding: 0 1px;
       }

       .partners-title {
           font-size: 1.05rem;
       }

       .partner-logo-img {
           max-height: 26px;
           padding: 1px;
       }
   }

   .upcoming-events-section {
       background: linear-gradient(117deg, #e8f2ff 70%, #f6fafc 100%);
   }

   .section-title-events {
       font-size: 2rem;
   }

   .event-badge-new {
       font-size: 1rem;
       padding: 3px 10px;
   }

   .bg-blur {
       backdrop-filter: blur(5px);
   }

   .event-banner {
       min-height: 200px !important;
       max-height: 280px;
       object-fit: cover;
       border-radius: 16px;
       box-shadow: 0 6px 24px rgba(45, 90, 171, 0.05);
   }

   .event-info-card {
       border-left: 4px solid var(--bg-warning);
       min-height: 320px;
       margin: 1.5rem 0;
       padding: 2rem;
   }

   .event-title {
       font-size: 1.35rem;
   }

   .event-desc {
       font-size: 1rem;
   }

   .event-location-text {
       font-size: 14px;
   }

   .small-btn-event {
       font-size: 0.95rem;
       padding: 6px 18px;
   }

   /* Reduce margins, paddings & font sizes for small screens */
   @media screen and (max-width: 991.98px) {
       .event-info-card {
           min-height: 220px;
           margin: 0.5rem 0;
           padding: 1rem 0.7rem;
       }

       .event-banner {
           max-height: 150px;
       }

       .event-title {
           font-size: 1.rem;
       }

       .event-desc {
           font-size: 0.8rem;
       }
   }

   @media screen and (max-width: 767.98px) {
       .section-title-events {
           font-size: 1.15rem;
           margin-bottom: 1.2rem !important;
       }

       .event-info-card {
           padding: 0.55rem 0rem !important;
           min-height: 120px;
           margin: 0.2rem 0;
       }

       .event-banner {
           min-height: 80px !important;
           max-height: 100px;
       }

       .event-title {
           font-size: 0.95rem;
       }

       .event-desc {
           font-size: 0.85rem;
       }

       .event-badge-new {
           font-size: 0.78rem;
           padding: 2px 2px;
       }

       .event-location-text {
           font-size: 12px;
       }

       .small-btn-event {
           font-size: 0.85rem;
           padding: 5px 5px;
       }
   }

   @media screen and (max-width: 575.98px) {
       .container.position-relative {
           padding-left: 2px !important;
           padding-right: 2px !important;
       }

       .section-title-events {
           font-size: 0.97rem;
           margin-bottom: .7rem !important;
       }

       .event-info-card {
           padding: 0.33rem 0.15rem !important;
           margin: 0.12rem 0;
       }

       .event-banner {
           min-height: 60px !important;
           max-height: 75px;
           border-radius: 7px;
       }

       .event-title {
           font-size: 0.82rem;
       }

       .event-desc {
           font-size: 0.68rem;
       }

       .event-badge-new {
           font-size: 0.65rem;
           padding: 2px 5px;
       }

       .event-location-text {
           font-size: 11px;
       }

       .small-btn-event {
           font-size: 0.72rem;
           padding: 4px 8px;
       }
   }

   .trend-group-card {
       border: none;
       cursor: pointer;
       transition: box-shadow .22s, transform .12s;
       border-radius: 28px;
       position: relative;
       overflow: visible;
       min-height: 120px;
       box-shadow: 0 4px 18px rgba(60, 110, 255, .09);
       background: linear-gradient(105deg, #f4faff 80%, #f8fafc 100%);
   }

   .trend-group-card:hover,
   .trend-group-card:focus,
   .trend-group-card:focus-visible {
       box-shadow: 0 12px 38px 0 rgba(70, 125, 235, .14), 0 4px 16px 0 rgba(50, 85, 220, .17);
       background: linear-gradient(105deg, #e8f2fd 55%, #f2fffe 100%);
       transform: translateY(-4px) scale(1.025);
       outline: 2.5px solid #4975e799;
       z-index: 2;
   }

   .trend-group-img {
       width: 62px;
       height: 62px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 18px;
       box-shadow: 0 2px 14px rgba(69, 185, 211, .11);
       background: #f6fcff;
       position: relative;
   }

   .shine {
       position: relative;
       overflow: hidden;
   }

   .shine:after {
       content: '';
       position: absolute;
       top: 0;
       left: -50%;
       width: 200%;
       height: 100%;
       background: linear-gradient(120deg, transparent 78%, #e8f8fa88 82%, #fff 90%, transparent 96%);
       transform: skewX(-27deg);
       pointer-events: none;
       animation: shineboth 2.88s linear infinite;
   }

   @keyframes shineboth {
       0% {
           left: -120%;
       }

       65% {
           left: 120%;
       }

       100% {
           left: 120%;
       }
   }

   .bg-gradient-primary {
       background: var(--main-gradient);
   }

   .bg-gradient-info {
       background: var(--main-gradient);
   }

   /* 
    .bg-gradient-primary {
        background: linear-gradient(123deg, #46d19d 0%, #80fad3 100%);
    } */

   .trend-arrow {
       position: absolute;
       right: 21px;
       top: 39px;
       opacity: 0.86;
       transition: right .22s, filter .2s;
       filter: drop-shadow(0 3px 6px #79e0f966);
   }

   .trend-group-card:hover .trend-arrow,
   .trend-group-card:focus .trend-arrow {
       right: 8px;
       opacity: 1;
       filter: drop-shadow(0 2px 8px #46d19d44);
   }

   .group-sub-label {
       display: inline-block;
       font-size: 1.06em;
       color: var(--primary);
       letter-spacing: 0.03em;
   }

   .trend-group-detail {
       background: #fff;
       border-radius: 23px;
       box-shadow: 0 6px 38px 0 rgba(70, 125, 235, .13), 0 1px 12px 1px #eef3ff;
       padding: 38px 35px 30px 35px;
       margin-top: 10px;
       animation: fadeInUp 0.75s;
       position: relative;
       z-index: 3;
   }

   .trend-sub-card {
       background: linear-gradient(110deg, #f7fbfd 75%, #edf7ff 100%);
       border-radius: 20px;
       box-shadow: 0 2px 18px rgba(90, 104, 165, 0.08);
       padding: 22px 10px 12px 10px;
       text-align: center;
       display: flex;
       flex-direction: column;
       min-height: 240px;
       transition: transform .13s, box-shadow .15s, background .24s;
       color: inherit;
       text-decoration: none !important;
       border: 1.5px solid #e7f6fa;
       position: relative;
   }

   .trend-hover-card:hover,
   .trend-hover-card:focus {
       background: linear-gradient(90deg, #e3f0fa 0%, #bee3fd 60%, #fafeff 99%);
       box-shadow: 0 8px 28px 0 rgba(70, 195, 195, 0.11), 0 1px 9px 0 rgba(90, 110, 160, .07);
       transform: translateY(-4px) scale(1.04) rotate(-1.6deg);
       outline: 2px dashedrgba(9, 147, 246, 0.66);
       border-color: #cdeaf6;
       z-index: 2;
   }

   .trend-sub-card .trend-sub-img {
       margin-bottom: 8px;
   }

   .trend-sub-img {
       width: 100%;
       max-height: 108px;
       object-fit: contain;
       border-radius: 14px;
       background: #e6f2fc;
       box-shadow: 0 4px 20px #4bccce15;
       transition: background .2s;
   }

   .trend-hover-card:hover .trend-sub-img,
   .trend-hover-card:focus .trend-sub-img {
       background: #ebfcfc;
   }

   .trend-sub-desc {
       font-size: 1.05em;
       color: var(--main-gradient-1);
       display: block;
       margin-top: 4px;
       filter: drop-shadow(0 1px 0 #befff3);
   }

   .trend-detail-close {
       border: none;
       background: transparent;
       font-size: 2.1rem;
       line-height: 1;
       opacity: .85;
       transition: color .2s, box-shadow .2s;
   }

   .trend-detail-close:focus,
   .trend-detail-close:active {
       color: #3776e7 !important;
       outline: 2px solid #bee3fd;
       box-shadow: 0 0 3px var(--bg-warning);
       border-radius: 33%;
   }

   .gradient-title {
       background: var(--primary-dark);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .focus-ring:focus {
       outline: 2px solid #287ee7;
       outline-offset: 2px;
   }

   @media (max-width: 991px) {
       .trend-group-detail {
           padding: 22px 7px 14px 7px;
       }

       .trend-sub-card {
           min-height: 200px;
           padding: 13px 6px 7px 6px;
       }
   }

   @media (max-width: 767px) {
       .trend-group-card {
           min-height: 80px !important;
           padding: 14px 8px;
       }

       .trend-group-detail {
           padding: 7px 1px;
       }

       .trend-sub-img {
           max-height: 66px;
       }
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(60px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeInDown {
       from {
           opacity: 0;
           transform: translateY(-25px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }



   /* Mobile-first adjustments */
   @media (max-width: 575px) {

       /* Container */
       .container.position-relative {
           padding-left: 4px !important;
           padding-right: 4px !important;
       }

       /* Partners section */
       .partners-title {
           font-size: 0.95rem !important;
           margin-bottom: 0.5rem;
       }

       .partner-logo-carousel-viewport {
           max-width: 100vw;
           padding: 0 2px;
       }

       .partner-logo-gap {
           gap: 8px !important;
       }

       .partner-logo-img {
           max-height: 24px !important;
           padding: 1px !important;
           margin: 0 !important;
       }

       /* Events section */
       .section-title-events {
           font-size: 0.9rem !important;
           margin-bottom: 0.5rem !important;
       }

       .event-info-card {
           min-height: 100px !important;
           padding: 0.25rem 0.15rem !important;
           margin: 0.1rem 0 !important;
       }

       .event-banner {
           min-height: 50px !important;
           max-height: 65px !important;
           border-radius: 6px !important;
       }

       .event-title {
           font-size: 0.75rem !important;
       }

       .event-desc {
           font-size: 0.65rem !important;
       }

       .event-badge-new {
           font-size: 0.6rem !important;
           padding: 1px 4px !important;
       }

       .event-location-text {
           font-size: 10px !important;
       }

       .small-btn-event {
           font-size: 0.65rem !important;
           padding: 3px 6px !important;
       }

       /* Trend Cards */
       .trend-group-card {
           min-height: 70px !important;
           padding: 10px 6px !important;
           border-radius: 16px !important;
       }

       .trend-group-detail {
           padding: 6px 2px !important;
       }

       .trend-sub-card {
           min-height: 150px !important;
           padding: 10px 5px !important;
       }

       .trend-sub-img {
           max-height: 60px !important;
           border-radius: 10px !important;
       }

       .trend-sub-desc {
           font-size: 0.85rem !important;
       }

       /* General adjustments */
       body,
       p,
       span,
       a {
           font-size: 14px !important;
       }
   }