@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;900&display=swap");

:root {
    --prim-color: #fbb042;
    --sec-color: #000000;
    --tert-color: #264e74;
    --text-color: #242424;
    --light-grey: #f7f7f7;
}

.home-con {
    padding: 20px;
}

.vid-con {
    position: relative;
}

.vid-title {
    position: absolute;
    top: 60%;
    left: 20%;
    transform: translate(-50%, -50%);
    color: var(--prim-color);
    font-weight: bold;
}

.vid-subtitle {
    position: absolute;
    top: 70%;
    left: 20%;
    transform: translate(-50%, -50%);
    color: var(--prim-color);
    font-weight: bold;
}

.sec-title {
    color: var(--tert-color);
}

.prtnr-con {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.prtnr {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all ease 0.3s;
    cursor: pointer;
    margin: 15px 25px;
    height: 50px;
    object-fit: cover;
}

.prtnr:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
    .vid-title {
        top: 60%;
        left: 50%;
        font-size: 16px;
    }

    .vid-subtitle {
        top: 70%;
        left: 50%;
        font-size: 14px;
    }
}

@media screen and (max-width: 600px) {
    .vid-con {
        display: none;
    }

    .vid-title {
        top: 50%;
        left: 50%;
        font-size: 16px;
    }

    .vid-subtitle {
        top: 70%;
        left: 50%;
        font-size: 14px;
    }

    .prtnr {
        height: 30px;
    }
}