* {
    /* outline: 1px solid red; */
}

body {
    position: relative;
    height: fit-content;
    background-color: var(--BlackBackground);
}




.logo-letter {
    position: absolute;
    font-size: 40rem;
    z-index: 1;
    color: rgba(255, 98, 0, 0.459);
    font-family: 'Poppins';
    font-weight: normal;
}



.s {
    position: absolute;
    right: 0;
    top: -20px;
}

.p {
    left: 0%;
    top: 400px;


}

.o {
    right: 0%;
    top: 1200px;
}

.t {
    left: 0%;
    top: 2200px;
}

.c {

    right: 0%;
    top: 2600px;
}

.oo {
    left: 0%;
    top: 3000px;
}

.d {
    right: 0%;
    top: 3800px;
}

.e {
    left: 4%;
    top: 4800px;
}

header {
    min-height: 100vh;
    padding: var(--SectionPadding) 10px;
    background-image: url(../imgs/imagecompressor/courses.jpg);
    background-size: cover;
    background-position: center;
    /* color: black; */
}

section {
    position: relative;
}

section.one {
    padding: var(--SectionPadding) 10px var(--SectionPadding);
    position: relative;
    min-height: 60vh;
}



section.tow {
    min-height: 60vh;
    /* height: 100%; */
    position: relative;
    padding: 0px 10px 0px;
    margin-bottom: 0px;
    /* background-color: rgb(37, 23, 18); */
}

section.tow .row .col-4:nth-child(2) {
    /* border: 1px solid red; */
    height: 100%;
    /* border: 1px solid white; */
    padding: 10px;
}



.text-right,
.text-left {
    z-index: 10;
    transition: all 1s ease;
    /* width: min(100%, 800px); */
    width: min(100%, 900px);
    font-size: 1.6rem;
    margin: 10px 0 100px;

    /* background-color: red; */
}




section.three {
    padding: var(--SectionPadding) 10px 0px;
    position: relative;
    min-height: 100vh;
}








section.three button {
    border: 1px solid var(--OrangeText);
    padding: 5px 7px;
    background-color: var(--BlackBackground);
}

section.three button a {
    color: var(--OrangeText);
}

.course-row {
    position: relative;
    z-index: 1;
}

/* .course-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 100%;
    filter: blur(1);
} */

img {
    /* filter: grayscale(1); */
}



.course-image {
    max-width: 550px;
    width: 100%;
    height: 500px;
    position: relative;
    z-index: 1;
    border: 1px solid orangered;
    box-shadow: 0px 5px 16px orangered;
}

.course-image img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    /* filter: grayscale(1); */
    object-position: center;
}

.course-details {
    max-width: 600px;
    width: 100%;
    color: white;
    /* margin-top: 100px; */
}



section.four {
    padding: 100px 10px 0px;
    position: relative;
    min-height: 60vh;
}

section.five {
    padding: 10px 10px 0px;
    position: relative;
    min-height: 100vh;
}








.product-box {
    /* background-image: url(/imgs/project1.png); */
    object-fit: cover;
    box-shadow: 0 5px 10px black;
}

.product-box img {
    max-width: 350px;
    width: 100%;
    height: 350px;
    /* height: 100%; */
    object-fit: cover;
}


@media (min-width:992px) {
    .course-details {
        margin-top: 100px;
    }



}

@media (max-width:991px) {
    .course-image {
        max-width: 450px;
        width: 100%;

        height: 400px;
    }

    .logo-letter {
        font-size: 30rem;
    }
}


@media (max-width:55px) {
    .course-image {
        max-width: 350px;
        width: 100%;

        height: 300px;
    }

    .logo-letter {
        font-size: 20rem;
    }
}