/*:root {
--maximum-yellow-red: hsl(106, 97%, 39%);
--royal-blue-dark: hsl(231, 61%, 22%);
--silver-chalice: hsl(0, 0%, 70%);
--oxford-blue: hsl(231, 100%, 8%);
--bittersweet: hsla(125, 97%, 39%, 0.842);
--french-rose: hsl(342, 90%, 61%);
--davys-gray: hsl(180, 3%, 28%);
--cool-gray: hsl(240, 13%, 62%);
--platinum: hsl(0, 0%, 92%);
--white-2: hsl(0, 0%, 98%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--rythm: hsl(240, 9%, 53%);

--ff-poppins: sans-serif;

--fs-1: 32px;
--fs-2: 26px;
--fs-3: 22px;
--fs-4: 18px;
--fs-5: 15px;
--fs-6: 14px;

--fw-700: 700;
--fw-600: 600;
--fw-500: 500;


}*/:root {
--transition: 0.25s ease-in-out;}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none; }
a, img, button, span, ion-icon, label, input, textarea { display: block; }
p{line-height:1.6;}
button {
font: inherit;
background: none;
border: none;
cursor: pointer;
width:max-content;
}

textarea, input { 
font: inherit;
background: none;
border: none;
width: 100%;
}

:is(input,textarea):focus{outline: none;}
:focus{outline-offset:4px; }
html {scroll-behavior:smooth; }
body {font-family:sans-serif;overflow-x:hidden;}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background:white;}
::-webkit-scrollbar-thumb {background:hsl(0, 0%, 50%);}

.container{padding:0px 15px;}

.h1, .h2, .h3 {font-weight:normal;line-height: 1.3;text-transform:capitalize; }
.h1{font-size:clamp(1.8rem, calc(.7rem + 4.41vw), 3.2rem);}
.h2{font-size:clamp(1.6rem, calc(.7rem + 3.41vw), 3rem);}
.h3{font-size:clamp(1.4rem, calc(.7rem + 3vw), 2.8rem);}
.h4{font-size:clamp(1.2rem, calc(.7rem + 2.5vw), 2.1rem);}

.btn {
font-size: var(--fs-6);
text-transform: uppercase;
font-weight:bold;
padding: 10px 40px;
border: 1px solid;
border-radius: 6px;
}
.btn-primary{ background:#f65b55;border-color:#f65b55; color:white;}
.btn-primary:is(:hover, :focus) {background:hsl(3, 69%, 5%);border-color:hsl(3, 69%, 5%);}
.btn-secondary:is(:hover, :focus) { background:hsla(209.2, 74%, 19.6%); color:white;}
.top-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #f9f9f9;
color: #696969;
height: 50px;
padding: 1em;
}
.menu {
display: flex;
flex-direction: row;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu > li {
margin: 0 1rem;
}
.menu > li a{color:rgb(54, 54, 54);}
.menu-button-container {
display: none;
height: 100%;
width: 30px;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
}
#menu-toggle {
display: none;
}
.menu-button,
.menu-button::before,
.menu-button::after {
display: block;
background-color: #fff;
position: absolute;
height: 4px;
width: 30px;
transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 2px;
}
.menu-button::before {
content: '';
margin-top: -8px;
}
.menu-button::after {
content: '';
margin-top: 8px;
}
#menu-toggle:checked + .menu-button-container .menu-button::before {
margin-top: 0px;
transform: rotate(405deg);
}
#menu-toggle:checked + .menu-button-container .menu-button {
background: rgba(255, 255, 255, 0);
}
#menu-toggle:checked + .menu-button-container .menu-button::after {
margin-top: 0px;
transform: rotate(-405deg);
}
@media (max-width: 700px) {
.menu-button-container {
display: flex;
}
.menu li a{color:white;}
.menu {
position: absolute;
top: 0;
margin-top: 50px;
left: 0;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
z-index:2;
}
#menu-toggle ~ .menu li {
height: 0;
margin: 0;
padding: 0;
border: 0;
transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
#menu-toggle:checked ~ .menu li {
border: 1px solid #333;
height: 2.5em;
padding: 0.5em;
transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu > li {
display: flex;
justify-content: center;
margin: 0;
padding: 0.5em 0;
width: 100%;
color: white;
background-color: #222;
}
.menu > li:not(:last-child) {
border-bottom: 1px solid #444;
}
}




/*HERO*/
.bannerwrapper{display:grid;grid-template-columns:450px 1fr;padding-block-start:48px;}
.bannerwrapper img{max-width:100%;height:auto;}
.hero {position:relative;padding:36px 0px 140px;z-index:1;}
.hero .btn-primary { margin-inline: auto; }
.hero-content{display:flex;flex-direction:column;padding-top:12px;}
.hero-title, .hero-text{}
.hero-title span{display:block;font-weight:bold;font-size:var(--fs-3);color:var(--french-rose);}
.hero-text{font-size:var(--fs-4);color:var(--oxford-blue);}
.hero-banner{display:none;}
.shape-content {position:absolute;width:900px;top:-230px;right:-300px;z-index:-1;}
ul.listitmes{margin:12px 0 24px;}
ul.listitmes li{text-align:left;
line-height: 28px;
margin: 9px 0;
position: relative;
padding-left: 32px;}
ul.listitmes li:before{
content: '\2713';
color:var(--ff-poppins);
width: 23px;
height: 23px;
position: absolute;
left: 0;
top: 5px;
text-align: center;
border: 2px solid #7c7c92;
border-radius: 100%;
font-size: 13px;
font-weight:bold;
line-height: 20px;
background-color: #e0e6fd;}
/*ABOUT*/
.buttonwrap{display:flex;gap:24px;flex-wrap:wrap;}
.features {
position: relative;
z-index: 1;
/*background:linear-gradient(-135deg, #008ed9, #8b00db);*/
background-position: center;
background-size: cover;
padding: 120px 0 24px;
text-align: left;
}

.features .h2 { color: var(--white); }

.featuresspart { margin-bottom: 120px; }
.featuresspart h2+p{color:white;}
.featuresspart .section-title{}
.featuresspart .section-text {color:var(--white); font-size: var(--fs-4);margin-bottom:60px;}
.featurescard {display:grid;grid-template-columns:1fr;gap:30px;margin-block-start:48px;text-align:left;}
.feature-card {background:white; padding: 40px; border-radius: 12px; box-shadow:-20px 1px 20px hsla(0, 0%, 0%, .1);display:flex;flex-direction:column;gap:20px;}
.feature-card .card-title{padding:0;}
.feature-card .h3{font-size:clamp(1.2rem, calc(.7rem + 2.5vw), 1.5rem);}
.feature-card .card-text {color:#424242;}
.card-icon{color:var(--bittersweet);font-size:45px;width:max-content;margin-inline:auto;margin-bottom:15px;}
.about-bottom-banner{margin-bottom: 120px; }
.about-bottom-banner img{width:100%;height:100%;}
.about-bottom .section-text { color: var(--white); font-size: var(--fs-4); margin-bottom: 40px;}
.about-bottom .btn-secondary { color: var(--white); margin-inline:auto;}
.screenoddeven{background:#eaf8f9;padding-block:72px;}
.screenwrapper{display:grid;grid-template-columns:1fr 1fr;gap:60px;background:white;padding:40px;margin-block:40px;border-radius:40px;/*align-items:center;*/}
.screenwrapper img{max-width:100%;height:auto;}
.screenmeta{display: flex;flex-direction: column;gap:8px;}
.screenmeta ul{margin:0;}
.screenwrapper.odd{background:transparent;}
ul.listitmes.decor{display:flex;flex-wrap:wrap;}
ul.listitmes.decor li{width:220px;}

.corefunction{padding-block:72px;background-color:aliceblue;}
.corefunctionwrap{display:grid;grid-template-columns:repeat(4, 1fr);gap:72px;margin-block:48px;}
.functionbox{display: flex;flex-direction: column;gap:12px;}
.publicviews{padding-block:72px;margin-block-end:64px;background-color:#eaf8f9;}

/*FEATURES*/

.features {padding:120px 0 0;text-align:center; }
.features .section-title {margin-bottom: 20px; }
.features .section-text { color: var(--rythm); font-size: var(--fs-4);margin-bottom:120px;}

.features-item:first-child {margin-top:100px;margin-bottom:100px;}
.features-item-banner { max-width: 350px; margin-inline: auto; margin-bottom: 60px;}
.features-item-banner img { width: 100%; }
.features-item .item-title { color: var(--royal-blue-dark); margin-bottom: 20px;}
.features-item .item-text { color: var(--rythm); font-size: var(--fs-4);}

/*CTA*/
.ctawrapperbox{display:flex;justify-content: space-evenly;background: linear-gradient(-135deg, #191a1a, #2c4ec9);padding-block:40px;border-radius:40px;}
.ctawrapperbox img{max-width:100%;height: auto;}
.cta {padding:0 0 120px; }
.cta input {color:var(--white);padding:10px 15px;border-bottom:1px solid;margin-bottom:30px;}
.cta input::placeholder{color:inherit;}
.cta .btn-secondary{color:var(--white);margin-inline:auto;}

.ctawrapper{ 
/*background:linear-gradient(-135deg, #008ed9, #8b00db);*/
padding: 80px 36px;
border-radius: 20px;
text-align: center;
}
.ctatitle{color:white;}

.cta-title {
color: var(--white);
font-size: var(--fs-1);
font-weight:bold;
line-height: 1.3;
margin-bottom: 20px;
}
.ctametawrap{text-align: left;display: flex;flex-direction: column;color: white;}
.cta-text { color: var(--white); font-size: var(--fs-6); margin-bottom: 50px; }

/*CONTACT*/

.contact { margin-bottom: 120px; }
.contact-content { margin-bottom: 50px; }
.contact-title { color: var(--royal-blue-dark); margin-bottom: 60px; text-align: center; font-weight: var(--fw-500) !important; }
.contact-banner img { width: 100%; }
.input-wrapper { margin-bottom: 30px; }
.input-label { color: var(--oxford-blue); font-size: var(--fs-6); font-weight:bold; margin-bottom: 10px; }
.input-field { border-bottom: 1px solid var(--platinum); padding: 7px 0; font-size: var(--fs-6); }
.input-field::placeholder { color: var(--silver-chalice); }
textarea { max-height: 300px; min-height: 100px; height: 100px; resize: vertical; }




/*STEPS*/
.sliderwrap{padding-block:82px;}




.vert-tab > div {
margin-left: 15px;
margin-right: 15px;
width: 10%;
cursor: pointer;
/*height: 388px;*/
transition: all 0.5s ease 0s;
overflow: hidden;
}
.recr-content {
background: #f3f3fd;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
border-color: #f3f3fd;
padding: 36px 28px;
margin-top: 36px;
border: 1px solid #ddd;
}
.recr-content h3 {
font-size: 20px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #000a19;
white-space: nowrap;
transform: rotate(269deg);
}
.work_items_content {
display: none;
}
.vert_tab_image_wrrapeer {
display: flex;
align-items: center;
}
.vert-tab-content h2 {
font-size: 74px;
font-weight: 700;
line-height: 81px;
letter-spacing: 0em;
text-align: left;
color: #000a19;
margin-bottom: 30px;
}
.vert-tab-content h4 {
font-size: 20px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #000a19;
margin-bottom: 20px;
}
.vert-tab-content p {
font-size: 16px;
font-weight: 400;
line-height: 25px;
letter-spacing: 0em;
text-align: left;
max-width: 96%;
color: #000a19;
margin-left: 0px;
margin-right: auto;
}
.recr-content.active {
width: 100%;
}
.recr-content.active {
background: white;
border-color: #ababc8;
}
.recr-content.active h3 {
display: none;
}
.recr-content.active .work_items_content {
display: block;
}

.recr-content img {
max-width: 100%;
height: 426px;
}
.vert-tab {
display: flex;
}

/*TESTIMONIAL*/
.Marquee{
background:transparent;
width:85vw;
box-sizing:border-box;
padding: 1em;
color:white;
font-weight:200;
display: flex;
align-items:center;
overflow:hidden;
}

.Marquee-content{
display: flex;
animation: marquee 15s linear infinite running;}
.Marquee-content:hover{animation-play-state:paused;}

.Marquee-tag{
width:320px;
margin: 0 .5em;
padding:24px;
background:white;
display: inline-flex;
flex-direction: column;
/*align-items: center;*/
justify-content: center;
transition: all .2s ease;
border-radius:14px;
color:black;
}
.Marquee-tag:hover{
background:linear-gradient(-135deg, #008ed9, #8b00db);
transform:scale(1.1);
cursor: pointer;color:white;}

.Marquee-tag h3{padding-bottom:12px;}

@keyframes marquee{0%{transform: translateX(0)}    
100%{transform: translate(-50%)}
}

.pricingwrapper{position:relative;padding-block-end:48px;}
.pricing{display: grid;gap:40px;grid-template-columns: 1fr 1fr 1fr;justify-content: center;margin: 0 auto;}
.card{background:aliceblue;border-radius:14px;padding-inline:12px;padding-block:24px;}


/*FAQs*/
.text
.faqsection .section-title{color: var(--royal-blue-dark);}
.faq-section{margin:0 auto;color:#4a4a4a;padding-block:50px;}
details > summary{list-style-type:none;transition:0.4s ease;justify-content:space-between;}
details > summary::-webkit-details-marker{display:none;}
details > summary::after{content:'+';}
details[open] > summary::after{content:'-';}
details{border:1px solid #c9eee7;border-radius:15px;padding:1rem;}
details[open] > summary{margin-bottom:0.5rem;transition:0.4s ease;}
details{position:relative;margin-bottom:25px;transition:0.4s ease;}
summary:focus-visible{outline:2px solid orange;outline-offset:8px;border-radius:4px;}
.faq-section h4{max-width:100%;color:#006484;cursor:pointer;}.faq-section h4:hover{color:#07804b;}
summary{font-size:20px;font-weight:bold;color:#07804b;display:flex;gap:25px;}
summary::marker{display:none;content:"";}
summary h4{font-size:18px;font-weight:bold;}

.faq-section span{margin-top:4px;color:#f4f4f6;}
details ul,ol{list-style-position:inside;margin-top:12px;}
details ul li,ol li{padding-bottom:10px;}
details > p{color:#4a4a4a;line-height:155%;letter-spacing:.1px;max-width:98%;} 


/*FOOTER*/

footer{background: var(--white-2); }
footer .logo{margin-bottom:30px; }
.footer-top { padding:48px 0px 50px; }
.footer-brand { margin-bottom: 20px; }
.footer-text { color: var(--rythm); font-size: var(--fs-6); margin-bottom: 20px; }
.social-list { display: flex; justify-content: flex-start; gap: 20px; }
.social-link { color: var(--rythm); font-size: var(--fs-4); margin-bottom: 10px; }
.social-link:is(:hover, :focus) { color: var(--french-rose); }
.footer-link-list:not(:last-child) { margin-bottom: 30px; }
.footer-link-list .link-title { margin-bottom: 15px; }
.footer-link { color: var(--cool-gray); font-size: var(--fs-6); margin-bottom: 10px; max-width: 150px; }
.footer-link:is(:hover, :focus) { color: var(--french-rose); }
.footer-bottom { padding: 20px 15px; border-top: 1px solid hsla(0, 0%, 18%, .2); }
.copyright { color: var(--cool-gray); text-align: center; font-size: var(--fs-6); }
.copyright a { display: inline-block; color: var(--cool-gray); }
.copyright a:is(:hover, :focus) { color: var(--french-rose); }

/*GO-TOP*/

.go-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 5;
width: 50px;
height: 50px;
background: linear-gradient(-45deg, var(--maximum-yellow-red), var(--french-rose));
box-shadow: 0 2px 4px hsla(0, 0%, 0%, .25);
display: grid;
place-items: center;
border-radius: 50%;
color: var(--white);
font-size: 22px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: var(--transition);
z-index:2;
}

.go-top.active { opacity: 1; visibility: visible; pointer-events: all; }

/*MEDIA QUERIES*/

@media(min-width:450px) {
:root {--fs-1:60px;}
.h1, .h2 { font-weight:normal; }
.btn { padding-block: 15px; }

.navbar {left:auto;width:300px;}
.hero { padding:36px 0 106px;}
.shape-content { top: -70px; right: -260px; }
.feature-card .card-title { /*padding-inline: 40px;*/ }
.about-bottom-banner { max-width: 400px; margin-inline: auto; margin-bottom: 40px; }
.about-bottom-content { padding-inline: 50px; }
.features .h2 { --fs-2: 32px; }
.cta-title { --fs-1: 42px; }
.cta-form { display: flex; justify-content: center; align-items: flex-end; gap: 30px; }
.cta input { margin-bottom: 0; }
.cta .btn-secondary { min-width: max-content; }
.contact-title { --fs-2: 32px; }
.contact-banner { max-width: 300px; margin-inline: auto; }
}
@media(min-width: 560px) {
.container { max-width: 550px; margin-inline: auto; }
.navbar-wrapper { position: relative; }
.navbar { top: calc(100% + 15px); right: 0; }
.hero-content, .about-bottom-content { text-align: left; }
.hero .btn-primary, .about-bottom .btn-secondary { margin-inline: 0; }
.shape-content { top: -156px; right: -152px; }
.footer-brand { margin-bottom: 40px; }
.footer-link-box { display: grid; grid-template-columns: 1fr 1fr; }
}
@media(max-width:768px){
:root{--fs-2:35px;--fs-4:20px;}
.container { max-width: 740px; }
.bannerwrapper,.featurescard,.corefunctionwrap,.screenwrapper{grid-template-columns:1fr;}
.ctawrapperbox{flex-direction:column;justify-content:center;}
.ctametawrap{justify-content: center;text-align: center;}
.featurescard {grid-template-columns:1fr;}
.feature-card{height:100%;display:flex;flex-direction:column;justify-content:space-between;/*align-items: center;*/}
.feature-card .card-title{padding-inline:0;}
.contact-title{--fs2:42px;}.testimonials{flex-direction:column;}.vert-tab > div{width:100%;}.recr-content h3{transform:rotate(0deg);}.vert-tab{flex-direction:column;}}
@media(min-width: 1024px){.container{max-width:950px;}
.navbar-menu-btn{display:none;}
.navbar{max-height:unset;visibility:visible;position:static;width:auto;background:none;pointer-events:all;overflow:visible;display:flex;}
.navbar-list{display:flex;align-items:center;gap:10px;margin-right:20px;}
.nav-link{opacity:1;padding:0 15px;}
.navbar .btn-primary{display:block;}
.hero-content {max-width:100%;}
.hero-banner {
display: block;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 500px;
padding-top: 500px;
/*background: url('https://i.postimg.cc/htTB3ywY/hero-banner.png') no-repeat;*/
background-size: contain;
}

.featuresspart .section-text { margin-inline:  auto; }
.featurescard { grid-template-columns: repeat(3, 1fr); }
.about-bottom { display: flex; justify-content: space-between; align-items: center; }
.about-bottom-banner { margin-bottom: 0; height: 330px; }
.about-bottom-content { padding-inline: 0; width: 50%; }

.features :is(.section-title .section-text) {margin-inline: auto; }
.features-item { display: flex; align-items: center; gap: 50px; }
.features-item:last-child { /*flex-direction: row-reverse;*/ }
.features-item-banner { margin-inline: 0; margin-bottom: 0; }
.feature-item-content { width: 50%; text-align: left; }

.cta-card > * {max-width: 500px; margin-inline: auto; }

.contact .container { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.contact-content { max-width: 400px; }
.contact-title { text-align: left; }
.contact-form { width: 50%; }

.footer-top .container { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.footer-brand, .footer-link-list:not(:last-child) { margin-bottom: 0; }
.footer-link-box { grid-template-columns: repeat(4, 1fr); gap: 50px; } 
}

@media(min-width:1200px){:root{--fs-2:42px;}
.container {max-width:80%;}
.hero-banner { right: 100px;}
.about-bottom-banner { height:400px;}
.features :is(.section-text, .section-title) {max-width:100%;margin:0 auto;text-align:left;}
}