@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('../dist/bootstrap/css/bootstrap.min.css');
:root {
	--primary-font: 'DM Sans', sans-serif, Arial, Helvetica;
	--secondary-font: 'SF UI Display';
	--light-gray: #E9ECEF;
    --light-gray-1: #FCFCFC;
    --violet: #EFE7FF;
    --violet-1: #f9f9f9;
    --light-violet: #F7F3FE;
    --bs-white: #ffffff;
    --bs-black: #000000;
    --filter: inherit;
    --line-color: #E9ECEF;
}
[data-theme="dark"] {
    --bs-white: #000000;
    --bs-black: #ffffff;
    --filter: brightness(0%);
    --filter-1: brightness(0%) invert(100%);
    --violet: #1D1D1D;
    --violet-1: #212121;
    --light-violet: #080808;   
    --light-gray-1: #080808;
    --line-color: #1D1D1D;
}
body { background-color: var(--bs-white); color: var(--bs-black); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; }
a { color: var(--blue); }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--bs-black); font-family: var(--secondary-font); font-weight: 600; }
h1 { font-size: 68px; }
h2 { font-size: 60px; }
h3 { font-size: 42px; }
p, li { color: var(--bs-black); font: 400 16px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }
.clearfix { clear: both; margin: 0px; padding: 0px; }

@font-face { font-family: 'SF UI Display'; src: url('../fonts/SFUIDisplay-Light.woff2') format('woff2'), url('../fonts/SFUIDisplay-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: 'SF UI Display'; src: url('../fonts/SFUIDisplay-Regular.woff2') format('woff2'), url('../fonts/SFUIDisplay-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'SF UI Display'; src: url('../fonts/SFUIDisplay-Semibold.woff2') format('woff2'), url('../fonts/SFUIDisplay-Semibold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'SF UI Display'; src: url('../fonts/SFUIDisplay-Bold.woff2') format('woff2'), url('../fonts/SFUIDisplay-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

.navbar-brand { filter: var(--filter-1); max-width: 145px; }
.navbar { margin-top: 19px; }
.navbar .navbar-nav .nav-link { color: var(--bs-black); font-size: 16px; margin-right: 3rem; text-transform: capitalize; }
.navbar .btn-dark { background-color: var(--bs-black); border-radius: 5px; color: var(--bs-white); font: 500 16px var(--primary-font); line-height: 20px; text-transform:capitalize; width: 120px; }

/*--- Mobile Hamburger Nav-Toggle ----*/

.nav-toggle { display: none; }
.nav-toggle { width: 32px; height: 32px; position: relative; margin: 0px auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
.nav-toggle span { display: block; position: absolute; height: 3px; width: 100%; background: var(--bs-black); border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
.nav-toggle span:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }
.nav-toggle span:nth-child(2) { top: 10px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }
.nav-toggle span:nth-child(3) { top: 20px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }
.nav-toggle.open span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 5px; left: 5px; }
.nav-toggle.open span:nth-child(2) { width: 0%; opacity: 0; }
.nav-toggle.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 28px; left: 5px; }

/*--- Mobile Sidebar Nav ----*/

.over { margin-top: 10%; height: 394px; position: fixed; right: 15px; top: 0; width: 34px; z-index: 1; }
.over a { display: inline-block; margin-bottom: 20px; }
.over a img { filter: var(--filter-1); }
.theme-switch-wrapper { display: flex; align-items: center; transform: rotate(90deg); width: 34px; }
.theme-switch { display: inline-block; height: 34px; position: relative; width: 140px; }
.theme-switch input { display:none; }
.slider { background: url("../images/sth_blk_bg.png") no-repeat 10px center #E3E1E6; border: 1px solid #E3E1E6; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s;  width: 140px; }
.slider:before { background-color: rgba(255, 255, 255, 0.5); bottom: 0px; content: ""; height: 32px; left: 0px; position: absolute; transition: .4s; width: 79px; }
input:checked + .slider { background: url("../images/sth_lit_bg.png") no-repeat 10px center #36343c; border: 1px solid #36343c; }
input:checked + .slider:before { transform: translateX(60px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 34px; }
.gotop { font-size: 14px; height: 225px; writing-mode: vertical-rl; text-orientation: mixed; text-align: right; width: 80%; }

.banner { background: url("../images/clr.webp") no-repeat right -50px / contain; clear: both; margin: 0px auto; padding: 190px 0px; max-width: 1440px; width: 100%; }
.banner h1 { font-weight: 700; line-height: 68px; margin-bottom: 3%; text-transform: uppercase; }
.banner h1 span { background: -webkit-linear-gradient(left, #FFCE2A, #C454F8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.banner p { line-height: 23px; margin-bottom: 3%; max-width: 539px; }
.banner a { font-size: 16px; }
.banner a span { background-color: var(--bs-black); border-radius: 100%; display: inline-block; font-size: 16px; height: 70px; line-height: 70px; margin-right: 1rem; text-align: center; width: 70px; }
.banner a span img { filter: var(--filter); }
.banner .arrow { bottom: 0; filter: var(--filter-1); position: absolute; left: 10px; margin-bottom: -8%; z-index: 1; }

.service { background: url("../images/looper.svg") no-repeat left bottom; clear: both; margin: 0px auto; padding: 0px 0px 5%; max-width: 1440px; width: 100%; }
.service h2 { font-weight: 300; line-height: 64px; margin: -40px 0px 0px -20px; transform: rotate(-90deg); max-width: 280px }
.service h2 span { background: -webkit-linear-gradient(left, #FFCE2A, #C454F8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; }
.service h3 { font-weight: 300; margin-bottom: 30px; }
.service h3 span { background: -webkit-linear-gradient(40deg, #FAAB33, #B355E7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
.service .num { border-right: 1px solid var(--line-color); font-size: 60px; font-weight: 300; margin-right: 5%; padding: 16px 0px; text-align: center; }
.service .box { border-bottom: 1px solid var(--line-color); clear: both; padding: 25px 0px; width: 100%; }
.service .box img { margin-right: .5rem; margin-bottom: 0.5rem; }
.service .box .btn-dark { background-color: var(--bs-black); border-radius: 5px; color: var(--bs-white); font: 500 16px var(--primary-font); line-height: 20px; }
.service a { display: inline-block; font-size: 16px; margin-top: 15px; }
.service a span { background-color: var(--bs-black); border-radius: 100%; display: inline-block; font-size: 16px; height: 70px; line-height: 70px; margin-left: .5rem; text-align: center; width: 70px; }
.service a span img { filter: var(--filter); }

/*---- Horizontal Aaccordion ----*/

.horizontal-accordion { background-color: var(--violet-1); display: flex; align-items: center; justify-content: center; margin: 0px auto; padding: 0; max-width: 1440px; width: 100%; }
.panel { border-right: 1px solid rgba(0, 0, 0, 0.2); box-sizing: border-box; background-size: 582px; background-position: -280px bottom; background-repeat: no-repeat; cursor: pointer; flex: 1 0 auto; height: 720px; opacity: 0.35; overflow: hidden; position: relative; transition: all 700ms ease-in; width: 208px; }
.panel .content { display: block; padding: 0px 8% 0px 15%; margin-left: -398px; transition: all 700ms ease-in; width: 570px; }
.panel .head { border-bottom: 1px solid var(--bs-black); font-size: 16px; padding: 45px 0px 25px; width: 100%; }
.panel h3 { font-weight: 300; margin: 20px 0px; }
.panel p { display: block; width: 100%; }
.panel.active { border-right: 1px solid rgba(0, 0, 0, 0.07); flex: 1 0 auto; opacity: 1; width: 576px; }
.panel.active .content { margin-left: 0px; }
.panel.active { background-position: left bottom; }

.step_01 { background-image: url("../images/step_01.webp"); }
.step_02 { background-image: url("../images/step_02.webp"); }
.step_03 { background-image: url("../images/step_03.webp"); }
.step_04 { background-image: url("../images/step_04.webp"); }
.step_05 { background-image: url("../images/step_05.webp"); }

.client { clear: both; padding: 10% 0px; text-align: center; width: 100%; }
.client img { filter: var(--filter-1); }

.portfolio { background: var(--light-violet); clear: both; margin: 0px auto; max-width: 1440px; width: 100%; }
.portfolio .col { position: relative; padding-left: 80px; }
.portfolio .first { border-right: 1px solid var(--line-color); }
.portfolio h2 { color: var(--violet); font-weight: 700; left: 0; margin: 100px 0px 0px -119px; position: absolute; top: 100px; transform: rotate(90deg); text-transform: uppercase; }
.portfolio h2 span { font-family: var(--primary-font); font-weight: 400; font-style: italic; }
.portfolio h3 { font-size: 40px; font-weight: 300; }
.portfolio p { text-decoration: underline; }
.portfolio picture { display: inline-block; width: 90%; }

.letus { background: url("../images/lts_bg.svg") no-repeat right center; clear: both; margin: 0px auto; padding: 7% 0px; max-width: 1440px; width: 100%; }
.letus h2 { font-weight: 300; }
.letus h3 span { background: -webkit-linear-gradient(left, #FFCE2A, #C454F8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; }
.letus hr { border-color: var(--light-gray); opacity: 1; }

.contact { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0px 12px 50px rgba(0, 0, 0, 0.04); padding: 30px 40px; width: 100%; }
.contact label { color: #000000; display: inline-block; font: 400 15px var(--secondary-font); margin-bottom: .5rem; text-transform: capitalize; }
.contact .form-control, .contact .form-select { color: #000 !important; border-color: var(--light-gray); color: var(--bs-black); font: 400 14px var(--secondary-font); line-height: 32px; }
.contact .form-control::placeholder { color: #969696; }
.contact textarea.form-control { min-height: 92px; }
.contact .btn-dark { border-radius: 5px; font: 500 15px var(--primary-font); line-height: 32px; text-transform: capitalize; }

footer { background-color: var(--light-gray-1); clear: both; margin: 0px auto; padding-top: 7%; max-width: 1440px; width: 100%; }
footer picture { display: inline-block; max-width: 150px; margin-bottom: 10% }
footer h4 { font: 700 16px var(--primary-font); }
footer hr { border-color: var(--light-gray); opacity: 1; }
footer img { filter: var(--filter-1); }
.copy { border-top: 1px solid var(--light-gray); color: #969696; font-weight: 400 16px var(--secondary-font); clear: both; margin-top: 5%; padding: 25px 0px; width: 100%; }
.copy .col:last-child { text-align: right; }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
    h1 { font-size: 48px; }
    h2 { font-size: 40px; }
    h3 { font-size: 22px; }
    .container-fluid { max-width: 540px; }
    .navbar { border-bottom: 1px solid var(--light-gray); box-shadow: 0px 3px 3px var(--light-gray); }
    .navbar-toggler { border: none; }
    .nav-toggle { display: inline-block; }
    .navbar .navbar-nav .nav-link { padding: .725rem 0rem; }
    .banner { background-position: right 0%; background-size: 60%; padding: 50px 0px; }
    .banner h1 { font-size: 41px; line-height: normal; }
    .over { margin-top: 40%; }
    .service { background-size: 30%; }
    .service h2 { margin: 0px 0px 40px -15px; line-height: 42px; max-width: 190px; }
    .service h3 { margin-bottom: 15px; }
    .service .box { padding: 15px 0px; }
    .service .num { font-size: 40px; }
    .client .col { flex-basis: auto; margin: 20px 0px; width: 33.333%; }
    .portfolio .col { flex-basis: auto; padding-left: 60px; }
    .portfolio .first { border: none; }
    .portfolio h2 { margin: 50px 0px 0px -80px; }
    .portfolio h3 { font-size: 25px; }
    .portfolio picture { width: 100%; }
    .letus { background-size: contain; }
    .contact { padding: 15px 20px; }
    .contact .col, footer .col { flex-basis: auto; }
    .follow { margin-bottom: 2rem; }
    .copy, .copy .col:last-child { text-align: center; }
    .horizontal-accordion { display: block; }
    .panel { background-position: left bottom; background-size: 100%; border: inherit; cursor: inherit; height: 580px; opacity: 1; margin: 0px auto; max-width: 540px; width: 100%; }
    .panel.active { border: inherit; max-width: 540px; width: 100%; }
    .panel .content { margin: 0px 0px; padding: 0px 8% 0px 10%; width: 100%; }
}

@media only screen and (min-width: 320px) and (max-width: 560px) {
    .panel { height: 530px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    h1 { font-size: 48px; }
    h2 { font-size: 40px; }
    h3 { font-size: 22px; }
    .container-fluid { max-width: 720px; }
    .navbar { border-bottom: 1px solid var(--light-gray); box-shadow: 0px 3px 3px var(--light-gray); }
    .navbar-toggler { border: none; }
    .nav-toggle { display: inline-block; }
    .navbar .navbar-nav .nav-link { padding: .725rem 0rem; }
    .banner { background-position: right -40px; background-size: 60%; padding: 100px 0px; }
    .banner h1 { line-height: normal; }
    .banner p { max-width: 435px; }
    .over { margin-top: 30%; }
    .service { background-size: 30%; }
    .service h2 { margin: 0px 0px 40px -15px; line-height: 42px; max-width: 190px; }
    .service h3 { margin-bottom: 15px; }
    .service .box { padding: 15px 0px; }
    .service .num { font-size: 40px; }
    .portfolio .col { flex-basis: auto; padding-left: 60px; }
    .portfolio h2 { margin: 50px 0px 0px -93px; }
    .portfolio h3 { font-size: 25px; }
    .portfolio picture { width: 86%; }
    .horizontal-accordion { display: block; }
    .panel { background-position: center bottom; background-size: 694px; border: inherit; cursor: inherit; height: 680px; opacity: 1; margin: 0px auto; max-width: 720px; width: 100%; }
    .panel.active { border: inherit; max-width: 720px; width: 100%; }
    .panel .content { margin: 0px 0px; padding: 0px 8% 0px 10%; width: 100%; }
}

@media only screen and (min-width: 992px) and (max-width: 1180px) {
    h2 { font-size: 52px; }
    h3 { font-size: 36px; }
    .navbar .navbar-nav .nav-link { margin-right: 2rem; }
    .over { margin-top: 20%; }
    .portfolio h2 { margin: 100px 0px 0px -104px; }
    .portfolio h3 { font-size: 36px; }
    .portfolio picture { width: 86%; }
    .panel { background-size: 475px; width: 108px; }
    .panel.active { width: 432px; }
    .panel .content { margin-left: -352px; padding: 0px 8% 0px 12%; width: 463px; }
    .panel p { font-size: 15px; }
}

@media only screen and (min-width: 1199px) and (max-width: 1299px) {
    .panel { background-size: 575px; }
}