body{margin:0;background: #130E17;box-sizing:border-box;line-height: 1.7;-webkit-text-size-adjust:100%;}
.completePage{position:relative;width:100%;min-height:100vh;margin:auto;display:block;max-height:fit-content;scroll-behavior:smooth;}

header {position: fixed; top:0;  background: #130E17; width:100%; z-index: 20;}
header a {text-decoration: none;}

nav {display: flex; justify-content: space-between; align-items: center; margin: 5px 7% 5px 7%; padding: 5px 0px;}
.nav_home, .previous, .next {display: flex; align-items: center; gap: 10px; font-size: 0;}
.direction {display: flex; align-items: center; gap: 5px;}
button {display: flex;  padding: 5px 20px; justify-content: center; align-items: center; gap: 10px; border-radius: 7px; background: #8A89AA; border: solid 1px #8A89AA;}
button:hover {border: 1px solid #8A89AA; background: #130E17; transition-duration: 200ms;}
a:hover{color: #8A89AA; transition-duration: 200ms;}

.hero .container, .roadmap .container, .goals .container, .video .container, .studycases .container, .foot .container {margin: 0px 7%; width: 86%; padding: 0px 0px;}
.design .container {margin: 30px 10% 0px 10%; width: 80%; position: relative;}
.hero .container, .goals .container, .studycases .container {display: flex; flex-direction: column; justify-content: space-between; align-items: center; align-self: center; padding-top: 70px; gap: 20px;}
.roadmap .container {display: flex; flex-direction: column; align-items: center; gap: 50px; padding-top: 50px; padding-bottom: 70px;}

.textbox {display: flex; flex-direction: column; align-items: flex-start; gap: 5px;}
.roadmap .textbox {width: 100%;}
.studycases .textbox, .goals .textbox {width: 100%;}
.imgname_box {display: flex; flex-direction: column; align-items: center; justify-content: center; gap:5px}

.hero {height:100vh;}
.hero img {zoom: 35%;}

.roadmap, .studycases {position: relative; background: radial-gradient(50% 50% at 50% 50%, #D5CDCA 0%, #DFDAD8 100%);}
.roadmap_display { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; z-index: 10; gap: 50px;}
.fondito_left {position: absolute; left: 0; top: 35%; width: 90%; height: 75px; flex-shrink: 0; border-radius: 0px 18px 18px 0; background: linear-gradient(180deg, #8D819C 0%, #51506F 100%);}
.fondito_right {position: absolute; right: 0; bottom: 20%; width: 90%; height: 75px; flex-shrink: 0; border-radius: 18px 0px 0px 18px;background: linear-gradient(180deg, #8D819C 0%, #51506F 100%);}

ul {list-style: none; margin: 0px 0px 5px -40px;}
.goals li {display: inline-flex; margin-bottom: 20px;}
li img {padding-right: 10px; margin-top: 6px;}

.video {background: radial-gradient(24.86% 50% at 50% 50%, #9F868F 0%, #8B7E9B 100%);}
.videoPart {position: relative; height: fit-content; padding: 100px; width: 50%;}
.mockup {position: absolute;zoom: 75%; text-align: center; left: 50%; margin-left: -124px; box-shadow: -12px 12px 52px 0px rgba(0, 0, 0, 0.76); border-radius: 50px; }
.contentMockup {position: relative; text-align: center; zoom: 80%; padding-top: 7px; margin-left: -25px;}
video {border-radius: 45px;}

.design_content {width: 100%;  display: flex; flex-direction: column-reverse; flex-wrap: nowrap; justify-content: end; align-items: center; gap: 40px;}
.design_content_right {display: flex; flex-direction: column; align-items: flex-start; gap: 20px;}
.phone_gold {position: absolute; bottom: 0;border-radius: 50px 50px 0px 0px;}
.fonts {padding-bottom: 100px;}

.studycases .lists {display: flex; flex-direction: column; gap: 0px;}
.studycases .lists li {display: inline-flex;}
.studycases .imgbox {display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 30px;}
.studycases  {width: 100%; overflow: hidden; position: relative;}
.carousel-wrapper {display: flex; transition: transform 0.5s ease-in-out; min-width: 100%;}
.studycases .container {width: 80%; transition: transform 0.5s ease-in-out; min-width: 80%;}
.tabs {display: flex; justify-content: center; margin: 50px 0px 100px 0px;}
.tab {padding: 10px 20px; cursor: pointer;  background:#78698D;margin: 0 5px; border-radius: 5px; color: #F8F9F9;}
.tab.active {background:#130E17; color: #F8F9F9;}

.roadmap img {box-shadow: -12px 12px 52px 0px rgba(0, 0, 0, 0.3); border-radius: 28px;}
.goals img {box-shadow: -12px 12px 52px 0px rgba(0, 0, 0, 0.76);zoom: 90%; }
.design .phone_gold {box-shadow: -12px -12px 52px 0px rgba(0, 0, 0, 0.76); }
.studycases img {box-shadow: -12px 12px 52px 0px rgba(0, 0, 0, 0.3); border-radius: 28px; zoom:70%;}

/* FONTS */

h2 {font-family: Righteous; font-size: 32px; font-style: normal;font-weight: 400; line-height: normal; margin: 0%;}
p, .tab {font-family: Afacad; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; }
.lists p  {margin: 0px;}
a, li {font-family: Afacad; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%;}
.imgname {color: #130E17;text-align: center;font-family: Englebert; font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;}
.imgname {margin: 10px;}

.hero .container h2, .goals .container h2, .design .container h2, .hero .container p, .goals .container p, .design .container p, .previous, .next, .goals li, .foot a, .foot p {color: #F8F9F9;}

.goals .container h2, .hero .container h2, .design .container h2, .studycases .container h2 {text-align: center; width: 100%;}

.roadmap .container h2, .studycases .container h2, .studycases .container p, button a, .studycases li {color: #130E17;}
.nav_home {color: #8A89AA;}

@media only screen and (min-width: 576px) {

.hero img {zoom: 55%;}

.design_content {align-items: flex-start;}
.design_content_right {flex-direction: row;}
.hero .container, .goals .container, .studycases .container {padding: 70px 0px; gap: 20px;}

}

@media only screen and (min-width: 768px) {
.videoPart {width: 70%;}
.mockup {zoom: 95%;  margin-left: -122px;}
.contentMockup {zoom: 100%;}

.design_content {flex-direction: row-reverse;}

.hero img {zoom: 80%;}

/* FONTS */

h2 {font-size: 48px;}
p {font-size: 18px;}
a, li, .imgname {font-size: 18px;}

.goals .container h2, .hero .container h2, .design .container h2, .studycases .container h2 {text-align: left; width: fit-content;}
.hero .container {padding: 150px 0px;}

.goals img {zoom:100%;}
.studycases img {zoom:100%;}

}

@media only screen and (min-width: 992px) {
    .videoPart {width: 85%;}
    .mockup {zoom: 100%; margin-left: -105px;}
    .contentMockup {zoom: 105%; padding-top: 10px; margin-left: 12px;}

.nav_home, .previous, .next {gap: 15px; font-size: 18px;}
.direction {gap: 50px;}

.hero img {zoom: 100%;}
.roadmap .container, .goals .container, .video .container, .studycases .container, .foot .container {padding: 50px 0px;}

}

@media only screen and (min-width: 1220px) {
    
.design .container {margin: 100px 10% 0px 10%;}
.hero .container, .goals .container, .studycases .container {flex-direction: row; padding-top: 10%;}



.textbox {gap: 20px;}
.roadmap .textbox, .hero .textbox {width: 35%;}
.studycases .textbox, .goals .textbox {width: 50%;}

.roadmap_display {justify-content: space-between; gap: 30px;}
.fondito_left {width: 60%;}
.fondito_right {width: 60%;}

ul {margin-left:-35px;}
li {width: 100%;}

.design_content {flex-direction: row; gap: 15%;}
.design_content_right {gap: 60px; flex-direction: column;}





}