.b1cd{
 color: #500033;
}

.b1cl{
 color: #FF0077;
}

.b2cd{
    color:#000050;
}

.b2cl{
    color:#0033FF;
}
.b3cd{
    color:#00501D;
}
.b3cl{
    color:#00FF44;
};
.b4cd{
    color:#554D00;
}
.b4cl{
    color:#FF4E00;
}
.b5cd{
    color:#300050;
}
.b5cl{
    color:#8000FF;
}
.black{
    color: #000;
}
.white{
    color: #fff;
}
.grey{
    color:#B5B4B4;
}

/* @mixin color_render($DC, $LC) {
    background-color: $DC;
    .illustration .inner {
        background-color: $LC;
        &::after, &::before{ background-color: rgba($LC, .4);}
    }
    button {background-color: $LC;}
} */

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}


html {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 62.5%;  

    @media only screen and (max-width: 800px) {
        font-size: 57%;
    }
}

body {
    color: #fff;

    @media only screen and (max-width: 1000px) {
        padding: 0;
    }
}

.container {
    position: relative;
    overflow: hidden;   
    border-radius: 0px;
    padding:0px;

    @media only screen and (max-width: 1000px) {
        border-radius: 0;
    }
}
.slide {
  width: 25%;
  float: left;
}
.slider {
    display: flex;
    width: 400%;
    height: 55rem;
    transition: all .25s ease-in;
    /* // overflow-x: auto;
    // scroll-snap-type: x mandatory;
    // -webkit-overflow-scrolling: touch;
    // scroll-behavior: smooth; */
    transform: translateX(0);

    @media only screen and (max-width: 1000px) {
        height: 100vh;
    }

    .box {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        overflow: hidden;
        position: relative;

        @media only screen and (max-width: 650px) {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(2, 1fr);
        }
        
        .bg {
            padding: 2rem;
            background-color: rgba(#000, .2);
            width: 55%;
            transform: skewX(7deg);
            position: absolute;
            height: 100%;
            left: -10%;
            padding-left: 20rem;    
            transform-origin: 0 100%;     
            
            @media only screen and (max-width: 800px) {
                width: 65%;
            }

            @media only screen and (max-width: 650px) {
                width: 100%;
                left: 0;
                bottom: 0;
                height: 54%;
                transform: skewX(0deg);
            }

            &::before {
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: inherit;
                pointer-events: none;
                transform: skewX(10deg);

                @media only screen and (max-width: 650px) {
                    width: 120%;
                    bottom: 0;
                    transform: skewX(0deg);
                }

            }
        }

        .details {
            padding: 5rem;
            padding-left: 10rem;
            z-index: 100;
            grid-column: 1 / span 1;
            grid-row: 1 / -1;

            @media only screen and (max-width: 650px) {
                grid-row: 2 / span 1;
                grid-column: 1 / -1;
                text-align: center;
                padding:2rem;
                transform: translateY(-9rem);
            }
            
            h1 {
                font-size: 40px;
                font-weight: 500;
                color:#fff;
                margin-bottom: .5rem;
            }

            p {
                display: inline-block;
                font-size: 14px;
                color:#DDDDDD;
                margin-bottom: 2rem;
                margin-right: 5rem;

                @media only screen and (max-width: 800px) {
                    margin-right: 0;
                }
            }

            button {
                padding: 1rem 3rem;
                color: #fff;
                border-radius: 2rem;
                outline: none;
                border: none;
                cursor: pointer;
                transition: all .3s ease;

                &:hover {opacity: .8;}
    
                &:focus {
                    outline: none;
                    border: none;
                }
            }
        }
    }

    /* .illustration {
        grid-column: 2 / -1;
        grid-row: 1 / -1;
        justify-self: center;

        @media only screen and (max-width: 650px) {
            grid-row: 1 / span 1;
            grid-column: 1 / -1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        div {
            height: 25rem;
            width: 18rem;
            border-radius: 3rem;
            position: relative;
            transform: skewX(-10deg);

            @media only screen and (max-width: 800px) {
                height: 20rem;
                width: 15rem;
            }

            &::after,
            &::before {
                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                border-radius: 3rem;
                top: 0;
                left: 0;
            }

            &::after {transform: translate(4rem, -1rem);}
            &::before {transform: translate(2rem, -2rem);}
        }
    } */
}

.prev,
.next,
.trail {
    z-index: 10000;
    position: absolute;
}

.prev,
.next {
    width: 2.5rem;
    cursor: pointer;
    opacity: .2;
    transition: all .3s ease;

    @media only screen and (max-width: 650px) {
       display: none;
    }

    &:hover { opacity: 1;}
}
.prev {
    top: 50%;
    left: 2%;
    transform: translateY(-50%);
}

.next {
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
}
.trail {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
    justify-content: center;
    font-size: 1.5rem;

    @media only screen and (max-width: 650px) {
        width: 90%;
        bottom: 13%;
    }

    div {
        padding: 2rem;
        border-top: 3px solid #fff;
        cursor: pointer;
        opacity: .3;
        transition: all 0.3s ease;

        &:hover {opacity: .6;}

        @media only screen and (max-width: 650px) {
            padding: 1rem;
        }
    }
}

.active {
    opacity: 1 !important;
}
/* trail base */
.trail div {
  position: relative;
  padding: 2rem 0;
  border-top: 3px solid rgba(255,255,255,0.12); /* faint line for all items */
  cursor: pointer;
  opacity: .35;
  transition: opacity .25s ease;
}

/* center alignment tweak (optional) */
.trail {
  display: flex;            /* switch to flex for consistent centering */
  gap: 1rem;
  justify-content: center;  /* keep items centered */
  align-items: center;
}

/* pseudo element for the colored segment above each item */
.trail div::before {
  content: "";
  position: absolute;
  top: -3px;                       /* sits on top of border */
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 0;                        /* hidden by default */
  background: var(--accent, #fff);
  transition: width .28s cubic-bezier(.2,.9,.3,1);
  border-radius: 2px;
}

/* visible and wider colored segment for the active item */
.trail div.active {
  opacity: 1 !important;
  color: #fff;
}
.trail div.active::before {
  width: 38%;                      /* adjust width to taste (e.g. 30% - 45%) */
}

/* smaller padding on mobile */
@media (max-width:650px) {
  .trail div { padding: 1rem 0; }
  .trail div.active::before { width: 50%; }
}
.trail .box1 { --accent: #FF0077; }
.trail .box2 { --accent: #0033FF; }
.trail .box3 { --accent: #00FF44; }
.trail .box4 { --accent: #FF4E00; }