/*.portfoliocont { background: red; height: 300px; overflow-x: scroll; } .jos { transition: 0.7s 0.5s; height: 300px; }*/ .support-button a { background: #fff; } .padtb{ padding:40px 0px; } section { scroll-margin-top: 100px; /* apne header ki height ke hisaab se adjust karo */ } .rankweb { text-align: center; font-size: 22px; font-weight: 600; color: #fff; } .seardkr { background:#17161a !important; } .outsear { border: 2px solid #fff; border-radius: 30px; margin-top: 30px; } #searchdkr { background: #fff; display: flex; align-items: center; justify-content: center; } /*#hero { background:#d80a2c; }*/ #hero h3 { color:#ffffff; } /* Site header fix rahe */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; } html { scroll-behavior: smooth; } /* --- Mobile menu must sit ABOVE the header --- */ @media (max-width: 991px) { /* Fullscreen overlay */ .menu-overlay { position: fixed !important; inset: 0 !important; /* top:0; right:0; bottom:0; left:0 */ background: transparent !important; z-index: 40000; /* > header */ opacity: 0; pointer-events: none; transition: opacity .25s ease; } /* Slide-in drawer */ .menu-block { position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; width: 85vw; max-width: 360px; background: #fff; z-index: 50000; /* above overlay & header */ transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* When open (we’ll toggle .menu-open on ) */ body.menu-open .menu-overlay { opacity: 1; pointer-events: auto; } body.menu-open .menu-block { transform: translateX(0); } /* Make sure wrapper itself doesn't interfere */ .menu-block-wrapper { position: static !important; } } /* Prevent background scroll when menu is open */ body.menu-open { overflow: hidden; } /* White header relative hi rahe */ .global-container.main-header { position: relative; width: 100%; background: #fff; z-index: 2000; } .global-container.main-header.scrolled { background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; } .main-navigation { padding-bottom: 10px; } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } #our-portfolio, #our-projects { background:#dae7f3; padding-bottom:40px; } #our-products { background:#ffffff; } .texth { color:#ff008c !important; } .texthwhite { color:#ffffff !important; } .expertise-container .content h4 { color:#ffffff !important; } .expertise-container .content h4::before { background: #ffffff !important; } .expertise-container p { color:#ffffff !important; } #our-products p { color: black !important; } #game-changer { background: #dae7f3; padding-top: 40px; padding-bottom: 40px; } #our-industry { background: #dae7f3; } #our-industry .item .right-part a { color:#000000; } #training-review { background: #ffffff; margin-top: -2px; } #social-impact { background: #06467d; } #advanced-solution { background: #ffffff; padding-top:30px; } #advanced-blog { background: linear-gradient(135deg, #dae7f3 0%,#dae7f3 100%); padding-top:30px; } .advanced-blog .pb-10 { padding-bottom: 80px; } #accordiondk { height: 300px; overflow-x: hidden; overflow-y: auto; } .threebtn{ display: flex; align-content: center; align-items: center; text-align: center; margin: 0 auto; width: 100%; } .threebtn a { width: 100%; text-align: center; } #faq { background: #dae7f3; } #home-contact { background: #ffffff; } .sdbutn:hover { border:2px solid #ffffff !important; } .sdbutn { border:2px solid #000000 !important; } footer { background-color: #dae7f3; /*background-image: url(../img/th-3/demo-conference-about-bg.png); background-position: right bottom -176px; background-repeat: no-repeat;*/ } .bgg { background:rgba(255, 255, 255, .1); } /*===============particles====================*/ canvas { display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #hero-wrap { /*position: relative;*/ z-index:1; /*width: 100%; height: 100%;*/ background: linear-gradient(135deg, #0d1b2a 0%, #1e3a8a 100%); /*background-color: #d80a2c; background-image: url("");*/ background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles { background: #000000; position: absolute; top: 48px; left: 0; width: 80px; color: #13e8e9; font-size: 0.8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles { font-size: 1.1em; } #stats, .count-particles { -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats { border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles { border-radius: 0 0 3px 3px; } .hero-wrap-canvas-el { position: absolute; top: 0; z-index:-1; } /*===============particles====================*/ /* === Social Impact Section === */ #social-impact { background: #06467d; padding: 30px 0 10px; } /* Heading styles */ #social-impact h2 { color: #ffffff !important; font-family: 'Raleway', sans-serif; font-weight: 500; line-height: 1.06; } /* === Portfolio Slider Arrows (inside image/video) === */ .social-impact-slider .swiper-button-next, .social-impact-slider .swiper-button-prev { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.9); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; z-index: 20; cursor: pointer; } .social-impact-slider .swiper-button-next:after, .social-impact-slider .swiper-button-prev:after { font-size: 16px; color: #000; } /* Position arrows in slider */ .social-impact-slider .swiper-button-next { right: 10px; } .social-impact-slider .swiper-button-prev { left: 10px; } /* === Testimonial Navigation (above slider) === */ .social-impact-nav { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 20; } .social-impact-nav-btn { background: rgba(255, 255, 255, 0.9); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease; } .social-impact-nav-btn img { filter: brightness(0) invert(1); transition: filter 0.3s ease; } .social-impact-nav-btn:hover { background: rgba(255, 255, 255, 1); } .social-impact-nav-btn:hover img { filter: brightness(0) invert(0); } /* === Responsive Fix === */ @media (max-width: 768px) { .social-impact-nav { top: -45px; gap: 10px; } .social-impact-nav-btn { width: 40px; height: 40px; } } html { scroll-behavior: smooth; } .orange-gradient-1 { background: radial-gradient(50% 50% at 50% 50%, #ff9831 0%, #fe330a 100%); filter: blur(55px); } .orange-gradient-2 { background: radial-gradient(50% 50% at 50% 50%, #fe330a 0%, #ff9831 100%); filter: blur(55px); } /* Custom CSS for accordion */ .accordion-item .accordion-header { cursor: pointer; transition: all 0.3s ease-in-out; } .accordion-header { column-gap: 20px; } .accordion-header h5 { flex: 1; } .accordion-header .accordion-icon { transition: all 0.3s ease; } .accordion-item.active .accordion-icon { transform: rotate(-45deg); } .accordion-item.active .accordion-icon.is-blue { background-color: #321ca4; } .accordion-icon.is-blue { position: relative; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background-color: #eaedf0; } .accordion-icon.is-blue img:last-child { position: absolute; opacity: 0; } .accordion-item.active .accordion-icon.is-blue img:last-child { opacity: 1; } .accordion-icon.is-chevron { position: relative; width: 30px; height: 30px; } .accordion-icon.is-chevron img:first-child { opacity: 1; } .accordion-icon.is-chevron img:last-child { opacity: 0; } .accordion-header .accordion-icon.is-chevron { transform: rotate(0deg); } .accordion-item.active .accordion-icon.is-chevron img:first-child { opacity: 0; } .accordion-item.active .accordion-icon.is-chevron img:last-child { opacity: 1; } .accordion-icon.is-outline-green { position: relative; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .accordion-icon-plus { position: relative; } .accordion-icon-plus::before, .accordion-icon-plus::after { position: absolute; content: ""; background: #fff; transition: all 0.5s ease; width: 20px; height: 1px; top: 0px; left: -10px; } .accordion-icon-plus::after { transform: rotate(90deg); } .accordion-item.active .accordion-icon.is-outline-green { border-color: #39ff14; transform: rotate(0); } .accordion-item.active .accordion-icon.is-outline-green .accordion-icon-plus::before { background: #39ff14; } .accordion-item.active .accordion-icon.is-outline-green .accordion-icon-plus::after { transform: rotate(0deg); opacity: 0; } .accordion-content { height: 0px; overflow: hidden; opacity: 0; transform: translateY(30px); } .accordion-item.active .accordion-content { height: auto; transition: all 0.5s ease; opacity: 1; transform: translateY(0px); margin-top: 15px; } .accordion-item.is-2:has(.active), .accordion-item.is-3:has(.active) { border: none; box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.1); transition: all 0.5s ease; } .footer-text-slider { animation: horizontal-slide-from-right-to-left 10s linear infinite normal forwards; } .horizontal-slide-from-right-to-left { animation: horizontal-slide-from-right-to-left linear 10s infinite; } .horizontal-slide-from-left-to-right { animation: horizontal-slide-from-left-to-right linear 10s infinite; } @keyframes horizontal-slide-from-right-to-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes horizontal-slide-from-left-to-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } .sticky-menu.nav-hidden { animation: fadeInDown 0.9s 1; } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } 100% { opacity: 1; transform: translateZ(0); } } /* 23-11-2024-start */ .hero-banner h2.font-raleway { color: #ffffff; line-height: 65px; } .hero-banner img { border-radius: 20px; width: 100%; object-fit: cover; } .expertise-container .left-menu { width: 35%; padding-right: 20px; display: flex; flex-wrap: wrap; gap: 15px; } .expertise-container .menu-item { padding: 12px; background-color: #fff; margin-bottom: 0px; cursor: pointer; text-align: center; transition: background-color 0.3s ease; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; border-radius: 16px; border: solid 1px #e3e3e3; box-shadow: rgba(0, 0, 0, .05) 2px 3px 5px; width: 48%; /*height: 138px;*/ } .expertise-container .menu-item:hover { background-color: #ddd; } .expertise-container .menu-item.active, .expertise-container .menu-item:hover { color: #fff; background: linear-gradient(to right, #06467d, #06467d); transition: 0.3s ease-in-out; } .expertise-container .menu-item.active img { filter: brightness(0) invert(1); transition: 0.3s ease-in-out; } .expertise-container .menu-item:hover .expert-icon img { filter: brightness(0) invert(1); } .expertise-container .menu-item .icon { font-size: 18px; margin-left: 10px; } .expertise-container .content { width: 65%; padding: 20px 20px 20px 50px; } .expertise-container .content-section { display: none; } .expertise-container .content-section.active { display: block; } .expertise-container { display: flex; } .expertise-container ul li { background: url(../img/th-3/tick-b.png) 3px 8px; background-repeat: no-repeat; padding-left: 30px; margin-bottom: 5px; display: inline-block; width: 100%; } .expertise-container ul { margin-top: 20px; } .expertise-container .menu-item:last-child { margin-bottom: 0; } .our-expertise-outer p.text-lg { margin-top: 20px; } .gamechanger-hidden-container ul { list-style-type: disc; padding-left: 10px; } .gamechanger-hidden-container ul li { background: none; padding-left: 0; margin-bottom: 5px; display: list-item; } .trustedtechno ul li { background: url(../img/th-3/tick-b.png) left 2px; background-repeat: no-repeat; padding-left: 40px; margin-bottom: 0; display: inline-block; width: 100%; letter-spacing: normal; font-size: 18px; font-weight: normal; margin: 0px; line-height:16px; } .trustedtechnodkr ul { list-style: none !important; /* remove default bullets */ padding-left: 0; margin:0; } .trustedtechnodkr ul li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 18px; line-height: 24px; color: white; list-style-type: none !important; } /* Add custom icon */ .trustedtechnodkr ul li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; /* icon width */ height: 24px; /* icon height */ background-image: url('../img/th-3/checkmarks.png'); background-size: contain; background-repeat: no-repeat; } /* Responsive adjustments */ @media (max-width: 768px) { .trustedtechnodkr ul li { padding-left: 28px; font-size: 16px; line-height: 22px; } .trustedtechnodkr ul li::before { width: 20px; height: 20px; } } .expertise-container .expert-content span { font-size: 14px; } .expertise-container .content h4 { color: #fb3f19; position: relative; } .expertise-container .content h4:before { content: ""; position: absolute; top: 16px; left: -55px; height: 3px; width: 50px; background: #fb3f19; } .our-expertise-outer { padding-top: 60px; padding-bottom: 70px; } section#promo-outer { padding-bottom: 70px; } .blog-outer { padding-top: 0px; padding-bottom: 0px; } .industry-outer .owl-stage-outer { background: url(../img/th-3/mac-slide.png); width: 100%; height: 550px; display: block; background-position: top left; background-repeat: no-repeat; padding: 24px 0 0 26px; } .industry-outer .item { display: flex; align-items: center; justify-content: start; } .industry-outer .item .left-part { position: relative; width: 50%; } .industry-outer .item .right-part { padding-left: 50px; } .industry-outer .item .right-part a { font-size: 26px; text-align: left; font-weight: 600; line-height: 50px; color: #fb3f19; max-width: 500px; font-family: Inter, sans-serif; } .our-industry-outer p.text-lg { padding-top: 20px; } .our-industry-outer .owl-nav { display: block; position: absolute; width: 90px; top: 57%; transform: translate(-50%, -50%); left: 58%; } .our-industry-outer .owl-nav button.owl-prev span[aria-label="Previous"] { background: url(../img/th-3/left-arrow-icon.png) center center no-repeat; width: 44px; height: 44px; display: block; position: absolute; left: 0; top: 0; font-size: 0; background-size: 25px; } .our-industry-outer .owl-nav button.owl-next span[aria-label="Next"] { background: url(../img/th-3/left-arrow-icon.png) center center no-repeat; width: 44px; height: 44px; display: block; position: absolute; right: 0; top: 0; font-size: 0; background-size: 25px; rotate: 180deg; } .our-industry-outer { padding-bottom: 70px; padding-top: 45px; } .game-changer-direction { background: linear-gradient(to right, #06467d, #06467d); box-shadow: rgba(0, 0, 0, .05) 2px 3px 5px; padding: 20px 30px; border-radius: 16px; } .game-changer-direction .brand-button a + a { margin-top: 10px; } .game-changer-direction .brand-button .book-free { display: flex; align-items: center; background: #ffffff; margin-top: 10px; width: max-content; border-radius: 6px; padding: 4px 12px; font-size: 16px; } .game-changer-direction .brand-button .book-free:hover { background: #06467d; color: #ffffff; } .game-changer-direction .brand-button .view-button { display: flex; align-items: center; color : #ffffff; margin-top: 10px; width: max-content; border-radius: 6px; padding: 4px 12px; font-size: 16px; } .game-changer-direction .brand-button .view-button:hover { color: gold; border: 2px dashed rgb(247, 247, 243); } .game-changer-direction .brand-button a svg { margin-left: 5px; } .game-changer-direction span.number-border { background: #fff; height: 2px; display: inline-block; width: 50px; position: relative; top: -8px; } .game-changer-direction { margin-top: 20px; } .game_Changer_item { transition: height 0.4s ease; overflow: hidden; height: auto; background: white; padding: 20px; border-radius: 20px; } .game_Changer_item.expanded { background-color: #f3f3f3; /* Optional - to highlight expanded card */ } .training-review video { border-radius: 20px; } .training-review .review-button { padding: 40px 0px 10px 0px; } .training-review .review-button .button { padding: 15px 60px; } .stream-task-sec { padding-top: 70px; } .stream-task-sec img { height: 100%; } .people-are-saying { background: #dae7f3; padding-top: 40px; padding-bottom: 40px; } .advanced-solution .swiper-slide:before { content: ""; position: absolute; top: 0; right: -61px; width: 1px; height: 100%; border-right: 1px solid #9f9c9c; } .advanced-solution .swiper-slide img { height: 200px; object-fit: contain; } .advanced-solution .swiper-slide:last-child::before { display: none; } /*.check-user-reviews .testimonial-nav-dir:hover { background-color: #d60a2b; }*/ /* Container */ .tabdkr { position: relative; width: 100%; } /* Scroll container: center when no overflow, allow overflow when needed */ .tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; text-align: center; padding: 12px 56px; /* Hide scrollbar */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .tab-scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* Make the list inline-flex so its width = content (enables overflow) */ .tab-nav { display: inline-flex; gap: 12px; align-items: center; list-style: none; margin: 0; padding: 0; white-space: nowrap; } /* Tab style */ .tab-btn { padding: 10px 18px; border-radius: 999px; background: #fff; color: #000; border: 2px solid transparent; cursor: pointer; white-space: nowrap; font-weight: 600; } .tab-btn.active { background: #06467d; color: #fff; border-color: #fff; } /* Arrows (hidden by default, JS will show when needed) */ .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: none; /* JS toggles this */ align-items: center; justify-content: center; border-radius: 999px; border: none; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.12); cursor: pointer; z-index: 9999; } .arrow.left { left: 8px; } .arrow.right { right: 8px; } /* Optional: smaller screens tweak */ @media (max-width: 420px) { .tab-scroll { padding: 10px 48px; } .tab-btn { padding: 8px 14px; font-size: 15px; } } .check-user-reviews .testimonial-nav-dir:hover img { filter: brightness(0) invert(1); } .check-user-reviews { padding-bottom: 30px !important; } .advanced-solution .pb-10 { padding-bottom: 80px; } .footer-text-slider { padding: 10px 0; } .home-contact form { background: linear-gradient(to right, #06467d, #06467d); box-shadow: rgba(0, 0, 0, .05) 2px 3px 5px; padding: 30px 30px 40px 30px; border-radius: 20px; max-width: 1000px; margin: auto; margin-bottom: 90px; } .home-contact form textarea { height: 120px; resize: auto; } .home-contact button, .home-contact input, .home-contact optgroup, .home-contact select, .home-contact textarea { font-size: 16px; } .home-contact input { width: 100%; } .home-contact select#country-code { width: 150px; padding: 15px; height: 100%; } .home-contact .form-group { justify-content: space-between; column-gap: 10px; } /*.home-contact .form-group button.button { color: #000; }*/ .home-contact .form-group button.button:hover { color: #ffffff; } .article-btn a.button { padding: 12px 40px; margin-top: 40px; } .blog-outer .group .hover\:text-\[\#fe330a\]:hover { color: #d50a2b; } .dsk-support-contact { position: fixed; top: 50%; right: 0; z-index: 2; } .dsk-support-contact a { font-size: 16px; line-height: 20px; font-weight: 500; display: flex; align-items: center; background: #fff; width: 250px; padding: 12px; box-shadow: 0px 10px 30px #c1c1c187; margin-bottom: 10px; transition: 0.5s ease-in-out; white-space: nowrap; transform: translateX(200px); overflow: hidden; border-radius: 5px; } .dsk-support-contact .icon { height: 24px; width: 30px; margin-right: 10px; object-fit: contain; } @media (max-width: 768px) { .dsk-support-contact{ top: 40%; } .dsk-support-contact a { font-size: 13px; line-height: 18px; width: 180px; padding: 8px; transform: translateX(145px); } .dsk-support-contact .icon { height: 18px; width: 22px; margin-right: 8px; } .dsk-support-contact a.active { transform: translateX(0); /* visible on click */ } } .dsk-support-contact .support-phone { margin-bottom: 0px; } .dsk-support-contact .support-phone .icon { vertical-align: baseline; } .dsk-support-contact a:hover { background: #d60a2b; color: #fff; } .dsk-support-contact a:hover .icon { filter: brightness(0) invert(1); } .dsk-support-contact .support-mail:hover { transform: translateX(0px); } .dsk-support-contact .support-phone:hover { transform: translateX(0px); } .dsk-support-contact .support-calendar:hover { transform: translateX(0px); } .portfolio-slider .swiper, .project-slider .swiper { width: 100%; height: 100%; } .portfolio-slider .swiper-slide img, .project-slider .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .portfolio-slider .swiper-slide, .project-slider .swiper-slide { width: 100% !important; } .portfolio-slider .swiper-button-next, .portfolio-slider .swiper-button-prev, .project-slider .swiper-button-next, .project-slider .swiper-button-prev { background: #fff; padding: 15px; width: 35px; height: 35px; } .portfolio-slider .swiper-button-next:after, .portfolio-slider .swiper-button-prev:after, .project-slider .swiper-button-next:after, .project-slider .swiper-button-prev:after { font-size: 20px; font-weight: 700; color: #000; } .blog-outer .button { margin-top: 20px; } #scrollToTopBtn { display: none; /* initially hidden */ cursor: pointer; z-index: 9999; } .scroll-top-arrow { position: fixed; bottom: 20px; right: 10px; } .scroll-top-arrow img { width: 20px; height: 20px; object-fit: contain; } .scroll-top-arrow button { background: #fff; padding: 10px; box-shadow: 0px 10px 30px #c1c1c1cc; border: 1px solid #ccc; } .blog-outer .line-clamp-2 { -webkit-line-clamp: 4; padding-left: 30px; position: relative; background: url(../img/th-3/tick-b.png) 3px 8px; background-repeat: no-repeat; } .game-changer-btn { padding-top: 40px; padding-bottom: 50px; } .footer-social-link ul li { margin-right: 10px; } section#our-portfolio .pt-12, section#our-projects .pt-12 { padding-top: 50px; } .training-review .mx-auto.mb-10.jos { margin-bottom: 40px; padding-top: 20px; } .faq-outer { padding: 70px 0; } .global-container h2 { color: #06467d; } .intregrates-outer ul li::after { /* background: #000000;*/ } .intregrates-outer .button img { filter: brightness(1); } .intregrates-outer .button:hover img { filter: unset; } .hero-banner .pt-28 { padding-bottom: 70px; } /* Stop scroll-based transition from JOS */ .jos { opacity: 1 !important; transform: none !important; transition: none !important; } /* If jos adds visibility hidden initially */ .jos[data-jos_animation] { visibility: visible !important; } .product-heading { font-family: 'Raleway', sans-serif; font-size: 4rem; /* Adjust as needed */ font-weight: 500; line-height: 1.06; color: #000; } .product-subheading { font-size: 1.125rem; line-height: 1.42; color: #000; } .product-slider-wrapper { padding: 20px; background: #fff; position: relative; } .product-slider { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 20px; } .product-card { background: #fff; border: 2px solid #005a87; color: #000; border-radius: 12px; padding: 20px; width: 500px; height: auto; flex-shrink: 0; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s; display: flex; flex-direction: column; justify-content: space-between; } .product-card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .product-card-header img { width: 60px; height: 60px; object-fit: contain; } .product-card-header h4 { font-size: 20px; font-weight: bold; color: #000; margin: 0; } .product-description { font-size: 15px; color: #000; line-height: 1.6; flex-grow: 1; } .product-button-wrapper { margin-top: 20px; text-align: right; display: flex; justify-content: flex-end; gap: 10px; } .read-more-btn, .buy-now-btn { background: #005a87; color: #fff; padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; text-decoration: none; display: inline-block; } /* Modal */ .modal { display: none; position: fixed; z-index: 9999; top: 80px; left: 0; width: 100%; height: calc(100% - 80px); background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: flex-start; padding: 20px; box-sizing: border-box; overflow-y: auto; } .modal-content { background: #fff; border-radius: 12px; width: 90%; max-width: 1000px; display: flex; flex-direction: row; gap: 25px; align-items: flex-start; padding: 24px; position: relative; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); margin-top: 70px; box-sizing: border-box; z-index: 999; } .modal-close { position: absolute; top: 12px; right: 18px; font-size: 28px; cursor: pointer; color: #000; font-weight: bold; z-index: 10000; } .modal-left { flex: 1; display: flex; justify-content: center; align-items: flex-start; } .modal-left img { width: 150px; height: 150px; object-fit: contain; border-radius: 8px; } .modal-right { flex: 2; display: flex; flex-direction: column; justify-content: flex-start; position: relative; } .modal-right h4 { margin: 0 0 12px; font-size: 24px; font-weight: bold; color: #000; } .modal-right p { font-size: 16px; margin-bottom: 14px; color: #333; line-height: 1.6; } .modal-right ul { padding-left: 20px; color: #444; line-height: 1.6; margin: 0; font-size: 14px; list-style: disc; } .modal-action-button { position: absolute; bottom: 0; right: 0; background-color: #005a87; color: #fff; padding: 10px 18px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; } .modal-action-button:hover { background-color: #0071a8; } .modal-content-wrapper { position: relative; padding-bottom: 50px; /* space for button */ } /* Our team section background */ #our-team, #our-team .swiper, #our-team .swiper-wrapper, #our-team .swiper-slide { background: #06467d !important; background-image: none !important; border: none !important; } .team-member .profile-pic { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 4px solid #e5e7eb; margin: 0 auto 16px; } .team-member .profile-pic img { width: 100%; height: 100%; object-fit: cover; } .team-member { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 320px; width: 100%; text-align: center; box-sizing: border-box; border-radius: 50px; overflow: hidden; } .team-next-btn, .team-prev-btn { background: white !important; color: #06467d !important; width: 45px !important; /* 👈 chhota size */ height: 45px !important; border-radius: 50% !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; display: flex !important; justify-content: center; align-items: center; font-size: 14px !important; cursor: pointer; transition: 0.3s; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 10 !important; } .team-next-btn:hover, .team-prev-btn:hover { background: #06467d; color: #fff; } .team-prev-btn { left: 10px; } .team-next-btn { right: 10px; } @media (max-width: 768px) { .team-prev-btn { left: 5px; } .team-next-btn { right: 5px; } } /* Mobile Responsive Styles */ @media (max-width: 768px) { .modal { top: 0; left: 0; height: 100%; padding: 20px 12px; align-items: flex-start; background: rgba(0, 0, 0, 0.6); z-index: 9999; } .modal-content-wrapper { padding-bottom: 60px; } .modal-content { width: 100%; max-width: 100%; height: auto; border-radius: 16px; margin-top: 130px; flex-direction: column; padding: 16px; overflow-y: auto; } .modal-left { width: 100%; justify-content: center; align-items: center; margin-bottom: 16px; } .modal-left img { width: 100px; height: 100px; } .modal-right { width: 100%; display: flex; flex-direction: column; padding-bottom: 60px; } .modal-close { top: 12px; right: 16px; font-size: 28px; } .modal-right h4 { font-size: 20px; margin-bottom: 10px; } .modal-right p, .modal-right ul { font-size: 14px; margin-bottom: 10px; } .modal-action-button { position: absolute; bottom: 0; right: 0; width: auto; padding: 10px 16px; } .product-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 1rem; } .product-card { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; } } /* Responsive-media-device */ @media (max-width: 1320px) { .industry-outer .owl-stage-outer { background-size: 49%; padding: 20px 0px 0px 20px; } .industry-outer .item .left-part { position: relative; width: 46%; } } @media (max-width: 1200px) { .expertise-container .left-menu { width: 45%; } .expertise-container .content { width: 55%; padding: 20px 20px 20px 50px; } .industry-outer .owl-stage-outer { background-size: 49%; padding: 16px 0px 0px 18px; } } @media (max-width: 991px) { .expertise-container { display: flex; flex-direction: column; } .expertise-container .left-menu { width: 100%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .expertise-container .content { width: 100%; padding: 20px 20px 20px 50px; } .expertise-container .content h4:before { top: 16px; left: -40px; width: 35px; } .expertise-container .menu-item { width: 100%; height: 138px; min-width: 200px; } .industry-outer .owl-stage-outer { background-size: 48%; padding: 12px 0px 0px 8px; height: 300px; } .industry-outer .item .right-part a { font-size: 20px; line-height: 38px; } .industry-outer .item .right-part { padding-left: 35px; } .hero-banner .pt-28 { padding-top: 10rem; } } @media (max-width: 767px) { .industry-outer .item .right-part a { font-size: 18px; line-height: 28px; } .industry-outer .item .right-part { padding-left: 20px; } .industry-outer .owl-stage-outer { background-size: 48%; padding: 10px 0px 0px 6px; height: 300px; } .industry-outer { margin-top: 30px; } .our-industry-outer { padding-bottom: 30px; } .home .global-container .text-center { text-align: left; } .training-review .global-container .review-button { text-align: center; } .hero-banner .pt-28 { padding-top: 11rem; } .home-contact .form-group { flex-direction: column; justify-content: center; } .home-contact .form-group a.button { width: 48%; margin: auto; } .home-contact .form-group .support-button { text-align: center; } .home-contact .form-group .submit-button { text-align: center; width: 100%; margin-top: 20px; } .home-contact .form-group button.button { width: 100%; text-align: center; align-items: center; justify-content: center; } .blog-outer .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); } /* .site-header.fixed { position: absolute; } .site-header.fixed .header-work-shop { position: fixed; top: 0; left: 0; width: 100%; } */ body.fixed .main-wrapper { padding-top: 0rem; } } @media (max-width: 600px) { .industry-outer .item { flex-direction: column; align-items: baseline; } .industry-outer .item .left-part { position: relative; width: 93%; } .industry-outer .item .right-part { padding: 0; margin-top: 140px; } .industry-outer .owl-stage-outer { background-size: 100%; padding: 20px; height: 450px; } .industry-outer .owl-stage-outer { background-size: 100%; padding: 20px; height: 550px; } .our-industry-outer .owl-nav { width: 90px; top: 75%; transform: unset; left: auto; right: 0; } .hero-banner img { height: 250px; } .our-expertise-outer { padding-top: 60px; padding-bottom: 20px; } .workshop-box { flex-direction: row-reverse; width: 100%; justify-content: space-between; } .left-workshop p { display: none; } .left-workshop { justify-content: end; width: 100%; } .mobile-contact a { color: #fff; font-size: 16px; font-weight: 400; margin: 0 8px; } .register-button .button { min-width: 135px; } .home-contact .form-group a.button { width: 100%; margin: auto; margin-top: 10px; text-align: center; justify-content: center; } .home-contact .workshop-timer { flex-direction: column; text-align: left; align-items: baseline; } .home-contact .workshop-timer span.center-border { display: none; } .home-contact .workshop-timer span { line-height: 26px; font-size: 16px; } .footer-button { display: flex !important; position: fixed; background: #ffffff; left: 0; width: 100%; bottom: 0px; padding: 8px; box-shadow: 0px 10px 20px #ccc; column-gap: 8px; justify-content: center; } .footer-button a.button { font-size: 14px; line-height: 18px; padding: 10px 14px; } .scroll-top-arrow { position: fixed; bottom: 80px; right: 15px; } .main-footer .footer-copyright { padding: 20px 15px 80px 15px; } } @media (max-width: 480px) { .expertise-container .menu-item { width: 100%; height: 128px; min-width: 190px; } .expertise-container .menu-item .icon { font-size: 16px; margin-left: 2px; } .expertise-container .expert-content span { font-size: 13px; } .expertise-container { margin-top: 30px; } .expertise-container .content h4:before { top: 36px; left: 5px; width: 60px; } .expertise-container .content { width: 100%; padding: 20px 5px; } .hero-banner h2.font-raleway { padding-top: 60px; } .industry-outer .item .left-part { position: relative; width: 95%; } .industry-outer .owl-stage-outer { background-size: 100%; padding: 8px; height: auto; } .industry-outer .item .right-part { padding: 0; margin-top: 90px; } .our-industry-outer .owl-nav { top: 65%; } .main-footer .button.py-5 { text-align: center; justify-content: center; } .home-contact select#country-code { width: 75px; padding: 10px; height: 100%; } .home-contact form { padding: 20px 20px 30px 20px; } .hero-banner .pt-28 { padding-top: 7rem; } .home-contact h4 { font-size: 20px; line-height: 30px; } .dsk-support-contact { top: 30%; } } .product-slider { scrollbar-width: thin; scrollbar-color: #005a87 #eaeaea; } .product-slider::-webkit-scrollbar { height: 8px; } .product-slider::-webkit-scrollbar-track { background: #ffffff; border-radius: 4px; margin: 0 100px; } .product-slider::-webkit-scrollbar-thumb { background: #005a87; border-radius: 4px; } .product-slider::-webkit-scrollbar-thumb:hover { background: #00476b; border-radius: 10px; } @media (max-width: 768px) { #hero-wrap>section>div { grid-template-columns: 1fr !important; } #hero-wrap a[style*="position:absolute"] { position: static !important; margin-top: 10px !important; display: inline-flex !important; } }