/* 2xL */
@media (width >=1536px) {}

/* 1xL */
@media (width <=1280px) {}

@media (width > 1024px){
    .r-img{
        display: none;
    }
}
/* LG */
@media (width <=1024px) {
    /* e-m */
    .e-m .main{
        padding: 50px 0px;
    }
    .e-m .main .row {
        margin: auto;
        width: 100%;
        display: grid;
        justify-items: center;
    }
    .e-m .col1 {
        width: 90%;
        text-align: center;
    }
    .r-img{
        margin: auto;
        display: grid;
        width: min-content;

    }
    .e-m .col1 .r-img .heading {
        color: rgb(215, 215, 215);
        text-transform: capitalize;
    }
    .e-m .col1 .e-pic{
        width: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgb(0, 0, 0);
     background-image: linear-gradient(35deg, rgb(5, 5, 5), rgb(57, 57, 57) , rgb(5, 5, 5));
    }
    .e-m .col1 .heading .icon {
        color: var(--main-color);
        display: inline;
        font-size: 15px;
        position: relative;
        top: -8px;
    }

    .e-m .col1 .heading i {
        margin-left: -5px;
    }
    .e-m .col1 .heading .line{
        display: block;
    }
    .e-m .col1 .heading {
        color: white;
        padding: 10px 0px;
        font-size: 20px;
        font-weight: 550;
    }
    .e-m .col1 p {
        color: var(--p-text-color);
        font-weight: 400;
        font-size: 13px;
        padding: 5px 0px 0px 0px;
        text-transform: inherit;
    }
    .e-m .col1 .e-block {
        display: grid;
        gap: 5px;
        margin-left: 0px;
    }

    .e-m .col1 .e-block H3 {
        color: var(--main-color);
        font-size: 25px
    }

    .e-m .col1 .e-block .e-row {
        display: flex;
        width: 100%;
        gap: 5px;
    }

    .e-m .col1 .e-block .e-row .e-col {
        border: 2px solid rgb(255, 255, 255);
        border-radius: 5px;
        color: white;
        display: grid;
        place-content: center;
        text-align: center;
        padding: 5px 20px;
        font-size: 10px;
        font-weight: 500;
    }

    .e-m .col1 .e-block .e-row .e-col:hover {
        color: var(--main-color);
        border: 2px solid var(--main-color);
    }

    .e-m .col1 a {
        background-color: var(--main-color);
        color: white;
        border-radius: 5px;
        padding: 5px 10px 7px 10px;
        display: flex;
        margin: auto;
        margin-top: 8px;
        width: fit-content;
        font-weight: 500;
    }

    .e-m .col1 a:hover {
        color: black;
    }

    .e-m .main .row .col2 {
        width: 40%;
        display: grid;
        place-items: center;
        justify-items: center;

    }

    .e-m .main .row .col2{
        display: none;
    }
}


/* MD */
@media (width >=768px) {

}

@media (width < 768px) {
    /* e-m */

    .e-m .main .row {
        margin: auto;
        width: 100%;
        display: grid;
        justify-items: center;
    }

    .e-m .col1 {
        width: 90%;
        text-align: center;
    }

    .e-m .col1 .heading .icon {
        color: var(--main-color);
        display: inline;
        font-size: 15px;
        position: relative;
        top: -8px;
    }

    .e-m .col1 .heading i {
        margin-left: -5px;
    }
    .e-m .col1 .heading .line{
        display: block;
    }
    .e-m .col1 .heading {
        display: inline;
        color: rgb(215, 215, 215);
        text-transform: capitalize;
    }


    .e-m .col1 p {
        color: var(--p-text-color);
        font-weight: 400;
        font-size: 9px;
        padding: 5px 0px 0px 0px;
        text-transform: inherit;
    }

    .e-m .col1 .e-block {
        display: grid;
        place-items: center;
        gap: 5px;
        margin-left: 0px;
    }

    .e-m .col1 .e-block H3 {
        color: var(--main-color);
        font-size: 15px
    }

    .e-m .col1 .e-block .e-row {
        display: flex;
        width: 100%;
        gap: 5px;
        justify-items: center;

    }

    .e-m .col1 .e-block .e-row .e-col {
        border: 2px solid rgb(255, 255, 255);
        border-radius: 5px;
        color: white;
        display: grid;
        place-content: center;
        text-align: center;
        padding: 10px 5px;
        font-size: 10px;
        width:25%;
        height: fit-content;
        font-weight: 500;
    }

    .e-m .col1 .e-block .e-row .e-col:hover {
        color: var(--main-color);
        border: 2px solid var(--main-color);
    }

    .e-m .col1 a {
        background-color: var(--main-color);
        color: white;
        border-radius: 5px;
        padding: 5px 10px 7px 10px;
        display: flex;
        margin-top: 8px;
        width: fit-content;
        font-weight: 500;
    }

    .e-m .col1 a:hover {
        color: black;
    }
}

/* SM */
@media (width <=640px) {
       /* e-m */
    .e-m .main .row {
        display: grid;
        justify-items: center;
    }
    .e-m .col1 {
        width: 90%;
        text-align: center;
    }

    .e-m .col1 .heading .icon {
        color: var(--main-color);
        display: inline;
        font-size: 15px;
        position: relative;
        top: -8px;
    }

    .e-m .col1 .heading i {
        margin-left: -5px;
    }

    .e-m .col1 .heading {
        display: inline;
        color: rgb(215, 215, 215);
        text-transform: capitalize;
    }


    .e-m .col1 p {
        color: var(--p-text-color);
        font-weight: 400;
        font-size: 9px;
        padding: 5px 0px 0px 0px;
        text-transform: inherit;
    }

    .e-m .col1 .e-block {
        display: grid;
        place-items: center;
        gap: 5px;
        margin-left: 0px;
    }

    .e-m .col1 .e-block H3 {
        color: var(--main-color);
        font-size: 15px
    }

    .e-m .col1 .e-block .e-row {
        display: flex;
        width: 100%;
        gap: 5px;
        justify-items: center;

    }

    .e-m .col1 .e-block .e-row .e-col {
        border: 1px solid rgb(255, 255, 255);
        border-radius: 5px;
        color: white;
        display: grid;
        place-content: center;
        text-align: center;
        padding: 10px 10px;
        font-size: 7px;
        width:22%;
        height:40px;
        margin: auto;
        font-weight: 500;
    }
    .e-m .col1 .e-block .e-row .e-col:hover {
        color: var(--main-color);
        border: 2px solid var(--main-color);
    }
    .e-m .col1 a {
        background-color: var(--main-color);
        color: white;
        border-radius: 5px;
        padding: 5px 10px 7px 10px;
        display: flex;
        margin-top: 8px;
        width: fit-content;
        font-weight: 500;
    }
    .e-m .col1 a:hover {
        color: black;
    }
}

@media (width <=400px) {
     .e-m .main{
        padding: 20px 0px;
    }
}