body {
    margin: 0;
}

.content {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
    padding-left: 65px;
    padding-right: 65px;
    box-sizing: border-box;
}

@media screen and (max-width: 1250px) { 
    .content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

    .intro {
        height: 200px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: -10px;
        margin-bottom: -20px;
    }

        .intro_title {
            color: white;
            margin: 0;
            font-size: 50px;
            letter-spacing: 1px;
            text-transform: capitalize;
            margin-bottom: 0px;
        }

        .intro_subtitle {
            color: white;
            font-weight: 300;
            font-size: 20px;
            margin: 0;
            margin-top: -8px;
            line-height: 100%;
        }

        @media screen and (max-width: 1100px) { 
            .intro_title {
                font-size: 40px;
                line-height: 100%;
            }
            .intro_subtitle {
                font-size: 18px;
                margin-top: 4px;
            }
        }

        @media screen and (max-width: 550px) { 
            .intro_title {
                font-size: 35px;
                letter-spacing: -0.2px;
            }
            .intro_subtitle {
                font-size: 16px;
            }
        }

        @media screen and (max-width: 410px) { 
            .intro_title {
                font-size: 28px;
            }
            .intro_subtitle {
                font-size: 16px;
            }
        }

    .cards {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

        .card_column {
            width: 25%;
            height: auto;
            box-sizing: border-box;
        }

        @media screen and (max-width: 1200px) { 
            .card_column {
                width: 50%;
            }
        }

        @media screen and (max-width: 600px) { 
            .card_column {
                width: 100%;
            }
        }

            .card {
                width: 100%;
                height: auto;
                padding: 16px;
                box-sizing: border-box;
                border-radius: 10px;
                position: relative;
                transition: transform 0.5s;
                margin-bottom: 16px;
                box-shadow: 10px 10px 20px #0f0c36;
            }

            .card:hover {
                transform: translateY(-10px);
                cursor: pointer;
            }

                .card_gradient {
                    position: absolute;
                    width: inherit;
                    height: 150px;
                    margin-left: -16px;
                    margin-top: -16px;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    z-index: 0;
                }

                .card_upper {
                    width: 100%;
                    height: 60px;
                    display: flex;
                    flex-direction: row;      
                }

                    .card_iconcontainer {
                        width: 60px;
                        height: 60px;
                        border-radius: 10px;
                        z-index: 50;
                        padding: 9px;
                        box-sizing: border-box;
                    }

                        .card_icon {
                            width: 100%;
                            height: 100%;
                            background-size: 95%;
                            background-position: center;
                            background-repeat: no-repeat;
                        }

                    .card_titlecontainer {
                        width: calc(100% - 60px);
                        height: 60px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        box-sizing: border-box;
                        margin-left: 15px;
                    }

                        .card_title {
                            font-size: 18px;
                            font-weight: 600;
                            color: white;
                            margin: 0;
                            z-index: 50;
                            line-height: 100%;
                            text-transform: capitalize;
                        }

                        .card_subtitle {
                            font-size: 14px;
                            font-weight: 300;
                            color: white;
                            opacity: 0.8;
                            margin: 0;
                            padding-right: 6px;
                            line-height: 100%;
                            margin-top: 3px;
                        }

                .card_lower {
                    width: calc(100% + 32px);
                    margin-top: -60px;
                    margin-bottom: -16px;
                    border-radius: 10px;
                    margin-left: -16px;
                    background-position: center;
                    background-repeat: none;
                    background-size: cover;
                }

        .card_column_lef {
            padding-right: 18px;
        }

        .card_column_mid_l {
            padding-left: 6px;
            padding-right: 12px;
        }

        .card_column_mid_r {
            padding-left: 12px;
            padding-right: 6px;
        }

        .card_column_rig {
            padding-left: 18px;
        }

        @media screen and (max-width: 1500px) { 
            .card_column_lef {
                padding-right: 12px;
            }
    
            .card_column_mid_l {
                padding-left: 4px;
                padding-right: 8px;
            }
    
            .card_column_mid_r {
                padding-left: 8px;
                padding-right: 4px;
            }
    
            .card_column_rig {
                padding-left: 12px;
            }
        }

        @media screen and (max-width: 1300px) { 
            .card_column_lef {
                padding-right: 9px;
            }
    
            .card_column_mid_l {
                padding-left: 3px;
                padding-right: 6px;
            }
    
            .card_column_mid_r {
                padding-left: 6px;
                padding-right: 3px;
            }
    
            .card_column_rig {
                padding-left: 9px;
            }
        }

        @media screen and (max-width: 1200px) { 
            .card_column_lef {
                padding-right: 8px;
            }
    
            .card_column_mid_l {
                padding-left: 8px;
                padding-right: 0px;
            }
    
            .card_column_mid_r {
                padding-left: 0px;
                padding-right: 8px;
            }
    
            .card_column_rig {
                padding-left: 8px;
            }
        }

        @media screen and (max-width: 600px) { 
            .card_column_lef {
                padding-right: 0px;
            }
    
            .card_column_mid_l {
                padding-left: 0px;
            }
    
            .card_column_mid_r {
                padding-right: 0px;
            }
    
            .card_column_rig {
                padding-left: 0px;
            }
        }

    .regular_cards {
        width: calc(100% + 20px);
        height: auto;
        display: flex;
        flex-wrap: wrap;
    }

        .regular_card {

            width: calc(20% - 40px); /* 25% - (margin + padding + border) */
            height: 60px;
            background-color: #11112fb0;

            display: flex;
            justify-content: center;
            flex-direction: column;

            margin-right: 16px;
            margin-bottom: 16px;
            padding-left: 20px;

            border-radius: 8px;
            border-width: 0px;
            border-left-width: 4px;
            border-style: solid;
            border-color: white;
            
            text-align: left;

            transition: transform 0.5s;

        }


        @media screen and (max-width: 1450px) { 
            .regular_card {
                width: calc(25% - 40px);
            }
        }

        @media screen and (max-width: 1150px) { 
            .regular_card {
                width: calc(33.33% - 40px);
            }
        }

        @media screen and (max-width: 860px) { 
            .regular_card {
                width: calc(50% - 40px);
            }
        }

        @media screen and (max-width: 520px) { 
            .regular_card {
                width: calc(100% - 40px);
            }
        }

        .regular_card:hover {
            transform: translateY(-6px);
            cursor: pointer;
            background-color: #11112fe8;
        }

            .reg_card_title {
                font-size: 18px;
                letter-spacing: 0px;
                color: white;
                text-transform: capitalize;
            }

            .reg_card_sub {
                font-size: 12px;
                letter-spacing: -0.2px;
                color: rgba(255, 255, 255, 0.772);
                line-height: 100%;
            }