* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;    
}

    .slider {
        width: 100%;
        height: 100%;
        position: relative;
    }

        .image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.div-container-white {
    padding: 0px 200px;
}

.div-container-red {
    padding: 0px 200px;
    background-color: #c70000;
    color: #FFFFFF;
}

        .title-segment{
            padding: 100px 0px;
            text-align: center;
        }

        .content-segment-1{
            display: flex;
            width: 100%; /* Full width of parent */
            gap: 50px; /* Space between columns */
            padding-bottom: 100px;
        }

            .content-segment-1 .column-left {
                flex: 2; /* Takes 2/3 of available space */
            }

            .content-segment-1 .column-right {
                flex: 1; /* Takes 1/3 of available space */
            }

                .segment-1-image {
                    object-fit: cover;
                    border-radius: 20px;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                    opacity: 0; /* Start invisible */
                    transition: opacity 1s ease-in-out, transform 0.2s;
                }

                .segment-1-image.visible {
                    opacity: 1; /* Fade in when visible */
                }

        .content-segment-2{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            padding-bottom: 100px;
            gap: 50px;
        }

        .card {
                    width:30%;
                    height: 300px;
                    padding: 20px;
                    border-left: solid 1px #ffffff;
                    opacity: 0; /* Start invisible */
                    transition: opacity 1s ease-in-out, transform 0.2s;
            }

            .card.visible {
                opacity: 1; /* Fade in when visible */
            }

                .ob {
                    width: 100%;
                }

                .ob-image {
                    object-fit: cover;
                    width: 100%;
                    border-radius: 20px;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                }

            .card-2 {
                width:30%;
                height: 300px;
                padding: 20px;
                background-color: #c70000;
                color: #ffffff;
                border-radius: 20px;
                opacity: 0; /* Start invisible */
                transition: opacity 1s ease-in-out, transform 0.2s;
            }

            .card-2.visible {
                opacity: 1; /* Fade in when visible */
            }

                .icon {
                    width: 10%;
                }

                    .icon-image {
                        width: 100px;
                    }

                    .scope{
                        height: 10%;
                }

        .content-segment-3{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            padding-bottom: 100px;
            gap: 50px;
        }

        .content-segment-3-1{
            text-align: center;
            width: 100%;
            padding-bottom: 100px;
        }


            .card-3 {
                display: flex;
                justify-content: center;
                width:25%;
                padding: 20px;
                background-color: #ffffff;
                border-radius: 20px;
                opacity: 0; /* Start invisible */
                transition: opacity 1s ease-in-out, transform 0.2s;
            }

            .card-3.visible {
                opacity: 1; /* Fade in when visible */
            }

            .card-3:hover {
                transform: scale(1.2);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

                .publish-image {
                        width: 100%;
                    }

            .card-4 {
                display: flex;
                justify-content: center;
                width:20%;
                padding: 10px;
                background-color: #ffffff;
                border-radius: 20px;
                opacity: 0; /* Start invisible */
                transition: opacity 1s ease-in-out, transform 0.2s;
            }

            .card-4.visible {
                opacity: 1; /* Fade in when visible */
            }

            .card-4:hover {
                transform: scale(1.2);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }








                    
/*____________________________________________________________________________________________________________________________________*/

/* Mobile Styles */
@media only screen and (max-width: 873px) {

    body {
        font-size: 12px;      
    }  
    
    .div-container-white {
        padding: 0px 20px;
    }

    .div-container-red {
        padding: 0px 20px;
        background-color: #c70000;
    }

        .title-segment{
            padding: 50px 0px;
        }

        .content-segment-1 {
            flex-direction: column; /* Stack columns on mobile */
            padding-bottom: 50px;
        }

        .content-segment-1 .column-left,
        .content-segment-1 .column-right {
            flex: none; /* Reset flex for stacking */
            width: 100%; /* Full width on mobile */
        }

            .segment-1-image {
                    width: 100%;
                    height: 200px;
                }

        .content-segment-2 {
            flex-direction: column; /* Stack columns on mobile */
            align-items: center;
            padding-bottom: 50px;
            gap: 20px;
        }

        .card {
            width: 100%;
            height: 200px;
        }

            .ob-image {
                height: 100px;
                }

        .card-2 {
            width: 100%;
            height: 175px;
        }

            .icon-image {
                width: 50px;
            }

    .content-segment-3{
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
    gap: 20px;
}

        .content-segment-3-1{
            padding-bottom: 50px;
        }

        .card-3 {
            width: 50%;
        }

            .publish-image {
                width: 100px;
            }

        .card-4 {
                width:50%;
        }

            
}