/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Arima:wght@100;200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --white: #fff;
    --black: #000;
    --primary: #8dc63f;
    --transition: all 0.3s ease-in-out;
}

*{ padding: 0; margin: 0; box-sizing: border-box; }

body { font-family: 'Arima', sans-serif; font-size: 20px; color: var(--black); line-height: 2; background-color: var(--primary); }
img { display: block; max-width: 100%; height: auto; }
a { outline: none; text-decoration: none; color: var(--black); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary); }
p { margin-bottom: 30px; }
p:last-child { margin-bottom: 0; }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
h1 { font-size: 80px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }

/* global */
.centered-sm { padding-right: calc((100% - 700px)/ 2); padding-left: calc((100% - 700px)/ 2); }
.centered { padding-right: calc((100% - 1300px)/ 2); padding-left: calc((100% - 1300px)/ 2); }
 
/* wrapper */
.wrapper { width: 100%; position: relative; }

/* hero */
.hero { padding-top: 110px; padding-bottom: 110px; width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; align-content: center; position: relative; min-height: 100vh; background-color: var(--black); }
.hero .logo { width: 100%; display: flex; justify-content: center; }
.hero .logo svg { width: 158px; height: 34px; fill: var(--white); }
.hero h1 { margin-bottom: 5px; text-transform: uppercase; font-family: 'Anton', sans-serif; text-align: center; color: var(--primary); font-weight: 400; width: 100%; position: relative; z-index: 1; }
.hero h2 { margin-bottom: 20px; font-size: 30px; text-transform: uppercase; color: var(--white); text-align: center; font-family: 'Anton', sans-serif; font-weight: 400; line-height: 1.1; width: 100%; position: relative; z-index: 1; }
.hero h2 strong { color: var(--primary); font-weight: 400; }
.hero .scroll { padding-top: 70px; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: var(--white); font-size: 15px; font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 1px; z-index: 1; }
.hero .scroll:before { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 45px; height: 58px; background: url(../images/arrow-down.svg) no-repeat; animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.hero .scroll:hover { color: var(--primary); }
.hero .icon { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.hero .icon img { width: 15px; }
.hero .bgImg { position: absolute; }
.hero .stress { left: 5%; top: 9%; width: 10%; }
.hero .leftImg { left: 0; top: 50%; width: 23%; transform: translateY(-50%); }
.hero .mainImg { left: 50%; bottom: 0; width: 25%; transform: translateX(-50%); }
.hero .bottomleftImg { left: 5%; bottom: 0; width: 18%; }
.hero .meeting { left: 24%; bottom: 13%; width: 12.5%; }
.hero .book { left: 20%; top: 8%; width: 12.7%; }
.hero .target { left: 32%; top: 5%; width: 10.2%; }
.hero .glasses { left: 28%; top: 46%; width: 8.9%; }
.hero .pen { right: 24%; top: 38%; width: 5%; }
.hero .rightImg { right: 0; top: 50%; width: 25.2%; transform: translateY(-50%); }
.hero .time { right: 10%; bottom: 5%; width: 7.6%; }
.hero .toprightImg { right: 12%; top: 0; width: 23.1%; }
.hero .work { right: 30%; top: 59%; width: 7.6%; }
.hero .deadline { right: 12%; top: 28%; width: 13.4%; }
.hero .graph { right: 24%; bottom: 4%; width: 13%; }
.hero svg { text-transform: uppercase; font-family: 'Anton', sans-serif; position: relative; z-index: 1; }
.hero svg text { text-transform: uppercase; animation: stroke 3s alternate; stroke-width: 2; fill: #8dc63f; stroke: #8dc63f; font-size: 150px; }
.hero .story { margin-bottom: 10px; width: 100%; font-size: 18px; text-align: center; color: var(--white); position: relative; z-index: 1; }
.hero .story span { font-weight: 700; }

@keyframes stroke {
	0%   {
		fill: rgba(72,138,20,0);
        stroke: rgba(141,198,63,1);
		stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 2;
	}
	70%  {
        fill: rgba(72,138,20,0);    
        stroke: rgba(141,198,63,1);
    }
	80%  {
        fill: rgba(72,138,20,0);
        stroke: rgba(141,198,63,1);
        stroke-width: 3;
    }
	100% {
		fill: #8dc63f;
        stroke: rgba(54,95,160,0); 
		stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 0;
	}
}

/* text side */
.textSide { padding-top: 80px; padding-bottom: 80px; width: 100%; }
.textSide .block { margin-bottom: 50px; display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; }
.textSide .block:last-child { margin-bottom: 0; }
.textSide .heading { padding-right: 30px; max-width: 300px; width: 100%; position: sticky; top: 20px; left: 0; }
.textSide .heading h2 { padding-bottom: 20px; position: relative; text-transform: capitalize; }
.textSide .heading h2:after { position: absolute; left: 0; bottom: 0; content: ''; height: 14px; width: 100%; background: url(../images/line.gif) no-repeat; }
.textSide .heading h3 { padding-bottom: 20px; position: relative; line-height: 1.3; text-transform: capitalize; }
.textSide .heading h3:after { position: absolute; left: 0; bottom: 0; content: ''; height: 14px; width: 100%; background: url(../images/line.gif) no-repeat; }
.textSide .text { width: calc(100% - 600px); }
.textSide .text h3 { margin-bottom: 20px; }
.textSide .graph-block { padding: 20px; margin-bottom: 30px; width: 100%; background-color: rgba(0,0,0,0.1); }
.textSide .graph-block:last-child { margin-bottom: 0; }
.textSide h4 { margin-bottom: 15px; font-weight: 600; }
.textSide p a { text-decoration: underline; }
.textSide p a:hover { color: var(--black); text-decoration: none; }
.textSide .graph { width: 100%; }
.textSide .graph li { margin-bottom: 8px; width: 100%; display: flex; align-items: center; position: relative; font-size: 14px; font-weight: 300; }
.textSide .graph li label { padding-right: 10px; width: 160px; font-weight: 600; }
.textSide .barbg { width: calc(100% - 220px); height: 30px; background-color: var(--primary); }
.textSide .bar { height: 100%; background-color: var(--black); }
.textSide .count { width: 60px; text-align: right; }
.textSide .graph.education li label { width: 225px; }
.textSide .graph.education li .barbg { width: calc(100% - 285px); }
.textSide .image { margin-bottom: 50px; width: 100%; }
.textSide .image:last-child { margin-bottom: 0; }
.textSide .image img { mix-blend-mode: multiply; }
.textSide .image.doctor { position: relative; }
.textSide .image.doctor svg { position: absolute; left: 0; top: 0; width: 100%; }
.textSide blockquote { padding-left: 50px; margin-top: 50px; margin-bottom: 40px; font-size: 35px; line-height: 1.3; position: relative; font-family: 'Anton', sans-serif; }
.textSide blockquote:last-child { margin-bottom: 0; }
.textSide blockquote:before { position: absolute; left: 0; top: -20px; font-size: 80px; font-weight: 700; content: '"'; }
.textSide blockquote span { margin-top: 10px; display: block; width: 100%; font-size: 18px; font-weight: 400; font-family: 'Arima', sans-serif; }
.textSide .list { margin-bottom: 30px; }
.textSide .list:last-child { margin-bottom: 0; }
.textSide .list li { padding-left: 20px; position: relative; }
.textSide .list li:before { position: absolute; left: 0; top: 13px; width: 8px; height: 8px; content: ''; border-radius: 50%; background-color: var(--black); }
.textSide .right { margin-left: auto; max-width: 280px; width: 100%; position: sticky; top: 20px; }
.textSide .doctorDetail { padding: 25px; margin-top: 50px; margin-bottom: 70px; text-align: center; font-size: 12px; line-height: 1.8; border-radius: 10px; background-color: rgba(255,255,255,0.2); }
.textSide .doctorDetail:last-child { margin-bottom: 0; }
.textSide .doctor-img { margin: -70px auto 20px auto; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background-color: var(--white); }
.textSide .doctor-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.textSide .doctorDetail h5 { font-size: 18px; text-align: center; }
.textSide .description { margin-bottom: 10px; font-size: 12px; text-align: center; font-weight: 500; }
.textSide .audio { padding: 20px; margin-bottom: 30px; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; background-color: rgba(0,0,0,0.1); }
.textSide .audio h5 { margin-bottom: 10px; }
.textSide .audio-img { margin-right: 20px; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; }
.textSide .audio-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.textSide .audio-text { width: calc(100% - 100px); }
.textSide audio { width: 100%; height: 46px; }

/* credit */
.credit { padding-top: 50px; padding-bottom: 50px; color: var(--white); width: 100%; background-color: var(--black); }
.credit h2 { margin-bottom: 20px; color: var(--white); }


/* text up animation */
.js-swiftup-text span{ display: inline-block; overflow: hidden; animation: .3s swift-up ease-in-out forwards; }
.js-swiftup-text i { font-style: normal; position: relative; top: 50px; animation: .5s swift-up ease-in-out forwards; }
@keyframes swift-up {
    to { top: 0; }
}

/* arrow bounce */
@keyframes bounce {
    50% { transform: translate(-50%, -15px); }
}

/* animation */
.slide-animate1 { animation-name: slide-bob1; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; }
@keyframes slide-bob1 {
    0% { margin-left: -25px; }
    50% { margin-left: 0; }
    100% { margin-left: -25px; } 
}

.slide-animate2 { animation-name: slide-bob2; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; }
@keyframes slide-bob2 {
    0% { margin-top: -25px; }
    50% { margin-top: 0; }
    100% { margin-top: -25px; } 
}

.slide-animate3 { animation-name: slide-bob3; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; }
@keyframes slide-bob3 {
    0% { margin-right: -25px; }
    50% { margin-right: 0; }
    100% { margin-right: -25px; } 
}

.slide-animate4 { animation-name: slide-bob4; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; }
@keyframes slide-bob4 {
    0% { margin-bottom: -25px; }
    50% { margin-bottom: 0; }
    100% { margin-bottom: -25px; } 
}

.loader { position: fixed; left: 0; top: 0; z-index: 99; height: 100%; width: 100%; background-color: #000; }

@media screen and (max-width: 1340px)  {
    .centered { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 1199px)  {
    .textSide .text { width: calc(100% - 300px); max-width: 100%; }
    .textSide .right { margin-top: 30px; width: calc(100% - 300px); max-width: 100%; }
}

@media screen and (max-width: 767px)  {
    body { font-size: 18px; }
    .centered-sm { padding-left: 20px; padding-right: 20px; }
    h1 { font-size: 70px; }

    .hero .mainImg { width: 40%; }
    .hero .leftImg { width: 28%; }
    .hero .rightImg { width: 30%; }
    .hero .toprightImg { width: 32%; }
    .hero .logo svg { width: 100px; height: 22px; }
    .hero .story { font-size: 15px; }
    .hero .story span { display: block; font-weight: 700; }

    .textSide .heading { padding-right: 0; margin-bottom: 30px; position: relative; top: 0; width: 100%; max-width: 100%; }
    .textSide .text { width: 100%; }
    .textSide .right { width: 100%; }
    .textSide .graph li { flex-wrap: wrap; }
    .textSide .graph li label,
    .textSide .graph.education li label { width: 100%; }
    .textSide .barbg,
    .textSide .graph.education li .barbg { width: calc(100% - 60px); height: 24px; }
    .textSide .count { line-height: 24px; }
    .textSide blockquote { font-size: 28px; }
}