@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/brands.min.css');

:root{
    --primary_color: hsla(120 100% 33% / 1);
    --primary_color_dark: hsla(120 100% 20% / 1);
    --primary_color_lighter: hsla(120 100% 70% / 1);
    --primary_color_lightest: hsla(120 100% 95% / 1);
    --primary_color_highlighter: #42FF42;
    --black: #333333;
    --black_light: #B3B3B3;
    --black_lighter: #C7C7C7;
    --white: #FFFFFF;
    --font: "Mona Sans", sans-serif;
    --effect: all ease-in-out 150ms;
}

/*overwrite wp style starts here*/
/*=====================================*/
body:before, body:after { display: none !important; }
#page.site { margin: 0; }
#page.site .site-inner { max-width: inherit; }
#masthead.site-header { padding: 0px 0px; }
.site-content { padding: 0; }
.site-header-menu { margin: 0; }
.site-footer { padding: 0; }
img.custom-logo { width: 100%; max-width: 100% !important; }
#site-navigation.main-navigation { width: 100% !important; }
#primary-menu ul.nav-menu { margin-bottom: 0; }
.main-navigation { display: inline-block !important; width: auto !important; }
footer .site-info { display: none !important; }
/*=====================================*/
/*overwrite wp style ends here*/

*{ font-family: var(--font); padding: 0; margin: 0; border: 0; line-height: normal; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--black); box-sizing: border-box; }
* span{ text-decoration: inherit; color: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; }
a{ text-decoration: none; color: inherit; }
p{ font-size: 16px; font-weight: 400; text-decoration: none; line-height: 24px; }
p strong{ font-size: 18px; font-weight: 500; }
h1{ text-transform: capitalize; font-size: 120px; font-weight: 700; line-height: 130px; }
h2{ font-size: 60px!important; font-weight: 600!important; }
h3{ text-transform: capitalize; font-size: 28px; font-weight: 700; }
h4{font-size: 24px;}
h5{ font-size: 20px; font-weight: 500; }
h6{ font-size: 14px; font-weight: 500; }
section{ margin-bottom: 100px; }
footer section{ margin-bottom: 0; }

body,html{ position: relative; scroll-behavior: smooth; }
html::before, .acco_services:before, .technologies:before, .clients:before, footer:before{ content: ''; position: absolute; background-image: url('../images/lines.png'); background-position: center; background-repeat: repeat; background-size: auto; z-index: 0; top: 0; bottom: 0; left: 0; right: 0; opacity: 8%; }
.technologies:before, .acco_services:before, .clients:before, footer:before{ opacity: 70%; }

.white{ color: var(--white)!important; }
.black{ color: var(--black)!important; }
.pure_black{ color: #000!important; }
.primary_color{ color: var(--primary_color)!important; }
.primary_color_bg{ background-color: var(--primary_color)!important; }
.primary_color_dark{ color: var(--primary_color_dark)!important; }
.primary_color_dark_bg{ background-color: var(--primary_color_dark)!important; }
.primary_color_lighter{ color: var(--primary_color_lighter)!important; }
.primary_color_lighter_bg{ background-color: var(--primary_color_lighter)!important; }
.primary_color_lightest{ color: var(--primary_color_lightest)!important; }
.primary_color_lightest_bg{ background-color: var(--primary_color_lightest)!important; }
.primary_color_highlighter{ color: var(--primary_color_highlighter)!important; }
.primary_color_highlighter_bg{ background-color: var(--primary_color_highlighter)!important; }

.image_wrapper { width: 100%; display: inline-block; position: relative; overflow: hidden; vertical-align: top; border-radius: 10px; }
.image_wrapper:before { content: ""; display: block; padding-top: 100%; }
.image_wrapper img { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

header{ position: fixed; width: 100%; z-index:10; }
section{ position: relative; overflow: hidden; }

header{ transition: var(--effect); }
header.scrolled{ background-color: #ffffff90; backdrop-filter: blur(20px); box-shadow: 0px 4px 8px rgba(0, 0, 0, 10%); }
header.scrolled .nav-link{ font-weight: 500; color: var(--black); }
header .navbar-nav{ display: none; }

#type-text::after { content: "|"; margin-left: 4px; animation: blink 1s infinite;}
@keyframes blink { 50% { opacity: 0; } }
.banner{ position: relative; overflow: hidden; }
.banner:before, .banner:after{ content:''; position: absolute; width: 100%; background-color: var(--primary_color); left: 50%; transform: translateX(-50%); border-radius: 50%; filter: blur(125px); z-index:-1; }
.banner:before{ top: -18%; height: 20%; }
.banner:after{ bottom: -18%; height: 40%; opacity: 60% }
.banner_content{ padding: 80px 0px; }
.banner_content h1{ margin: 28px 0px; }
.inbox{ display: inline-block; border-radius: 8px; padding: 12px; border: 0.5px solid var(--primary_color_lighter); color: var(--primary_color_dark); background-color: var(--primary_color_lightest); margin-bottom: 0; }
.banner_content .bttn{ margin-top: 28px; }

.bttn{ background-color: transparent; display: inline-flex; padding: 12px 20px; border-radius: 8px; font-weight: 500; text-transform: capitalize; align-items: center; }
.bttn svg{ height: auto; width: 12px; margin-left: 8px; transition: var(--effect); }
.bttn:hover svg{ transform: rotate(45deg); }

.acco_services:after,
.technologies:after,
.clients:after,
.faq_contact:after,
.portfolio:after,
footer:after{ content:''; position: absolute; background-color: var(--primary_color_highlighter); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; filter: blur(200px); border-radius: 50%; }
.acco_services:after{ height: 430px; width: 430px; opacity: 50%; }
.technologies:after{ height: 113px; width: 1061px; opacity: 100%; }
.clients:after{ height: 113px; width: 1061px; opacity: 100%; }
.faq_contact:after{ height: 100px; width: 1061px; opacity: 100%; filter: blur(120px)!important;}
.portfolio:after{ height: 113px; width: 1061px; opacity: 100%; }
footer:after{ height: 113px; width: 1061px; opacity: 100%; }

.banner{ margin-bottom: 0; }
.banner_selection{ margin-bottom: 120px; }
.banner_selection h4{ text-align: center; }
.banner_services { position: relative; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 16px 12px; border-radius: 16px; --left: 0px; --top: 0px; --width: 0px; --height: 0px; background-color: transparent; border-radius: 16px; background: linear-gradient(145deg, #d4d4d480, #fbfbfb80); margin-top: 20px; border: 0.5px solid var(--white); box-shadow: 0px 20px 24px 0px rgba(0, 0, 0, 0.12), inset 0px 10px 8px rgba(0, 0, 0, 0.12), inset 8px -8px 8px rgba(254, 254, 254, 0.3); }
.banner_services li { position: relative; z-index: 1; }
.banner_services .single_service { display: block; padding: 12px 20px; text-decoration: none; color: var(--black); font-size: 20px; font-weight: 500; white-space: nowrap; position: relative; z-index: 2; text-transform: capitalize; }
.banner_services::before { content: ""; position: absolute; left: var(--left); top: var(--top); width: var(--width); height: var(--height); background: #ffffff87; border-radius: 6px; transition: all 0.3s ease; z-index: 0; opacity: 1; }
.banner_services .single_service.active,
.banner_services .single_service:hover { color: #000; }

.acco_services > .container{ position: relative; z-index: 1; }
.acco_services .accordion, .acco_services .accordion .accordion-item, .acco_services .accordion .accordion-item button{ background-color: transparent; border: 0px; }
.acco_services .accordion .accordion-item:not(:last-child){ margin-bottom: 28px; }
.acco_services{ position: relative; height: calc(100vh * 5); width: 100%; padding: 120px 0px; background-color: #1b1b1b; }
.acco_services .container { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; width: 100%; }
.acco_services img { max-width: 100%; display: block; border-radius: 20px; }
.acco_services .accordion-button{ font-weight: 600; font-size: 60px; text-transform: capitalize; box-shadow: 0px 0px 0px transparent; padding-bottom: 0; line-height: 74px; }
.acco_services .accordion-button:not(.collapsed){ color: var(--primary_color_highlighter); background-color: transparent; opacity: 100%; }
.acco_services .accordion-button{ color: var(--white); opacity: 50% }
.acco_services .accordion .accordion-body{ padding-top: 12px; }
.acco_services .accordion .accordion-body p{ font-size: 16px; line-height: 24px; color: var(--white); margin-bottom: 28px; }
.acco_services .image-box { position: relative; width: 100%; height: 100%; }
.acco_services .image_wrapper { position: absolute; inset: 0; }
.acco_services .image_wrapper img { width: 100%; height: auto; opacity: 0; transition: opacity 0.4s ease; }
.acco_services .image_wrapper img.active { opacity: 1; }

.simple_para h2, .simple_para p{ margin-bottom: 0; }
.simple_para p{ margin: 28px 0px; }
.icon_box{ padding: 20px 0px 20px 30px; }
.icon_box h3{ color: var(--primary_color); display: inline-flex; align-items: center; gap: 12px; }
.icon_box h3 span img{ max-height: 40px; height: 100%; width: auto; }

.technologies > .container{ position: relative; z-index: 1; }
.technologies, .clients, footer{ padding: 120px 0px; background-color: #1b1b1b;}
.technologies h2{ margin-bottom: 40px; }
.tech_box{ background-color: #ffffff20; text-align: center; border-radius:12px; padding: 20px; box-sizing: border-box; }
.tech_box img{ max-height: 40px; height: 100%; width: auto; margin-bottom: 12px; }
.tech_box p{ color: var(--white); }


.folio_header{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 40px; }
.folio_header h2{ text-transform: capitalize; }
.social_folio_bttn{ display: inline-flex; gap:20px; align-items: center; }
.social_folio{ padding: 8px 20px; border-radius: 12px; border: 0.5px solid var(--black_lighter); }
.social_folio a:not(:last-child){ margin-right: 20px; }
.folio_owl_tabber .nav-pills{ padding: 8px; border-radius: 8px; display: inline-flex; border: 0.5px solid var(--black_lighter); background-color: #ffffff87; margin-bottom: 40px; }
.folio_owl_tabber .nav-pills .nav-item .nav-link{ font-weight: 500; color: #000; opacity: 40%; font-size: 24px; text-transform: capitalize; padding: 12px 20px; }
.folio_owl_tabber .nav-pills .nav-link.active, .folio_owl_tabber .nav-pills .show>.nav-link{ background-color: var(--primary_color_lightest); color: var(--primary_color_dark); border: 0.5px solid var(--primary_color_lighter); border-radius: 6px; opacity: 100%; font-weight: 400; }
.folio_slider .folio_item{ width: 100%; height: 100%; background-color: var(--white); border-radius: 12px; overflow: hidden; border: 0.5px solid var(--black_lighter); }

.clients{ margin-bottom: 0; }
.clients > .container{ position: relative; z-index: 1; }

.faq_contact{ padding: 120px 0px; margin-bottom: 0; }
.faq_contact > .container{ position: relative; z-index: 1; }
.faq_contact h2{ margin-bottom: 40px; text-transform: capitalize; color: var(--primary_color); }
.faq_contact .accordion-item h2{ margin-bottom: 0; }
.faq_acco .accordion-button{ font-size: 18px; font-weight: 500; background-color: transparent; }
.faq_acco .accordion-button:not(.collapsed){ color: var(--primary_color); background-color: transparent; box-shadow: 0px 0px 0px transparent; }
.faq_acco .accordion-item:not(:last-child){ margin-bottom: 20px; }
.faq_acco .accordion-item{ border: 0.5px solid var(--black_lighter); background-color: transparent; color: var(--black); overflow: hidden; border-radius: 8px; backdrop-filter: blur(4px); }
.faq_acco .accordion-item .accordion-body{ padding-top: 8px; }

.only_faq, .only_contact{ padding: 40px 20px; border-radius: 20px; border: 0.5px solid var(--primary_color_lighter); background-color: #ffffff90; }
.only_contact form input:not([type="submit"]), .only_contact form select, .only_contact form textarea{ width: 100%; padding: 12px 16px; border-radius: 8px; margin-bottom: 12px; background-color: #ffffff90; border: 0.5px solid var(--black_lighter); text-transform: capitalize; }
.only_contact form p{ margin-bottom: 0; }

footer{ position: relative; overflow: hidden; }
footer > .container{ position: relative; z-index: 1; }
.all_socials_word span a{ font-size: 28px; font-weight: 700; color: var(--black_lighter); text-transform: capitalize; }
.all_socials_word{ display: flex; flex-direction: row; justify-content: space-evenly; text-align: center; }
.connect_logo{ display: flex; justify-content: space-between; margin-top: 60px; align-items: center; }
.connect_logo *{ color: var(--black_lighter); }
.connect_logo .connect_box{ font-size: 28px; font-weight: 700; }
.connect_logo .connect_box span{ font-size: 18px; font-weight: 500; display: block; margin-bottom: 8px; }

.brand_holder{ display: flex; align-items: center; justify-content: center; }
.brand_holder img{ width: 80%; }