.main-section{
    overflow: hidden;
}
section.hero{
    max-height: 200px;
    min-height: 200px;
}
.row.hero-container {
    margin: 0;
    min-height: 200px;
    height: inherit;
    width: 100%;
    padding: 0 4rem;
}.row.hero-container {
    margin: 0;
    min-height: 200px;
    height: inherit;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0rem;
}
.left-image-with-content {
    background-image: none;
    background-color: var(--wc-lightest-shade);
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 20vh;
    max-height: 100%;
    padding: 0 !important;
}
.left-image-with-content .content-for-image {
    position: absolute;
    /* color: var(--wc-highlight-text); */
    /* font-size: var(--fs-h1); */
    font-weight: 700;
    width: 100%;
    height: 100%;
    /* left: 60px; */
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0px;
    top: 0px;
}
.left-image-with-content .content-for-image h1{
    font-size: var(--fs-h1);
    color: var(--wc-black);
}
section.after-hero{
    height: inherit;
    width: 100%;
    max-width: 1400px;
    /* padding: 4rem; */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2rem;
    display: none;
}
section.after-hero .left-content{
    padding: 4rem;
}
section.our-services{
    height: inherit;
    width: 100%;
    /* max-width: 1400px; */
    /* background-color: var(--wc-lightest-shade); */
    padding: 4rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}
.our-services .main-container{
    /* background-color: var(--wc-lightest-shade); */
    width: 100%;
    /* padding: 4rem; */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}
.main-container .second-main-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    max-width: 1400px;
    /* margin: 0 auto; */
    width: 100%;
}
.content-of-main .line.service span {
    position: absolute;
    width: 40px;
    height: 100%;
    left: 49% !important;
    background-color: var(--wc-red);
}
.cards{
    display: flex;
    /* align-items: center; */
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}
.cards img{
    /* padding: 1rem; */
    height: auto;
    width: 100%;
}
.cards a{
    text-decoration: none;
    color: var(--wc-heading-text);
    font-size: var(--fs-h6);
    font-weight: 700;
    font-family: var(--heading-font);
    transition: all 0.6s ease;
}
.read-more{
    margin-bottom: 0px;
}
.read-more span.text{
    font-size: var(--fs-mini);
    color: var(--wc-red);
    font-family: var(--para-font);
    font-weight: 400;
}
.read-more a .icon-container {
    position: relative;
    width: 26px;
    height: 20px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    color: var(--wc-red);
}
.cards a:hover{
    color: var(--wc-red);
    transition: all 0.5s ease;
}
@media(max-width:700px){
    .right-content img{
        display: none;
    }
    section.after-hero .left-content{
        padding: 2rem;
    }
    section.hero {
        width: 100%;
        min-height: 65vh;
        background-color: var(--wc-light);
    }
}
@media (max-width:500px){
    .our-services .main-container {
        padding: 2rem 1rem;

    }
    section.our-services{
        padding: 2rem 0.2rem;
    }
    section.after-hero{
        /* padding: 2rem; */
        gap: 0rem;
    }
    .row.hero-container {
        min-height: 40vh;
    }
    .left-image-with-content {
        min-height: 40vh;
    }
    section.hero {
        width: 100%;
        min-height: 41vh;
        background-color: var(--wc-light);
    }
}
@media (max-width: 700px) {
    section.hero {
        width: 100%;
        min-height: 200px !important;
        background-color: var(--wc-light);
    }
}
@media (max-width: 500px) {
    .left-image-with-content {
        min-height: 200px;
    }
}
@media (max-width: 500px) {
    .row.hero-container {
        min-height: 200px;
    }
}
.left-image-with-content .content-for-image {
    position: absolute;
    /* color: var(--wc-highlight-text); */
    /* font-size: var(--fs-h1); */
    font-weight: 700;
    width: 100%;
    height: 200px;
    /* left: 60px; */
    display: flex
;
    align-items: center;
    justify-content: center;
    left: 0px;
    top: 0px;
}