@charset "UTF-8";
/*
Theme Name: DSW Technologies
Author: DS Web Technologies Pvt. Ltd.
Author URI: https://www.dswtechnologies.com/
Description: DS Web Technologies is a leading web design, web development, and digital marketing company delivering innovative, scalable, and result-driven solutions for businesses worldwide. We specialize in custom website development, eCommerce solutions, UI/UX design, WordPress development and SEO to help brands grow digitally.
Version: 3.0.0
Tags: web development, web design, wordpress development, ecommerce development, digital marketing, seo services, custom web solutions, UI UX design
*/
@charset "UTF-8";

@font-face { font-family: 'Michroma'; src: url(fonts/Michroma-Regular.eot); src: url('fonts/Michroma-Regular.eot?#iefix') format('embedded-opentype'), url(fonts/Michroma-Regular.woff2) format('woff2'), url(fonts/Michroma-Regular.woff) format('woff'), url(fonts/Michroma-Regular.ttf) format('truetype'), url('fonts/Michroma-Regular.svg#Michroma-Regular') format('svg'); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: 'Montserrat-Medium'; src: url(fonts/Montserrat-Medium.eot); src: url('fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'), url(fonts/Montserrat-Medium.woff2) format('woff2'), url(fonts/Montserrat-Medium.woff) format('woff'), url(fonts/Montserrat-Medium.ttf) format('truetype'), url('fonts/Montserrat-Medium.svg#Montserrat-Medium') format('svg'); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: 'Montserrat'; src: url(fonts/Montserrat-Regular.eot); src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), url(fonts/Montserrat-Regular.woff2) format('woff2'), url(fonts/Montserrat-Regular.woff) format('woff'), url(fonts/Montserrat-Regular.ttf) format('truetype'), url('fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: 'Montserrat-Light'; src: url(fonts/Montserrat-Light.eot); src: url('fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'), url(fonts/Montserrat-Light.woff2) format('woff2'), url(fonts/Montserrat-Light.woff) format('woff'), url(fonts/Montserrat-Light.ttf) format('truetype'), url('fonts/Montserrat-Light.svg#Montserrat-Light') format('svg'); font-weight: 300; font-style: normal; font-display: swap }

:root {
    --body-color: #e1e1e1;
    --primary-color: #f4d9a5;
    --secondary-color: #020c17;
    --black-color: #000000;
    --white-color: #FFFFFF;
    --btn-color: #fff;
    --head-blue: #519df4;
    --body-font: 'Montserrat-Light';
    --btn-font: 'Montserrat-Medium';
    --heading-font: 'Michroma';
    --primary-font: 'Montserrat';
}

*:focus { outline: none }

html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox { background: #fff0; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block }
blockquote { quotes: none }
br { height: 0 }
ul, ol, dl, li { margin: 0; padding: 0; list-style-type: none }
ul, ol { margin: 0 0 0 0 }
html, body { appearance: none; -webkit-appearance: none; border: none; -webkit-text-size-adjust: none }
body { padding: 0; margin: 0; font-family: var(--body-font); font-size: 14px; color: var(--body-color); line-height: 24px; box-sizing: border-box; overflow-x: hidden }

*, *:after, *:before { box-sizing: border-box }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--white-color); line-height: 1.2; font-weight: 400; font-family: var(--heading-font); text-transform: none }

h1, .h1 { font-size: 75px } 
h2, .h2 { font-size: 40px }
h3, .h3 { font-size: 30px }
h4, .h4 { font-size: 20px }
h5, .h5 { font-size: 18px }
h6, .h6 { font-size: 16px }

p { word-wrap: break-word; margin-bottom: 24px; font-size: 14px; line-height: 24px }
strong { font-weight: 700 }
hr { border: 0 #000 solid; border-top-width: 1px; clear: both; height: 0 }
ol { list-style: decimal }
ul { list-style: disc }
img { max-width: 100%; border: 0; border-style: none; height: auto }
a { text-decoration: none; transition: 0.5s; color: var(--white-color); display: inline-block; font-size: 14px; line-height: 24px }
a:hover { color: var(--head-blue) }
.button, a.button, button, html input[type="button"], input[type="reset"], input[type="submit"] { font-family: var(--btn-font)!important; font-weight: 400; margin: 0 0 0 0; padding: 18px 35px!important; border-radius: 0px!important; background-color: transparent; border: 1px solid var(--head-blue); display: inline-block; vertical-align: middle; letter-spacing: 2%; font-size: 14px!important; color: var(--head-blue); line-height: 18px; position: relative!important; outline: 0; box-shadow: none!important; text-align: center; text-decoration: none; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; overflow: hidden; position: relative; z-index: 0; cursor: pointer; text-transform: capitalize; box-shadow: 0 0 0 6px #fff0; }

.button:hover, a.button:hover, button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
    background-color: transparent !important;
    color: var(--white-color);
    border-color: var(--white-color);
}
input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea { color: #1C1D21; padding: 10px 24px; font-size: 22px; letter-spacing: 0; line-height: 27px; outline: none !important; width: 49%; appearance: none; resize: none; background: #FFF 0% 0% no-repeat padding-box; border: 1px solid #000; border-radius: 8px } textarea { width: 100%; padding: 10px 24px; min-height: 96px; background: rgb(255 255 255); resize: none; margin: 0 0 15px }
input::-webkit-input-placeholder { color: #333; opacity: 87% }
input:-moz-placeholder { color: #333 }
input::-moz-placeholder { color: #333; opacity: 87% }
input:-ms-input-placeholder { color: #333; opacity: 87% }
textarea::-webkit-input-placeholder { color: #333; opacity: 87% }
textarea:-moz-placeholder { color: #333; opacity: 87% }
textarea::-moz-placeholder { color: #333; opacity: 87% }
textarea:-ms-input-placeholder { color: #333; opacity: 87% }
ul li { position: relative; padding: 6px 8px 6px 18px }

ul.col-2 li:before, ul.col-3 li:before, ul li:before { position: absolute; content: ""; width: 6px; height: 6px; background-color: var(--white-color); top: 15px; left: 0; border-radius: 50% }
.container { max-width: 1300px; width: 100%; padding: 0 50px; margin: 0 auto }
.col1 { width: 100% }
.col2 { width: 50% !important }
.col3 { width: 33.33% }
.col4 { width: 25% }

.d-flex { display: flex }
.flex-wrap { flex-wrap: wrap }
.justify-content-start { justify-content: flex-start }
.justify-content-center { justify-content: center }
.justify-content-end { justify-content: flex-end }
.justify-content-between { justify-content: space-between }
.align-items-start { align-items: flex-start }
.align-items-center { align-items: center }
.align-items-end { align-items: flex-end } 
.row-reverse { flex-direction: row-reverse }
.text-center { text-align: center } 
.text-left { text-align: left }
.text-right { text-align: right }

.gap-100 { gap: 100px }
.mt-50 { margin-top: 40px !important }
ul li ul.sub-menu { padding-left: 0 !important; gap: 0; white-space: nowrap; background-color: var(--primary_color); display: block; border-radius: 3px; flex-direction: column; gap: 0; position: absolute; margin: 0; z-index: 3; margin-top: 11px; text-align: center; transform: scaleY(0); transition: all 0.3s ease; transform-origin: top; box-shadow: rgb(50 50 93 / .25) 0 6px 12px -2px, rgb(255 255 255 / .3) 0 3px 7px -3px } ul li:hover>ul.sub-menu { transform: scaleY(1) } 
ul li ul.sub-menu li a { padding: 7px 15px !important; display: block; min-width: 200px; line-height: normal; border-bottom: solid 1px #ffffff !important; transition: all 0.4s ease-in-out; font-size: 20px; text-align: left; line-height: 26px; color: #fff } 
ul li ul.sub-menu li:last-child a { border-bottom: 0 !important } 
ul li ul.sub-menu li { margin: 0; display: block } 
ul li ul.sub-menu li a:hover { color: var(--red-color) }
ul.sub-menu li>ul.sub-menu { position: absolute; left: 100%; top: 12px; margin: 0; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease-in-out; z-index: 9999 }
ul.sub-menu li>ul.sub-menu li a::before { width: 100% }
ul.sub-menu li>ul.sub-menu li.current-menu-item>a { color: var(--white-color) }
ul.sub-menu li:hover>ul.sub-menu { transform: scaleY(1) }
ul.sub-menu li>ul.sub-menu { visibility: hidden; opacity: 0 }
ul.sub-menu li:hover>ul.sub-menu { visibility: visible; opacity: 1; transform: scaleY(1); transition: transform 0.3s ease, visibility 0s 0s, opacity 0.3s ease-in-out } 
ul li ul.sub-menu li a::after { right: 10px !important } 
ul li ul.sub-menu li a::before { display: none } 
ul li ul.sub-menu li { padding: 0 } 
ul li ul.sub-menu li::before { display: none }


.def-page { padding: 50px 0 50px } 
.def-page p { color: var(--body-color); font-style: normal; font-weight: 400; line-height: 28px } 
.def-page .right-img { float: right; margin: 0 0 15px 40px; position: relative; z-index: 0 } 
.def-page .left-img { float: left; margin: 0 40px 15px 0; position: relative } 
.def-page .right-img img { border-radius: 8px; position: relative; border: 1px solid var(--primary-color) } 
.def-page .left-img img { border-radius: 8px; position: relative; border: 1px solid var(--primary-color) } 
.def-page h2, .def-page h3, .def-page h4, .def-page h5, .def-page h6 { margin: 0 0 23px 0 } 
.def-page h2 { font-size: 50px; line-height: 60px } 
.def-page h3 { font-size: 40px; line-height: 50px } 
.def-page h4 { font-size: 32px; line-height: 42px } 
.def-page h5 { font-size: 29px; line-height: 39px } 
.def-page h6 { font-size: 22px; line-height: 32px } 
.def-page ul { margin: 0; padding-bottom: 10px } .overflow { overflow: inherit !important } 
.def-page ul li { list-style: none; color: var(--body-color); text-align: left; position: relative; padding: 5px 0 17px 38px; overflow: hidden } 
.def-page ul li:before { content: ""; width: 22px; height: 22px; top: 7px; left: 0; background-image: url(images/ticked-6989abda7d46c.webp); background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute } 
.def-page ol { padding-left: 0; padding-bottom: 25px } 
.def-page ol li { list-style-type: none; counter-increment: item; padding: 5px 0 5px 0; color: var(--body-color) } 
.def-page ol li:before { display: inline-block; content: counter(item) "."; color: var(--body-color); padding-right: 10px } 
.def-page ul.col-2, 
.def-page ul.col-3 { overflow: hidden } 
.def-page ul.col-2 li { width: 50%; float: left; text-align: left } 
.def-page ul.col-3 li { width: 33.33%; float: left; text-align: left } 
.def-page p { padding-bottom: 0 } 
.privacy-page ol { margin-bottom: 25px } 
.privacy-page ol>li:before { padding-right: 05px } 
.privacy-page .privacy-inner { padding-left: 0; margin-bottom: 20px } 
.privacy-page .privacy-inner ul { margin-top: 05px } 
.privacy-page ul, 
.privacy-page ol { margin-left: 0 } 
.privacy-page ol li { padding: 5px 0 } .pagenotfound { width: 100%; display: block; padding: 80px 0; text-align: center } .pagenotfound h2 { font-size: 50px; font-weight: 600 } .pagenotfound p { font-size: 24px } .thankyou { text-align: center } .clearfix:after { clear: both; display: block; visibility: hidden; content: "" } 
.def-page a { color: var(--primary-color) } 
.def-page a.button { color: var(--white-color) } 
.def-page a:hover { color: var(--body-color) } 
.def-page a.button:hover { color: var(--white-color) }

form .input_filed .wpcf7-not-valid-tip { display: none !important }
.wpcf7-not-valid { border: 1px solid #dc3232 !important }
form .cf7sr-recaptcha .wpcf7-not-valid-tip { display: block !important; font-size: 15px }
.submit-captcha { margin-top: -5px; display: flex; align-items: flex-start; justify-content: flex-start }
.submit-captcha .input-fild:last-child { margin-top: 17px }
.wpcf7 form .wpcf7-response-output { margin: .5em auto; padding: .2em 1em; border: 2px solid #00a0d2; width: 100%; text-align: center }
.comman_span { display: flex; justify-content: center; align-items: center; width: 100% }
.comman_span span { display: flex; align-items: center; gap: 20px; color: #458bd9; letter-spacing: 3px; text-transform: uppercase }
.comman_span span::before, .comman_span span::after { content: ""; width: 79px; height: 1px }
.comman_span span::before { background-image: linear-gradient(-90deg, rgb(69 139 217 / .996078431372549) 0%, rgb(1 9 17 / .9999999999999999) 100%) }
.comman_span span::after { background-image: linear-gradient(90deg, rgb(69 139 217 / .996078431372549) 0%, rgb(1 9 17 / .9999999999999999) 100%) }

h1>span, h2>span, h3>span, h4>span, h5>span, h6>span { color: var(--primary-color) }

header { position: fixed; top: 0; background: none; opacity: 1; width: 100%; z-index: 3 }
.header_inr { padding: 28px 42px 0 }
.header_logo { line-height: 0 } 
.header_logo a { line-height: 0 } 
.header_menu ul { gap: 70px } 
.header_menu ul li { padding: 0 } 
.header_menu ul li::before { display: none }
 header.scrolled { background: #020c17; box-shadow: 0 2px 20px rgb(0 0 0 / .3); padding-bottom: 28px; width: 100% }
 .hero-banner { position: relative; height: 100vh; overflow: hidden; background-color: #020c17 }

.banner-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover }
.banner-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35 }
.hero-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; gap: 60px; z-index: 1 }
.sub-title { font-size: 12px; letter-spacing: 3px; color: #5d84ff; margin-bottom: 20px }
.hero-content p { margin: 0; letter-spacing: 3px; text-transform: uppercase; color: #a0a0a0; line-height: 18px }
.trust { background: #020911; padding: 130px 0; position: relative }
.trust::before { content: ''; position: absolute; bottom: 62px; left: 0; width: 100%; height: 1px; background-color: #09182a }

.trust_inr { gap: 138px } 
.trust_left { width: 42% } 
.trust_left h2 { padding: 0 0 50px } 
.front_bdr { padding: 0 0 35px } 
.trust-right { width: 55%; position: relative }


.frame { position: absolute; border: 1px solid rgb(255 255 255 / .06); overflow: hidden } 
.frame img { width: 100%; height: 100%; object-fit: cover; opacity: .25 } 
.frame-1 { top: -47px; left: 67px; width: 525px; height: 402px; background-color: #020c16; border: 1px solid #1e2125 } 
.frame-2 { top: 0; left: 0; width: 525px; height: 376px; border: 1px solid #1e2125 }

.counter-box { position: absolute; background: #071324; padding: 30px 35px; min-width: 180px; border-left: 2px solid var(--head-blue) } 
.counter-box h3 { font-size: 40px; padding: 0 0 20px; line-height: 21px; color: var(--head-blue); font-family: 'AdobeClean-Regular' } 
.counter-box h3 span { color: var(--white-color); font-size: 25px; font-family: var(--heading-font); line-height: 20px } 
.counter-box p { font-size: 10px; letter-spacing: 2px; line-height: 18px; text-transform: uppercase; color: #cdcfcf; margin: 0 } 
.counter-1 { top: 44px; left: 21px } 
.counter-2 { right: 40px; bottom: 38px }

.front_bdr span { position: relative; display: block; padding: 0 0 0 48px }
 .front_bdr span::before { content: ''; width: 36px; height: 1px; background-color: var(--head-blue); position: absolute; top: 50%; transform: translateY(-50%); left: 0; display: block }

.trust_btn a { color: var(--head-blue) }
.trust_btn a:hover { color: var(--white-color) }
.counter_img { position: absolute; top: 18px; right: 18px }
section.well { padding: 113px 0 143px; background-color: #020c17 }
.well .well_title { align-items: flex-end; padding: 0 0 74px }
.well .well_title p { text-align: right; margin: 0 }
.well_inr { counter-reset: cardCounter; display: flex; justify-content: center; max-width: 1200px; margin: auto; background: #020b18; border-bottom: 1px solid rgb(255 255 255 / .05) }

.capability-card { counter-increment: cardCounter; position: relative; flex: 1; padding: 51px 23px 54px; border-right: 1px solid rgb(255 255 255 / .05); transition: all .35s ease }


.capability-card::before { content: counter(cardCounter, decimal-leading-zero); font-size: 12px; font-weight: 500; letter-spacing: 2px; color: var(--head-blue); padding: 0 0 58px; display: block } 
.capability-card::after { content: ""; position: absolute; top: 21px; right: 24px; width: 20px; height: 20px; border-top: 2px solid var(--head-blue); border-right: 2px solid var(--head-blue); opacity: 0; transform: translateY(-8px); transition: .3s ease } 
.capability-card:hover { background: #09111a } 
.capability-card:hover::after { opacity: 1; transform: translateY(0) } 
.capability_img { width: 48px; height: 48px; margin-bottom: 19px } 
.capability_img svg { width: 100%; display: block; height: 100% } 
.capability-card h3 { color: #fff; font-size: 20px; line-height: 26px; margin-bottom: 20px } 
.capability-card p { font-size: 14px; line-height: 24px; color: #e1e1e1; margin: 0 } 
.capability-card .capability_img svg path { transition: 0.3s all } 
.capability-card:hover .capability_img svg path { fill: var(--head-blue) }

.well_inr { position: relative; display: flex }
.progress-line { position: absolute; bottom: 0; left: 0; width: 25%; height: 2px; background: var(--head-blue); z-index: 1; transition: .4s ease }
.capability-card.is-active .capability_img svg path, .capability-card.is-hover .capability_img svg path { fill: var(--head-blue) }
.capability-card.is-active::after, .capability-card.is-hover::after { opacity: 1 }
.capability-card.is-active .bottom-line, .capability-card.is-hover .bottom-line { transform: scaleX(1) }
section.highest { padding: 135px 0 120px; background-color: #020911 }
.highest .well_title>span { padding: 0 0 30px; display: block; color: var(--head-blue) }
.highest .well_title { padding: 0 0 88px }

.highest .capability-card { flex: unset; max-width: 50%; width: 100%; padding: 64px 96px 76px 136px; border: 1px solid rgb(255 255 255 / .05) } 
.highest .well_inr { background: #fff0; flex-wrap: wrap; border: 0 } 
.highest .capability-card::before { padding: 0; display: inline; position: absolute; left: 80px } 
.highest .capability-card:nth-child(odd) { border-top: 0; border-left: 0 } 
.highest .capability-card:nth-child(even) { border-top: 0; border-right: 0 } 
.highest .capability-card:nth-child(3) { border-bottom: 0 } 
.highest .capability-card:nth-child(4) { border-bottom: 0 } 
.highest .capability-card:last-of-type { border-bottom: 0 }


.global { background: url(images/global.png) no-repeat center; width: 100%; height: 100%; padding: 128px 0; background-size: cover } 
.global .global_title strong { font-size: 207px; font-family: var(--heading-font); display: block; line-height: 108px; color: #060c15; -webkit-text-stroke: 2px #1e2125; font-weight: 400 } 
.global .global_title h2 { padding: 0 0 20px } 
.global .global_img { padding: 133px 0 0; text-align: center } 
.global .global_img img { margin-bottom: -290px }



section.ctc { padding: 155px 0; background-color: #020911; position: relative } 
.ctc h2 { font-size: 70px } 
.ctc_btn { padding: 34px 0 0 } 
.ctc_btn a.button { background-color: #020911 !important; border: 1px solid #1e2125; color: var(--btn-color); font-family: var(--body-font) !important; font-size: 19px !important; line-height: 25px } 
.ctc_btn a.button:hover { background-color: var(--btn-color) !important; border: 1px solid var(--btn-color); color: var(--black-color) } 
.ctc .hero-content { opacity: 0; transform: translateY(100px); transition: all 1s ease } 
.ctc.animate .hero-content { opacity: 1; transform: translateY(0) }


footer { background-color: #040c17 } 
footer .header_inr { padding: 66px 42px 59px 42px } 
footer .header_inr p { color: #8a9098 } 
footer .header_inr p:last-of-type { margin: 0 } 
footer .header_logo { max-width: 20%; width: 100% }

.hero-content>* { opacity: 0; transform: translateY(40px); animation: fadeUp 1s ease forwards } 
.hero-content .comman_span { animation-delay: .2s } 
.hero-content h1 { animation-delay: .5s } 
.hero-content p { animation-delay: .8s }
@keyframes fadeUp { from { opacity: 0; transform: translateY(40px) } to { opacity: 1; transform: translateY(0) } }
header { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; opacity: 0; animation: headerReveal 1.2s ease forwards }
@keyframes headerReveal { from { opacity: 0; transform: translateX(-50%) translateY(-40px) } to { opacity: 1; transform: translateX(-50%) translateY(0) } }
.header_menu ul li { opacity: 0; transform: translateY(-20px); animation: menuReveal .8s ease forwards }
.header_menu ul li:nth-child(1) { animation-delay: .3s }
.header_menu ul li:nth-child(2) { animation-delay: .45s }
.header_menu ul li:nth-child(3) { animation-delay: .6s }
.header_menu ul li:nth-child(4) { animation-delay: .75s }
@keyframes menuReveal { to { opacity: 1; transform: translateY(0) } }
.header_menu a { position: relative; text-decoration: none }
.header_menu a::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 1px; background: linear-gradient(88deg, rgb(69 139 217 / .996078431372549) 0%, rgb(1 9 17 / .9999999999999999) 100%) #fff; transition: all .4s ease }
.header_menu a:hover::after { width: 100% }

.highest .capability-card:nth-child(odd) { opacity: 0; transform: translateX(-100px); transition: all .9s cubic-bezier(.16, 1, .3, 1) }
.highest .capability-card:nth-child(even) { opacity: 0; transform: translateX(100px); transition: all .9s cubic-bezier(.16, 1, .3, 1) }
.highest .capability-card.show { opacity: 1; transform: translateX(0) }
.highest .capability-card:nth-child(1) { transition-delay: .1s }
.highest .capability-card:nth-child(2) { transition-delay: .3s }
.highest .capability-card:nth-child(3) { transition-delay: .5s }
.highest .capability-card:nth-child(4) { transition-delay: .7s }
video { position: absolute; width: 100%; height: 100%; object-fit: cover }
.hero-banner::before { content: ''; position: absolute; left: 0; top: 0; background-color: #020c17; opacity: .8; width: 100%; height: 100%; z-index: 1 }
.menu-toggle { display: none; }

body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: var(--primary-color); }
body::-webkit-scrollbar { width: 6px; background-color: var(--head-blue); }
body::-webkit-scrollbar-thumb { background-color: var(--head-blue); }



/* responsive */
@media (max-width: 1300px) {

    .container { padding: 0 30px }

    h1, .h1 { font-size: 65px }
    .ctc h2 { font-size: 60px }
    .global .global_title strong { font-size: 170px; line-height: 95px }

    .trust_inr { gap: 70px }
    .trust_left { width: 45% }
    .trust-right { width: 52% }

    .frame-1 { left: 30px; width: 460px; height: 355px }
    .frame-2 { width: 460px; height: 330px }

    .highest .capability-card { padding: 55px 60px 65px 100px }

    section.well { padding: 90px 0 110px }
    section.highest { padding: 100px 0 90px }
    .trust { padding: 100px 0 }
    .global { padding: 100px 0 }
    section.ctc { padding: 120px 0 }
}


@media (max-width: 1200px) {

    h1, .h1 { font-size: 55px }
    h2, .h2 { font-size: 34px }
    .ctc h2 { font-size: 48px }
    .global .global_title strong { font-size: 140px; line-height: 80px }
    .global .global_img img { margin-bottom: -160px }

    .header_menu ul { gap: 35px }
    .header_inr { padding: 22px 30px 0 }

    .trust_inr { gap: 40px }
    .trust_left { width: 48% }
    .trust-right { width: 48% }

    .frame-1 { left: 10px; width: 380px; height: 300px }
    .frame-2 { width: 380px; height: 280px }

    .counter-box { padding: 22px 24px;}
    .counter-box h3 { font-size: 32px }

    .capability-card { padding: 40px 18px 44px }
    .highest .capability-card { padding: 45px 40px 55px 70px }

    .well .well_title { padding: 0 0 50px }
    .well .well_title p { font-size: 13px }
}

@media (max-width: 1023px) {
    .header_inr { padding: 18px 20px 0 }
    .header_menu ul { gap: 25px; align-items: flex-start }
    .header_btn { display: flex; align-items: center }
    .header_btn .button { padding: 12px 20px !important; font-size: 12px !important }

    h1, .h1 { font-size: 46px }
    h2, .h2 { font-size: 30px }
    h3, .h3 { font-size: 24px }

    /* --- Trust section: stack columns --- */
    .trust_inr { flex-wrap: wrap }
    .trust_left, .trust-right { width: 100% }
    .trust-right { margin-top: 50px; height: 420px }
    .trust { padding: 70px 0 }

    /* --- Capability cards: 2 per row --- */
    .well_inr { flex-wrap: wrap }
    .capability-card { flex: 0 0 50%; border-bottom: 1px solid rgb(255 255 255 / .05) }
    .progress-line { display: none }
    section.well { padding: 70px 0 80px }
    .well .well_title { flex-wrap: wrap; align-items: flex-start; gap: 15px }
    .well .well_title p { text-align: left }

    /* --- Highest section: full width cards --- */
    .highest .capability-card { max-width: 100%; flex: 0 0 100%; padding: 40px 30px }
    .highest .capability-card::before { position: static; display: block; padding: 0 0 20px }
    section.highest { padding: 80px 0 70px }

    /* --- Global section --- */
    .global { padding: 80px 0 }
    .global .global_title strong { font-size: 100px; line-height: 60px }
    .global .global_img { padding: 90px 0 0 }
    .global .global_img img { margin-bottom: -120px }

    /* --- CTC --- */
    section.ctc { padding: 90px 0 }
    .ctc h2 { font-size: 38px }

    /* --- Footer --- */
    footer .header_inr { padding: 45px 20px 40px; flex-wrap: wrap; gap: 25px }
    footer .header_logo { max-width: 140px }



}

@media (max-width: 767px) {

    .container { padding: 0 25px }
    h1, .h1 { font-size: 36px }
    h2, .h2 { font-size: 26px }
    h3, .h3 { font-size: 20px }
    h4, .h4 { font-size: 18px }
    .button, a.button, button { padding: 14px 24px !important; font-size: 13px !important }
    /* --- Hero --- */
    .hero-content { gap: 30px; padding: 0 20px }
    .sub-title { font-size: 10px }
    /* --- Trust --- */
    .trust { padding: 40px 0 }
    .trust_left h2 > br{ display: none;}
    .front_bdr { padding: 0 0 30px; }
    .trust_left h2 { padding: 0 0 40px; }
    .trust_inr { gap: 30px; }
    /* .trust-right { height: auto; margin-top: 0; display: flex; align-items: center; gap: 30px; } */
    /* .frame { position: relative; width: 100% !important; height: 220px !important; top: 0 !important; left: 0 !important; margin-bottom: 15px } */
    /* .frame-2 { display: none } */
    /* .counter-box { top: 0; position: relative; width: fit-content; margin-top: 0; left: 0; } */
    
    .frame-1 { left: 40px; height: 300px; }
    .frame-1,.frame-2 {width: 80%; height: 80%; }
    .counter-1 { top: 24px; left: 21px;  }
    .counter-2 { right: 30px; bottom: 58px;  }
    .trust-right { height: 330px; }








    .counter-box h3 { font-size: 28px }
    .front_bdr span { padding-left: 40px }
    /* --- Capability cards: 1 per row --- */
    .capability-card { flex: 0 0 100% }
    section.well { padding: 50px 0 40px; }
    /* --- Highest --- */
    section.highest { padding: 60px 0 50px }
    .highest .capability-card { padding: 30px 20px }
    /* --- Global --- */
    .global { padding: 50px 0 }
    .global .global_title strong { font-size: 60px; line-height: 40px }
    .global .global_img { padding: 50px 0 0 }
    .global .global_img img { margin-bottom: -60px }
    /* --- CTC --- */
    section.ctc { padding: 65px 0 }
    .ctc h2 { font-size: 28px }
    .ctc_btn { padding: 24px 0 0 }
    /* --- Footer --- */
    footer .header_inr { flex-direction: column; text-align: center; padding: 40px 20px }
    footer .header_logo { max-width: 120px }
    footer .header_menu { display: none }
    footer .header_inr p { font-size: 12px }
    /* --- Forms --- */
    input[type="search"], input[type="text"], input[type="email"],
    input[type="password"], input[type="tel"], input[type="number"] { width: 100%; font-size: 16px }
    /*─── TOGGLE BUTTON ─── */
    .menu-toggle { display: block; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 3px; width: 32px; height: 20px; cursor: pointer; position: relative; transition: transform .75s cubic-bezier(.4, 0, .2, 1); }
    .menu-toggle span { background-color: #fff; height: 2px; border-radius: 3px; display: block; position: relative; transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, top .35s cubic-bezier(.4, 0, .2, 1), width .35s ease; width: 100%; }
    .menu-toggle.active { transform: rotate(180deg); position: fixed; top: 30px; z-index: 3; right: 30px; }
    .menu-toggle.active span:first-child { transform: rotate(45deg); top: 9px; width: 100%; }
    .menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg); top: -9px; width: 100%; }
    /* ─── MENU OVERLAY ─── */
    .header_menu ul { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 60px 30px 40px; background: rgba(6, 6, 18, 0.96); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); z-index: 2; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s cubic-bezier(.4, 0, .2, 1), visibility .4s ease; gap: 0; }
    .header_menu ul.open { opacity: 1; visibility: visible; pointer-events: auto; }
    /* ─── MENU ITEMS ─── */
    .header_menu ul li { list-style: none; padding: 0; opacity: 0; transform: translateY(28px) skewX(-3deg); border-bottom: 1px solid rgba(255,255,255,.06); display: block; width: 100%;}
    .header_menu ul li:last-child { border-bottom: none; }
    .header_menu ul li a { color: rgba(255,255,255,.85); font-size: 18px; text-decoration: none; display: block; padding: 10px 0; transition: color .25s ease, gap .25s ease; }
    .header_menu ul li a:hover { color: #fff; gap: 20px; }

    .header_menu ul li { animation: none; }
    .capability-card h3 br{ display: none;}
    .hero-banner { height: 70vh; }
    .well .well_title { padding: 0 0 40px; }
    .capability-card::before { padding: 0 0 48px; }
    .capability_img { width: 40px; height: 40px; margin-bottom: 15px; }
    .capability-card { padding: 35px 18px; }
    section.highest { padding: 40px 0; }


}
/*478px */
@media (max-width: 478px) {

    .container { padding: 0 20px }
    h1, .h1 { font-size: 26px; line-height: 1.3 }
    h2, .h2 { font-size: 22px }
    h3, .h3 { font-size: 18px }
    p { font-size: 13px; line-height: 20px }
    .button, a.button, button { padding: 12px 18px !important; font-size: 12px !important }
    .header_inr { padding: 15px; flex-wrap: wrap; gap: 10px; }
    .header_logo img { max-width: 200px }
    .hero-content { gap: 20px }
    .comman_span span { gap: 8px; font-size: 9px; letter-spacing: 1px; }
    .comman_span span::before, .comman_span span::after { width: 30px }
    .trust { padding: 40px 0 }
    .front_bdr span { padding-left: 34px; font-size: 12px }
    /* .counter-box { padding: 20px; width: 100%; } */

    .frame-1 { left: 30px;  top: -20px;  width: 90%; height: 100%;}
    .frame-2 { width: 90%; height: 100%; }
    .counter-1 { top: 10px; left: 20px;}
    .counter-2 { right: 50px; bottom: 10px; }
    .trust-right { height: 265px; }
    .trust_inr { gap: 10px; }
    .trust::before { display: none; }


    .counter-box h3 { font-size: 22px }
    .counter-box p { font-size: 9px }
    .capability-card { padding: 30px 16px 34px }
    .capability_img { width: 36px; height: 36px }
    section.highest { padding: 45px 0 35px }
    .highest .capability-card { padding: 24px 16px }
   .global .global_title strong { font-size: 58px; line-height: 36px; }
       section.ctc { padding: 40px 0 }
    .ctc h2 { font-size: 22px }
    footer .header_inr { padding: 30px 16px }
    footer .header_logo { max-width: fit-content; }
    /* .hero-banner { height: 50vh; } */
    .header_btn .button { padding: 8px !important; font-size: 11px !important; }
    .front_bdr span::before { width: 26px; }
    /* .trust_inr { gap: 0px; } */
    .trust_left h2 { padding: 0 0 30px; }
    .front_bdr { padding: 0 0 25px; }
    /* .trust-right { margin-top: 20px; flex-wrap: wrap; gap: 11px; } */
    section.well { padding: 40px 0 50px; }
    .well .well_title { padding: 0 0 30px; }
    .capability-card::before { padding: 0 0 38px; }
    .global { padding: 40px 0; }
    .ctc_btn a.button {padding: 10px 15px !important; font-size: 12px !important; font-size: 14px !important; line-height: 20px !important; }
    .counter_img {top: 28px; right: 15px; }
 
}