body{margin:0; padding:0; font-family: 'Heebo', sans-serif; color: var(--text-gray);     font-size: 1rem;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0; color:var(--black);}
p{margin:0; padding:0; line-height: 1.8rem;}
ol,ul{margin:0; padding:0; list-style:none;}
body .container{max-width:1280px; width:100%;}

:root {
  --text-gray: #727272;
  --white: #ffffff;
  --BlueColor:#1C4DB8;
  --background-transparent:transparent;
  --yellow:#FFDB61;
  --orange:#F1A350;
  --black:#000;
  --pink:#E82E5F;
  --text-dark:#252424;
}

.pt-150{padding-top:150px;}
.pb-150{padding-bottom:150px;}
.pb-100{padding-bottom:100px;}
.py-100{padding:100px 0}
/**=================================================================================**/

.site-navigation ul li.list-inline-item { margin: 0 45px 0 0; }
.site-navigation ul li a { color: var(--text-gray); text-decoration: none; padding: 2rem 0; display: inline-block; }
.site-navigation ul li a:hover{color:var(--BlueColor); font-weight:500}
.site-logo { position: absolute; background:#fff; top: 0; left:1rem; box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.1); padding:15px; z-index:1; }
.login-head-btn ul li a { display: inline-block; padding: 10px 20px; border: 1px solid var(--BlueColor); color: var(--BlueColor); text-decoration:none; border-radius: 8px; font-weight: 500;}
.login-head-btn ul li a:hover{ background: var(--BlueColor); color: var(--white); }
.login-head-btn ul li a.connect-btn-fill { background: var(--BlueColor); color: var(--white);      }
.login-head-btn ul li a.connect-btn-fill:hover { background: var(--white); color: var(--BlueColor);    }

.banner-section { height: 758px; display: flex; align-items: center; padding: 100px 0; background-size: cover; background-position: top center; position:relative;}
.banner-section:before{background:rgba(6, 6, 6, 0.25); content:""; position:absolute; left:0; right:0; top:0; bottom:0; color:var(--yellow)}
.banner-content { position: relative; }
.banner-content h1 { color:var(--white); font-size: 3.3em; font-weight: 600; }
.banner-content ul { margin: 30px 0 0; }
.banner-content ul li { margin: 0 0 15px; color: var(--white); font-size: 1.25em; font-weight: 300; position: relative; padding-left: 30px; }
.banner-content ul li:before { content: "\f26a"; font-family: bootstrap-icons; position: absolute; left: 0; color: #FFDB61; top: -2px; }

.connect-btn a { display: inline-block; padding: 11px 30px; border: 1px solid var(--BlueColor); background: var(--BlueColor); text-decoration: none; border-radius: 8px; font-weight: 500; color: var(--white); font-size: 1.2rem; }

.connect-btn a:hover{ border-color: var(--BlueColor); color: var(--BlueColor); background:var(--background-transparent) }
.section-heading h2 { font-size: 2.1rem; font-weight: 700; }
.section-content p { line-height: 1.9rem; }
.therapy-block { background: #FFFFFF; box-shadow: 0px 0px 60px 3px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 30px; padding-bottom: 80px; position: relative; }
img.icon-bottom { position: absolute; bottom: 0; right: 0; }
.therapy-block h4 { font-size: 1.3rem; margin: 0 0 10px; font-weight: 600; }

.therapy-section { padding-top: 6em; }
.group-profile img.img-custom { border: 10px solid #fff; box-shadow: 0px 0px 60px 3px rgba(0, 0, 0, 0.1); object-fit: cover; position: absolute; }
img.img-fluid-top { width: 250px; border-radius: 120px 0px 0px 0px; height: 300px; top: 60px; right: 282px; }
img.img-fluid-left { width: 270px; height: 350px; right: 0px; top: -50px; }
img.img-fluid-right { width: 240px; height: 300px; top: 310px; right: 170px; }
img.img-fluid-bottom { width: 230px; height: 285px; border-radius: 0 0 120px 0; right: -70px; top: 260px; }

img.shape-one { position: absolute; right: -100px; top: 160px; }
img.shape-two { position: absolute; top: 373px; left: 107px; }

.how-it-work-section { background: rgba(168, 209, 223, 0.15); padding: 6rem 0; }
.work-step-block { padding-top: 6rem; }
.work-steps { display: flex; flex-wrap: wrap; flex-direction: column;     padding-right: 2rem; position:relative}
.work-steps figure { background: #fff; display: flex; width: 7.5rem; height: 7.5rem; align-items: center; justify-content: center; box-shadow: 0px 0px 60px 3px rgba(0, 0, 0, 0.1); border-radius: 0.2rem; margin:3rem 0 6rem; }


.work-steps h2 { font-size: 2.1rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.8rem; }
.work-steps h4 { color: var(--pink); font-size: 1.3rem; margin: 0 0 0.3rem; }
.work-steps p { color: var(--BlueColor); }
.work-steps figure:after { content: ""; background-image: url(/public/images/dashed-line-arrow.svg); position: absolute; width: 100%; height:110px; background-repeat:no-repeat; top:154px; left:126px; }


.step-col:nth-child(2n) figure:after { transform: rotate(292deg); top: 116px; left: 96px; }
.step-col:last-child .work-steps figure:after{display:none;}

.testimonial-section { background: rgba(28, 77, 184, 0.15); }
.testimonial-block { padding-top: 6rem; }
.testimonial-user { position: relative; height: 500px; margin: 2rem 0 0; }
.testimonial-user img.img-t { width: 15rem; border: 10px solid #fff; margin: 0 11px 15px 0; box-shadow: 0px 0px 60px 3px rgba(0, 0, 0, 0.1); position: absolute; object-fit:cover }
img.img-t.t-user-1 { height: 20rem; }
img.img-t.t-user-2 { height: 16rem; width: 13rem; left: 16rem; top: -3rem; }
img.img-t.t-user-3 { width: 13rem; height: 16rem; bottom: -1rem; left: 5rem; }
img.img-t.t-user-4 { width: 14rem; height: 18rem; left: 19rem; top: 10rem; }

.user-review { position: relative; padding: 40px; }
.user-review i { color: var(--BlueColor); font-size: 4rem; line-height: 0; opacity: 0.2;     position: absolute;}
.user-review i.left-icon { top: -26px; left: -20px; }
.user-review i.right-icon { right: -25px; bottom: -10px; transform: rotate(180deg); }
.user-review p { color: var(--BlueColor); font-size: 1.1rem; font-weight: 400; }
.username-t h4 { font-size: 1.2rem; color: var(--text-gray); margin: 0 0 0.5rem; }
.username-t h6 { font-size: 0.9rem; color: var(--text-gray); margin: 0 0 0.5rem; font-weight: 400; }

.benefits-content ul li { margin: 0 0 20px; position: relative; padding-left: 30px; }
.benefits-content ul li i.bi { color: var(--orange); position: absolute; left: 0; top: -1px; font-size: 1.2rem; }

.faq-section-collapse { position: relative; padding:4rem 0}
.faq-section-collapse:before { content: ""; width: 50%; background: var(--BlueColor); position: absolute; bottom: 0; top: 0; border-radius: 0 1.2rem 1.2rem 0; }
.faq-section-collapse .accordion { position: relative; }

.faq-section-collapse .accordion .accordion-item { margin: 0 0 1rem; border: none; border-radius: 0.6rem; box-shadow: 0px 0px 60px 3px rgba(0, 0, 0, 0.1); overflow: hidden; }
.faq-section-collapse .accordion .accordion-item:last-child{margin-bottom:0;}
.faq-section-collapse .accordion .accordion-item .accordion-button { border-radius: 0; padding: 1.2rem 1.5rem; box-shadow: inherit; color: var(--black); font-size: 1.1rem; font-weight: 500; background: rgb(28 77 184 / 15%); }
.faq-section-collapse .accordion .accordion-item .accordion-button.collapsed { background: #fff; }
.accordion-body-content { padding: 1.2rem 1.5rem; }
.accordion-body-content p { margin: 0 0 1rem; color: var(--text-gray); font-size: 1rem; font-weight: 400; }
.accordion-body-content p:last-child{margin-bottom:0;}

footer.footer-section { background: var(--BlueColor); padding: 4rem 0 0; }
.site-about p { color: #fff; font-size: 0.9rem; }
.footer-link h4 { color: var(--white); font-size: 1.2rem; margin: 0 0 1rem; }
.footer-link ul li a { color: var(--white); text-decoration: none; font-weight: 400; }
.footer-link ul li { margin: 0 0 0.7rem; }
.newsletter-box .form-group input[type="text"] { width: 100%; height: 40px; background: transparent; border: 1px solid #8AAFFF; box-shadow: inherit; color:var(--white); border-radius: 0.3rem; padding-right: 4rem; font-size:0.8rem }
.newsletter-box .form-group button.btn { position: absolute; right: 0; top: 4px; padding: 0; bottom: 0; width: 3rem; color: var(--white); font-size: 1.2rem; }

.newsletter-box .form-group input::-webkit-input-placeholder { /* Edge */
  color: var(--white);
}

.newsletter-box .form-group input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--white);
}

.newsletter-box .form-group input::placeholder {
  color: var(--white);
}
.copy-text { border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 3rem; }
.copy-text p { color: var(--white); font-size: 0.9rem; }
.faq-section-collapse:after { background-image: url(/public/images/faq-icon.svg); background-repeat: no-repeat; content: ""; position: absolute; left: 0; bottom: 0; z-index: 111; height: 199px; width: 240px; }


/**MOBILE TOGGLE CSS**/

.login-head-btn ul li a.mobile-toggle { padding: 0; border: none; font-size: 1.7rem; display: inline-block; line-height: 0; position: relative; top: 5px; background-color: transparent; color: var(--BlueColor); }
header.header-section div.offcanvas { width: 250px; }
.header-section .offcanvas-header img { width: 70px; }
header.header-section div.offcanvas .site-navigation ul li a { width: 100%; padding: 0.7rem 1rem; }



@media(min-width:991px){

.step-col:nth-child(2n) figure { order: 2; margin:8rem 0 0; }	
	
}

@media(max-width:767px){
	
.login-head-btn ul li a{padding:0;}	
.group-profile img.img-custom { position: static; width: 49%; border-radius: 0.5rem; height: 10rem; border: 2px solid #fff; margin: 0 0 10px; }
img.shape-one, img.shape-two { display: none; }
.work-steps { margin-bottom: 3rem; padding-left: 6rem; }
.work-steps figure { width: 4.5rem; height: 4.5rem; display: inline-block; padding: 10px; position: absolute; left: 0; margin:0}
.work-steps figure:after{display:none;}
.work-steps figure img { width: 100%; height: 100%; object-fit: contain; }
.testimonial-block { padding-top: 3rem; }
.testimonial-user { margin:0rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; height:auto; }
.testimonial-user img.img-t { width: 48%; position: static; margin: 0; border: 2px solid #fff; height: 50%; }
.testimonial-slide { margin: 50px 0 0; }
.how-it-work-section{    padding: 3rem 0;}
.testimonial-section{padding:60px 0}
.user-review{padding:40px 20px}
}



@media(max-width:767px){
	
.login-head-btn ul li a { padding: 3px 8px; border-radius: 4px; font-size: 0.9rem; }	
.login-head-btn { padding: 1rem 0; }


	
}

@media(min-width:768px) and (max-width:991px){
.testimonial-user{display:none;}	
.group-profile { width: 550px; height: 640px; margin: 100px 0 0; display:none;}	
.login-head-btn { padding: 1rem 0; }	
.login-head-btn ul li a { padding: 3px 8px; border-radius: 4px; font-size: 0.9rem; }

.work-steps { margin-bottom: 3rem; padding-left: 6rem; }
.work-steps figure { width: 4.5rem; height: 4.5rem; display: inline-block; padding: 10px; position: absolute; left: 0; margin:0}
.work-steps figure:after{display:none;}
.work-steps figure img { width: 100%; height: 100%; object-fit: contain; }
}

@media(min-width:992px) and (max-width:1023px){
.site-navigation ul li.list-inline-item { margin: 0 30px 0 0; }	
.group-profile { width: 550px; height: 640px; margin:100px auto 0; }		
.login-head-btn ul li a{padding:10px 15px}	
}

@media(min-width:1024px) and (max-width:1200px){
.site-navigation ul li.list-inline-item { margin: 0 30px 0 0; }	
.group-profile { width: 550px; height: 640px; margin:100px auto 0; }		
.login-head-btn ul li a{padding:10px 15px}	
}
