/*#ACD401 เขียวอ่อน
# เขียวเข้ม
#8A5E39 น้ำตาล*/
* {
    font-family: Kanit, Kanit-Bold, Roboto, Roboto-Bold;
}

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

@font-face {
    font-family: Roboto-Bold;
    src: url(../fonts/Roboto/Roboto-Bold.ttf);
}

@font-face {
    font-family: Kanit;
    src: url(../fonts/Kanit/Kanit-Regular.ttf);
}

@font-face {
    font-family: Kanit-Bold;
    src: url(../fonts/Kanit/Kanit-Bold.ttf);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 18px;
}

/*#section1 {
    height: 80vh;
}*/

#mainNav {
    padding: 0.5rem 0;
    background-color: #fff;
    font-size: 1.2rem;
}

    #mainNav .navbar-brand {
        font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }

        #mainNav .navbar-brand:hover, #mainNav .navbar-brand:active {
            color: #ABD307;
        }

    #mainNav .navbar-toggler {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
        color: #212529;
    }

    #mainNav .navbar-nav .nav-item .nav-link {
        color: #212529;
    }

        #mainNav .navbar-nav .nav-item .nav-link:hover {
            color: #6c757d;
        }

        #mainNav .navbar-nav .nav-item .nav-link.active {
            color: #ABD307;
        }

#form-message-warning, #form-message-success {
    display: none;
}

#form-message-warning {
    color: #B90B0B;
}

.background-fix-center {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.background-fix-left {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

.partner-padding {
    padding-left: 3% !important;
    padding-right: 3% !important;
}

.partner-padding-2 {
    padding-left: 10% !important;
    padding-right: 10% !important;
}

.bg-black {
    background-color: #000 !important;
}

a, a:hover {
    text-decoration: none !important;
}

footer a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

    footer a:hover, footer a:active, footer a:focus {
        color: rgba(255, 255, 255, 0.75);
        text-decoration: underline;
    }

.bg-gradient-primary-to-secondary {
    background: linear-gradient(45deg, #ABD307, #375E1E) !important;
}

aside, section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.app-badge {
    height: 4rem;
}

.masthead {
    /*background-color: #f8f9fa;*/
    padding-top: 3rem;
    padding-bottom: 3rem;
}

    .masthead .masthead-device-mockup {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

        .masthead .masthead-device-mockup .circle {
            position: absolute;
            fill: url(#circleGradient);
            width: 70%;
            display: none;
        }

            .masthead .masthead-device-mockup .circle .gradient-start-color {
                stop-color: #ABD307;
            }

            .masthead .masthead-device-mockup .circle .gradient-end-color {
                stop-color: #375E1E;
            }

        .masthead .masthead-device-mockup .shape-1 {
            position: absolute;
            height: 1rem;
            width: 1rem;
            transform: rotate(-10deg);
            fill: #ABD307;
            bottom: 15%;
            left: 10%;
        }

        .masthead .masthead-device-mockup .shape-2 {
            position: absolute;
            height: 0.75rem;
            width: 0.75rem;
            fill: #ABD307;
            top: 15%;
            right: 10%;
        }

        .masthead .masthead-device-mockup .device-wrapper {
            max-width: 10rem;
        }

.cardst {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 0;
    list-style-type: none;
}

.cardt {
    position: relative;
    display: block;
    height: 100%;
    border-radius: calc(var(--curve) * 1px);
    overflow: hidden;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 3px 3px 7px grey;
}

.card__imaget {
    width: 100%;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card__overlayt {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    border-radius: calc(var(--curve) * 1px);
    background-color: var(--surface-color);
    transform: translateY(100%);
    transition: .2s ease-in-out;
}

.cardt:hover .card__overlayt {
    transform: translateY(0);
}

.card__headert {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2em;
    padding: 2em;
    border-radius: calc(var(--curve) * 1px) 0 0 0;
    background-color: var(--surface-color);
    transform: translateY(-100%);
    transition: .2s ease-in-out;
}

.card__arct {
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 1;
}

    .card__arct path {
        fill: var(--surface-color);
        d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
    }

.cardt:hover .card__headert {
    transform: translateY(0);
}

.card__thumbt {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.card__titlet {
    font-size: 1em;
    margin: 0 0 .3em;
    color: #6A515E;
}

.card__taglinet {
    display: block;
    margin: 1em 0;
    font-family: "MockFlowFont";
    font-size: .8em;
    color: #D7BDCA;
}

.card__statust {
    font-size: .8em;
    color: #D7BDCA;
}

.myofficeviewer {
    box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);
    border: 1px solid #ECECEC;
}

.card__descriptiont {
    margin-left: 35px;
    padding: 0 2em 2em;
    margin: 0;
    color: #D7BDCA;
    font-family: "MockFlowFont";
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.news-img {
    border-radius: 30px;
}

.text-innews {
    position: absolute;
    bottom: 0;
    background-color: #fff;
    padding: 1rem;
    width: 100%;
}

.features-device-mockup {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .features-device-mockup .circle {
        position: absolute;
        left: 0;
        fill: url(#circleGradient);
        width: 70%;
        display: none;
    }

        .features-device-mockup .circle .gradient-start-color {
            stop-color: #ABD307;
        }

        .features-device-mockup .circle .gradient-end-color {
            stop-color: #375E1E;
        }

    .features-device-mockup .shape-1 {
        position: absolute;
        height: 1rem;
        width: 1rem;
        transform: rotate(10deg);
        fill: #ABD307;
        top: 15%;
        right: 10%;
    }

    .features-device-mockup .shape-2 {
        position: absolute;
        height: 0.75rem;
        width: 0.75rem;
        fill: #ABD307;
        bottom: 15%;
        left: 10%;
    }

    .features-device-mockup .device-wrapper {
        max-width: 10rem;
    }

.device[data-device=iPhoneX][data-orientation=portrait][data-color=black] {
    padding-bottom: 198.898071625%;
}

    .device[data-device=iPhoneX][data-orientation=portrait][data-color=black] .screen {
        top: 3.1855955679%;
        left: 6.8870523416%;
        width: 86.2258953168%;
        height: 93.6288088643%;
    }

    .device[data-device=iPhoneX][data-orientation=portrait][data-color=black]::after {
        content: "";
        background-image: url("../assets/img/portrait_black.png");
    }

    .device[data-device=iPhoneX][data-orientation=portrait][data-color=black] .button {
        display: none;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
    }

.device-wrapper {
    max-width: 300px;
    width: 100%;
}

.device {
    position: relative;
    background-size: cover;
}

    .device::after {
        position: absolute;
        background-size: cover;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .device .screen {
        position: absolute;
        background-size: cover;
        pointer-events: auto;
    }

    .device .button {
        position: absolute;
        cursor: pointer;
    }

.spacer {
    flex: 1;
}

.form-group {
    margin-bottom: 1rem;
}

.breadcrumb {
    background-color: transparent;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .5px;
    margin-bottom: 10px;
    display: block;
}

.breadcrumb-item :hover {
    color: #6c757d !important;
}

.breadcrumb-item a {
    color: #212529 !important;
}

.breadcrumb {
    --bs-breadcrumb-padding-x: 0;
    --bs-breadcrumb-padding-y: 0;
    --bs-breadcrumb-margin-bottom: 1rem;
    --bs-breadcrumb-bg:;
    --bs-breadcrumb-border-radius:;
    --bs-breadcrumb-divider-color: #ABD307;
    --bs-breadcrumb-item-padding-x: 0.5rem;
    --bs-breadcrumb-item-active-color: #ABD307;
    display: flex;
    flex-wrap: wrap;
    padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
    margin-bottom: var(--bs-breadcrumb-margin-bottom);
    font-size: var(--bs-breadcrumb-font-size);
    list-style: none;
    background-color: var(--bs-breadcrumb-bg);
    border-radius: var(--bs-breadcrumb-border-radius);
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: var(--bs-breadcrumb-item-padding-x);
}

    .breadcrumb-item + .breadcrumb-item::before {
        float: left;
        padding-right: var(--bs-breadcrumb-item-padding-x);
        color: var(--bs-breadcrumb-divider-color);
        content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
    }

.breadcrumb-item.active {
    color: var(--bs-breadcrumb-item-active-color);
}

.text-center {
    text-align: center !important;
}

.header-partner {
    font-size: 3.5rem !important;
    color: #000000 !important;
}

.heading-text.heading-section > h2:before {
    background-color: #F3D721;
}

.circle-container-team {
    width: 200px; /* กำหนดขนาดของ container */
    height: 200px;
    border-radius: 50%; /* ทำให้ container เป็นวงกลม */
    overflow: hidden; /* ซ่อนส่วนที่เกินขอบวงกลม */
    position: relative; /* เพื่อให้สามารถใช้ position ได้ */
    border: 1px solid #DFDFDF;
}

    .circle-container-team img {
        width: 100%; /* ทำให้รูปภาพเต็ม container */
        height: auto;
        display: block;
        position: absolute; /* ทำให้สามารถใช้ top, left, right, bottom ได้ */
        top: 50%; /* ย้ายไปที่กลางแนวตั้ง */
        left: 50%; /* ย้ายไปที่กลางแนวนอน */
        transform: translate(-50%, -50%); /* ปรับตำแหน่งทำให้อยู่ที่กลาง */
    }

.circle-container {
    width: 200px; /* กำหนดขนาดของ container */
    height: 200px;
    border-radius: 50%; /* ทำให้ container เป็นวงกลม */
    overflow: hidden; /* ซ่อนส่วนที่เกินขอบวงกลม */
    position: relative; /* เพื่อให้สามารถใช้ position ได้ */
    border: 1px solid #DFDFDF;
}

    .circle-container img {
        width: 100%; /* ทำให้รูปภาพเต็ม container */
        height: auto;
        display: block;
        position: absolute; /* ทำให้สามารถใช้ top, left, right, bottom ได้ */
        top: 75%; /* ย้ายไปที่กลางแนวตั้ง */
        left: 50%; /* ย้ายไปที่กลางแนวนอน */
        transform: translate(-50%, -50%); /* ปรับตำแหน่งทำให้อยู่ที่กลาง */
    }

/*///////////*/

div.gallery {
    border: 1px solid #ccc;
    position: relative;
}

    div.gallery:hover {
        border: 1px solid #777;
    }

    div.gallery img {
        width: 100%;
        height: auto;
    }

div.desc {
    padding: 15px;
    text-align: center;
}


.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
    padding-block-end: 1%;
}

.bg-brown {
    background-color: #a28569 !important;
}

.bg-opacity {
    position: relative;
    background-color: #000;
}

.bg-plant {
    position: relative;
    background-color: #000;
}

.bg-green {
    background-color: #375E1E !important;
}

.bg-green-soft {
    background-color: #96B652 !important;
}

.footer-section-1 {
    display: grid;
    grid: auto/ auto auto auto;
    font-size: 1.35vw
}

.col-block-1 {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    /* align-self: center;*/
}

    .col-block-1 a {
        color: #fff !important;
    }

        .col-block-1 a:hover {
            color: #8A5E39 !important;
        }

.text-email:hover {
    color: #8A5E39 !important;
}

.text-sub {
    font-size: 1.05vw;
}

.section-partner {
    display: grid;
    grid: auto/ 25% 23% 1fr;
    height: 200px;
    margin: 1rem 0 3rem 0;
    gap: 8rem;
}

.section-partner-sub {
    display: block;
    justify-content: center;
}

.padding-footer-section-1 {
    padding: 0 3rem 0 3rem;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.desc {
    position: absolute;
    background: rgba(0, 0, 0, 0.5); /* ปรับสีพื้นหลังตามต้องการ */
    color: #fff; /* ปรับสีตัวอักษรตามต้องการ */
    width: 100%;
    padding: 10px;
    text-align: center;
    opacity: 0;
    z-index: -1;
}

.section-news {
    display: grid;
    grid: auto / 25% 25% 25% 25%;
    gap: 1.5rem;
}

.section-tutorial {
    display: grid;
    grid: auto / auto auto auto auto auto;
    margin: 3rem 0 3rem 0;
    gap: 1rem;
}

.font-normal {
    font-size: 1.2rem;
}

.font-normal-1 {
    font-size: 1rem;
}

.curser:hover {
    cursor: pointer;
}

.gallery:hover .desc {
    opacity: 1;
    z-index: 1;
    transform: translate(0%, -100%);
}

.text-header-green {
    color: #375E1E !important;
}

.text-header-greensoft {
    color: #ACD401 !important;
}

.text-header-brown {
    color: #8A5E39 !important;
}

.text-header-sub {
    color: #6A515E !important;
}

.text-title-0 {
    font-size: 2rem;
}

.text-title-3 {
    font-size: 1.5rem;
}

.text-title-1 {
    font-size: 4rem;
}

.text-title-2 {
    font-size: 4rem;
}

.card-overlay {
    background: rgba(0, 0, 0, 0.2);
    height: 100%;
    width: 100%;
}

.background-full {
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
}

.bg-opacity::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.7;
    background: url('/assets/images/img-1.jpg') no-repeat center center;
    background-size: cover;
}

.bg-plant::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.9;
    background: url('/assets/images/1363696.jpg') no-repeat center center;
    background-size: cover;
}


.bg-section-1 {
    position: relative;
    width: 100%;
    height: 800px;
}

.bg-plant-1 {
    height: 15vh;
    position: relative;
}



.slideshow-container-custom {
    position: relative;
    margin: auto;
}

.circle-tutorial {
    background-color: #fff !important;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    overflow: hidden;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
}


    .circle-tutorial img {
        width: 65%;
        height: auto;
    }

.circle-news {
    border-radius: 50%;
    height: 65px;
    width: 65px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: -10px;
}


    .circle-news img {
        width: 75%;
        height: auto;
    }

.circle-partner {
    border-radius: 50%;
    height: 65px;
    width: 65px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: -5px;
}


    .circle-partner img {
        width: 75%;
        height: auto;
    }

.circle-plant {
    border-radius: 50%;
    height: 65px;
    width: 65px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -4px;
    left: -10px;
}


    .circle-plant img {
        width: 90%;
        height: auto;
    }


.bg-section-2 {
    display: flex;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 3rem 0;
}

.container-tasklist {
    display: grid;
    grid: auto/50% auto;
    padding: 1rem;
    gap: 1rem;
    min-height: 280px;
}

.container-tasklist-2 {
    display: grid;
    grid: auto/50% auto;
    gap: 1rem;
}

.bg-section-1-sub {
    display: grid;
    grid: auto / auto 50%;
    height: 100%;
}

.img-section-2 img {
    width: 400px;
    height: auto;
}

.display-flex-center {
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.img-tasklist-detail {
    display: flex;
    margin: auto;
    justify-content: center;
}

    .img-tasklist-detail img {
        width: auto;
        height: 80%;
        bottom: 0;
        position: absolute;
    }

.text-green-custom {
    color: #375E1E !important;
}

.text-brown-custom {
    color: #8A5E39 !important;
}

.box-shadow-grey {
    box-shadow: 3px 3px 7px grey;
}


.btn-green-custom {
    background-color: #96B652 !important;
    border: none !important;
}

    .btn-green-custom:hover {
        background-color: #8A5E39 !important;
    }

.container-video {
    position: relative;
    display: grid;
    place-items: center;
    height: 60vh;
    width: 60vw;
    margin: 3rem auto;
}

.video-fullscreen {
    position: absolute;
    z-index: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}

.container-tasklist-detail {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    flex-wrap: wrap;
    width: 90%;
    margin: 0px auto;
}

/*.img-tasklist-detail {
    height: auto;
    position: absolute;
    width: 100%;
    bottom: -17px;
}*/

.custom-margin-master {
    margin-top: 85px !important;
}

.nav-link:hover {
    color: #8A5E39 !important;
}

.dropdown-item:active {
    background-color: #8A5E39 !important;
}

.custom-cursor-active {
    cursor: pointer;
}

.custom-a a {
    color: #8A5E39 !important;
    font-size: 1.2rem;
}

    .custom-a a:hover {
        text-decoration: underline #8A5E39 !important;
    }

.tasklist-ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

    .tasklist-ul li a:hover {
        color: #FFCC00 !important;
    }

    .tasklist-ul li a {
        color: #FFF !important;
        font-size: 18px;
    }

.tasklis-solution {
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
}

.accordion-button:hover {
    background-color: #8A5E39 !important;
    color: #fff;
}

.accordion-button:focus {
    border: none !important;
}

.accordion-button:not(.collapsed) {
    color: #FFF;
    background-color: rgba(138,94,57,1);
}

.margin-all {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.size-banner {
    height: 15vh;
}

@media (min-width: 0px) {
    .web-logo {
        width: 70%;
    }
}

@media (min-width: 576px) {
    .masthead .masthead-device-mockup .circle {
        width: 70%;
        display: block;
    }

    .masthead .masthead-device-mockup .device-wrapper {
        max-width: 12.5rem;
    }

    .web-logo {
        width: 50%;
    }

    .features-device-mockup .circle {
        width: 70%;
        display: block;
        left: auto;
    }

    .features-device-mockup .device-wrapper {
        max-width: 12.5rem;
    }
}

@media (min-width: 768px) {
    .masthead .masthead-device-mockup .circle {
        width: 60%;
    }

    .masthead .masthead-device-mockup .device-wrapper {
        max-width: 15rem;
    }

    .web-logo {
        width: 50%;
    }

    .features-device-mockup .circle {
        width: 60%;
        left: auto;
    }

    .features-device-mockup .device-wrapper {
        max-width: 15rem;
    }
}

@media (min-width: 992px) {
    .masthead .masthead-device-mockup .circle {
        width: 90%;
    }

    .masthead .masthead-device-mockup .device-wrapper {
        max-width: 15rem;
    }

    .web-logo {
        width: 30%;
    }

    .features-device-mockup .circle {
        width: 90%;
        left: -25%;
    }

    .features-device-mockup .shape-1 {
        top: 5%;
        right: -15%;
    }

    .features-device-mockup .shape-2 {
        bottom: 10%;
        left: -10%;
    }

    .features-device-mockup .device-wrapper {
        max-width: 15rem;
        margin-left: auto;
    }
}

@media (min-width: 1200px) {
    .masthead .masthead-device-mockup .circle {
        width: 75%;
    }

    .masthead .masthead-device-mockup .device-wrapper {
        max-width: 15rem;
    }

    .web-logo {
        width: 30%;
    }

    .features-device-mockup .circle {
        width: 75%;
        left: 0;
    }

    .features-device-mockup .shape-2 {
        bottom: 15%;
        left: 10%;
    }

    .features-device-mockup .device-wrapper {
        max-width: 15rem;
    }
}

@media (min-width: 1400px) {
    .masthead .masthead-device-mockup .circle {
        width: 70%;
    }

    .masthead .masthead-device-mockup .device-wrapper {
        max-width: 17rem;
    }

    .web-logo {
        width: 20%;
    }

    .features-device-mockup .circle {
        width: 80%;
        left: 0;
    }

    .features-device-mockup .device-wrapper {
        max-width: 17rem;
    }
}

@media (max-width: 1400px) {
    .custom-margin-master {
        margin-top: 105px !important;
    }
}

@media (max-width: 1200px) {
    .section-tutorial {
        display: grid;
        grid: auto auto / auto auto auto;
        margin: 3rem 0 3rem 0;
        gap: 1rem;
    }

    .container-video {
        height: 40vh;
        width: 68vw;
    }

    .tasklist-ul li a {
        font-size: 16px;
    }

    .custom-margin-master {
        margin-top: 91px !important;
    }
}

@media (max-width: 1024px) {
    .footer-section-1 {
        grid: auto auto auto / auto;
        font-size: 2.1vw
    }

    .text-sub {
        font-size: 1.8vw;
    }

    .col-block-1 a {
        border-bottom: 0.5px solid #FFF;
        padding: 0.5rem 0;
    }
    /*    .last-menu {
        border-bottom:none !important;
    }*/
    .col-block-2 {
        display: grid;
        justify-content: center;
        text-align: center;
        margin-top: 1rem;
    }

    .col-block-3 {
        display: grid;
        justify-content: center;
        text-align: center;
        margin-top: 1rem;
    }

    .container-video {
        height: 35vh;
    }
}

@media (max-width: 992px) {
    .section-partner {
        display: grid;
        grid: 22% 15% 1fr / auto;
        height: 400px;
        margin: 1rem 0 3rem 0;
        gap: 2.5rem;
    }

    .bg-section-2 {
        margin: 0;
        justify-content: center;
        gap: 1rem;
    }
    /*
    .tasklist-ul {
        columns: 3;
        -webkit-columns: 3;
        -moz-columns: 3;
    }*/
    .img-tasklist-detail img {
        bottom: -1.1rem;
        position: relative;
        height: 350px;
    }

    .custom-margin-master {
        margin-top: 105px !important;
    }
}

@media (max-width: 767px) {
    .col-block-1 {
        font-size: 14px;
    }

    .footer-section-1 {
        font-size: 4.374vw;
    }

    .text-sub {
        font-size: 3.374vw;
    }

    .padding-footer-section-1 {
        padding: 0 0.5rem 0 0.5rem;
    }

    .section-tutorial {
        display: grid;
        grid: auto auto auto auto / auto;
        margin: 3rem 0 3rem 0;
        gap: 1rem;
    }

    .bg-section-1-sub {
        display: grid;
        grid: 5% 95% /auto;
        height: 100%;
    }

    .container-video {
        height: 25vh;
    }

    .custom-margin-master {
        margin-top: 79px !important;
    }

    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}


@media only screen and (max-width: 575px) {
    .custom-margin-master {
        margin-top: 108px !important;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }

    .img-section-2 img {
        width: 300px;
        height: auto;
    }

    .text-title-0 {
        font-size: 1.5rem;
    }

    .text-title-3 {
        font-size: 1.1rem;
    }

    .text-title-1 {
        font-size: 2.5rem;
    }

    .text-title-2 {
        font-size: 2.5rem;
    }

    .container-video {
        width: 80vw;
    }

    .custom-margin-master {
        margin-top: 75px !important;
    }

    .container-tasklist {
        grid: 40% auto / auto;
    }

    .cardbody-customsize-tasllist-1 {
        height: 68vh;
    }

    .tasklist-ul {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
}