:root {
   --text-color-primary: rgba(255, 255, 255, 1);
   --text-color-secondary: rgba(94, 104, 161, 1);
   --text-color-footer: rgba(93, 98, 131, 1);
   --text-color-cyan: rgba(72, 238, 245, 1);
   --text-color-hint: rgba(132, 137, 174, 1);
   --text-color-red: rgb(255, 16, 16);
   --text-color-user-icon: rgba(62, 65, 86, 1);

   --bg-color-primary: rgba(4, 15, 26, 1);
   --bg-color-secondary: rgba(8, 38, 67, 1);
   --bg-color-footer: rgba(6, 23, 40, 1);
   --bg-color-contact-us: rgba(21, 44, 169, 1);
   --bg-color-transparent: rgba(0, 0, 0, 0);
   --bg-color-divider: rgba(35, 51, 146, 1);
   --bg-color-user-icon: rgba(29, 31, 43, 1);
   --bg-color-socials: rgba(53, 65, 159, 1);
   --bg-color-socials-hover: rgba(150, 45, 204, 1);

   --border-color: rgba(255, 255, 255, 0.2);
   --border-color-checkbox: rgba(90, 99, 144, 1);
}

@font-face {
   font-display: swap;
   font-family: 'Unbounded';
   font-style: normal;
   font-weight: 400;
   src: url('./fonts/unbounded-400.woff2') format('woff2');
}

@font-face {
   font-display: swap;
   font-family: 'Unbounded';
   font-style: normal;
   font-weight: 700;
   src: url('./fonts/unbounded-700.woff2') format('woff2');
}

@font-face {
   font-display: swap;
   font-family: 'Giga Sans';
   font-style: normal;
   font-weight: 400;
   src: url('./fonts/giga-sans-400.woff2') format('woff2');
}

@font-face {
   font-display: swap;
   font-family: 'Giga Sans';
   font-style: normal;
   font-weight: 700;
   src: url('./fonts/giga-sans-700.woff2') format('woff2');
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.7); border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.2) }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.4) }

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Giga Sans', sans-serif;
   color: var(--text-color-primary);
}

a {
   text-decoration: none;
   cursor: pointer;
}

html {
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   scroll-behavior: smooth;
}

body {
   width: 100%;
   background-color: var(--bg-color-primary);
   
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: start;
}

header {
   position: fixed;
   top: 0px;
   left: 0px;
   right: 0px;
   z-index: 2;
   border-bottom: 1px solid var( --border-color);
   transition: background-color .2s ease-in-out;
}

header.scroll, header.active {
   background-color: var(--bg-color-primary);
   border-bottom: none;
}

main {
   padding-top: 89px;
   z-index: 1;
}

footer {
   z-index: 1;
   background-color: var(--bg-color-footer);
}

h1 {
   font-family: 'Unbounded', sans-serif;
   font-size: 60px;
   line-height: 74.4px;
   font-weight: 700;
}

h1.intro {
   font-family: 'Unbounded', sans-serif;
   font-size: 90px;
   line-height: 111px;
   font-weight: 700;
}

h2 {
   font-family: 'Unbounded', sans-serif;
   font-size: 40px;
   line-height: 49.6px;
   font-weight: 700;
}

h3 {
   font-family: 'Unbounded', sans-serif;
   font-size: 30px;
   line-height: 37.2px;
   font-weight: 700;
}

h3.intro-counter {
   font-family: 'Unbounded', sans-serif;
   font-size: 70px;
   line-height: 87px;
   font-weight: 700;
   background-image: linear-gradient(61.63deg, #C588F7 13.96%, #48EEF5 79.93%);
   color: transparent;
   background-clip: text;
   -webkit-background-clip: text;
}

h4 {
   font-size: 25px;
   line-height: 35px;
   font-weight: 700;
}

h5 {
   font-size: 25px;
   line-height: 27px;
   font-weight: 400;
}

h6 {
   font-family: 'Unbounded', sans-serif;
   font-size: 25px;
   line-height: 31px;
   font-weight: 700;
}

header a.text-normal:hover, footer a.text-normal:hover {
   text-decoration: none;
   color: var(--text-color-cyan);
}

a:hover {
   text-decoration: underline;
}

input[type="checkbox"] {
   width: 21px;
   height: 21px;
   border: 1px solid var(--border-color-checkbox);
}

textarea {
   resize: none;
   width: 100%;
   height: 82px;
   margin-bottom: 27px;
   padding-bottom: 53px;
   border: none;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   background-color: var(--bg-color-transparent);
}

.input-text-container {
   width: 100%;
   margin-bottom: 23px;
   padding-bottom: 13px;
   border: none;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   background-color: var(--bg-color-transparent);
}

.input-text-container::placeholder, textarea::placeholder {
   color: var(--text-color-primary);
}

.input-text-container:focus-visible, textarea:focus-visible {
   border-bottom: 1px solid var(--text-color-cyan);
   outline: none;
}

.btn-primary {
   font-family: 'Unbounded', sans-serif;
   font-size: 16px;
   line-height: 20px;
   font-weight: 400;
   text-align: center;
   cursor: pointer;

   padding-left: 32px;
   padding-right: 32px;
   padding-top: 16px;
   padding-bottom: 16px;

   border-radius: 52px;
   border: none;
   color: var(--text-color-primary);
   box-shadow: 0px 0px 20px 0px rgba(72, 238, 245, 0.6);
   background: linear-gradient(63.52deg, #C588F7 13.59%, #48EEF5 94.68%);
   background-size: 130% 130%;
   transition: background-position 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.btn-primary:hover {
   background-position: 100% 100%;
   box-shadow: 0px 0px 30px 0px rgba(72, 238, 245, 0.8);
   text-decoration: none;
}

.btn-socials {
   width: 40px;
   height: 40px;
   border-radius: 20px;
   background-color: var(--bg-color-socials);
}

.btn-socials:hover {
   background-color: var(--bg-color-socials-hover);
}

.btn-files {
   width: 180px;
   height: 40px;
   background-color: var(--bg-color-transparent);
   border: none;

   font-family: 'Unbounded', sans-serif;
   font-size: 16px;
   line-height: 20px;
   font-weight: 400;
}

.btn-files:hover {
   cursor: pointer;
}

.row-start {
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: flex-start;
}

.row-end {
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: flex-end;
}

.row-start-start {
   display: flex;
   align-items: flex-start;
   flex-direction: row;
   justify-content: flex-start;
}

.row-center {
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: center;
}

.row-between {
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
}

.row-between-start {
   display: flex;
   align-items: flex-start;
   flex-direction: row;
   justify-content: space-between;
}

.row-around {
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-around;
}

.col-start {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: center;
}

.col-start-start {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: start;
}

.col-start-center {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}

.col-end-start {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: flex-end;
}

.col-end-center {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: flex-end;
}


.col-center {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
}

.text-normal {
   font-size: 18px;
   line-height: 27px;
   font-weight: 400;
}

.text-input {
   font-size: 17px;
   line-height: 27px;
   font-weight: 400;
}

.text-hint {
   font-size: 16px;
   line-height: 27px;
   font-weight: 400;
}

.text-faq {
   font-family: 'Unbounded', sans-serif;
   text-align: start;
   font-size: 20px;
   line-height: 25px;
   font-weight: 700;
}

.text-color-footer {
   color: var(--text-color-footer);
}

.text-color-primary {
   color: var(--text-color-primary);
}

.text-color-secondary {
   color: var(--text-color-secondary);
}

.text-color-cyan {
   color: var(--text-color-cyan);
}

.text-color-hint {
   color: var(--text-color-hint);
}

.text-color-red {
   color: var(--text-color-red);
}

.f-wrap {
   flex-wrap: wrap;
}

.f1 {
   flex: 1;
}

.g-20 {
   gap: 20px
}

.g-30 {
   gap: 30px
}

.g-50 {
   gap: 50px
}

.h-60 {
   height: 60px;
}

.h-485 {
   height: 485px;
}

.h-full {
   height: 100%;
}

.w-133 {
   width: 133px;
}

.w-552 {
   width: 552px;
}

.w-800 {
   width: 800px;
}

.w-full {
   width: 100%;
}

.w-50p {
   width: calc((100% - 20px) / 2);
}

.mw-220 {
   max-width: 220px;
}

.mw-278 {
   max-width: 278px;
}

.mw-340 {
   max-width: 340px;
}

.mw-480 {
   max-width: 480px;
}

.mw-510 {
   max-width: 510px;
}

.mw-590 {
   max-width: 590px;
}

.mw-900 {
   max-width: 900px;
}

.mw-952 {
   max-width: 952px;
}

.mw-1325 {
   max-width: 1325px;
}

.mw-full {
   max-width: 100%;
}

.mh-130 {
   max-height: 130px;
}

.p-30 {
   padding: 30px;
}

.py-12 {
   padding-top: 12px;
   padding-bottom: 12px;
}

.py-27 {
   padding-top: 27px;
   padding-bottom: 27px;
}

.py-36 {
   padding-top: 36px;
   padding-bottom: 36px;
}

.py-52 {
   padding-top: 52px;
   padding-bottom: 52px;
}

.py-184 {
   padding-top: 184px;
   padding-bottom: 184px;
}

.px-24 {
   padding-left: 24px;
   padding-right: 24px;
}

.px-32 {
   padding-left: 32px;
   padding-right: 32px;
}

.px-46 {
   padding-left: 46px;
   padding-right: 46px;
}

.px-70 {
   padding-left: 70px;
   padding-right: 70px;
}

.pt-12 {
   padding-top: 12px;
}

.pt-16 {
   padding-top: 16px;
}

.pt-25 {
   padding-top: 25px;
}

.pt-32 {
   padding-top: 32px;
}

.pt-50 {
   padding-top: 50px;
}

.pt-54 {
   padding-top: 54px;
}

.pt-80 {
   padding-top: 80px;
}

.pt-100 {
   padding-top: 100px;
}

.pt-135 {
   padding-top: 135px;
}

.pt-190 {
   padding-top: 190px;
}

.pt-196 {
   padding-top: 196px;
}

.pb-5 {
   padding-bottom: 5px;
}

.pb-10 {
   padding-bottom: 10px;
}

.pb-14 {
   padding-bottom: 14px;
}

.pb-24 {
   padding-bottom: 24px;
}

.pb-28 {
   padding-bottom: 28px;
}

.pb-32 {
   padding-bottom: 32px;
}

.pb-40 {
   padding-bottom: 40px;
}

.pb-44 {
   padding-bottom: 44px;
}

.pb-50 {
   padding-bottom: 50px;
}

.pb-56 {
   padding-bottom: 56px;
}

.pb-65 {
   padding-bottom: 65px;
}

.pb-70 {
   padding-bottom: 70px;
}

.pb-140 {
   padding-bottom: 140px;
}

.pb-200 {
   padding-bottom: 200px;
}

.pl-10 {
   padding-left: 10px;
}

.pl-18 {
   padding-left: 18px;
}

.pl-52 {
   padding-left: 52px;
}

.pl-64 {
   padding-left: 64px;
}

.pl-230 {
   padding-left: 230px;
}

.pr-4 {
   padding-right: 4px;
}

.pr-30 {
   padding-right: 30px;
}

.pr-52 {
   padding-right: 52px;
}

.pr-60 {
   padding-right: 60px;
}

.pr-530 {
   padding-right: 530px;
}

.mt-4 {
   margin-top: 4px;
}

.mb-15 {
   margin-bottom: 15px;
}

.mb-24 {
   margin-bottom: 24px;
}

.mb-25 {
   margin-bottom: 25px;
}

.mb-27 {
   margin-bottom: 27px;
}

.mb-33 {
   margin-bottom: 33px;
}

.mb-46 {
   margin-bottom: 46px;
}

.mb-53 {
   margin-bottom: 53px;
}

.mb-130 {
   margin-bottom: 130px;
}

.ml-20 {
   margin-left: 20px;
}

.ml-52 {
   margin-left: 52px;
}

.mr-2 {
   margin-right: 2px;
}

.z1 {
   z-index: 1;
}

.tr-180 {
   transform: rotate(180deg);
}

.align-center {
   align-self: center;
}

.text-center {
   text-align: center;
}

.fw-400 {
   font-weight: 400;
}

.fw-700 {
   font-weight: 700;
}

.text-underline {
   text-decoration: underline;
}

.d-none {
   display: none;
}

.pos-rel {
   position: relative;
}

.bg-contact-us {
   position: absolute;
   top: 150px;
   left: 0px;
   width: 85%;
   max-width: 1800px;
}

.contact-us-container {
   position: relative;
   padding-top: 44px;
   padding-bottom: 50px;
   padding-left: 30px;
   padding-right: 30px;
   border-radius: 30px;
   background-color: var(--bg-color-contact-us );
}

.contact-us-mascot {
   width: 130px;
   position: absolute;
   right: 0px;
   bottom: -80px;
}

.main-contact-us-mascot {
   width: 130px;
   position: absolute;
   right: -30px;
   top: -55px;
   transform: rotate(10deg);
}

.footer-border {
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.h4-line {
   width: 0;
   height: 2px;
   margin-left: 35px;
   border-radius: 2px;
   background-color: var(--text-color-cyan);
   transition: width 1s ease-in-out;
}

.h4-line.active {
   width: 150px;
}

.h1-1 {
   position: absolute;
   left: 0px;
   top: 30px;
   z-index: 3;

}

.h1-2 {
   position: absolute;
   right: 0px;
   top: 112px;
   z-index: 2;
}

.h1-3 {
   position: absolute;
   left: 76px;
   top: 252px;
   z-index: 3;
}

.img-intro {
   position: absolute;
   left: 41%;
   top: 0px;
   z-index: 2;
   transform: translateX(-50%);
}

.p-intro {
   position: absolute;
   width: 400px;
   right: 0px;
   top: 419px;
   z-index: 3;
}

.intro-numb-divider {
   width: 142px;
   height: 3px;
   background-color: var(--bg-color-divider);
   margin-top: 13px;
   margin-bottom: 27px;
}

.bg-intro {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
}

.bg-services {
   position: absolute;
   bottom: 0;
   right: 0;
}

.page-intro-desc-p {
   position: absolute;
   top: 0px;
   right: 0px;
   width: 400px;
}

.difference-container {
   width: calc((100% - 100px) / 3);
}

.anim-fade-in {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.anim-fade-in.visible {
   opacity: 1;
   transform: translateY(0);
}

.results-anim {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.results-anim.visible {
   opacity: 1;
   transform: translateY(0);
}

.main-title-img-anim {
   opacity: 0;
   transition: opacity 0.6s ease-out;
}

.main-title-img-anim.visible {
   opacity: 1;
}

.main-title-left-anim {
   opacity: 0;
   transform: translateX(-40px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.main-title-right-anim {
   opacity: 0;
   transform: translateX(40px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.main-title-left-anim.visible, .main-title-right-anim.visible {
   opacity: 1;
   transform: translateX(0);
}

.svc-container {
   width: calc((100% - 60px) / 4);
   max-width: 304px;
   aspect-ratio: 152 / 135;
   position: relative;
   background-image: url('./assets/svc_container.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.svc-container:hover {
   background-image: url('./assets/svc_container_active.png');
   background-size: contain;
}

.svc-container>h6 {
   font-size: 20px;
   line-height: 26px;
   height: 112px;
}

.svc-arrow {
   position: absolute;
   bottom: 10px;
   right: 15px;
   content: url("./assets/arrow.svg");
}

.svc-arrow.active {
   content: url("./assets/arrow_active.svg");
}

.portfolio-project {
   width: calc((100% - 60px) / 3);
   max-width: 405px;
   aspect-ratio: 81 / 59;
   background-position: center;
   background-size: 100%;
   background-repeat: no-repeat;
   transition: background-size .3s ease-in-out, opacity 0.6s ease-out, transform 0.6s ease-out;
}

.portfolio-project:hover {
   background-size: 120%;
   text-decoration: none;
}

.portfolio-project-content {
   opacity: 0;
   background: linear-gradient(0deg, var(--bg-color-secondary) 0%, rgba(4, 15, 26, 0) 70%);
   transition: opacity .3s ease-in-out;
}

.portfolio-project-content:hover, .portfolio-project-content:focus {
   opacity: 1;
}

.bg-contact-us {
   position: absolute;
   top: 85px;
   left: 0px;
}

.contact-us-container-bg {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-60%, -30%);
}

.review-container {
   width: 0px;
   height: 370px;
   overflow: hidden;
   padding-top: 18px;
   padding-bottom: 18px;
	transition: width .3s ease-in-out, padding .3s ease-in-out, border .3s ease-in-out;
}

.review-container.active {
   width: calc((100% - 60px) / 3);
   padding: 24px 18px 28px 18px;
   border-radius: 30px;
   margin-left: 15px;
   margin-right: 15px;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.review-container>p {
   max-width: 100%;
   display: -webkit-box;
   line-clamp: 9;
   -webkit-line-clamp: 9;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 14px;
   line-height: 20px;
}

.review-container .text-input {
   overflow: hidden;
   word-wrap: break-word;
}

.review-user-img {
   width: 65px;
   height: 65px;
   border-radius: 40px;
   background-color: var(--bg-color-user-icon);
}

.review-user-img>p {
   color: var(--text-color-user-icon);
}

.bg-faq {
   position: absolute;
   top: 0px;
   right: 0px;
   opacity: 0.8;
}

.accordion {
	cursor: pointer;
	transition: 0.4s;
	background-color: transparent;
	border: none;
}

.icon-expand {
	width: 24px;
	height: 24px;
	background-image: url(./assets/arrow_down.svg);
	background-size: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform .2s ease-in-out;
}

.faq-btn {
	cursor: pointer;
	transition: 0.4s;
	background-color: transparent;
	border: none;
}

.faq-btn .text-faq {
	transition: color .2s ease-in-out;
}

.active .icon-expand {
	background-image: url(./assets/cross.svg);
	transform: rotate(-180deg);
}

.active .text-faq {
   color: var(--text-color-cyan);
}

.panel {
	max-height: 0px;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.faq-bg {
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   width: 100%;
   height: 100%;
   max-height: 927px;
   background: linear-gradient(180deg, #041B5A 0%, rgba(4, 15, 26, 0) 100%);
}

.bg-faq-img {
   position: absolute;
   top: 340px;
   left: 24px;
   width: 80%;
}

.thank-you h1 {
   width: 100%;
   text-align: center;
   font-family: 'Unbounded', sans-serif;
   font-size: 60px;
   line-height: 74.4px;
   font-weight: 700;
   color: var(--text-color-cyan);
}

.thank-you h2 {
   width: 100%;
   text-align: center;
   font-family: 'Unbounded', sans-serif;
   font-size: 35px;
   line-height: 45.5px;
   font-weight: 700;
}

.thank-you h3 {
   width: 100%;
   text-align: center;
   font-family: 'Unbounded', sans-serif;
   font-size: 25px;
   line-height: 35px;
   font-weight: 400;
}

.contact-us-hand {
   position: absolute;
   top: 710px;
   left: 0px;
   width: 100%;
   max-width: 728px;
   opacity: 0;
   transform: translateX(-20px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.contact-us-hand.visible {
   opacity: 1;
   transform: translateX(0);
}

#header-toggler {
   display: none;
   height: 52px;
   width: 62px;
   background-color: var(--bg-color-transparent);
   border: none;
   padding-left: 10px;
}

#header-toggler>div {
   width: 33px;
   height: 27px;
   background-image: url('./assets/header_toggler.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   transition: transform .2s ease-in-out;
}

#header-toggler:hover {
   cursor: pointer;
}

#header-toggler.active>div {
   width: 24.8px;
   height: 24.8px;
   background-image: url('./assets/header_toggler_close.svg');
   transform: rotate(180deg);
}

#services a {
   text-decoration: none;
}

#page-intro-desc>img {
   top: 63px;
}

#differences {
   background-color: var(--bg-color-secondary);
}

#differences>img {
   top: -180px;
}

#portfolio {
   background-image: url('./assets/bg_portfolio.png');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

#mob-nav {
   display: none;
   width: 100%;
   height: 0px;
   position: fixed;
   top: 88px;
   left: 0px;
   right: 0px;
   z-index: 2;
   background-color: var(--bg-color-primary);
   transition: height .2s ease-in-out, padding-top .2s ease-in-out;
   padding-left: 46px;
   padding-right: 46px;
   overflow: hidden;
}

#mob-nav>a {
   width: 100%;
   opacity: 0;
   padding-top: 26px;
   padding-bottom: 26px;
   transition: opacity .2s ease-in-out;
}

#mob-nav.active>a {
   opacity: 1;
}

#mob-nav.active {
   height: 100%;
   padding-top: 34px;
   padding-bottom: 66px;
}

/* Animation */

.typing-header {
   overflow: hidden;
   display: inline-block;
   visibility: hidden;
}

/* Laptop styles, xl */

@media screen and (max-width: 1260px) {
   .xl-z1 {
      z-index: 1;
   }

   .xl-d-none {
      display: none;
   }

   .xl-p-22 {
      padding: 22px;
   }

   .xl-py-50 {
      padding-top: 50px;
      padding-bottom: 50px;
   }

   .xl-pr-46 {
      padding-right: 46px;
   }

   .xl-pb-35 {
      padding-bottom: 35px;
   }

   .xl-mh-100 {
      max-height: 100px;
   }

   .page-intro-desc-p {
      position: relative;
      top: 0;
      left: 0;
      padding-top: 26px;
      width: auto;
   }

   .review-container {
      width: 280px;
      min-width: 280px;
      height: 100%;
      padding: 24px 18px 28px 18px;
      border-radius: 30px;
      margin-left: 15px;
      margin-right: 15px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
   }

   .review-container.active {
      width: 280px;
   }

   .review-container>p {
      line-clamp: 7;
      -webkit-line-clamp: 7;
   }

   .bg-faq {
      opacity: 0.1;
   }

   .img-intro {
      left: 50%;
   }

   .h1-2 {
      z-index: 3;
   }

   .svc-container>h6 {
      font-size: 18px;
      line-height: 24px;
      height: 90px;
   }

   .svc-arrow {
      bottom: 5px;
      right: 10px;
   }

   #reviews-container {
      height: 370px;
      width: 100%;
      display: flex;
      align-items: flex-start;
      flex-direction: row;
      justify-content: flex-start;
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
      scroll-behavior: smooth;
      padding-bottom: 12px;
   }
}

/* Tablet styles, lg */

@media screen and (max-width: 1024px) {
   h2 {
      font-size: 30px;
      line-height: 37.2px;
   }

   .lg-col-start {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: flex-start;
   }

   .lg-col-center {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: flex-start;
   }

   .lg-row-start {
      display: flex;
      align-items: flex-start;
      flex-direction: row;
      justify-content: center;
   }

   .lg-row-center {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: center;
   }

   .lg-row-between {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
   }

   .lg-self-end {
      align-self: flex-end;
   }

   .lg-g-20 {
      gap: 20px;
   }

   .lg-g-42 {
      gap: 42px;
   }

   .lg-g-52 {
      gap: 52px;
   }

   .lg-f-wrap {
      flex-wrap: wrap;
   }

   .lg-w-full {
      width: 100%;
   }

   .lg-mw-300 {
      max-width: 300px;
   }

   .lg-mw-380 {
      max-width: 380px;
   }

   .lg-mw-full {
      max-width: 100%;
   }

   .lg-mh-130 {
      max-height: 130px;
   }

   .lg-py-90 {
      padding-top: 90px;
      padding-bottom: 90px;
   }

   .lg-py-100 {
      padding-top: 100px;
      padding-bottom: 100px;
   }

   .lg-pt-0 {
      padding-top: 0px;
   }

   .lg-pt-20 {
      padding-top: 20px;
   }

   .lg-pt-74 {
      padding-top: 74px;
   }

   .lg-pt-90 {
      padding-top: 90px;
   }

   .lg-pt-100 {
      padding-top: 100px;
   }

   .lg-pt-130 {
      padding-top: 130px;
   }

   .lg-pb-26 {
      padding-bottom: 26px;
   }

   .lg-pb-30 {
      padding-bottom: 30px;
   }

   .lg-pb-40 {
      padding-bottom: 40px;
   }

   .lg-pb-46 {
      padding-bottom: 46px;
   }

   .lg-pb-65 {
      padding-bottom: 65px;
   }

   .lg-pb-80 {
      padding-bottom: 80px;
   }

   .lg-pb-90 {
      padding-bottom: 90px;
   }

   .lg-pb-100 {
      padding-bottom: 100px;
   }

   .lg-pb-140 {
      padding-bottom: 140px;
   }

   .lg-pl-0 {
      padding-left: 0px;
   }

   .lg-pr-0 {
      padding-right: 0px;
   }

   .lg-mt-30 {
      margin-top: 30px;
   }

   .lg-ml-0 {
      margin-left: 0px;
   }

   .lg-d-none {
      display: none;
   }

   .lg-o-5 {
      opacity: .5;
   }

   .h1-1 {
      top: 50px;
   }

   .h1-2 {
      top: 140px;
   }

   .h1-3 {
      top: 230px;
   }

   .lg-h1 {
      font-size: 45px;
      line-height: 56px;
   }

   h1.lg-intro {
      font-size: 70px;
      line-height: 91px;
   }

   .p-intro {
      width: 50%;
   }

   .difference-container {
      width: calc((100% - 42px) / 2);
   }

   .svc-container {
      width: calc((100% - 20px) / 2);
      background-position: left;
   }

   .portfolio-project {
      width: calc((100% - 20px) / 2);
   }

   .bg-faq {
      right: -250px;
   }

   .lg-no-overflow {
      overflow: hidden;
   }

   .contact-us-hand {
      opacity: 0.5;
   }

   .svc-container>h6 {
      font-size: 20px;
      line-height: 26px;
      height: 70px;
   }

   .svc-arrow {
      bottom: 10px;
      right: 15px;
   }

   #differences>img {
      top: -80px;
   }

   #header-toggler {
      display: flex;
   }

   #mob-nav {
      display: flex;
   }
}

/* Tablet styles ONLY, lgo */

@media screen and (min-width: 551px) and (max-width: 1024px) {
   .lgo-w-50p {
      width: calc((100% - 20px) / 2);
   }

   .lgo-row-start-center {
      display: flex;
      align-items: flex-start;
      flex-direction: row;
      justify-content: center;
   }

   .lgo-row-between {
      display: flex;
      align-items: flex-start;
      flex-direction: row;
      justify-content: space-between;
   }

   .lgo-f-wrap {
      flex-wrap: wrap;
   }

   .lgo-g-20 {
      gap: 20px;
   }

   .lgo-mb-53 {
      margin-bottom: 53px;
   }

   .lgo-mb-42 {
      margin-bottom: 42px;
   }

   .lgo-h2 {
      font-size: 45px;
      line-height: 55.8px;
   }

   .lgo-h3 {
      font-size: 40px;
      line-height: 49.6px;
   }
}

/* Small tablet styles, md */

@media screen and (max-width: 701px) {
   .md-col-start {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: flex-start;
   }

   .md-col-center {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
   }

   .md-g-0 {
      gap: 0px
   }

   .md-g-18 {
      gap: 18px
   }

   .md-w-full {
      width: 100%;
   }

   .md-mw-230 {
      max-width: 230px;
   }

   .md-mw-320 {
      max-width: 320px;
   }

   .md-h-auto {
      height: auto;
   }

   .md-pl-0 {
      padding-left: 0px;
   }

   .md-pt-24 {
      padding-top: 24px;
   }

   .md-pt-30 {
      padding-top: 30px;
   }

   .md-pt-65 {
      padding-top: 65px;
   }

   .md-pb-18 {
      padding-bottom: 18px;
   }

   .md-pb-20 {
      padding-bottom: 20px;
   }

   .md-pb-23 {
      padding-bottom: 23px;
   }

   .md-pb-26 {
      padding-bottom: 26px;
   }

   .md-pb-35 {
      padding-bottom: 35px;
   }

   .md-pb-44 {
      padding-bottom: 44px;
   }

   .md-pb-60 {
      padding-bottom: 60px;
   }

   .md-pb-80 {
      padding-bottom: 80px;
   }

   .md-px-20 {
      padding-left: 20px;
      padding-right: 20px;
   }

   .md-px-24 {
      padding-left: 24px;
      padding-right: 24px;
   }

   .md-mb-23 {
      margin-bottom: 23px;
   }

   .md-d-none {
      display: none;
   }

   .md-o-2 {
      opacity: .2;
   }

   .md-self-center {
      align-self: center;
   }

   .md-h1 {
      font-size: 35px;
      line-height: 43.4px;
   }

   .md-h3 {
      font-size: 20px;
      line-height: 25px;
   }

   .md-h4 {
      font-size: 18px;
      line-height: 25px;
   }

   .md-h5 {
      font-size: 17px;
      line-height: 21px;
   }

   .md-p {
      font-size: 15px;
      line-height: 21px;
   }

   .md-text-center {
      text-align: center;
   }

   h1.md-intro {
      position: relative;
      font-size: 50px;
      line-height: 62px;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
      padding-bottom: 15px;
   }

   .md-p-intro {
      position: relative;
      font-size: 16px;
      line-height: 28px;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
   }

   .md-stat {
      width: calc(50% - 9px);
      padding-bottom: 18px;
   }

   .md-stat>h3 {
      font-size: 40px;
      line-height: 50px;
   }

   .md-stat>p {
      font-size: 15px;
      line-height: 20px;
   }

   .portfolio-project {
      height: 230px;
   }

   .bg-faq {
      right: -350px;
   }

   .contact-us-hand {
      top: 750px;
   }

   .thank-you h1 {
      font-size: 35px;
      line-height: 43.4px;
   }

   .thank-you h2 {
      font-size: 25px;
      line-height: 30px;
   }

   .thank-you h3 {
      font-size: 20px;
      line-height: 25px;
   }
}

@media screen and (max-width: 630px) {
   .svc-container>h6 {
      font-size: 15px;
      line-height: 21px;
   }

   .portfolio-project {
      height: 200px;
   }
}

/* Big phones styles, sm */

@media screen and (max-width: 551px) {
   .sm-d-none {
      display: none;
   }

   .sm-col-center {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
   }

   .sm-text-center {
      text-align: center;
   }

   .sm-g-24 {
      gap: 24px
   }

   .sm-w-full {
      width: 100%;
   }

   .sm-h-40 {
      height: 40px;
   }

   .sm-pt-5 {
      padding-top: 5px;
   }

   .sm-pt-53 {
      padding-top: 53px;
   }

   .sm-pt-60 {
      padding-top: 60px;
   }

   .sm-pb-4 {
      padding-bottom: 4px;
   }

   .sm-pb-12 {
      padding-bottom: 12px;
   }

   .sm-pb-18 {
      padding-bottom: 18px;
   }

   .sm-pb-20 {
      padding-bottom: 20px;
   }

   .sm-pb-24 {
      padding-bottom: 24px;
   }

   .sm-pb-66 {
      padding-bottom: 66px;
   }

   .sm-pl-0 {
      padding-left: 0px;
   }

   .sm-px-20 {
      padding-left: 20px;
      padding-right: 20px;
   }

   .sm-self-center {
      align-self: center;
   }

   .sm-p {
      font-size: 15px;
      line-height: 24px;
   }

   .sm-text-xl {
      font-size: 40px;
      line-height: 49.6px;
   }

   .sm-h1 {
      font-size: 35px;
      line-height: 43.4px;
   }

   .sm-h3 {
      font-size: 26px;
      line-height: 32.2px;
   }

   .sm-h4 {
      font-size: 20px;
      line-height: 35px;
   }

   .sm-h5 {
      font-size: 20px;
      line-height: 27px;
   }

   .sm-text-default {
      font-size: 13px;
      line-height: 20px;
   }

   .svc-container {
      width: 310px;
      background-position: center;
   }

   .svc-container>h6 {
      font-size: 18px;
      line-height: 24px;
      padding-top: 30px;
   }

   .sm-portfolio-scrollable {
      height: 220px;
      width: 100%;
      display: flex;
      align-items: flex-start;
      flex-direction: row;
      justify-content: flex-start;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      flex-wrap: nowrap;
      scroll-behavior: smooth;
   }

   .sm-btn {
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 16px !important;
      padding-right: 16px !important;
      font-size: 12px;
      line-height: 15px;
   }

   .portfolio-project {
      display: inline-block;
      height: 100%;
      width: 300px;
   }
   
   .portfolio-project-content>h3 {
      font-size: 20px;
      line-height: 26px;
   }
   
   .portfolio-project-content>p {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 15px;
      line-height: 21px;
   }

   .contact-us-hand {
      top: 650px;
      left: -50px
   }

   #mob-nav {
      top: 76px;
   }

   #differences>img {
      top: 100px;
   }
}

/* Mobile phone styles, xs */

@media screen and (max-width: 431px) {
   .contact-us-hand {
      top: 700px;
   }
}