h1 {
    padding: 40px 0px;
    font-size: 80px;
    font-weight: 700;
}

.pill-box {
    width: 250px;
}

.guide-main img {
    width:85%;
    height:auto;
}

.guide-main > div {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:30%;
}

.guide-card {
    flex-basis: 31%;
    border-radius: 20px;
    padding: 15px 20px;
    height: 100%;
    min-height: 250px;
    display: flex;
    flex-direction: column;
}

.guide-card h3 {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2em;
    flex-grow: 1;
}

/* Card Colors */
.card-black, .guide-autoc .guide-card:nth-child(6n+1), .guide-autoc .guide-card:nth-child(6n+5) {
    background:var(--black-to-grey-v);
}

.card-orange, .guide-autoc .guide-card:nth-child(6n+4) {
    background:linear-gradient(180deg,#ff914d,#f45c00);
}

.card-grey-dark, .guide-autoc .guide-card:nth-child(6n+2), .guide-autoc .guide-card:nth-child(6n) {
    background-color: #737373;
}

.card-grey, .guide-autoc .guide-card:nth-child(6n+3) {
    background-color: #d9d9d9;
}

.card-black h3,
.card-grey-dark h3,
.guide-autoc .guide-card:nth-child(6n+1) h3,
.guide-autoc .guide-card:nth-child(6n+2) h3,
.guide-autoc .guide-card:nth-child(6n+5) h3,
.guide-autoc .guide-card:nth-child(6n) h3 {
    color: #fff;
}

.button-container {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.button-container .btn-green {
    padding-left:30px;
    padding-right:30px;
}

.btn-black {
    margin-top:60px;
    max-width:250px;
}

.guide-flex-container {
    display: flex;
    width: 100%;
}

.guide-cats {
    padding:40px 20px;
    border:solid 1px black;
}

.guide-cats h3 {
    font-family:var(--font-h);
    font-size:36px;
    font-weight:400;
}

.guide-cats a {
    font-family:var(--font-h);
    font-size:20px;
    font-weight:400;
    color:inherit;
    text-decoration:underline;
}

.guide-cats .pill a {
    text-decoration:none;
}

.guide-left {
    width: 32%;
    background-color: #3f97f7;
}

.guide-left-img {
    margin:60px auto 0px;
    width:70%;
    position:relative;
}

.guide-left-img .guide-left-img-main {
    position:absolute;
    width:85%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.guide-right {
    width: 68%;
    display: flex;
    flex-direction: column;
    height: auto; /* Or a fixed height if you prefer */
}

.guide-right-top,
.guide-right-bottom {
    display: flex;
    flex: 1; /* This makes them each take up 50% of the parent's height */
}

.guide-right-top {
    height: 50%;
}

.guide-right-top-child {
    width: 33.333%;
}

.guide-right-bottom {
    height: 50%;
}

.guide-right-bottom-left {
    width: 62%;
}

.guide-right-bottom-right {
    width: 38%;
    background-color:#0cff02;
}

.guide-right-bottom-right img {
    position:absolute;
    width:33%;
    bottom:10px;
    right:0px;
    transform:rotate(12deg);
}

.w-70 {
    width: 70% !important;
}

.w-60 {
    width:60%!important;
}

@media (min-width:1600px) {
    .guide-main img {
        width: 70%;
    }
}

@media (min-width:992px) and (max-width:1400px) {
    .guide-main img {
        width:90%;
    }
}

@media (max-width:1199.98px) {
    .guide-flex-container {
        flex-direction:column;
    }

    .guide-left {
        width: 100%;
    }

    .guide-left-img {
        margin:0px auto 0px;
        width:20%;
    }

    .guide-right {
        width: 100%;
    }

    .guide-right-bottom-right img {
        width:25%;
    }
}

@media (max-width:1099.98px) {
    h1 {
        font-size: 60px;
    }

    .guide-card {
        flex-basis: 48%;
    }
}

@media (max-width:991.98px) {
    h1 {
        font-size: 48px;
        padding-top:20px;
    }

    .guide-right-top, .guide-right-bottom {
        flex-direction: column;
    }

    .guide-right-top-child, .guide-right-bottom-left, .guide-right-bottom-right {
        width: 100%;
    }

    .guide-flex-img {
        position: absolute;
        top: -25px;
        right: 0px;
    }

    .guide-flex-img img, .guide-img img {
        width: 150px !important;
    }

    .guide-lr img {
        width: 200px !important;
    }

    .guide-right-bottom-right img {
        width:15%;
        bottom:unset;
        top:0px;
    }
    
    .guide-lr {
        flex-direction:row!important;
    }

    .guide-lr img {
        float:right;
    }
}

@media (min-width:576px) and (max-width:991.98px) {
    
}

@media (max-width: 767.98px) {
    .guide-card h3 {
        font-size: 1.3rem;
    }

    .button-container {
        justify-content: center;
    }
}

@media (max-width:575.98px) {
    h1 {
        font-size: 48px;
    }

    .guide-main img {
        display: none;
    }

    .guide-main > div {
        position:unset;
        transform:none;
    }
    
    .guide-card {
        flex-basis: 100%;
    }

    .guide-cats h3 {
        font-size: 24px;
    }

    .guide-cats a {
        font-size: 16px;
    }

    .guide-left-img {
        width:22%;
    }

    .guide-left-img .guide-left-img-main {
        top: 50%;
        transform: translate(-50%,-50%);
    }

    .guide-flex-img img, .guide-img img {
        width: 100px !important;
    }

    .guide-lr, .guide-right-bottom-left, .guide-left {
        position: relative;
    }

    .guide-lr img, .guide-img img, .guide-left-img {
        position: absolute;
        top:25px;
        right:20px;
    }

    .guide-lr img {
        width:120px!important;
    }

    .guide-img img {
        width:70px!important;
    }
}

@media (max-width:399.98px) {
    .guide-flex-img img, .guide-img img {
        width: 80px !important;
    }

    .guide-lr img {
        width: 100px !important;
    }

    .guide-img img {
        width: 60px !important;
    }
}