@font-face {
    font-family: Heading;
    src: url(../Font/Rubik-Bold.ttf);
}

@font-face {
    font-family: Button;
    src: url(../Font/Poppins-Bold.ttf);
}

@font-face {
    font-family: Paragraph;
    src: url(../Font/Para_Poppins-Regular.ttf);
}

@font-face {
    font-family: Special_Text;
    src: url(../Font/Speacial_Ponari-Jpw1j.ttf);
}

@font-face {
    font-family: Sub_Heading;
    src: url(../Font/Poppins-Bold.ttf);
}


:root {
    --Dark: #000;
    --Yellow: #ffce33;
    --Green: #143c43;
    --Light: #fff;
    --background-color: #FBFBFB;
    --Heading: Heading;
    --Paragraph: Paragraph;
    --Special_Text: Special_Text;
    --Sub_Heading: Sub_Heading;
    --Button: Button;
}

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    user-select: none;
    background: var(--background-color);
    color: var(--Dark) !important;
}



































/* video */
/* video */
/* video */
/* video */
.video-service {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 10%;
    padding-right: 10%;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 2%;
    padding-bottom: 10%;
}

.video-heading {
    display: flex;
    flex-direction: column;
    width: 35%;
    height: auto;
    justify-content: center;
}

.video-heading-left {
    display: flex;
    flex-direction: column;

}

.video-left-top {
    font-weight: bold;
    font-size: x-large;
    padding-bottom: 10px;
    font-family: var(--Heading);
}

.video-left-bottom {
    font-size: larger;
    color: silver;
    padding-bottom: 10px;
    font-family: var(--Paragraph);
}

.video-heading-right {
    display: flex;
    flex-flow: column;
}

.video-right-top {
    font-size: 75px;
    font-family: var(--Heading);
}

.video-right-bottom {
    font-size: x-large;
    padding-top: 20px;
    padding-bottom: 40px;
    color: silver;
    font-family: var(--Paragraph);

}

.video-content {
    display: flex;
    flex-direction: column;
    width: 55%;
    height: auto;
    justify-content: center;
}

.video-right-name {
    font-size: medium;
    font-weight: 900;
    padding-top: 10%;
    color: #fff;
    text-align: center;
    font-family: var(--Paragraph);
    letter-spacing: 2px;
}

.rectangle {
    background-color: #ffce33;
    width: 20%;
    height: 15%;
    position: absolute;
    z-index: -2;
    transform: translate(50%, -52%);
}

.video-content-left {
    height: 100%;
    padding-top: 15px;
    z-index: -1;
}
.video-content-left-Logo{
    height: 100%;
    padding-top: 15px;
    z-index: -1;
}

.video-content-left video {
    width: 100%;
    height: 100%;
    z-index: 0;
    border: none;
}

.video-content-left-Logo img {
    width: 100%;
    height: auto !important;
    z-index: 0;
    border: none;
}

.video-content-right {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    display: grid;
}


.video-right-service {
    display: flex;
    flex-flow: column;
    row-gap: 10px;
    justify-content: space-between;
}

.video-right-logo {
    display: flex;
    justify-content: center;
}

.video-right-logo img {
    width: 80%;
    height: auto !important;
}


.video-content-bottom {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

@media only screen and (max-width:2000px) {
    .rectangle {
        transform: translate(50%, -100%);
    }
}

@media only screen and (max-width:1650px) {
    .rectangle {
        transform: translate(50%, -90%);
        height: 15%;
    }

    .video-content-right {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        display: grid;
    }

    .video-left-bottom {
        font-size: medium;
    }

    .video-right-bottom {
        font-size: medium;
    }

    .video-right-top {
        font-size: 45px;
    }

    .video-left-top {
        font-size: large;
    }

    .video-right-bottom {
        padding-bottom: 20px;
    }
}

@media only screen and (max-width:1227px) {
    .rectangle {
        transform: translate(50%, -90%);
        height: 15%;
    }

    .video-right-service {
        width: 100%;
    }

    .video-content-right {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        display: grid;
    }

}

@media only screen and (max-width:1150px) {
    .rectangle {
        transform: translate(50%, -90%);
        height: 15%;
    }

    .video-right-logo img {
        width: 9vh;
        height: 9vh;
    }
}

@media only screen and (max-width:1000px) {
    .video-service {
        flex-direction: column-reverse;
    }

    .video-heading,
    .video-content {
        width: 100%;
    }

    .video-heading {
        padding-top: 30px;
    }

    .rectangle {
        visibility: hidden;
    }

    .video-right-logo {
        display: flex;
        justify-content: center;
    }

    .video-content-right {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        padding-bottom: 10%;
    }
}

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

    .video-content-right {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-row-gap: 20px;
        grid-column-gap: 30px;
        padding-bottom: 10%;
    }

    /* TEXT */
    .video-right-top {
        font-size: 50px;
        font-weight: 900;
    }

    .video-right-bottom {
        font-size: smaller;
        text-align: left;
        padding: 5% 0%;
    }

    .video-content {
        flex-flow: column;
        row-gap: 20px;
        padding-top: 10%;
    }

    .video-right-name {
        font-size: large;
        font-weight: 900;
        padding-top: 5%;
        text-align: center;
    }

    .video-content-left iframe {
        height: 300px;
    }

    .video-right-bottom {
        font-size: medium;
        text-align: left;
    }

    .video-heading {
        padding-top: 15%;
    }

    .video-left-top {
        font-size: xx-large;
        padding-bottom: 10px;
        text-align: end;
    }

    .video-left-bottom {
        text-align: end;
    }

    /* ICONS */
    .video-right-service {
        width: 100%;
    }

    .video-content-top {
        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 5%;
    }

    .video-content-bottom {
        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 5%;
        padding: 10% 0%;
    }

    .video-right-logo img {
        width: 20vh;
        height: 30vh;
    }
}

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

    /* TEXT */
    .video-right-top {
        font-size: 35px;
        font-weight: 900;
        padding-bottom: 1%;
    }

    .video-right-bottom {
        font-size: small !important;
    }

    .video-left-top {
        font-weight: 1000;
        font-size: x-large;
    }

    /* ICONS */
    .video-right-service {
        width: 100%;
    }

    .video-content-top {
        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 5%;
    }

    .video-content-bottom {
        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 5%;
        padding: 10% 0%;
    }

    .video-right-logo img {
        width: 100%;
        height: 25vh;
    }

    .video-right-name {
        font-weight: 900;
        text-align: center;
    }

    .video-heading {
        padding-top: 2%;
    }

    /* ICONS */
    .video-content-top {
        padding-bottom: 0px;
    }

    .video-service {
        padding: 10% 5%;
    }

    .video-content-right {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        padding-bottom: 10%;
    }
}

@media only screen and (max-width:468px) {
    .video-content-top {
        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 5%;
    }

    .video-content-bottom {
        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 5%;
        padding: 10% 0%;
    }

    .video-right-logo img {
        width: 20vh;
        height: 20vh;
    }
}