html, 
main {
    height: 100%;
    width: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: var(--font-body);
}

main .hero {
    width: 100%;
    min-height: 100vh;
    position: relative;

    display: flex;
    flex-direction: column;
}


main .hero .content_container {
    width: 100%;
    height: 100%;
    padding: 5%;
    /* margin: 3% 0; */
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 2rem;
    align-items: center;
    position: relative;
}

main .hero .content_container .text .top {
    font: var(--fw-bold) var(--fs1000) var(--font-heading);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

main .hero .content_container .text .top::before {
    content: 'For';
    font: var(--fw-regular) var(--fs500) var(--font-logo);
}

main .hero .content_container .text .top svg {
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}

main .hero .content_container .text h1 .old_price {
    text-decoration: line-through;
    color: var(--accent-color);
    font-size: var(--fs700);
}


main .hero .content_container .text .bottom {
    font: var(--fw-bold) var(--fs900) var(--font-heading);
    text-align: center;
    position: relative;
}

main .hero .content_container .text .bottom svg {
    width: 500px;
    height: auto;
    position: absolute;
    top: 0%;
    left: 20%;
}

main .hero .content_container .hero_image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

main .hero .content_container .hero_image img {
    width: 100%;
    max-width: 850px;
}

main .hero .content_container .hero_overflow p {
    font: var(--fw-strong) var(--fs200) var(--font-body);
    position: absolute;
    right: 5%;
    bottom: 50%;
    opacity: 0.6;
}


/* about section */


main .about .content_container {
    width: 100%;
    height: 100%;
    padding: 5%;
}

main .about .content_container .text_container {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

main .about .content_container .text_container .heading {
    flex: 1 1 40%;
}
main .about .content_container .text_container .text {
    flex: 1 1 50%;
}

main .about .content_container .text_container .heading h1 {
    font: var(--fw-regular) var(--fs200) var(--font-body);
    color: var(--secondary-color);
}

main .about .content_container .text_container .text p {
    font: var(--fw-bold) var(--fs400) var(--font-body);
    color: var(--secondary-color);
    opacity: 0.6;
    margin-bottom: 4rem;
}

main .about .content_container .text_container .business_catgeory ul {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 4rem;
    flex-wrap: wrap;
}

main .about .content_container .text_container .business_catgeory ul li {
    padding: 1rem;
    border-radius: 2rem;
    background: var(--secondary-accent-color);
    border: 0.1rem solid var(--accent-color);
    cursor: pointer;
    font: var(--fw-regular) var(--fs150) var(--font-body);
}

main .about .content_container .text_container .business_catgeory ul li:hover {
    border: 0.1rem solid var(--secondary-color);
}



/* services */



main .services .content_container {
    width: 100%;
    height: 100%;
    padding: 5%;
}

main .services .content_container .heading {
    display: flex;
    flex-wrap: wrap;
    align-items: last baseline;
    justify-content: space-between;
}

main .services .content_container .heading .head {
    flex: 1 1 60%;
}
main .services .content_container .heading .text {
    flex: 1 1 30%;
}

main .services .content_container .heading .head h1 {
    font: var(--fw-bold) var(--fs900) var(--font-heading);
}

main .services .content_container .heading .head h1 span {
    color: var(--accent-color);
}

main .services .content_container .heading .text p {
    font: var(--fw-strong) var(--fs200) var(--font-body);
    color: var(--secondary-color);
    opacity: 0.6;
}

main .services .content_container .text_box .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

main .services .content_container .text_box .row .row_box {
    border: 0.1rem solid var(--line-color);
    border-radius: 1rem;
}

main .services .content_container .text_box .row .box {
    flex: 25%;
    padding: 2rem;
}

main .services .content_container .text_box .row .box .box_icon svg {
    width: 80px;
    height: 80px;
    padding: 1rem;
    background: var(--secondary-accent-color);
    border-radius: 1rem;
}

main .services .content_container .text_box .row .box_heading h3 {
    font: var(--fw-bold) var(--fs300) var(--font-body);
    text-transform: capitalize;
    margin: 2rem 0 1rem;
}

main .services .content_container .text_box .row .box_text p {
    font: var(--fw-regular) var(--fs150) var(--font-body);
    opacity: 0.8;
}

main .services .content_container .text_box .row .box_image img {
    width: 100%;
    /* max-width: 350px; */
    object-fit: contain;
    object-position: center;
}



/* process */



.process .content_container {
    width: 100%;
    height: 100%;
    padding: 5%;
}

.process .content_container .heading_container .head_span span {
    font: var(--fw-bold) var(--fs200) var(--font-body);
    color: var(--secondary-color);
}

.process .content_container .heading_container .head h1 {
    font: var(--fw-bold) var(--fs900) var(--font-heading);
    text-transform: uppercase;
}

.process .content_container .heading_container .head h1 span {
    color: var(--accent-color);
}

.process .content_container .heading_container .head_text p {
    font: var(--fw-bold) var(--fs200) var(--font-body);
    color: var(--secondary-color);
    opacity: 0.6;
    margin-bottom: 4rem;
}

.process .content_container .text_container {
    display: flex;
    flex-wrap: wrap;
}

.process .content_container .text_container .box {
    flex: 1 1 25%;
    border: 0.1rem solid var(--line-color);
    padding: 2rem;
}

.process .content_container .text_container .box span {
    font: var(--fw-bold) var(--fs100) var(--font-body);
    color: var(--accent-color);
    text-transform: uppercase;
}

.process .content_container .text_container .box h3 {
    font: var(--fw-bolder) var(--fs200) var(--font-body);
    margin: 1rem 0;
}

.process .content_container .text_container .box p {
    font: var(--fw-regular) var(--fs150) var(--font-body);
    opacity: 0.7;
}



/* pricing */


.pricing .content_container {
    width: 100%;
    height: 100%;
    padding: 5%;
    background: var(--secondary-color);
}

.pricing .content_container .heading_container .head_span span {
    font: var(--fw-bold) var(--fs200) var(--font-body);
    color: var(--primary-color);
}

.pricing .content_container .heading_container .head h1 {
    font: var(--fw-bold) var(--fs900) var(--font-heading);
    text-transform: uppercase;
    color: var(--primary-color);
}

.pricing .content_container .heading_container .head h1 span {
    color: var(--accent-color);
}

.pricing .content_container .heading_container .head_text p {
    font: var(--fw-bold) var(--fs200) var(--font-body);
    color: var(--primary-color);
    /* opacity: 0.6; */
    margin-bottom: 4rem;
}

.pricing .content_container .text_container .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.pricing .content_container .text_container .row .box {
    padding: 2rem;
    background: var(--shade-black-100);
    border: 0.05rem solid var(--shade-black-300);
    flex: 45%;
    border-radius: 1rem;
    color: var(--primary-color);
    cursor: pointer;
}

.pricing .content_container .text_container .row .box:hover {
    opacity: 0.7;
}

.pricing .content_container .text_container .row .box .head {
    display: flex;
    gap: 1.5rem;
}

.pricing .content_container .text_container .row .box .head svg {
    padding: 0.3rem;
    width: 30px;
    height: 30px;
    background: var(--shade-black-200);
    border-radius: 50%;
    fill: var(--primary-color);
}

.pricing .content_container .text_container .row .box .head h4 {
    font: var(--fw-bold) var(--fs150) var(--font-body);
}

.pricing .content_container .text_container .row .box .text {
    margin-left: 3.5rem;
}



/* portfolio */


.portfolio .content_container {
    width: 100%;
    height: 100%;
    padding: 5%;
}

.portfolio .content_container .heading_container .head_span span {
    font: var(--fw-bold) var(--fs200) var(--font-body);
    color: var(--secondary-color);
    text-transform: capitalize;
}

.portfolio .content_container .heading_container .head h1 {
    font: var(--fw-bold) var(--fs900) var(--font-heading);
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

.portfolio .content_container .heading_container .head h1 span {
    color: var(--accent-color);
}

.portfolio .content_container .portfolio_container .box {
    display: flex;
    position: relative;
    border-radius: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    /* gap: 2rem; */
    width: 100%;
} 

.portfolio .content_container .portfolio_container .box .box_image {
    flex: 1 1 45%;
}

.portfolio .content_container .portfolio_container .box .box_image img {
    width: 100%;
    max-width: 1000px;
    height: 100%;
    border-radius: 1rem 0 0 1rem;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.5);
    cursor: pointer;
    transition: all .8s ease-in-out;
}

.portfolio .content_container .portfolio_container .box .box_image img:hover {
    filter: brightness(1);
}

.portfolio .content_container .portfolio_container .box .text {
    flex: 1 1 45%;
    color: var(--primary-color);
    padding: 3rem;
    background: var(--shade-black-100);
    border-radius: 0 1rem 1rem 0;
}

.portfolio .content_container .portfolio_container .box .text .box_span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1.5rem;
}

.portfolio .content_container .portfolio_container .box .text .box_span span {
    font: var(--fw-bold) var(--fs100) var(--font-body);
    color: var(--accent-color);
    text-transform: uppercase;
}

.portfolio .content_container .portfolio_container .box .text .box_span svg {
    width: 50px;
    height: 50px;
    fill: var(--primary-color);
    padding: 1rem;
    border: 0.1rem solid var(--line-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all .5s ease-in-out;
}

.portfolio .content_container .portfolio_container .box .text .box_span svg:hover,
.portfolio .content_container .portfolio_container .box .text .box_span svg:active {
    fill: var(--accent-color);
    transform: rotate(-45deg);
    border: 0.1rem solid var(--accent-color);
}

.portfolio .content_container .portfolio_container .box .text .box_head h2 {
    font: var(--fw-bold) var(--fs250) var(--font-body);
    text-transform: capitalize;
    margin-bottom: 1.5rem;
}

.portfolio .content_container .portfolio_container .box .text .box_text p {
    font: var(--fw-regular) var(--fs150) var(--font-body);
    opacity: 0.7;
}




/* call to action */



.cta .content_container {
    width: 100%;
    height: 100%;
    padding: 5%;
}

.cta .content_container .text_container {
    padding: 5rem;
    background: var(--secondary-accent-color);
    box-shadow: var(--box-shadow);
    border-radius: 1rem;
    position: relative;
    width: 100%;
    z-index: 999;
}

.cta .content_container .text_container .span span {
    font: var(--fw-bold) var(--fs150) var(--font-body);
    color: var(--accent-color);
    text-transform: uppercase;   
}

.cta .content_container .text_container .head h1 {
    font: var(--fw-bold) var(--fs900) var(--font-heading);
    margin-top: 3rem;
}

.cta .content_container .text_container .head h1 span {
    color: var(--accent-color);
}

.cta .content_container .text_container .text p {
    font: var(--fw-regular) var(--fs200) var(--font-body);
    margin-bottom: 5rem;
    opacity: 0.7;
}