/* hero section */
.herosection {
    background-image: url('../images/heroracing.jpg');
}

/* === button === */
.button {
    margin: 0;
    width: 120px;
    padding: 3px;
}

.button a {
    padding: 15px 20px;
}

/* Title */
.racingset-title,
.wheel-title,
.handbrake-title,
.setupinspiration-title,
.platform-compatibility-title,
.shifter-title {
    text-align: center;
    margin-bottom: 100px;
}

.gradient-card-inner {
    padding: 40px;
}

/* racingset Section */
.racingset-section,
.wheel-section,
.handbrake-section,
.setupinspiration-section,
.platform-compatibility-section,
.shifter-section {
    margin: 100px 54px;
}

.racingset {
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
}

.racingset-card {
    display: flex;
    gap: 60px;
    width: 100%;
    min-height: 400px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.racingsetimg-box {
    max-width: 450px;
    min-width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.racingset-content ul {
    margin: 0;
}

.racingsetinfo-box {
    max-width: 600px;
    display: flex;
    flex-direction: column;
}

.racingsetimg-box img {
    width: 80%;
}

.racingset-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

/* wheel Section */
.wheel {
    display: flex;
    gap: 50px;
    justify-content: center;
}

.wheel-left {
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
}

.wheel-card {
    display: flex;
    gap: 20px;
    min-height: 320px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.wheelimg-box {
    max-width: 150px;
    min-width: 100px;
    display: flex;
}

.wheelimg-box img {
    width: 100%;
}

.wheelinfo-box {
    max-width: 300px;
    display: flex;
    flex-direction: column;
}

.wheel-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.wheel-cardborder3 {
    display: none;
}

.wheel-card-large {
    display: flex;
    flex-direction: column;
    padding: 40px;
    min-height: 760px;
    gap: 85px;
}

.wheel-title-large {
    text-align: center;
}

.wheel-main-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.wheel-info-points ul {
    margin: 0;
    line-height: 1.8;
}

.wheelimg-box-large {
    max-width: 250px;
    min-width: 70px;
    display: flex;
}

.wheelimg-box-large img {
    max-width: 100%;
}

.wheel-bottom-large {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* handbrake Section */
.handbrake {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    justify-content: center;
}

.handbrake-cardborder {
    flex: 0 0 calc(33.333% - 50px);
}

.handbrake-card {
    padding: 40px;
    text-align: center;
}

.handbrakeimg-box img {
    width: 100%;
}

.handbraketitle {
    min-height: 70px;
}

/* shifter Section */
.shifter {
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
}

.shifter-top {
    display: flex;
    gap: 50px;
    justify-content: center;
}

.shifter-top .shifter-cardborder {
    width: 100%;
}

.shifter-card {
    display: flex;
    gap: 50px;
    width: 100%;
    min-height: 300px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.shifter-top .shifterimg-box {
    max-width: 140px;
    min-width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shifter-top .shifterimg-box img {
    width: 100%;
}

.shifter-top .shifter-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.shifter-card-large {
    display: flex;
    gap: 50px;
    width: 100%;
    min-height: 400px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.shifterimg-box-large {
    max-width: 230px;
    min-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shifterimg-box-large img {
    width: 100%;
}

.shifter-bottom-large {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Setup Inspiration Section */
.whitecard h5,
.whitecard li {
    color: black;
}

.blackcard {
    background-color: black;
}

.whitecard {
    background-color: white;
}

.setupinspiration {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.setupinspiration-card {
    width: 100%;
    gap: 20px;
}

.setupinspirationcard-title h5 {
    margin: 0 0;
}

.setupinspirationcard-content li {
    line-height: 2;
}

/* Brand & Platform Compatibility Section */
.platform-compatibility {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.platform-compatibility-cardborder {
    flex: 1 1 calc(50% - 60px);
}

.platform-compatibility-card {
    width: 100%;
    display: flex;
    align-items: center;
}

.platform-compatibilitycard-title h5 {
    margin: 0;
}

.platform-compatibilitycard-content li {
    line-height: 2;
}

@media screen and (max-width:1080px) {

    .wheel-card-large {
        display: flex;
        flex-direction: column;
        padding: 40px;
        min-height: 600px;
        gap: 50px;
    }

    .setupinspiration {
        gap: 40px;
    }

    .platform-compatibility {
        gap: 40px;
    }

    .shifter {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .shiftername {
        text-align: center;
        min-height: 40px;
    }

    .shifter-top {
        display: flex;
        gap: 30px;
        align-items: center;
    }

    .shifter-card {
        gap: 20px;
        min-height: 150px;
        flex-direction: column;
    }

    .shifter-top .shifterimg-box img {
        width: 100%;
    }

    .shifter-top .shifter-bottom {
        flex-direction: column;
    }

    .shifterimg-box-large,
    .shifter-top .shifterimg-box {
        max-width: 120px;
        min-width: 100px;
    }

    .shifter-card-large {
        flex-direction: column;
        gap: 20px;
        min-height: 300px;
    }

    .shiftername-large {
        text-align: center;
    }

    .shifter-bottom-large {
        flex-direction: column;
    }
}

@media screen and (max-width:892px) {

    /* handbrake Section */
    .handbrake {
        gap: 30px;
        flex-direction: column;
    }

    .handbraketitle {
        min-height: 30px;
    }

}

@media screen and (max-width:930px) {
    .wheel {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .wheelname {
        text-align: center;
    }

    .wheel-left {
        gap: 30px;
    }

    .wheel-cardborder,
    .wheel-cardborder3 {
        max-width: 1000px;
    }

    .wheel-cardborder3 {
        display: block;
        gap: 30px;
    }

    .wheel-cardborder-large,
    .wheel-card-large {
        display: none;
    }

    .wheel-card {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .wheel-bottom {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .wheel-left:first-child,
    .wheel-left:last-child,
    .wheel-cardborder-large {
        flex: 1 1 100%;
    }
}


@media screen and (max-width:720px) {

    .racingset-title,
    .wheel-title,
    .handbrake-title,
    .setupinspiration-title,
    .platform-compatibility-title,
    .shifter-title {
        margin-bottom: 50px;
    }

    .racingset-section,
    .wheel-section,
    .handbrake-section,
    .setupinspiration-section,
    .platform-compatibility-section,
    .shifter-section {
        margin: 50px 30px;
    }

    .racingset {
        gap: 30px;
    }

    .racingset-card {
        flex-direction: column;
        gap: 20px;
    }

    .racingsetimg-box {
        max-width: 300px;
    }

    .racingset-content ul {
        margin: 0;
    }

    .racingsetimg-box img {
        width: 80%;
    }

    .racingset-bottom {
        display: flex;
        flex-direction: column;
    }

    .shifter-card {
        width: 100%;
        flex-direction: column;
    }

    .shifter-top {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        justify-content: center;
    }

    .setupinspiration {
        gap: 30px;
    }

    .platform-compatibility {
        gap: 30px;
    }

    .platform-compatibility-cardborder {
        flex: 1 1 100%;
    }
}