@charset "UTF-8";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --bg: #fafafa;
  --bg2: #f0f0f0;
  --blur-bg: rgba(255,255,255,0.5);
  --blur-bg2: rgba(255,255,255,0.6);
  --text: #31344b;
  --text2: #44476a;
  --text3: #fafafa;
  --text4: #eaeaea;
  --text-icon: #111;
  --blue: #0da6d2;
  --blue2: #0da6d2;
  --blue3: #0da6d2;
  --orange: #ff6600;
  --green: #94d60a;
  --green2:#299e60;
  --green3: #62bd19;
  --shadow: rgba(40,40,40,0.1);
  --shadow-blue: #ccecf5;
  --shadow-orange: #fbdec1;
  --wave-svg: url('data:image/svg+xml;utf8,<svg width="1440" height="70" viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg"><path fill="%23fafafa" d="M0,40 C360,80 720,0 1080,40 1260,60 1440,20 1440,20 L1440,80 L0,80 Z"/></svg>') no-repeat bottom;
}
[data-theme="dark"] {
  --bg: #333348;
  --bg2: #272744;
  --text: #fafafa;
  --text2: #bdbdbd;
  --text3: #ddd;
  --text4: #eaeaea;
  --text-icon: #eaeaea;
  --blue2: #212740;
  --blue3: #444e76;
  --blur-bg: rgba(51,51,72,0.3);
  --blur-bg2: rgba(0,0,0,0.4);
  --shadow: rgba(230,230,230,0.1);
  --shadow-blue: #444e76;
  --shadow-orange: #9b4317;
  --wave-svg: url('data:image/svg+xml;utf8,<svg width="1440" height="70" viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg"><path fill="%23333348" d="M0,40 C360,80 720,0 1080,40 1260,60 1440,20 1440,20 L1440,80 L0,80 Z"/></svg>') no-repeat bottom;
}
::-webkit-scrollbar {
  width: 8px;  
  height: 8px; 
}

::-webkit-scrollbar-track {
  background: var(--bg);  
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: var(--blue3);   
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--orange); 
}
body {
  font-family: 'Poppins', sans-serif;
  padding:0;
  position:relative;
  background: var(--bg);
  color: var(--text2);
  height:100vh;
   font-optical-sizing: auto;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

header {
  position: relative;
  background: var(--blue2);
  color: white;
  padding: 60px 160px 60px;  
  transition: all 0.4s ease;
}

header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 82px;
  background: var(--wave-svg);
  background-size: cover;
  pointer-events: none;
  z-index: 1;
}
header>figure {
  display: flex;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:0 160px;
  height:44px;
  color: var(--text);
  background: var(--blur-bg);
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  -moz-backdrop-filter:blur(20px);
  -ms-backdrop-filter:blur(20px);
  z-index:2;
  user-select:none;
  transition: all 0.4s ease;
}
header>figure>img {
  width:35px;
  height:35px;
  border-radius:50%;
  margin:5px 4px 0 0;
}

header>figure>img:hover {
  opacity:0.7;
}
header>figure>figcaption {
  padding-top:1px;
  color: var(--orange);
}
header>figure>figcaption>strong {
  display:block;
  color: var(--blue);
  font-weight:400;
  margin-top:-2px;
  font-size:0.810rem;
  line-height:0.950rem;
}
header>figure>figcaption:hover,
header>figure>figcaption:hover>strong {
  opacity: 0.7;
}

header>a {
  position:fixed;
  z-index:3;
  top:5px;
  right:210px;
  text-decoration:none;
  display: block;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg,rgb(118, 167, 63) 0%,rgb(51, 143, 118) 40%,rgb(55, 141, 167) 50%,rgb(117, 152, 242) 70%,rgb(144, 118, 236) 100%);
  background-size: 200%;
  background-position: left;
  color: #fff;
  font-size: 1.1rem;
  line-height:1.6rem;
  font-weight: 500;
  padding: 5px 10px 2px 10px;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1),
    inset 0px 2px 2px rgba(255, 255, 255, 0.5);
  transition: all 0.4s ease-in;
}

header>a:hover {
  color: #fff;
  text-shadow: 0 0 5px #fff;
  background-position: right;
  animation: gelatine 0.4s 1;
}
header>a>i {
  font-size:1rem;
}
header>button {
  position:fixed;
  top:5px;
  right:160px;
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--orange);
  text-shadow: 0 -0.700px 0 var(--shadow-orange);
  z-index:2;
  transition: 0.4s;
}
header>button>i {
  pointer-events: none;
}
header>button:hover {
  color: var(--blue);
  text-shadow: 0 -0.700px 0 var(--shadow-blue);
  transition: 0.4s;
  animation: gelatine 0.4s 1;
}

strong {
  font-weight:600;
  font-style:normal;
  color: var(--text);
}
b {
  font-weight:500;
  font-style:normal;
}
h1 {
  font-size: 2.3rem;
  font-weight:600;
  line-height: 1.2;
  letter-spacing: 1.4px; 
  color: var(--text4);
}
h1>strong {
  color: var(--text3);
  font-weight:800;
}
h2 {
  color: var(--blue);
  font-weight:600;
  font-size: 1.4rem;
  border-bottom: solid 1px var(--orange);
  margin-bottom:10px;
}
h3 {
  color: var(--text);
  font-weight:500;
  font-size: 1.3rem;
}
h2>i {
  color: var(--orange);
  font-weight:400;
}
aside {
  position: fixed;
  top: 0;
  right: 0;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  background: var(--blur-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  -moz-backdrop-filter:blur(20px);
  -ms-backdrop-filter:blur(20px);
  transform: translateX(100%);
  transition: transform 0.4s ease;
  z-index: 1000;
}
aside.show {
  transform: translateX(0);
}
aside>h2 {
  color: #fff;
  background: var(--blue2);
  border-bottom: solid 1px rgba(255,255,255,0.4);
  height:44px;
  line-height:44px;
  padding-left:15px;
  margin:0;
  font-size:1.2rem;
  text-transform:uppercase;
  font-weight:800;
  color: #fff;
  letter-spacing:0.2px;
  font-family: "Nunito", sans-serif;
  user-select:none;
}

aside>button {
  position: absolute;
  display:inline-block;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  transition: 0.4s;
  width:30px;
  height:30px;
  color: #fafafa;
  border: solid 1px var(--shadow-blue);
  border-radius: 50%;
  vertical-align:middle;
  line-height:30px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), inset 0px 2px 2px rgba(255, 255, 255, 0.8);
}

aside>button:hover {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
  transition: 0.4s ease;
  transform: rotateZ(-360deg) scale(0.95);
  animation: gelatine 0.4s 1;
}
aside>button:focus {
  outline: none;
  color: var(--orange);
  border-color:#fff;
  background:#fff;
  transition: 0.4s ease;
  transform:  rotateZ(360deg);
}

aside>div {
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  height:0px;
  overflow:hidden;
  background-color: var(--blue2);
  border-top: solid 1px rgba(0,0,0,0.1);
}
aside.show>div {
  height:120px;
  transition: 2s;
}
aside>div>p {
  margin-bottom:10px;
  padding:10px 5px 0 15px;
  font-size:15px;
  color: #fff;
  letter-spacing:0.2px;
  font-family: "Nunito", sans-serif;
  border-top: solid 1px rgba(255,255,255,0.7);
  user-select:none;
}
aside>div>p:after {
  content: "↓";
  margin-left:3px;
}
aside>div>a {
  float:left;
  color: #fff;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  font-family: 'Nunito', sans-serif;
  border: solid 1px #eaeaea;
  background:none;
  height:40px;
  padding:0 10px;
  line-height:40px;
  border-radius:6px;
  transition:0.4s;
  cursor: pointer; 
  margin-left:15px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), inset 0px 2px 2px rgba(255, 255, 255, 0.7); 
}
aside>div>a:hover {
  background: var(--orange);
  border-color: var(--orange);
  transition:0.4s;
  animation: gelatine 0.4s 1;
}
aside>div>a>i {
  font-weight:normal;
}
aside>div>a:last-child {
  color: #fff;
  border-color: var(--shadow-blue);
  background-image: linear-gradient(90deg,rgb(118, 167, 63) 0%,rgb(51, 143, 118) 40%,rgb(55, 141, 167) 50%,rgb(117, 152, 242) 70%,rgb(144, 118, 236) 100%);
  animation:animatedgradient 3s ease alternate infinite;
  background-size:200%;
  background-position: left;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), inset 0px 2px 2px rgba(255, 255, 255, 0.5);
  margin-left:10px;
}
aside>div>a:last-child:hover {
  background-position: right;
  animation: gelatine 0.4s 1;
}


aside>nav {
  border-top: solid 1px rgba(0, 0, 0, 0.2);
  width: 280px;
  height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 10px;
  padding-bottom:130px;
  scrollbar-width: thin;
  scrollbar-color: var(--shadow-blue) transparent;
}
aside>nav::-webkit-scrollbar {
  width: 6px;  
  height: 6px; 
}
aside>nav::-webkit-scrollbar-track {
  background: transparent;  
  border-radius: 0;
}
aside>nav>ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position:relative;
}
aside>nav>ul>li>a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 10px;
  color: var(--text);
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.4s, color 0.4s;
  background:none;
  border: solid 1px transparent;
  font-size:16px;
  font-weight:600;
  width:100%;
  cursor: pointer;
  user-select:none;
}

aside>nav>ul>li>a:hover {
  background-color: var(--orange);
  border-color: var(--shadow-orange);
  color: #fff;
  transition: background 0.4s, color 0.4s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.8);
}

a[aria-current="true"],
a[aria-current="page"] {
  background-color: var(--blue2);
  border-color: var(--shadow-blue);
  color: #fff;
  transition: background 0.4s, color 0.4s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
aside>nav>ul:hover li:not(:hover)>a { 
  color: var(--text2);
}

aside>nav>ul:hover li:not(:hover)>a[aria-current="page"],
aside>nav>ul:hover li:not(:hover)>a[aria-current="true"] {
  color: var(--blue);
  background: transparent;
  border-color: transparent;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), inset 0px 2px 4px rgba(255, 255, 255);
}

main {
  padding: 3px 160px 20px;
}
main>section {
  margin-bottom:95px;
}
main>section:last-of-type {
  margin-bottom:0;
}
main>section>div>h3 {
  margin-top:10px;
  margin-bottom:10px;
  display:block;
  color: var(--orange);
}
main>section>div>h3>i {
  color: var(--blue);
}
main>section>ul>li,
main>section>div>ul>li {
  list-style:none;
  margin-bottom:12px;
  display:block;
  line-height:22px;
}

main>section>ul>li:last-of-type,
main>section>div>ul>li:last-of-type {
  margin-bottom:0;
}

main>section:nth-child(9)>div>ul>li {
  padding-left:19px;
}

.s-referans {
  content: url('favicon.svg');
  display: inline-block;
  width: 23px;
  height: 23px;
  position:relative;
  top:3px;
}

main>section:first-child {
  display: grid;
  grid-template-columns: 45% 50%;
  gap: 50px;
  margin-bottom:30px;
}

main>section:first-child>div>h2 {
  font-family: "Tilt Neon", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.220;
  margin-bottom: 30px;
  color: var(--text);
  border-bottom: none;
  z-index:1;
  display:inline-block;
  position:relative;
  -webkit-animation:tilt-in-top-1 2s cubic-bezier(.25,.46,.45,.94) both;
  animation:tilt-in-top-1 2s cubic-bezier(.25,.46,.45,.94) both
}
main>section:first-child>h2 {
  font-family: "Tilt Neon", sans-serif;
  background-image: linear-gradient(90deg,rgb(118, 167, 63) 0%,rgb(51, 143, 118) 40%,rgb(55, 141, 167) 50%,rgb(117, 152, 242) 70%,rgb(144, 118, 236) 100%);
  color: transparent;
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: clamp(2rem, 4vw, 2rem);
  line-height: 1.220;
  display:inline-block;
  border:none;
  position:relative;
  z-index:1;
  -webkit-animation:tilt-in-top-1 1s cubic-bezier(.25,.46,.45,.94) both;
  animation:tilt-in-top-1 1s cubic-bezier(.25,.46,.45,.94) both
}

main>section:first-child>div h2>span {
  font-family: "Tilt Neon", sans-serif;
  background-image: linear-gradient(90deg,rgb(118, 167, 63) 0%,rgb(51, 143, 118) 40%,rgb(55, 141, 167) 50%,rgb(117, 152, 242) 70%,rgb(144, 118, 236) 100%);
  color: transparent;
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
}

main>section:first-child>div>p {
  font-size: clamp(1.2rem, 4vw, 1.4rem);
  line-height: 1.5;
}
main>section:first-child>p::before {
  content:"✓";
  margin-right:5px;
}
main>section:first-child>p:last-of-type {
  float:left;
  text-align:left;
}
main>section:first-child>p:last-of-type::before {
  content:"✅";
}
main>section:first-child>div>p>strong {
  font-style:italic;
}
main>section:first-child>div>p:last-of-type {
  margin-bottom: 30px;
}
main>section:first-child>div>p>strong:before {
  content:"👉";
  position:relative;
  top:-4px;
  margin-right:3px;
  display:inline-block;
  animation:blink 0.1s 12;
  animation-delay: 4s;
}
main>section:first-child>div:last-child{user-select:none;display:grid;grid-template-columns:repeat(4, 1fr);grid-template-rows:repeat(3, 1fr);gap:20px;width:100%;aspect-ratio:4/3}
main>section:first-child>div:last-child>div{width:100%;height:99%;position:relative;text-align:center;overflow:hidden;color:#fff;font-size:1.5rem;padding-top:30%
;background-color:var(--text-icon);background-repeat:no-repeat;background-position:center;background-size:contain;animation:fadeIn 0.4s linear 1 forwards;opacity:0}
main>section:first-child>div:last-child>div:nth-child(1){animation-delay:0.2s;background-color:#8071a8;border-radius:50% 50% 0 50%}main>section:first-child>div:last-child>div:nth-child(2){animation-delay:0.4s;border-radius:50% 50% 0 0;background-color:#8071a8;background-image:url('img-1.jpg')}main>section:first-child>div:last-child>div:nth-child(3){animation-delay:0.6s;background-color:#fe7519;border-radius:50%}main>section:first-child>div:last-child>div:nth-child(4){animation-delay:0.8s;border-radius:0 0 0 50%;background-color:#fe7519;background-image:url('img-4.jpg')}main>section:first-child>div:last-child>div:nth-child(5){animation-delay:1.8s;background-color:#67d7e1;background-image:url('serdararslan_profil.jpg')}main>section:first-child>div:last-child>div:nth-child(6){animation-delay:2s;background-color:#67d7e1;border-radius:0 50% 50% 50%}main>section:first-child>div:last-child>div:nth-child(7){animation-delay:2.2s;background-color:#6cc164;border-radius:50% 0 50% 0;background-image:url('img-7.jpg')}main>section:first-child>div:last-child>div:nth-child(8){animation-delay:1s;background-color:#6cc164;border-radius:50% 0 0 50%}main>section:first-child>div:last-child>div:nth-child(9){animation-delay:1.6s;background-color:#f5bec3;border-radius:0 50% 50% 0}main>section:first-child>div:last-child>div:nth-child(10){animation-delay:1.4s;border-radius:50%;background-color:#f5bec3;background-image:url('img-10.jpg')}main>section:first-child>div:last-child>div:nth-child(11){animation-delay:1.2s;background-color:#fcd659;border-radius:50% 0 50% 50%}main>section:first-child>div:last-child>div:nth-child(12){animation-delay:1s;border-radius: 50% 0 0 0;background-color:#fcd659;background-image:url('img-12.jpg')}

main>section:first-child>div:last-child>div::before,
main>section:first-child>div:last-child>div::after{font-family:"Nunito", sans-serif;position:absolute;display:block;bottom:12px;box-sizing: border-box;line-height:11px;height:12px;font-size:0.625rem;font-weight:500;padding:2px 5px 0 5px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;background:rgba(0,0,0,0.5);color:#fafafa}
main>section:first-child>div:last-child>div::after{bottom:0;padding-top:0;padding-bottom:1px;line-height:12px;font-weight:200}
main>section:first-child>div:last-child>div:nth-child(2)::before{font-family:"Nunito", sans-serif;content:"Can Rives"}main>section:first-child>div:last-child>div:nth-child(2)::after{content:"Dans Eğitmeni"}main>section:first-child>div:last-child>div:nth-child(4)::before{content:"Sedef Çam";text-align:right}main>section:first-child>div:last-child>div:nth-child(4)::after{content:"İç Mimar";text-align:right}main>section:first-child>div:last-child>div:nth-child(5)::before{content:"Serdar Arslan"}main>section:first-child>div:last-child>div:nth-child(5)::after{content:"Emlakçı"}main>section:first-child>div:last-child>div:nth-child(7)::before{content:"Kerim Bal";text-align:left}main>section:first-child>div:last-child>div:nth-child(7)::after{content:"Diyetisyen";text-align:left}main>section:first-child>div:last-child>div:nth-child(10)::before{content:"Sinem Aksu"}main>section:first-child>div:last-child>div:nth-child(10)::after{content:"Müzisyen"}main>section:first-child>div:last-child>div:nth-child(12)::before{content:"Ecem Kuş"}main>section:first-child>div:last-child>div:nth-child(12)::after{content:"Diş Doktoru"}


main>section:first-child>div:last-child>div:nth-child(1)::after,main>section:first-child>div:last-child>div:nth-child(3)::after,main>section:first-child>div:last-child>div:nth-child(6)::after,main>section:first-child>div:last-child>div:nth-child(8)::after,main>section:first-child>div:last-child>div:nth-child(9)::after,main>section:first-child>div:last-child>div:nth-child(11)::after{content:"Referans";background:none;font-size:14px;line-height:14px;position:relative;margin:0 auto}



main>section:first-child>div>a,
#bottomDemoBtn,
#bottomBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  position:relative;
  max-width: max-content;
  background: linear-gradient(90deg,rgb(118, 167, 63) 0%,rgb(51, 143, 118) 40%,rgb(55, 141, 167) 50%,rgb(117, 152, 242) 70%,rgb(144, 118, 236) 100%);
  background-size: 200%;
  background-position: left;
  color: #fff;
  font-size: 1.2rem;
  line-height:1.2rem;
  font-weight: 500;
  border: 0;
  padding: 12px 16px;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1),
    inset 0px 2px 2px rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: all 0.4s ease-in;
  animation: bounce-then-breathe 5s linear infinite;
  cursor:pointer;
  z-index:9;
}
#bottomBtn {
  position:fixed;
  right:160px;
  bottom:10px;
  animation:animatedgradient 3s ease forwards infinite;
}
#bottomDemoBtn {
  display:none;
  position:fixed;
  left: 160px;
  bottom: 10px;
  cursor: pointer;
  z-index:3;
}
main>section:first-child>div>a::after,
#bottomDemoBtn::after {
  content: "→";
  margin-left: 0.5em;
}
main>section:first-child>div>a:hover,
#bottomDemoBtn:hover,
#bottomBtn:hover {
  background-position: right;
  animation: gelatine 0.4s 1;
  text-shadow: 0 0 5px #fff;
}

.cursor::after{content:"";border-right:solid 2px;margin-left:2px;opacity:0;animation:blink 0.6s infinite}


.btn-two {
  width:%100;
  position:relative;
  margin: 2em 0;
  display:inline-flex;
  justify-content: center;
}
.btn-two>a {
  padding: 1em 2em;
  font-size: 1.2rem; 
  
  align-items: center;
  text-decoration: none; 
  color: #fafafa; 
  background-color: var(--orange); 
  border-radius: 30px 0 0 30px;
  border: solid 1px rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 3px rgba(50, 50, 50, 0.2),
    inset 0px 4px 4px rgba(255, 255, 255, 0.9);
}
.btn-two>a>i {
   margin-right:0.5rem;
}
.btn-two>a:last-child {
   background-color: var(--green3); 
   border-radius:0 30px 30px 0;
   margin-left:4px;
}
.btn-two>a:hover {
  background: var(--blue);
  color: #fff;
}
.btn-two>a:active {
  background: var(--green);
  color: #fff;
  text-shadow: 0 0 5px #fff;
  box-shadow:
    inset  0 2px 3px rgba(0, 0, 0, 0.4);
}


main>section.page {
  display: block;
  margin:0;
  width:100%;
  float:left;
  position:relative;

}

main>section:first-child>a>i {
  display:block;
  font-size:60px;
}
main>section:nth-child(2) {
  overflow:hidden;
  display:flex;
  margin-top:10px;
}
main>section:nth-child(2)>figure {
  margin-right: 30px;
}
main>section:nth-child(2)>div>h3 {
  margin-top:10px;
  margin-bottom:0;
  padding-top:10px;
  border-top: dashed 1px var(--blue);
  color: var(--text2);
}
main>section:nth-child(2)>div>h3::before {
  content:"✅";
  margin-right:3px;
}

main>section:nth-child(3)>h3 {
  display:block;
  border:none;
  font-weight:600;
  margin-top:30px;
  margin-bottom:15px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  font-family: "Tilt Neon", sans-serif;
  background-image: linear-gradient(90deg,rgb(118, 167, 63) 0%,rgb(51, 143, 118) 40%,rgb(55, 141, 167) 50%,rgb(117, 152, 242) 70%,rgb(144, 118, 236) 100%);
  color: transparent;
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
}

main>section:nth-child(3) p {
  margin-bottom:10px;
}
main>section:nth-child(3)>p:nth-child(4)>strong {
  display:block;
  font-size:1.3rem;
  color: var(--orange);
  margin:20px 0 20px 0;
}
main>section:nth-child(3)>p:nth-child(4)>strong::before {
  content:"🎉";
  margin-right:3px;
  position:relative;
  top:-2px;
}
main>section:nth-child(3)>ul {
  width:47%; 
  padding:20px;
  border-radius:20px;
  float:left;
  box-shadow: 0 0 30px var(--shadow-blue);
  background: var(--bg);
}
main>section:nth-child(3)>ul:last-of-type {
  width:47%;
  margin-left:6%;
  
}
main>section:nth-child(3)>ul>li>i {
  width:20px;
  color: var(--text2);
}
main>section:nth-child(3)>ul:first-of-type>li:nth-child(2) {
  font-weight:600;
  font-size:0.9rem;
}
main>section:nth-child(3)>ul:first-of-type>li:nth-child(2)::before {
  content:"✅";
  margin-right:6px;
  margin-left:-3px;
}
main>section:nth-child(3)>ul>li>b {
  font-weight:600;
  color:green;
  font-size:1rem;
}


main>section:nth-child(3)>p:nth-child(7) {
  font-size:1rem;
  padding:10px;
  border-radius:8px;
  margin-bottom:55px;
  margin-top:70px;
  border: solid 1px var(--orange);
  float:left;
  width:100%;
  color: var(--orange);
  box-shadow: 0 0 30px var(--shadow-orange);
}
main>section:nth-child(3)>p:nth-child(7)>strong {
  color: var(--blue); 
}
main>section:nth-child(3)>p:nth-child(7)::before {
  content:"✓";
  margin-right:5px;
}
main>section:nth-child(3)>p:nth-child(8) {
  font-weight:600;
}
main>section:nth-child(3)>p:nth-child(8)::before {
  content:"👉";
  position:relative;
  top:-4px;
  margin-right:3px; 
}
main>section:nth-child(3)>p:last-of-type {
  font-weight:500;
  font-size:1.2rem;
  border-left: solid 5px var(--orange);
  border-right: solid 5px var(--orange);
  padding:10px 10px;
  border-radius: 10px;
  margin-top:50px;
}
main>section:nth-child(3)>p:last-of-type>strong {
  color: green;
}
main>section:nth-child(4) {
  overflow:hidden;
  display:flex;
  margin-top:10px;
  box-shadow: 0 0 30px var(--shadow);
  padding:20px;
  border-radius:20px;
}
main>section:nth-child(4)>figure {
  margin-left: 30px;
}
main>section:nth-child(4)>div>h3 {
  margin-top:10px;
  margin-bottom:0;
  padding-top:10px;
  border-top: dashed 1px var(--blue);
  color: var(--text2);
}
main>section:nth-child(4)>div>h3::before {
  content:"🎯";
  margin-right:3px;
}

main>section:nth-child(5) {
  display: grid;
  grid-template-columns: 45% 60%;
  place-items: center; 
  gap: 15px; 
  position:relative;
}
main>section:nth-child(5)>div:first-child>h2 {
  display:block;
  border:none;
  margin-bottom:25px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  font-family: "Tilt Neon", sans-serif;
  background-image: linear-gradient(90deg,rgb(118, 167, 63) 0%,rgb(51, 143, 118) 40%,rgb(55, 141, 167) 50%,rgb(117, 152, 242) 70%,rgb(144, 118, 236) 100%);
  color: transparent;
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
}

main>section:nth-child(5) p {
  margin-bottom:10px;
}
main>section:nth-child(5)>div>p:nth-child(2) {
  font-size: clamp(1.4rem, 5vw, 1.6rem);
  line-height: 1.5;
  margin-bottom:20px;
}
main>section:nth-child(5)>div>p:nth-child(2)::before {
  content:"🏆";
  margin-right:5px;
  position:relative;
  top:-3px;
  font-size:20px;
}
main>section:nth-child(5)>div>ul {
  margin-left:20px; 
}
main>section:nth-child(6) {
  overflow:hidden;
  margin-bottom:60px;
}
main>section:nth-child(6) p {
  margin-bottom:10px;
}
main>section:nth-child(6)>p:nth-child(2)::before {
  content:"📷";
  margin-right:5px;
}
main>section:nth-child(6)>p:nth-child(3)::before {
  content:"✅";
  margin-right:7px;
}
main>section:nth-child(6)>p:nth-child(4) {
  border-left: solid 4px var(--orange);
  border-right: solid 4px var(--orange);
  padding:10px 10px;
  border-radius: 10px;
  margin:60px 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  font-family: "Tilt Neon", sans-serif;
}

main>section:nth-child(6)>p:nth-child(6)::before {
  content:"❤️";
  margin-right:6px;
}
main>section:nth-child(6)>p:nth-child(7)::before {
  content:"🥇";
  margin-right:3px;
}
main>section:nth-child(6)>p:last-of-type {
  margin-bottom:60px;
  font-size:1.1rem;
}
main>section:nth-child(6)>figure {
  float:left;
  width:29%;
  display:block;
  position:relative;
  margin-top:40px;
  margin-right:4%;
}
main>section:nth-child(6)>figure>img {
  width:100%;
  height:auto;
}
main>section:nth-child(6)>div {
  float:left;
  width:67%;
  margin-top:30px;
}
main>section:nth-child(6)>div>p:nth-child(2)>strong {
  display:block;
  margin-bottom:10px;
}
main>section:nth-child(7) {
  margin:80px 0;
  display:block;
}
main>section:nth-child(7)>p>b::before {
  content:"👍";
  margin-right:5px;
  position:relative;
  top:-2px;
}

main>section:nth-child(8) {
  margin:30px 0;
  display:block;
  min-height:270px;
  position:relative;
}
main>section:nth-child(8)>p>strong {
  display:block;
}
main>section:nth-child(8)>p>strong::before {
  content:"✅";
  margin-right:5px;
}
main>section:nth-child(7)>ul,
main>section:nth-child(8)>ul {
  list-style: none;
  padding: 0;
  margin:10px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
  gap: 14px;
  grid-auto-rows: 50px; 
}
main>section:nth-child(7)>ul>li,
main>section:nth-child(8)>ul>li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1; 
  background: var(--bg2);
  font-size: 2.4rem;
  color: var(--text-icon);
  transition: color 0.4s ease;
  border-radius:6px;
}
.fa-facebook-messenger{color:#0084FF}main .fa-instagram{font-size:40px;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);-webkit-background-clip:text;-webkit-text-fill-color:transparent}main .fa-square-facebook{color:#1877f2}main .fa-tiktok{font-size:30px;text-shadow:2px -2px 0 #fe2C55,-2px 2px 0 #25f4ee}main .fa-linkedin{color:#0077b5}main .fa-pinterest{color:#e60023}main .fa-youtube{color:#ff0000;font-size:34px}.fa-telegram{color:#0088cc}.fa-spotify{color:#1DB954}.fa-reddit-alien{color:#FF4500}.fa-twitch{color:#9146FF}.fa-medium{color:#00ab6c;font-size:30px}.fa-blogger{color:#f57d00}.fa-soundcloud{color:#FF5500;font-size:28px}.fa-vimeo{color:#1ab7ea}.fa-discord{color:#7289da;font-size:30px}.fa-snapchat{color:#FFFC00;width:34px;height:34px;background:#444;position:relative;font-size:27px;padding:4px 0 0 3px;margin-left:1px;display:inline-block;border-radius:4px}.fa-behance{color:#1769ff;font-size:30px}.fa-dribble{color:#ea4c89;}.fa-google{color:#4285F4;font-size:36px}.fa-stack-overflow{color:#fe7a15}.s-sahibinden{width:36px;height:36px;background-color:#ffeb01;color:#000;font-weight:900;font-size:32px;font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;border-radius:4px;font-style:normal}.s-sahibinden::before{content:"S"}main .fa-phone,.fa-phone-square{color:#229746}.fa-whatsapp{color:#19c021}.fa-location-arrow{color:#007bff}main .fa-envelope,.fa-address-book,.fa-share-alt,.fa-clock,.fa-file-alt{color:var(--text2)}.fa-location-dot{color:#ea4335}.s-canva{content:url('canva-icon.svg');display:block;width:100%;height:36px}.s-capcut{content:url('capcut-icon.svg');display:block;width:100%}
main>section:nth-child(9) {
  position:relative;
  box-shadow: 0 0 30px var(--shadow);
  padding:20px;
  border-radius:20px;
  overflow:hidden;
}
main>section:nth-child(9)>div {
  float:left;
  width:50%;
}
main>section:nth-child(9)>div>h4 {
  font-weight: 600;
  font-size:1.2rem;
  color: var(--text);
  margin-top:30px;
  padding-top:30px;
  border-top: dashed 1px var(--blue);
}
main>section:nth-child(9)>div>p:nth-child(3) {
  line-height:20px;
  margin-bottom:12px;
  padding-left: 19px;
  color: var(--text);
  font-size:0.9rem;
}
main>section:nth-child(9)>div>p:nth-child(3)::before {
  content: "→";
  margin-right: 5px;
  margin-left:-19px;
}
main>section:nth-child(9)>div:last-child {
  float:right;
}
main>section:nth-child(5)>div>ul>li::before,
main>section:nth-child(9)>div>ul>li::before {
  list-style:none;
  content:"✓";
  margin-right:7px;
  margin-left:-19px;
  color: green;
}
main>section:nth-child(5)>div>ul>li::before {
  color: var(--orange); 
}
main>section:nth-child(10),
main>section:nth-child(11) {
  box-shadow: 0 0 30px var(--shadow);
  padding:20px;
  border-radius:20px;
}
main>section:nth-child(10)>p,
main>section:nth-child(12)>p {
  margin-bottom:10px;
}

footer {
  position:relative;
  width:100%;
  float:left;
  margin-top:50px;
  padding:40px 160px 80px 160px;
  background: #242526;
}
footer>section {
  width:25%;
  float:left;
  display:block;
}
footer>section>h3 {
  font-weight:600;
  color: var(--blue);
  font-size:1.1rem;
  position:relative;
  margin-bottom:20px;
}
footer>section>h3::after {
  content:"";
  overflow:hidden;
  display:block;
  position:absolute;
  bottom:-5px;
  left:0;
  width:60px;
  height:2px;
  background: var(--orange);
}
footer>section>ul {
  list-style: none;
  padding: 0;
}
footer>section:last-of-type>ul {
  width:50%;
  float:left;
}
footer>section>ul>li {
  margin-bottom:8px;
}
footer>section>ul>li>a {
  color:#bdbdbd;
  text-decoration:none;
  user-select:none;
}
footer>section>ul>li>a:hover {
  color: var(--orange);
  text-decoration:none;
}
footer>section>ul>li>a:active,
footer>section>ul>li>a:focus {
  color: var(--green);
}
footer>section>ul>li>a[aria-current="page"] {
  color: var(--blue);
  background:none;
  box-shadow: none;
}
footer>section>h3>i,
footer>section>ul>li>a>i {
  display:inline-block;
  width:20px;
}
footer>section>h3>i {
  color: var(--orange);
}
footer>p {
  float:left;
  width:100%;
  margin-top:20px;
  padding-top:10px;
  border-top: solid 1px #444;
  text-align: left;
  font-size: 0.875rem;
  color: #777;
}

button {
  user-select: none;
  -webkit-user-select: none; 
  -moz-user-select: none;   
  -ms-user-select: none;   
}

.progress-wrap {
  position: fixed;
  bottom: 105px;
  right: 15px;
  width: 38px;
  height: 38px;
  z-index: 999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.11);
  opacity: 0;
  transform: translateY(50px);
  pointer-events: none;
  transition: 0.4s;
}
.progress-wrap.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: 0.4s;
}
.progress-circle {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}
.progress-circle circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.progress-background {
  stroke: #eee;
  opacity:0.5;
}
.progress-bar {
  stroke: var(--blue);
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.25s ease-out;
}
.progress-wrap:hover .progress-bar {
  stroke: var(--orange);
  transition: 0.4s;
}
.progress-icon {
  font-size: 20px;
  color: var(--orange);
  pointer-events: none;
  z-index: 1;
  transition: 0.4s;
}
.progress-wrap:hover .progress-icon {
  color: var(--blue);
  transition:0.4s;
}

.theme-button {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  position: fixed;
  font-size:22px;
  right: 18px;
  bottom: 10px;
}

.theme-button::before {
  content: '🌙';
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.theme-button.light-mode::before {
  content:"🌙"; 
}
.theme-button.dark-mode::before {
  content: "🌞";
}
.fix-support {
  position: fixed;
  bottom: 50px;
  right: 15px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  z-index: 999;
  cursor: pointer;
  border: none;
  display: block;
  text-align:center;
 
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.11);
  transition: 0.4s;
  color: var(--blue);
  padding-top:3px;
  background: var(--blur-bg2);
  text-decoration:none;
}
.fix-support>i {
   font-size:20px;
   margin:0;
   padding:0;
}
.fix-support>span {
  font-family: "Nunito", sans-serif;
  user-select:none;
  font-size:0.6rem;
  display:inline-block;
  position:relative;
  top:-15px;
  color: var(--orange);
}

.fix-support:hover {
  color: #fff;
  background: var(--orange);
}
.fix-support:hover>span,
.fix-support:focus>span {
  color: #fff;
}
.fix-support:focus {
  color: #fff;
  background:  var(--green);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.animate {
  opacity: 0.01;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 1s ease-out;
  will-change: opacity, transform;
}

.animate.active {
  opacity: 1;
  transform: translateY(0);
}

.animate.slide-up {
  transform: translateY(20px);
}
.animate.slide-up.active {
  opacity: 1;
  transform: translateY(0);
}

.animate.slide-left {
  transform: translateX(20px);
}
.animate.slide-left.active {
  opacity: 1;
  transform: translateX(0);
}
.animate.slide-right {
  transform: translateX(-20px);
}
.animate.slide-right.active {
  opacity: 1;
  transform: translateX(0);
}
.animate.bounce-down {
  transform: translateY(-50px);
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-name: none;
}

.animate.bounce-down.active {
  opacity: 1;
  animation-name: bounceDownAnim;
  
}

 

@media (max-width: 1224px) {
  header {
    padding: 50px 20px 60px; 
  }
  header>figure {
	padding:0 20px;
	height:35px;
  }
  header>figure>img {
    width:31px;
    height:31px;
    margin:2px 3px 0 0;
  }
  header>figure>figcaption {
	font-size:0.9rem;
	padding-top: 0;
	margin-top:-1px;
  }
  header>figure>figcaption>strong {
	font-size:0.730rem;
	line-height:0.830rem;
	margin-top:-2px;
  }
  header>a {
    top:3px;
	font-size:1rem;
    right:65px;
    padding: 2px 10px 0 10px;
  }
  header>a>i {
    font-size: 0.9rem;
  }
  header>button {
    right:20px;
	top:3px;
	font-size:1.8rem;
  }
  h1 {
    font-size: 2rem;
    letter-spacing: 1.1px;
  }
  aside>h2 {
    height:34px;
	line-height:34px;
  }
  aside>button {
    top:4px;
	width:24px;
	height:24px;
	line-height:24px;
  }
  nav {
    height: calc(100vh - 34px);
    padding-bottom:120px;
  }
  main {
    padding: 20px;
  }
  footer {
    padding:20px 20px 65px 20px;
  }
  .progress-wrap {
    bottom: 165px;
	right:6px;
  }
  .theme-button {
    bottom: 70px;
	right: 9px;
  }
  .fix-support {
    bottom: 110px;
    right:5px;
  }
  #bottomDemoBtn {
    left: 20px;
  }
  #bottomBtn {
    right: 20px;
  }
}

@media (max-width: 1124px) {
  main>section:first-child {
    margin-bottom:50px;
  }
  main>section:nth-child(6)>figure {
    width:36%;
  }
  main>section:nth-child(6)>div {
    width:60%;
  }
}

@media (max-width: 991px) {
  footer>section {
    width:33.333%;
  }
  footer>section:last-of-type {
    width:100%;
	margin-top:30px;
  }
  footer>section:last-of-type>ul:first-of-type {
	width:45%;
  }
  footer>section:last-of-type>ul:last-of-type {
	width:55%;
  }
  footer>section:last-of-type>ul>li {
    float:inherit;
	width:25%;
	text-align:center;
  }
  footer>section:last-of-type>ul:first-of-type>li {
	width:30%;
  }
  footer>section:last-of-type>ul:first-of-type>li:first-child,
  footer>section:last-of-type>ul:first-of-type>li:last-child {
	width:20%;
  }
  footer>section:last-of-type>ul>li:first-child {
	text-align:left;
  }
  footer>section:last-of-type>ul:last-of-type>li:first-child,
  footer>section:last-of-type>ul>li:last-child {
	text-align:right;
  }
}

@media (max-width: 865px) {
  header {
    padding: 50px 20px 50px; 
  }
  header::after {
    height: 62px;
  }
  header>figure {
	padding:0 5px;
  }
  header>a {
    top:3px;
	font-size:1rem;
    right:50px;
    padding: 2px 10px 0 10px;
  }
  header>a>i {
    font-size: 0.9rem;
  }
  header>button {
    right:7px;
  }
  h1>strong {
    display:block;
  }
  main>section:first-child {
    gap: 40px;
  }
  main>section:first-child>div:last-child {
    gap: 15px;
  }
  footer>section:last-of-type>ul:first-of-type,
  footer>section:last-of-type>ul:last-of-type {
	width:50%;
  }
  footer>section:last-of-type>ul>li,
  footer>section:last-of-type>ul:first-of-type>li,
  footer>section:last-of-type>ul:first-of-type>li:first-child,
  footer>section:last-of-type>ul:first-of-type>li:last-child,
  footer>section:last-of-type>ul>li:first-child,
  footer>section:last-of-type>ul:last-of-type>li:first-child,
  footer>section:last-of-type>ul>li:last-child {
    float:inherit;
	width:inherit;
	text-align:left;
  }
}

@media (max-width: 815px) {
  main>section:first-child {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "lastDiv"
      "firstDiv";
    gap: 30px;
	margin-bottom:0;
  }
  main>section:first-child>div:first-child {
    display: grid;
    place-items: center;
  } 
  main>section:first-child>div:first-child {
    grid-area: firstDiv;
    text-align: center;
  }
  main>section:first-child>div:last-child {
    grid-area: lastDiv;
    gap: 15px;
  }
  main>section:nth-child(3)>ul,
  main>section:nth-child(3)>ul:last-of-type {
    width:100%; 
  }
  main>section:nth-child(3)>ul:last-of-type {
    margin-top:40px;
	margin-left:0;
  }
  main>section:nth-child(5) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 15px;
  } 
  main>section:nth-child(5)>div:last-child {
    width:100%;
	margin-top:30px;
  } 
}

@media (max-width: 768px) {
  nav {
    width: 280px;
  }
  main>section:first-child>div>h2>span {
    display:block;
  }
  main>section:nth-child(2),
  main>section:nth-child(4) {
    display:block;
    margin-top:10px;
	overflow:visible;
  }
  main>section:nth-child(2)>figure {
    margin:30px 0;
	text-align:center;
  } 
  main>section:nth-child(4)>figure {
    margin:30px 0 0;
	text-align:center;
  } 
  main>section:nth-child(2)>figure>img {
    width:60%;
	height:auto;
  }
  main>section:nth-child(4)>figure>img {
    width:100%;
	height:auto;
  }
  main>section:nth-child(2)>div>h3,
  main>section:nth-child(4)>div>h3 {
    margin-top:20px;
    padding-top:20px;
  }
  main>section:nth-child(6) p {
    margin-bottom:30px;
  }
  main>section:nth-child(8) {
    min-height:auto;
	margin-bottom:70px;
  } 
  main>section:nth-child(9)>div {
    width:100%;
  }
  footer>section,
  footer>section:last-of-type {
	width:100%;
	margin-top:50px;
  }
  footer>section:first-of-type {
	margin-top:0;
  }
  footer>section>h3::after {
    width:100%;
    height:1px;
  }
  footer>section:last-of-type>ul:first-of-type,
  footer>section:last-of-type>ul:last-of-type {
	width:100%;
  }
  footer>section>ul>li,
  footer>section:last-of-type>ul>li,
  footer>section:last-of-type>ul:first-of-type>li,
  footer>section:last-of-type>ul:first-of-type>li:first-child,
  footer>section:last-of-type>ul:first-of-type>li:last-child,
  footer>section:last-of-type>ul>li:first-child,
  footer>section:last-of-type>ul:last-of-type>li:first-child,
  footer>section:last-of-type>ul>li:last-child {
    float:left;
	width:50%;
	max-width:50%;
	text-align:left;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	margin-bottom:15px;
	font-size:0.9rem;
  }
  .btn-two {
    display:block;
	padding-bottom:80px;
  }
  .btn-two>a {
    padding: 1em 0;
	width:49%;
	float:left;
    display:inline-flex;
    justify-content: center;
  }
  .btn-two>a:last-child {
    margin-left:2%;
  }
}
@media (max-width: 568px) { 
  main>section:nth-child(6)>figure {
    width:100%;
	text-align:center;
  }
  main>section:nth-child(6)>figure>img {
    width:60%;
  }
  main>section:nth-child(6)>div {
    width:100%;
  }
}
@media (max-width: 539px) {
  main>section:first-child {
    display: flex;
    flex-direction: column;
  }
  main>section:first-child>div:first-child {
    order: 2; 
  }
  main>section:first-child>div:last-child {
    order: 1;
  }
  main>section:first-child>div:last-child {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  main>section:first-child>div:last-child>div {
    aspect-ratio: 1 / 1;
    width: 100%;
    position: relative;
  }
   main>section:first-child>div:first-child {
    margin-top:40px;
  }
  .btn-two>a {
	font-size:1rem;
  }
}
@media (max-width: 460px) {
  main>section:first-child {
    gap: 0;
  }
  main>section:first-child>div:last-child>div{font-size:18px;line-height:20px;padding-top:27%}main>section:first-child>div:last-child>div:nth-child(1)::after,main>section:first-child>div:last-child>div:nth-child(3)::after,main>section:first-child>div:last-child>div:nth-child(6)::after,main>section:first-child>div:last-child>div:nth-child(8)::after,main>section:first-child>div:last-child>div:nth-child(9)::after,main>section:first-child>div:last-child>div:nth-child(11)::after{font-size:11px;line-height:12px}
  main>section:nth-child(6)>figure>img {
    width:75%;
  }
}
@media (max-width: 410px) {
  h1 {
    font-size: 1.8rem;
  }
  main>section:nth-child(6)>figure>img {
    width:85%;
  }
}
@media (max-width: 389px) {
  main>section:first-child>div>h2 {
    font-size:2.2rem;
  }
  main>section:first-child>div>h2>span {
    font-size:1.9rem;
  }
  #bottomDemoBtn>span {
    display:none;
  }
  .btn-two>a {
	font-size:0.950rem;
	text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
	display:block;
	padding:1rem 0.8rem;
	text-align:center;
  }
  .btn-two>a>i {
	margin-right:0.3rem;
  }
}
@media (max-width: 370px) {
  h1 {
    font-size: 1.6rem;
  }
 
  main>section:nth-child(6)>figure>img {
    width:100%;
  }
}
@media (max-width: 360px) {
  .btn-two>a {
	font-size:0.9rem;
  }
  .btn-two>a>i {
	margin-right:0.1rem;
  }
}
@media (max-width: 355px) {
  .btn-two>a {
	font-size:0.850rem;
	padding:1rem 1rem;
	line-height:0.9rem;
  }
}
@keyframes blink{0%{opacity:0}40%{opacity:0}50%{opacity:1}90%{opacity:1}100%{opacity:0}} 
@keyframes fadeIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@-webkit-keyframes tilt-in-top-1{0%{-webkit-transform:rotateY(30deg) translateY(-300px) skewY(-30deg);transform:rotateY(30deg) translateY(-300px) skewY(-30deg);opacity:0}100%{-webkit-transform:rotateY(0deg) translateY(0) skewY(0deg);transform:rotateY(0deg) translateY(0) skewY(0deg);opacity:1}}@keyframes tilt-in-top-1{0%{-webkit-transform:rotateY(30deg) translateY(-300px) skewY(-30deg);transform:rotateY(30deg) translateY(-300px) skewY(-30deg);opacity:0}100%{-webkit-transform:rotateY(0deg) translateY(0) skewY(0deg);transform:rotateY(0deg) translateY(0) skewY(0deg);opacity:1}}
@keyframes bounce-then-breathe{0%,5%,10%,15%{transform:translateY(0)}2.5%,7.5%,12.5%{transform:translateY(-15px)}20%,40%,60%,80%,100%{transform:translateY(0)}30%,50%,70%,90%{transform: translateY(-5px)}}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(calc(-250px*7))}}
@keyframes animatedgradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes bounceDownAnim{0%{opacity:0;transform:translateY(-50px)}60%{opacity:1;transform:translateY(20px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}
@keyframes gelatine{0%,100%{transform:scale(1, 1)}25%{transform:scale(0.9, 1.1)}50%{transform: scale(1.1, 0.9)}75%{transform:scale(0.95, 1.05)}}