/*==========  Animations  ==========*/
@keyframes leftToRightLoop {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%)
    }
}

/*========  Custom elements  =======*/
.purple-plate {
    min-width: 80px;
	background: #5e6be8;
	color: #fff;
	padding: 0.75rem 2rem;
	border-radius: 2rem;
	font-weight: 600;
    text-align: center;
}

/* Title */
.title {
	gap: 1rem;
    text-align: center;
}

.title p {
	width: min(80ch, 100%);
	text-align: center;
	font-weight: 500;
}

.title > div {
    gap: 1.5rem;
}

.title > div button {
    display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #f1f1f4;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 2rem;
	font-size: 1rem;
	font-weight: 500;
    cursor: pointer;
}

.title > div button i {
    color: #0c64e4;
    font-size: 1.05rem;
}

.title button > i:before, .cards div > i:before {
    vertical-align: bottom;
}

/* Cards */
.cards {
    width: 100%;
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%/1, max(300px, 100%/4)), 1fr));
    /* display: flex;
	flex-flow: wrap; */
	justify-content: center;
	gap: 1.5rem;
}

.cards > div {
	display: inline-grid;
    flex: 0 0 260px;
	gap: 1rem;
	background: #fff;
	padding: 1rem;
	border-radius: 0.5rem;
	text-align: center;
	box-shadow: 0 4px 4px 0 #dadada40;
    justify-items: center;
}

.cards div > i {
	background: #5e6be8;
	color: #fff;
    padding: 0.85rem;
	border-radius: 2rem;
    font-size: 1.15rem;
	aspect-ratio: 1;
}

/* Tech */
.langs {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr 2fr;
}

.vertical-cards {
    /* justify-content: space-around; */
    gap: 0.8rem;
}

.vertical-cards > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
    background: #f9f9f9;
	padding: 1.025rem 1.5rem;
	border-radius: 0.5rem;
}
#tech .vertical-cards > div{
    cursor: pointer;
}

.vertical-cards > div.active{
    background: #5e6ce81a;
    color: #5e6be8;
    transition: .2s;
    cursor: default;
}

.vertical-cards i, .icon-circle, #migration div.relative:before {
	min-height: 1rem;
	min-width: 1rem;
    display: inline-block;
    background: #fff;
	padding: 0.85rem;
	border-radius: 50%;
	text-align: center;
	aspect-ratio: 1;
}

.langs > .sections {
}

.langs > .sections h4 {
    color: #5e6be8;
}

.bits {
    display: grid;
	grid-template-columns: repeat(auto-fill, 95px);
	gap: 1em;
    justify-content: center;
}

.bits > div {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 1rem;
    padding: 10px;

    box-shadow: 0 4px 4px 0 #dadada50;
    border-style: solid;
    border-width: 0 0 2px;
    border-color: #02010100;
}

.bits img {
    aspect-ratio: 1 / 1;
    object-fit: scale-down;
    max-width: 3rem;
}
.sections section{
    display: flex; flex-flow: column;
    gap: 2rem; /*1.5rem */
    margin-top: 5.5rem;
}
.sections section:not(.active){
    display: none;
}

/* Switch */
.switch-box {
    gap: 0.25rem;
    align-items: center;
    color: #5e6be8;
	text-align: end;
	font-size: 0.8rem;
    font-weight: bold;
}

.switch {
    display: inline-block;
    width: 60px;
    height: 34px;
    min-width: 60px;
}
  
.switch input {
    width: 0;
    height: 0;
    opacity: 0;
}
  
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    transition: 0.4s;
    cursor: pointer;
}
  
.slider:before {
    content: "";
    height: 26px;
    width: 26px;
    position: absolute;
    left: 4px;
    bottom: 4px;
    background: white;
    transition: 0.4s;
}
  
input:checked + .slider {
    background: #5e6be8;
}
  
input:focus + .slider {
    box-shadow: 0 0 1px #7b84d5;
}
  
input:checked + .slider:before {
    transform: translateX(26px);
}
  
.slider.round {
    border-radius: 34px;
}
  
.slider.round:before {
    border-radius: 50%;
}

/* Process */
.procedure {
    display: grid;
	grid-template-areas:
    'g1 . . . . .'
    '. g2 g3 . . .'
    '. . . g4 g5 .'
    '. . . . g6 g7';
	gap: 0.5em;
}
.m-procedure{ display: none; }

.procedure > div {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    padding: 1rem 1.5rem;
	box-shadow: 0 4px 4px 0 #dadada40;
	border-radius: 0.5rem;
}

.procedure > div:nth-child(1) {
    grid-area: g1;
}

.procedure > div:nth-child(2) {
    grid-area: g2;
}

.procedure > div:nth-child(3) {
    grid-area: g3;
}

.procedure > div:nth-child(4) {
    grid-area: g4;
	margin: 0 0.25rem 0 -0.25rem;
    transform: rotate(351.42deg);
}

.procedure > div:nth-child(5) {
    grid-area: g5;
}

.procedure > div:nth-child(6) {
    grid-area: g6;
}

.procedure > div:nth-child(7) {
    grid-area: g7;
}

.procedure .icon-circle, #migration div.relative:before {
	background: #5e6be8;
    color: #fff;
}

.procedure i, .cards i.icon-circle {
    max-width: 0;
	display: inline-grid;
	justify-content: center;
	align-content: center;
	font-family: 'Inter';
	font-weight: 600;
    font-style: normal;
}

/* Boxes */
.white-price-box, .migration-prices > div:last-child {
	display: flex;
	flex-flow: column;
}

.white-price-box, .icon-tab-box {
    justify-content: space-evenly;
    background: #fff;
	padding: 1.5rem;
	border-radius: 0.75rem;
	box-shadow: 0 4px 4px 0 #dadada40;
	text-align: center;
}

.white-price-box.relative:before {
    content: attr(data-icon);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #5e6be81a;
    color: #5e6be8;
	padding: 1rem;
	border-radius: 0.75rem;
    font-size: 1.5rem;
}

.white-price-box h3 {
    margin: 0 0 1.25rem;
}

.white-price-box span {
    padding: 0 0 0.75rem;
    font-size: 1.05rem;
}

.white-price-box div {
    align-items: center;
    gap: 1rem;
	padding: 0.75rem 0;
    border-bottom: 1px solid #dde0e7;
}

.white-price-box div > h5 {
    font-weight: 400;
}

.white-price-box > h5 {
    color: #595959;
    padding: 1.5rem 0;
	font-size: 1rem;
	font-weight: 400;
}

.white-price-box h5 > strong {
    color: #000;
}

.icon-tab-box {
    padding: 1rem;
	text-align: left;
}

.icon-tab-box.relative {
    padding: 2rem 1rem 1rem;
}

.icon-tab-box.relative:before, .icon-tab-box > .relative:before {
    content: attr(data-icon);
	position: absolute;
	top: 0;
	background: #5e6be8;
	color: #fff;
	padding: 0.9rem;
	border-radius: 0.5rem;
    font-size: 1.25rem;
	transform: translateY(-50%);
}

.icon-tab-box > .relative {
    align-items: center;
    gap: 1rem;
    margin: 0 0 0.5rem;
}

.icon-tab-box > .relative:before {
	position: initial;
    background: #e6e9f7;
    color: #5e6be8;
	transform: none;
}

.icon-tab-box > h4 {
    margin-bottom: 0.5rem;
}

.icon-tab-box .relative + span {
    font-size: 0.95rem;
}

.icon-tab-box span {
    font-size: 0.9rem;
}

/* Albatros */
.albatros, .albatros > div {
	flex-flow: wrap;
}

.albatros > div {
	flex: 1;
}
.albatros .white-price-box {
    flex-grow: 1 !important;
	flex-basis: calc((33rem - 100%) * 999) !important;
}

/*=============  Hero  =============*/
#hero {
    background-color: #f0f0f5 !important;
}

/*=============  Intro  ============*/
#intro {
	background: #f0f0f5;
    padding-top: 0;
}

/*==============  Dev  =============*/
#dev, .migration-prices, #repairs, #redesign .white-price-box, .tan {
	background: #f9f9f9;
}

#dev > div:nth-child(2) {
	display: none;
}

#dev > div:nth-child(2), #dev > div:nth-child(2) > div:last-child {
	gap: 1.5rem;
}

#dev > div:nth-child(2) > div:last-child {
    flex-flow: wrap;
}

#dev > div:nth-child(2) > div:last-child > div {
    flex-grow: 1;
	flex-basis: calc((50rem - 100%) * 999);
	background: #fff;
	padding: 1.5rem;
	border-radius: 1.1rem;
}

#dev > div:nth-child(2) > div:last-child > div.relative {
    background: linear-gradient(185.86deg, #13111c 1.29%, #17244d 43.19%, #5e6be8 98.9%);
	color: #fff;
}

#dev > div:nth-child(2) div.relative div > i {
	color: #000;
}

#dev > div:last-child {
    display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: self-end;
}

#dev > div:last-child > div {
    gap: 1.5rem;
    background: #fff;
    padding: 1.5rem;
}

#dev > div:last-child > div, #dev .head {
    display: flex;
    flex-flow: column;
}

#dev > div:last-child > div:first-child {
    background: #0000;
}

#dev > div:last-child > div:nth-child(2) {
	border-radius: 1.1rem 0 0 0;
}

#dev > div:last-child > div:nth-child(3) {
    padding-top: 2rem;
	border-radius: 1.1rem 1.1rem 0 0;
	background: linear-gradient(185.86deg, #13111c 1.29%, #17244d 43.19%, #5e6be8 98.9%);
    color: #fff;
}

#dev > div:last-child > div:nth-child(3):before, #dev > div:nth-child(2) > div:last-child > div.relative:before {
    content: attr(data-title);
	position: absolute;
	top: 0;
	right: 2rem;
	background: #10b981;
	padding: 0.5rem 0.75rem;
	border-radius: 1rem;
	font-size: 0.75rem;
	font-weight: bold;
    transform: translateY(-50%);
}

#dev > div:last-child > div:nth-child(4) {
	border-radius: 0 1.1rem 0 0;
}

#dev > div:last-child > div .icon-circle {
    background: #f9f9f9;
}

#dev > div:last-child > div:nth-child(3) .icon-circle {
    background: #04011008;
}

#dev .head + div > div {
    padding: 1rem;
    border-bottom: 1px solid #dde0e7;
}

#dev > div:last-child > div:first-child .head + div > div {
    text-align: end;
}

#dev > div:last-child > div:nth-child(3) .head + div > div {
    border-bottom: 1px solid #dde0e74d;
}

#dev .head > span {
    font-weight: 500;
}

#dev h4 {
    margin: 1rem 0;
}

#dev h4 > b, .white-price-box h5 > b {
    color: #5e6be8;
    font-size: 1.5rem;
    font-weight: 900;
}

#dev .head > .ghost {
    color: #a1a1a1;
    font-size: 0.9rem;
}

#dev .head > button, :is(.white-price-box, .banner, #contact) button {
    background: #5e6be8;
	color: #fff;
	margin-top: 0.5rem;
    padding: 0.75rem 1rem;
	border: none;
	border-radius: 0.25rem;
	font-size: 1rem;
    cursor: pointer;
}

#dev .head > button > i, :is(.white-price-box, .banner, #contact) button > i {
    font-size: 0.75rem;
}

/*============  Process  ===========*/
#process {
    overflow: clip;
}

/*===========  Migration  ==========*/
#migration {
	background: url(../img/matrix.jpg) center center;
    background-color: #000c;
    background-blend-mode: multiply;
    color: #fff;
}

#migration > div:last-child {
    flex-flow: wrap;
    gap: 1.25rem;
    text-align: center;
}

#migration > div:last-child > div {
    flex: 1 1 300px;
    gap: 1.5rem;
    background: #fff;
    color: #000;
    padding: 1.33rem 1.75rem;
    border-radius: 0.75rem;
}

#migration div.relative:before {
    content: attr(data-icon);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    padding: 1.75rem;
}

#migration img {
    width: 100%;
    border-radius: 0.75rem;
}
.migrate {
	background: #5e6be8;
	color: #fff;
	padding: 3rem 6rem;
	border-radius: 1.75rem;
    z-index: 2;
}
.migrate section {
    align-items: end;
    gap: 5rem;
    width: 100%;
}

.migrate .list{
    gap: 2rem;
}
.migrate .list:not(.active){
    display: none;
}
.migrate .grid-x{
    background: #fff;
    box-sizing: border-box;
    padding: 1.5rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100% / 3, max(65px, min(65px, 100%))), 1fr));
    justify-content: center;
    gap: 2rem; 
    align-items: center;
}
.migrate .grid-x img{
    cursor: pointer;
    object-fit: cover; width: 100%;
}
.migrate .grid-x p {
    color: #000;
    width: 100%; position: absolute;
    font-size: 14px; left: 1rem;
}
.migrate input{
    background: transparent;
    border: none;
    border-bottom: 1px solid white;
    margin-top: 1rem;
    outline: none; color: #fff;
    width: 100%;
}

/*
.migrate-modal{
    position: absolute;
    top: 0; left: 0;
    padding: 0 var(--padding) !important;
    width: 100%;
    box-sizing: border-box;
}
.migrate-modal .box {
    background: #5e6be8;
	color: #fff;
	padding: 3rem 6rem;
	border-radius: 1.75rem;
}
*/
.migration-overlay {
    position: absolute;
    top: 0 !important;
    left: 0;
    padding: 0 !important;
    width: 100%;
    background: #00000061;
    height: 100%;
    z-index: 1;
}

.migrate :is(div, button) {
    width: 100%;
}

.migrate button {
    gap: 0.5rem;
	background: #fff;
	color: #5e6be8;
	padding: 0.5rem 1.5rem;
	margin: 2rem 0 0;
	border: none;
	border-radius: 2rem;
	font-weight: 500;
    cursor: pointer;
}

.migrate div:nth-child(3) button {
    padding-left: 2.5rem;
    font-weight: bold;
}

.migrate div:nth-child(3) i {
	background: #5e6be8;
	color: #fff;
}

.migrate button > img {
    height: 2rem;
}

.migrate button > i {
    min-width: 0.9rem;
	min-height: 0.9rem;
    background: #eff0fd;
    padding: 0.5rem;
    margin: 0 0 0 auto;
}

body.col > div.migration-prices {
    flex-flow: wrap;
	gap: 1.75rem;
}

.migration-prices > div {
	flex: 1 0 275px;
	box-sizing: border-box;
}

.migration-prices > div:last-child {
    justify-content: space-between;
    gap: 2.5rem;
}

/*==========  Maintenance  =========*/
#maintenance > div:nth-child(2) {
	align-items: center;
    gap: 6rem;
    padding: 0 2.5rem;
}

#maintenance > div img {
    width: 100%;
}

#maintenance .vertical-cards {
    margin: auto 0;
}

#maintenance .vertical-cards > div {
    gap: 2rem;
	padding: 1.25rem 1rem;
}

#maintenance .vertical-cards h4 {
    margin: 0 0 1rem;
}

#maintenance .vertical-cards span {
    color: #000;
}

#maintenance > div:last-child {
    flex-flow: wrap;
	justify-content: center;
    gap: 2rem;
}

#maintenance > div:last-child > div {
	flex: 1 275px;
}

#maintenance .white-price-box, :is(#upgrades, #repairs) :is(.white-price-box, .icon-tab-box)  {
    flex: 1;
    background: #dde0e74d;
}

/*============  Repairs  ===========*/
#repairs .title .flex {
    flex-flow: wrap;
	justify-content: center;
}

#repairs .banner {
    background: #ececec;
	border-radius: 1rem;
}
#repairs .banners > :not(.active){
    display: none;
}
#repairs .banner > div:first-child {
    width: 100%;    
	justify-content: center;
	padding: 3rem 5rem 3rem 3rem;
}

#repairs .banner p {
    margin: 1.75rem 0 2.25rem 0;
}

#repairs .banner button {
    width: max-content;
}

#repairs .banner img {
    width: 100%;
	height: 100%;
	border-radius: 0 1rem 1rem 0;
	object-fit: cover;
}

#repairs > div:last-child {
    gap: 1.25rem;
}

:is(#repairs, #upgrades) .white-price-box div {
    padding: 0.5rem 0;
}

:is(#repairs, #upgrades) .white-price-box div > h5 {
	font-size: 0.95rem;
	font-weight: 600;
}

#repairs .white-price-box div > i {
	color: #5e6be8;
}

/*===========  Upgrades  ===========*/
#upgrades, #upgrades > div, .albatros > div {
    gap: 1.25rem;
}

#upgrades > div:nth-child(2) {
    flex-flow: wrap;
}

#upgrades .icon-tab-box {
    flex: 1 0 275px;
    margin: 2rem 0 0;
    box-shadow: none;
}

#upgrades .white-price-box span {
    font-size: 0.9rem;
	font-weight: 500;
}

#upgrades .white-price-box div > h5 {
	font-weight: 500;
}

/*===========  Redesign  ===========*/
#redesign {
    padding-top: 0;
}

#redesign > div:nth-child(2):not(.column) {
    width: 92%;
	margin: 0 auto;
    aspect-ratio: 944 / 107;
}

.chevron {
	flex: 1;
    position: relative;
    margin: 0 -1rem 0 0;
}

.chevron > div {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 16%;
	font-weight: 500;
    clip-path: polygon(82% 0, 100% 50%, 82% 100%, 0% 100%, 16% 50%, 0% 0%);
    box-sizing: border-box;
    height: 100%;
}

.chevron:before {
	content: attr(data-num);
	position: absolute;
	top: 50%;
	left: 1%;
	color: #fff;
	padding: 0.7rem;
	border: 6px solid #fff;
	border-radius: 50%;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	transform: translateY(-50%);
    aspect-ratio: 1;
	z-index: 1;
}

.chevron:nth-of-type(1) div, .chevron:nth-of-type(1):before {
    background: #fbb432;
}

.chevron:nth-of-type(2) div, .chevron:nth-of-type(2):before {
    background: #f8289b;
}

.chevron:nth-of-type(3) div, .chevron:nth-of-type(3):before {
    background: #c431e4;
}

.chevron:nth-of-type(4) div, .chevron:nth-of-type(4):before {
    background: #590ae1;
}

#redesign hr {
    width: 100%;
    border: none;
    border-bottom: 1px solid #5e6be81c;
}

#redesign > div:last-child {
	flex-flow: wrap;
    gap: 1.5rem;
}

#redesign > div:last-child > div {
    flex: 1 275px;
    box-sizing: border-box;
}

#redesign .white-price-box {
    padding: 4.25rem 1.5rem 1.5rem;
}

#redesign .white-price-box span {
    font-size: 1.15rem;
}

#redesign .white-price-box div i {
    color: #5e6be8;
}

#redesign .white-price-box div > h5 {
    font-weight: 600;
}

.honeycomb {
    justify-content: space-evenly;
    padding: 0 3rem;
}

.honeycomb > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.honeycomb > div > div {
    flex: 1;
    text-align: center;
}

.honeycomb img {
    width: 100%;
}

.honeycomb span {
    font-size: 0.65rem;
	font-weight: 900;
}

/*==========  Responsive  ==========*/
@media screen and (max-width: 1400px) {
    /* Dev */
    #dev > div:nth-child(2) {
        display: flex;
    }

    #dev > div:last-child {
        display: none;
    }

    /* Process */
    #process {
        padding: 4rem 0;
    }   
    #process .mask{
        display: flex;
        overflow: hidden;
        flex-wrap: nowrap;
        min-width: 100%;
        mask-image: linear-gradient(to right, transparent 0, black 128px, black calc(100% - 128px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 128px, black calc(100% - 128px), transparent 100%);
        gap: 5px;
    }
    .m-procedure{
        display: grid;
    }

    #process .title {
        padding: 0 var(--padding);
    }

    .procedure {
        display: grid;
        width: fit-content;
        /*position: relative;
        left: -50%;*/
        grid-template-areas: 'g1 g2 g3 g4 g5 g6 g7';
        padding: 0 0 0.25rem;
        transform: translateX(0%);
        animation: linear 11s 0.5s infinite leftToRightLoop;
        cursor: pointer;
    }
    
    .procedure > div:nth-child(4) {
        transform: none;
    	margin: 0;
    }

    .procedure::-webkit-scrollbar {
        height: 0.4rem;
    }
    
    .procedure:-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 1rem;
    }
    
    .procedure::-webkit-scrollbar-thumb:hover {
        background: #aaa;
        border-radius: 1rem;
    }

    /**/
    #repairs > div:last-child > div:last-child:nth-child(3n + 1) {
        grid-column-start: 2;
    }
}

@media screen and (max-width: 1355px) {
    /* Redesign */
    #upgrades + #redesign :is(.flex:nth-child(2), hr, .honeycomb) {
        display: none;
    }
}

@media screen and (max-width: 1083px) {
    /* */
    .migration-prices > div:last-child {
        margin: 1.25rem 0 0;
    }
}

@media screen and (max-width: 1024px) {
    /* Migration */
    .migrate {
        flex-flow: wrap;
        gap: 2rem;
        padding: 3rem;
    }

    .migrate button {
        margin: 1rem 0 0;
    }

    /* Maintenance */
    #maintenance > div:nth-child(2) {
        flex-flow: wrap;
	    padding: 0;
    }
    
    /**/
    .langs {
        grid-template-columns: 1fr;
    }

    .langs > .vertical-cards {
        flex-flow: wrap;
    }

    .vertical-cards > div {
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }

    .langs > div:last-child {
        margin: 0;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1400px) {
    /* Dev */
    #dev > div:nth-child(2) .switch-box {
        margin: 0 0 1rem;
    }
}

@media screen and (max-width: 925px) {    
    /**/
    #repairs .banner {
        flex-flow: column-reverse;
    }

    #repairs .banner div.flex {
        width: unset;
        padding: 3rem;
    }

    #repairs .banner img {
        border-radius: 1rem 1rem 0 0;
    }
}

@media screen and (max-width: 555px) {    
    /**/
    #tech .vertical-cards > div {
        min-width: 100px;
        display: flex;
        flex: 1;
        justify-content: center;
        padding: 0.7rem 0.8rem;
        border-radius: 3px;
    }

    #tech .vertical-cards i {
        display: none;
    }

    #tech .vertical-cards > div.active {
        border-left: 3px solid #5e6be8;
    }

    #tech .langs > .vertical-cards {
        gap: 10px 5px;
        background: #f9f9f9;
    }

    #tech .vertical-cards h4 {
        font-size: 1.05rem;
    }

    #hero .cta-weak{
        display: none;
    }
}