:root {
    --fh2: clamp(0.5rem, 0.8rem + 4vw, 8rem);
    --fh3: clamp(0.3rem, 0.4rem + 4vw, 3rem);
    --fp : clamp(0.25rem, 0.8rem + 1vw, 2rem);
}

body {
    font-family: 'Jaro-Regular', sans-serif;
    background : linear-gradient(71deg, #080509, #360a0a, #9c0101);
}

.navbar::after {
    background: linear-gradient(71deg, #0d1212, #ff0000, #0d1212);
}

.wrapper {
    position       : relative;
    border-radius  : 30px;
    border         : 2px solid transparent;
    background     : linear-gradient(71deg, #080509, #1a171c, #080509);
    background-clip: padding-box;
    margin         : 22px 0;
    box-shadow     : 0 4px 10px rgba(0, 0, 0, 0.4);
    width          : min(100%, calc(90rem + 1vw));
}

.webdevbackground,
.graphicsdevbackground {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100%;
    z-index        : -1;

}

.webdevbackground {
    background: linear-gradient(71deg, #080509, #968914, #c5c901);
}

.graphicsdevbackground {
    background: linear-gradient(71deg, #080509, #149659, #01c944);
}

.bg-white-box::after {
    background: linear-gradient(71deg, #121013, #b0afb0, #121013);
}

.bg-yellow-box::after {
    background: linear-gradient(71deg, #110e0e, #ffea00, #110e0e);
}

.bg-green-box::after {
    background: linear-gradient(71deg, #0d1212, #07fc96, #0d1212);
}

.bg-red-box::after {
    background: linear-gradient(71deg, #0d1212, #ff0000, #0d1212);
}

.bg-green-box::after,
.bg-white-box::after,
.bg-yellow-box::after,
.bg-red-box::after {
    position     : absolute;
    top          : -1px;
    bottom       : -1px;
    left         : -1px;
    right        : -1px;
    content      : "";
    z-index      : -1;
    border-radius: 30px;
}

.card {
    height: 84px;
}

.card-content {
    background: linear-gradient(71deg, #080509, #1a171c, #080509);
}

.heading {
    text-align : center;
    font-size  : var(--fh2);
    font-weight: 700;
    margin     : 50px;
    text-align : left;
}

.full-content-container {
    padding: 0 50px;
}

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

.text-container {
    display       : flex;
    flex-direction: column;
    width         : 867px;
    height        : 327px;
    margin-right  : 2rem;
}

.title {
    font-size      : var(--fh3);
    display        : flex;
    align-items    : center;
    justify-content: flex-start;
    margin-bottom  : 1rem;
}

.description {
    font-family: 'KdamThmorPro-Regular', sans-serif;
    font-size  : var(--fp);
}

.image-container {
    width    : 339px;
    min-width: 300px;
}

.image-container img {
    border-radius: 5px;
}

@media (width < calc(768 / 16 * 1rem)) {
    .content-container {
        flex-wrap    : wrap;
        margin-bottom: 4rem;
    }

    .text-container {
        height       : auto;
        margin-bottom: 2rem;
        margin-right: 0;
    }
}
@media (width <= calc(375 / 16 * 1rem)) {
    .image-container {
    min-width: 100%;
}
}