/* Global Styling */
:root{
    --orange:#FF8520;
    --white:#FFF;
    --black:#3E3E3E;
    --grey:#D9D9D9;
    --background:#F8F8F8;
}
/*
    font-family: 'Montserrat', sans-serif;
    font-family: 'Poppins', sans-serif;
    font-family: 'Rosarivo', cursive;
*/
*{
    font-family: 'Montserrat', sans-serif;
    margin: 0; padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    transition: all .2s linear;
    text-decoration: none;
}

html{
    font-size: 62.5%;
}

body{
    overflow-x: hidden;
    background-color: var(--white);
    color: var(--black);
 
}

a {
  text-decoration: none;
}

.margin-auto{
    margin-left: auto;
    margin-right: auto;
}

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

#lowercase{
    text-transform: lowercase!important;
}

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

.heading{
    color: var(--black);
    font-size: 7rem;
    font-weight: 800;
    text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .3);
    text-align: center;
    padding: 10rem 0;
}

.text{
    font-size: 2rem;
    font-weight: 500;
    line-height: 4rem;
    padding-bottom: 2rem;
    max-width: 70rem;
}


.header-container{
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-container{
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/*Creating a class for hidding elements*/
.hidden{
    display: none;
}

.orng-btn{
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: white;
    text-transform: capitalize;
    background-color: var(--orange);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 40px;
    border: 1px solid transparent;
    padding: 2rem 4rem;
    min-width: 4rem;
    cursor: pointer;
    transition: .25s;
}

.orng-btn:hover{
    font-size: 2.2rem;
    color: #ccc;
}

.orng-btn-sm{
    font-family: 'Poppins' sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    text-transform: capitalize;
    background-color: var(--orange);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 40px;
    border: 1px solid transparent;
    padding: 1rem 2rem;
    min-width: 4rem;
    cursor: pointer;
    transition: .25s;
}

.orng-btn-sm:hover{
    font-size: 2.2rem;
    color: #ccc;
}

.wht-btn{
    font-family: 'Poppins' sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: black;
    text-transform: capitalize;
    background-color: var(--white);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 40px;
    border: 1px solid transparent;
    padding: 2rem 4rem;
    min-width: 4rem;
    cursor: pointer;
    transition: .25s;
}

.wht-btn:hover{
    font-size: 2.2rem;
    color: #ccc;
    border-color: #FFF;
}

.arrow-btn{
    font-family: 'Poppins' sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--orange);
    text-transform: capitalize;
    background-color: rgba(255, 133, 32, 0.2);
    border-radius: 5px;
    border: 1px solid rgba(255, 133, 32, 0.2);
    padding: 0.5rem 1.5rem;
    min-width: 1rem;
    cursor: pointer;
    transition: .25s;
}

.arrow-btn:hover{
    font-size: 2.2rem;
    color: #FF8520;
    border-color: #FF8520;
}


/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/
/* -------------------------------------------------------------- Start of Custom Styling ------------------------------------------------------*/

/* Header Section */
.header{
    padding: 1rem 2rem;
    position: relative;
    z-index: 2;
    background-color: transparent;
}

.header .logo{
    padding: 0 .5rem;
}


.header .navbar ul{
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: space-around;

}

.header .navbar ul li{
    margin: 0 1.5rem;
}

.header .navbar ul li a{
    font-size: 2rem;
    color: #3E3E3E;
    font-family: 'Montserrat', sans-serif;
    z-index: 3;
}

.header .navbar ul li a:hover{
    color: #ccc;
    font-size: 2.2rem;
}

.header .fa-bars{
    color: #3E3E3E;
    cursor: pointer;
    font-size: 3rem;
    display: none;
}

/* Initially hide the mobile menu */
nav#mobile-menu {
    display: none;
    font-size: 15px;
    color: red !important;
    position: absolute;
    z-index: 9999;
}
nav#mobile-menu {
    background-color: var(--white);
    width: 100%;

}
ul {
    list-style-type: none;
    line-height: 5rem;
    padding: 20px 0 20px 0;
}
li a{
    font-size: 3rem;
    font-weight: 600;
    color: var(--black);
}

nav .menu-main-menu-container{
    margin-left: auto;
    margin-right: auto;
}




/* Hero Section */
.hero{
    min-height: 100vh;
    width: 100vw;
    background: #FFFFFF;
    position: relative;
}

.hero .left-column{
    margin: 6rem 2rem;
    z-index: 10;
}


.hero .sds-h1{
    color: var(--black);
    font-size: 7rem;
    font-weight: 800;
    text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .3);
    max-width: 80%;
}

.hero .sds-h1::after {
    content: "."; /* An empty string for decorative purposes */
    width: 50px;
    height: 50px;
    color: var(--orange); /* A orange dot will appear after the H1*/
    margin-top: 5px;
}

.hero .slogan{
    font-size: 5rem;
    font-weight: 700;
    color: var(--orange);
    padding-bottom: 1rem;
    max-width: 50%;
}

.hero .description{
    font-family: 'Poppins';
    font-size: 2rem;
    color: var(--black);
    padding-bottom: 2rem;
    max-width: 80%;
}

.hero .right-column{
    position: absolute;
    top: -14rem;
    right: -11rem;
    z-index: 1;
}

.hero .right-column .img{
    width: 100%;
    height: auto;
}

.hero .chevron-arrow{
    justify-content: center;
    font-size: 7rem;
    color: var(--grey);
    padding-top: 10rem;
}

.hero .chevron-arrow:hover{
    font-size: 8rem;
}


/* Value Stack Section */
.value-stack{
    background-color: var(--white);
    padding: 0 0 30rem;
}

.value-stack .flex-container{
    width: 70%;
}

.value-stack .card-sds{
    min-height: 28rem;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    width: calc((100% - 200px) / 3 );
    position: relative;
    padding: 4rem 0;
}


.value-stack .card-sds .icon{
    min-width: 50px;
    height: auto;
    padding: 2rem;
}

.value-stack .card-sds h2{
    font-size: 2.2rem;
    font-weight: 700;
    padding: 1rem 2rem;
}

.value-stack .card-sds p{
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0 2rem 6rem;
}

.value-stack .card-sds a{
    position: absolute;
    bottom: 20px;
    right: 20px;
}



/* The Stakes Section */
.the-stakes, 
.services-hero, 
.about,
.seo2,
.seo4,
.leadgeneration2,
.leadgeneration4,
.roi2,
.roi4,
.webdesign2,
.webdesign4,
.webdev2,
.webdev4{
    background-color: var(--white);
    padding: 10rem 0 26rem;
    background-image: url(../images/background-elipse-1.png);
    background-position: -28% 170%;
    background-repeat: no-repeat;
}


.seo2,
.seo4,
.leadgeneration2,
.leadgeneration4,
.roi2,
.roi4,
.webdesign2,
.webdesign4,
.webdev2,
.webdev4{
    padding: 10rem 0 5rem;
}


.the-stakes .left-column, 
.services-hero .left-column, 
.about .left-column,
.seo2 .left-column,
.seo4 .left-column,
.leadgeneration2 .left-column,
.leadgeneration4 .left-column,
.roi2 .left-column,
.roi4 .left-column,
.webdesign2 .left-column,
.webdesign4 .left-column,
.webdev2 .left-column,
.webdev4 .left-column{
    max-width: 60rem;
    margin-left: 8rem;
    position: relative;
}

.the-stakes .left-column .image-1, 
.services-hero .left-column .image-1, 
.about .left-column .image-1,
.seo2 .left-column .image-1,
.seo4 .left-column .image-1,
.leadgeneration2 .left-column .image-1,
.leadgeneration4 .left-column .image-1,
.roi2 .left-column .image-1,
.roi4 .left-column .image-1,
.webdesign2 .left-column .image-1,
.webdesign4 .left-column .image-1,
.webdev2 .left-column .image-1,
.webdev4 .left-column .image-1{
    background-image: url(../images/dentist.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 67rem;
    height: 33rem;
    border-radius: 3%;
}

.services-hero .left-column .image-1{
    background-image: url(../images/agency1.png);
}

.about .left-column .image-1{
    background-image: url(../images/restaurant.png);
}

.seo2 .left-column .image-1{
    background-image: url(../images/seo-2.jpg);
}

.seo4 .left-column .image-1{
    background-image: url(../images/seo-4.jpg);
}

.leadgeneration2 .left-column .image-1{
    background-image: url(../images/lead-generation-2.jpg);
}

.leadgeneration4 .left-column .image-1{
    background-image: url(../images/lead-generation-4.jpg);
}

.roi2 .left-column .image-1{
    background-image: url(../images/return-on-investment-2.jpg);
}

.roi4 .left-column .image-1{
    background-image: url(../images/return-on-investment-4.jpg);
}

.webdesign2 .left-column .image-1{
    background-image: url(../images/web-design-2.jpg);
}

.webdesign4 .left-column .image-1{
    background-image: url(../images/web-design-4.jpg);
}

.webdev2 .left-column .image-1{
    background-image: url(../images/web-dev-2.jpg);
}

.webdev4 .left-column .image-1{
    background-image: url(../images/web-dev-4.jpg);
}




.the-stakes .left-column .image-2, 
.services-hero .left-column .image-2, 
.about .left-column .image-2,
.seo2 .left-column .image-2,
.seo4 .left-column .image-2,
.leadgeneration2 .left-column .image-2,
.leadgeneration4 .left-column .image-2,
.roi2 .left-column .image-2,
.roi4 .left-column .image-2,
.webdesign2 .left-column .image-2,
.webdesign4 .left-column .image-2,
.webdev2 .left-column .image-2,
.webdev4 .left-column .image-2{
    background-image: url(../images/head-shot-1.jpg);
    background-size: cover;
    background-position: center;
    width: 24rem;
    height: 28rem;
    border-radius: 10px;
    position: absolute;
    bottom: -22rem;
    right: -12rem;
    z-index: 10;
}

.services-hero .left-column .image-2{
    background-image: url(../images/head-shot-1.jpg);
}

.about .left-column .image-2{
    background-image: url(../images/head-shot-1.jpg);
}


.the-stakes .right-column, 
.services-hero .right-column, 
.about .right-column,
.seo2 .right-column,
.seo4 .right-column,
.leadgeneration2 .right-column,
.leadgeneration4 .right-column,
.roi2 .right-column,
.roi4 .right-column,
.webdesign2 .right-column,
.webdesign4 .right-column,
.webdev2 .right-column,
.webdev4 .right-column{
    margin-left: 18rem;
    margin-right: 4rem;
}
 
.the-stakes .right-column span, 
.services-hero .right-column span, 
.about .right-column span,
.seo2 .right-column span,
.seo4 .right-column span,
.leadgeneration2 .right-column span,
.leadgeneration4 .right-column span,
.roi2 .right-column span,
.roi4 .right-column span,
.webdesign2 .right-column span,
.webdesign4 .right-column span,
.webdev2 .right-column span,
.webdev4 .right-column span{
    font-size: 3rem;
    font-weight: 600;
    color: var(--orange);
}

.the-stakes .right-column h3, 
.services-hero .right-column h3, 
.about .right-column h3,
.seo2 .right-column h3,
.seo4 .right-column h3,
.leadgeneration2 .right-column h3,
.leadgeneration4 .right-column h3,
.roi2 .right-column h3,
.roi4 .right-column h3,
.webdesign2 .right-column h3,
.webdesign4 .right-column h3,
.webdev2 .right-column h3,
.webdev4 .right-column h3{
    font-size: 5rem;
    font-weight: 800;
    margin-bottom: 2rem;
}

.the-stakes .right-column p, 
.services-hero .right-column p, 
.about .right-column p,
.seo2 .right-column p,
.seo4 .right-column p,
.leadgeneration2 .right-column p,
.leadgeneration4 .right-column p,
.roi2 .right-column p,
.roi4 .right-column p,
.webdesign2 .right-column p,
.webdesign4 .right-column p,
.webdev2 .right-column p,
.webdev4 .right-column p{
    font-size: 2rem;
    font-weight: 500;
    line-height: 4rem;
}


/* Value Proposition Section */
.value-proposition{
    background-color: var(--background);
    margin: 10rem 0;
    padding: 14rem 0;
}

.value-proposition .card-sds{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.value-proposition .card-sds .icon{
    padding-bottom: 2rem;
}

.value-proposition .card-sds h2{
    font-size: 2rem;
    padding-bottom: .8rem;
}

.value-proposition .card-sds p{
    font-size: 1.5rem;
    line-height: 3rem;
    padding: 0rem 2rem 2rem;
    margin-left: 4rem;
    margin-right: 4rem;
}

/* The Guide Section */
.the-guide, 
.success,
.seo1,
.seo3,
.leadgeneration1,
.leadgeneration3,
.roi1,
.roi3,
.webdesign1,
.webdesign3,
.webdev1,
.webdev3{
    background-color: var(--white);
    padding: 16rem 0;
    background-image: url(../images/reverse-ellipse.png);
    background-position:200% 40%;
    background-repeat: no-repeat;
}


.seo1,
.seo3,
.leadgeneration1,
.leadgeneration3,
.roi1,
.roi3,
.webdesign1,
.webdesign3,
.webdev1,
.webdev3{
    background-position: right bottom;
}

.the-guide .left-column, 
.success .left-column,
.seo1 .left-column,
.seo3 .left-column,
.leadgeneration1 .left-column,
.leadgeneration3 .left-column,
.roi1 .left-column,
.roi3 .left-column,
.webdesign1 .left-column,
.webdesign3 .left-column,
.webdev1 .left-column,
.webdev3 .left-column{
    margin-left: auto;
    margin-right: auto;
}

.the-guide .left-column span, 
.success .left-column span,
.seo1 .left-column span,
.seo3 .left-column span,
.leadgeneration1 .left-column span,
.leadgeneration3 .left-column span,
.roi1 .left-column span,
.roi3 .left-column span,
.webdesign1 .left-column span,
.webdesign3 .left-column span,
.webdev1 .left-column span,
.webdev3 .left-column span{
    font-size: 3rem;
    font-weight: 600;
    color: var(--orange);
}

.the-guide .left-column h3, 
.success .left-column h3,
.seo1 .left-column h3,
.seo3 .left-column h3,
.leadgeneration1 .left-column h3,
.leadgeneration3 .left-column h3,
.roi1 .left-column h3,
.roi3 .left-column h3,
.webdesign1 .left-column h3,
.webdesign3 .left-column h3,
.webdev1 .left-column h3,
.webdev3 .left-column h3{
    font-size: 5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: var(--black);
}

.the-guide .left-column p,
.seo1 .left-column p,
.seo3 .left-column p,
.leadgeneration1 .left-column p,
.leadgeneration3 .left-column p,
.roi1 .left-column p,
.roi3 .left-column p,
.webdesign1 .left-column p,
.webdesign3 .left-column p,
.webdev1 .left-column p,
.webdev3 .left-column p{
    font-size: 2rem;
    font-weight: 500;
    line-height: 4rem;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--black);
}

.success .left-column p{
    font-size: 2rem;
    font-weight: 500;
    line-height: 4rem;
    max-width: 50rem;
    margin-right: auto;
}

.the-guide .left-column, 
.success .left-column,
.seo1 .left-column,
.seo3 .left-column,
.leadgeneration1 .left-column,
.leadgeneration3 .left-column,
.roi1 .left-column,
.roi3 .left-column,
.webdesign1 .left-column,
.webdesign3 .left-column,
.webdev1 .left-column,
.webdev3 .left-column{
    max-width: 60rem;
    margin-left: 14rem;
    margin-right: 6rem;
    position: relative;
}

.the-guide .right-column, 
.success .right-column,
.seo1 .right-column,
.seo3 .right-column,
.leadgeneration1 .right-column,
.leadgeneration3 .right-column,
.roi1 .right-column,
.roi3 .right-column,
.webdesign1 .right-column,
.webdesign3 .right-column,
.webdev1 .right-column,
.webdev3 .right-column{
    margin-right: 20rem;
}

.the-guide .right-column .image-1{
    background-image: url(../images/jennifer_grass.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.success .right-column .image-1{
    background-image: url(../images/head-shot-1.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.seo1 .right-column .image-1{
    background-image: url(../images/seo-1.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.seo3 .right-column .image-1{
    background-image: url(../images/seo-3.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.leadgeneration1 .right-column .image-1{
    background-image: url(../images/lead-generation-1.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.leadgeneration3 .right-column .image-1{
    background-image: url(../images/lead-generation-3.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.roi1 .right-column .image-1{
    background-image: url(../images/return-on-investment-1.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.roi3 .right-column .image-1{
    background-image: url(../images/return-on-investment-3.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.webdesign1 .right-column .image-1{
    background-image: url(../images/web-design-1.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.webdesign3 .right-column .image-1{
    background-image: url(../images/web-design-3.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.webdev1 .right-column .image-1{
    background-image: url(../images/web-dev-1.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}

.webdev3 .right-column .image-1{
    background-image: url(../images/web-dev-3.jpg);
    background-size: cover;
    background-position: top;
    width: 54rem;
    height: 52rem;
    border-radius: 3%;
}






/* Package Pricing Section */
.package-pricing{
    background-color: var(--white);
    padding: 16rem 0;
}

.package-pricing .flex-container{
    display: block;
}

.package-pricing .heading{
    text-align: center;
    padding-bottom: 5rem;
}

.package-pricing .heading span{
    color: var(--orange);
    font-size: 3rem;
    font-weight: 700;
}

.package-pricing .heading h2{
    font-size: 5rem;
    font-weight: 700;
}

.package-pricing .card-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.package-pricing .card{
    min-height: 28rem;
    padding: 7rem 3rem 4rem;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    width: calc((100% - 60px) / 3 );
}

.package-pricing .card-section .card span{
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--orange);
    line-height: 0.5;
}

.package-pricing .card-section .card h3{
    font-size: 3.5rem;
    font-weight: 700;
    padding-bottom: 1rem;
}

.package-pricing .card-section .card p{
    font-size: 1.7rem;
    padding-bottom: 2rem;
}

.package-pricing .card-section .card ul{
    list-style-type: none;
    padding-bottom: 2rem;
}

.package-pricing .card-section .card li{
    font-size: 2rem;
    line-height: 5rem;
}

.package-pricing .card-section .card li .fa-solid{
    padding-right: 1rem;
}

.package-pricing .card-section .card .payment-price{
    font-size: 5rem;
    font-weight: 700;
    color: var(--black);
    line-height: 5rem;
    em;
}

.package-pricing .card-section .card .payment-term{
    font-size: 2rem;
    font-weight: 600;
    color: var(--black);
    line-height: 0;
}


.package-pricing .card-section .card .payment-term::after{
    content: "---------------------------------------------------------------------------------------";
    display: block; /* Makes the ::after content behave like a block-level element */
    margin-top: 8px; /* Adjust as needed for spacing above the line */
    font-size: 1.5rem;
    color: var(--grey);
    padding-top: 3rem;
    padding-bottom: 4rem;
}

.package-pricing .card-section .card-2{
    background-image: linear-gradient(to left, #FF5C00, #FF7700, #FF8C39);
}

.package-pricing .card-section .card .orng-btn, 
.package-pricing .card-section .card .wht-btn{
    margin-left: auto;
    margin-right: auto;
}

.package-pricing .card-section .card-2 span,
.package-pricing .card-section .card-2 p,
.package-pricing .card-section .card-2 ul{
    color: var(--white);
}


.package-pricing .card-section .orange-card .payment-term,
.package-pricing .card-section .orange-card .payment-price{
    color: var(--white);
}


/* Start of The Plan Section */
.the-plan{
    background-color: var(--white);
    padding: 16rem 0;
}

.the-plan .flex-container{
    display: block;
}

.the-plan .heading{
    text-align: center;
    padding-bottom: 5rem;
}

.the-plan .heading span{
    color: var(--orange);
    font-size: 3rem;
    font-weight: 700;
}

.the-plan .heading h2{
    font-size: 5rem;
    font-weight: 700;
}

.the-plan .card-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.the-plan .card{
    min-height: 20rem;
    padding: 4rem 3rem 4rem;
    border: 2px solid #FF8520;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    width: calc((100% - 60px) / 4 );
    position: relative;
}

.the-plan .card span{
    font-size: 5rem;
    font-weight: 800;
    color: rgba(255, 133, 32, 0.4);
}

.the-plan .card h3{
    font-size: 1.8rem;
    font-weight: 800;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.the-plan .card p{
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 2rem;
}

.the-plan .card-section .icon{
    position: absolute;
    top: 1%;
    left: 84%;
}

/* Call To Action Section #FF5C00, #FF7700, #FF8C39 */
.call-to-action-banner{
    background-image: linear-gradient(to left, #FF5C00, #FF7700, #FF8C39 95%);
    padding: 16rem 0;
}

.call-to-action-banner .heading{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


.call-to-action-banner .heading h2{
    font-size: 5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 2rem;
}

.call-to-action-banner .heading p{
    font-size: 2rem;
    font-weight: 500;
    line-height: 4rem;
    color: var(--white);
    margin-bottom: 3rem;
}

/* Explainer Section */
.explainer, .aboutexplainer, 
.service-pitch{
    background-color: var(--white);
    padding: 16rem 0 28rem;
}

.explainer .left-column, .aboutexplainer .left-column, 
.service-pitch .left-column{
    max-width: 60rem;
    margin-left: 8rem;
    position: relative;
}

.explainer .left-column .image-1, 
.aboutexplainer .left-column .image-1, 
.service-pitch .left-column .image-1{
    background-image: url(../images/construction.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 53rem;
    height: 24rem;
    border-radius: 3%;
}

.aboutexplainer .left-column .image-1{
    background-image: url(../images/agency2.png);
}

.service-pitch .left-column .image-1{
    background-image: url(../images/coffee.png);
}

.explainer .left-column .image-2, 
.aboutexplainer .left-column .image-2, 
.service-pitch .left-column .image-2{
    background-image: url(../images/head-shot-2.jpg);
    background-size: cover;
    background-position: center;
    width: 24rem;
    height: 28rem;
    border-radius: 10px;
    position: absolute;
    bottom: -24rem;
    right: -5rem;
    z-index: 10;
}

.aboutexplainer .left-column .image-2{
    background-image: url(../images/head-shot-2.jpg);
}

.service-pitch .left-column .image-2{
    background-image: url(../images/head-shot-2.jpg);
}

.explainer .right-column, 
.aboutexplainer .right-column, 
.service-pitch .right-column{
    margin-left: 18rem;
    margin-right: 4rem;
}

.explainer .right-column span, 
.aboutexplainer .right-column span, 
.service-pitch .right-column span{
    font-size: 3rem;
    font-weight: 600;
    color: var(--orange);
}

.explainer .right-column h3, 
.aboutexplainer .right-column h3, 
.service-pitch .right-column h3{
    font-size: 5rem;
    font-weight: 800;
    margin-bottom: 2rem;
}

.explainer .right-column p, 
.aboutexplainer .right-column p, 
.service-pitch .right-column p{
    font-size: 2rem;
    font-weight: 500;
    line-height: 4rem;
    padding-bottom: 2rem;
    max-width: 70rem;
}

/* Lead-Magnet Section */
.lead-magnet{
    background-color: black;
    padding: 12rem 0 24rem;
}

.lead-magnet .heading{
    text-align: center;
    padding: 10rem 0 0;
}

.lead-magnet .heading span{
    font-size: 3rem;
    font-weight: 500;
    color: var(--orange);
}

.lead-magnet .heading h2{
    font-size: 5rem;
    font-weight: 700;
    color: var(--white);
    padding-bottom: 1rem;
}

.lead-magnet .heading p{
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 4rem;
    color: var(--white);
    padding-right: 25%;
    padding-left: 25%;
    padding-bottom: 2rem;
}
/* 135 in test.test WP Forms */
/* 149 in live WP Forms */
.lead-magnet #wpforms-form-149{
    text-align: center;
}

.lead-magnet .wpforms-field-container{

}


/* 135 in test.test WP Forms */
/* 149 in live WP Forms */
.lead-magnet .form-submition #wpforms-149-field_1{
    font-family: 'Poppins' sans-serif;
    font-size: 2rem;
    font-weight: 600;
    border-radius: 40px;
    border: none;
    padding: 3rem 0rem;
    min-width: 4rem;
    cursor: pointer;
    transition: .25s;
    margin-right: auto;
    margin-left: auto;
    max-width: 40%;
}


.lead-magnet .form-submition a{
    padding-left: 1rem;
}
/* 135 in test.test WP Forms */
/* 149 in live WP Forms */
#wpforms-submit-149{
    font-weight: 600;
    font-size: 2rem;
    color: white;
    text-transform: capitalize;
    background-color: var(--orange);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 40px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: .25s;
    padding: 3rem 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
}
/* 135 in test.test WP Forms */
/* 149 in live WP Forms */
#wpforms-submit-135:hover{
    font-size: 2.5rem;
    color: white;
}




/* Footer Section */
footer{
    background-color: var(--white);
    padding: 16rem 0 0rem;
    border-top: 10px solid var(--orange);
}

footer .flex-container{
    align-items: start;
    width: 90%;
    padding-bottom: 8rem;
}

footer .flex-container .about-us .wpforms-validate{
    display: flex;
    align-items: center;
}

footer .wpforms-container .wpforms-submit-container{
    margin-top: 0!important;
    margin-bottom: 0.1rem;
}


footer .flex-container .about-us .subscription-form .wpforms-field-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 1rem;
}

/* 140 in test.test WP Forms */
/* 154 in live WP Forms */
footer .flex-container .about-us .subscription-form #wpforms-154-field_1{
    font-family: 'Poppins' sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--black);
    background-color: rgba(217, 217, 217, 0.4);
    border-radius: 40px;
    border: 1px solid black;
    padding: 2rem 0rem;
    cursor: pointer;
    transition: .25s;
    max-width: 100%;
}

/* 140 in test.test WP Forms */
/* 154 in live WP Forms */
footer .flex-container .about-us #wpforms-submit-154{
    font-family: 'Poppins' sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    text-transform: capitalize;
    background-color: var(--orange);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 40px;
    border: 1px solid black;
    padding: 2.05rem 3rem;
    min-width: 4rem;
    cursor: pointer;
    transition: .25s;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 140 in test.test WP Forms */
/* 154 in live WP Forms */
footer .flex-container .about-us #wpforms-submit-154:hover{
    font-size: 2.02rem;
    color: #ccc;
}

footer .flex-container .about-us h3{
    font-size: 4rem;
    font-weight: 600;
    color: var(--orange);
    padding-bottom: 1rem;
}

footer .flex-container .about-us p{
    font-size: 2rem;
    font-weight: 600;
    line-height: 4rem;
    max-width: 60rem;
    padding-bottom: 1rem;
}

footer .right-column{
    display: flex;
    justify-content: space-around;
    align-items: top;
}

footer .flex-container .menu{
    padding: 0 2rem 0;
}

footer .flex-container .menu h4{
    font-size: 3rem;
    font-weight: 600;
    line-height: 4rem;
    max-width: 60rem;
    padding-bottom: 3rem;
}

footer .flex-container .sub-menu h4{
    font-size: 3rem;
    font-weight: 600;
    line-height: 4rem;
    max-width: 60rem;
    padding-bottom: 3rem;
}

footer .flex-container .sub-menu{
    padding: 0 4rem 0;
}

footer .flex-container .company h4{
    font-size: 3rem;
    font-weight: 600;
    line-height: 4rem;
    max-width: 60rem;
    padding-bottom: .5rem;
}

footer .flex-container .company{
    padding: 0 2rem 0;
}

footer .flex-container .menu ul li{
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 5rem;
    list-style-type: none;
}

footer .flex-container .sub-menu ul li{
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 5rem;
    list-style-type: none;
}



footer .flex-container .company ul li{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2rem;
    list-style-type: none;
}





footer .flex-container .company .info{
    font-size: 1.6rem;
    padding-bottom: 2rem;
    font-weight: 600;
}

footer .flex-container .company .flex-icons a{
    font-size: 3rem;
    color: var(--orange);
    padding-right: 2.5rem;
}

footer .flex-container .company .flex-icons a:hover{
    font-size: 4rem;
    color: orange;
}



footer .bottom-message{
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

footer .bottom-message .flex-container{
    justify-content: center;
    padding-bottom: 0;

}

footer .bottom-message .flex-container p{
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    padding: 2rem;
    text-align: center;
}

.blog-archive .card{
    border: 5px solid var(--orange);
}

.blog-archive .blog-content{
    padding: 8rem 0;
}

.blog-archive .blog-content h2{
    color: var(--black);
    font-size: 4rem;
    font-weight: 600;
    text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .3);
    max-width: 80%;
}

.blog-archive .blog-content p{
    font-family: 'Poppins';
    font-size: 1.5rem;
    color: var(--black);
    max-width: 80%;
}

.single-blog-post{
    padding: 10rem 0 10rem;
}

.single-blog-post img{
    text-align: center;
}

.blog-author-font{
    font-family: 'Rosarivo', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    line-height: 4rem;
    color: var(--black);
}

.blog-font p{
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 6rem;
    color: var(--black);
    text-transform: none;
}

.blog-nav-button-font{
    padding-top: 20rem;
}

.blog-nav-button-font a{
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 6rem;
    color: var(--black);
    text-transform: none;
}

.blog-nav-button-font i{
    font-size: 2rem;
    font-weight: 600;
    line-height: 6rem;
    color: var(--black);
}

.contact-form{
    padding-bottom: 20rem;
}










/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/
/* -------------------------------------------------------------- media queries ------------------------------------------------------*/

@media (max-width:1400px){

    .header .navbar{
        z-index: 10000;
    }
    
    .explainer .flex-container, 
    .aboutexplainer .flex-container, 
    .service-pitch .flex-container{
        flex-direction: column; 
        width: 100%;
    }

    .explainer .flex-container #element-1, 
    .aboutexplainer .flex-container #element-1, 
    .service-pitch .flex-container #element-1{
        order: 1;
    }

    .explainer .flex-container #element-2, 
    .aboutexplainer .flex-container #element-2, 
    .service-pitch .flex-container #element-2{
        order: 2;
    }

    .explainer .left-column, 
    .aboutexplainer .left-column, 
    .service-pitch .left-column{
        max-width: 100%;
    }

    .explainer .right-column, 
    .aboutexplainer .right-column, 
    .service-pitch .right-column{
        margin-left: 9rem;
        margin-right: 9rem;
        padding-bottom: 8rem;
        padding-top: 8rem;
    }

    .explainer .left-column .image-2, 
    .aboutexplainer .left-column .image-2, 
    .service-pitch .left-column .image-2{
        display: none;
    }

    .the-guide .left-column, 
    .success  .left-column,
    .seo1 .left-column,
    .seo3 .left-column,
    .leadgeneration1 .left-column,
    .leadgeneration3 .left-column,
    .roi1 .left-column,
    .roi3 .left-column,
    .webdesign1 .left-column,
    .webdesign3 .left-column,
    .webdev1 .left-column,
    .webdev3 .left-column{
        padding-bottom: 8rem;
    }

    .the-stakes .flex-container, 
    .services-hero .flex-container, 
    .about .flex-container,    
    .seo2 .flex-container,
    .seo4 .flex-container,
    .leadgeneration2 .flex-container,
    .leadgeneration4 .flex-container,
    .roi2 .flex-container,
    .roi4 .flex-container,
    .webdesign2 .flex-container,
    .webdesign4 .flex-container,
    .webdev2 .flex-container,
    .webdev4 .flex-container{
        flex-direction: column; 
    }

    #element-1{
        order: 2;
    }

    #element-2{
        order: 1;
    }

    .the-stakes .left-column, 
    .services-hero .left-column, 
    .about .left-column,
    .seo2 .left-column,
    .seo4 .left-column,
    .leadgeneration2 .left-column,
    .leadgeneration4 .left-column,
    .roi2 .left-column,
    .roi4 .left-column,
    .webdesign2 .left-column,
    .webdesign4 .left-column,
    .webdev2 .left-column,
    .webdev4 .left-column{
        max-width: 100%;
    }

    .the-stakes .right-column, 
    .services-hero .right-column, 
    .about .right-column,
    .seo2 .right-column,
    .seo4 .right-column,
    .leadgeneration2 .right-column,
    .leadgeneration4 .right-column,
    .roi2 .right-column,
    .roi4 .right-column,
    .webdesign2 .right-column,
    .webdesign4 .right-column,
    .webdev2 .right-column,
    .webdev4 .right-column{
        padding-bottom: 8rem;
    }

    footer .flex-container{
        display: block;
    }

    footer .flex-container .about-us{
        padding-bottom: 10rem;
    }
}

@media (max-width:1200px){
    html{
        font-size: 55%;
    }

    .header .fa-bars{
        display: block;
    }

    .header .wht-btn{
        margin-bottom: 3rem;
    }

    .header .navbar{
        position: fixed;
        top: -120%; left: 0;
        height: auto;
        width: 100%;
        background-color: #fff;
        z-index: 1000;
        border-top: .1rem solid rgba(0, 0, 0, .3);
        padding-top: 3rem;
        z-index: 10000;
    }

    .header .navbar ul{
        height: 100%;
        width: 100%;
        flex-flow: column;

    }

    .header .navbar ul li{
        margin:1rem 0;
    }

    .header .navbar ul li a{
        color: #444;
        font-size: 2.4rem;
    }

    .header .fa-times{
        transform: rotate(180deg);
    }

    .header .nav-toggle{
        top: 14rem;
    }

    .hero .left-column{
        padding-top: 10rem;
    }

    .hero .slogan{
        font-size: 5rem;
        color: var(--orange);
        max-width: 55%;
    }

    .hero .description{
        font-size: 2rem;
        max-width: 60%;
    }

    .hero .right-column{
        top: -38rem;
    }

    .value-proposition .flex-container{
         flex-wrap: wrap;
    }

    .value-proposition .card-sds{
         width: calc((100% - 30px) / 2 );
    }

    .value-proposition .card-3{
        margin-left: auto;
        margin-right: auto;
        margin-top: 8rem;
    }

    .the-guide, 
    .success,
    .seo1,
    .seo3,
    .leadgeneration1,
    .leadgeneration3,
    .roi1,
    .roi3,
    .webdesign1,
    .webdesign3,
    .webdev1,
    .webdev3{
        padding: 16rem 0 48rem;
    }

    .the-guide .flex-container, 
    .success .flex-container,
    .seo1 .flex-container,
    .seo3 .flex-container,
    .leadgeneration1 .flex-container,
    .leadgeneration3 .flex-container,
    .roi1 .flex-container,
    .roi3 .flex-container,
    .webdesign1 .flex-container,
    .webdesign3 .flex-container,
    .webdev1 .flex-container,
    .webdev3 .flex-container{
        display: block;
    }

    .the-guide .right-column, 
    .success .right-column,
    .seo1 .right-column,
    .seo3 .right-column,
    .leadgeneration1 .right-column,
    .leadgeneration3 .right-column,
    .roi1 .right-column,
    .roi3 .right-column,
    .webdesign1 .right-column,
    .webdesign3 .right-column,
    .webdev1 .right-column,
    .webdev3 .right-column{
        margin-right: 0;
    }

    .the-guide .right-column .image-1, 
    .success .right-column .image-1,
    .seo1 .right-column .image-1,
    .seo3 .right-column .image-1,
    .leadgeneration1 .right-column .image-1,
    .leadgeneration3 .right-column .image-1,
    .roi1 .right-column .image-1,
    .roi3 .right-column .image-1,
    .webdesign1 .right-column .image-1,
    .webdesign3 .right-column .image-1,
    .webdev1 .right-column .image-1,
    .webdev3 .right-column .image-1{
        margin-left: auto;
        margin-right: auto;
    }


    .the-plan .card-section{
         flex-wrap: wrap;
    }

    .the-plan .card{
         width: calc((100% - 30px) / 2);
    }

    .the-plan .card-3, .card-4{
        margin-top: 8rem;
    }

     .the-plan .card-section #icon-arrow-removed{
        display: none;
    }

    .the-plan .card-section .icon{
        position: absolute;
        top: 1%;
        left: 88%;
    }


}



@media (max-width:992px){
    .hero .left-column{
        margin: 25rem 2rem 0rem;
    }

    .value-stack .flex-container{
         flex-wrap: wrap;
    }

    .value-stack .card-sds{
         width: calc((100% - 30px) / 2 );
    }

    .value-stack .card-3{
        margin-left: auto;
        margin-right: auto;
        margin-top: 8rem;
    }

    .the-stakes, 
    .services-hero, 
    .about,
    .seo2,
    .seo4,
    .leadgeneration2,
    .leadgeneration4,
    .roi2,
    .roi4,
    .webdesign2,
    .webdesign4,
    .webdev2,
    .webdev4{
        background-image: none;
    }

    .the-stakes .left-column, 
    .services-hero .left-column, 
    .about  .left-column,
    .seo2 .left-column,
    .seo4 .left-column,
    .leadgeneration2 .left-column,
    .leadgeneration4 .left-column,
    .roi2 .left-column,
    .roi4 .left-column,
    .webdesign2 .left-column, 
    .webdesign4 .left-column,
    .webdev2 .left-column,
    .webdev4 .left-column{ 
        margin-left: 0;
        margin-right: 0;
    }

    .the-stakes .left-column .image-2, 
    .services-hero .left-column .image-2, 
    .about  .left-column .image-2,
    .seo2 .left-column .image-2,
    .seo4 .left-column .image-2,
    .leadgeneration2 .left-column .image-2,
    .leadgeneration4 .left-column .image-2,
    .roi2 .left-column .image-2,
    .roi4 .left-column .image-2,
    .webdesign2 .left-column .image-2,
    .webdesign4 .left-column .image-2,
    .webdev2 .left-column .image-2,
    .webdev4 .left-column .image-2{
        width: 24rem;
        height: 28rem;
        border-radius: 10px;
        bottom: -22rem;
        right: -8rem;
    }

    .call-to-action-banner .heading{
        font-size: 50%;
    }

    .the-guide, 
    .success,
    .seo1,
    .seo3,
    .leadgeneration1,
    .leadgeneration3,
    .roi1,
    .roi3,
    .webdesign1,
    .webdesign3,
    .webdev1,
    .webdev3{
        padding: 8rem 0;
        background-image: none;
    }


    .package-pricing .card-section{
         flex-wrap: wrap;
    }

    .package-pricing .card{
         width: calc((100% - 30px) / 2 );
    }

    .package-pricing .card-3{
        margin-left: auto;
        margin-right: auto;
        margin-top: 8rem;
    }

    .explainer .left-column, 
    .aboutexplainer .left-column, 
    .service-pitch .left-column{
        margin-left: 0;
        margin-right: 0;
    }
    /* 135 in test.test WP Forms */
    /* 149 in live WP Forms */
    .lead-magnet .form-submition #wpforms-149-field_1{
        max-width: 60%;
    }

}


@media (max-width:768px){

    html{
        font-size: 50%;
    }

    .archive-display-flex{
        display: block;
        justify-content: center;
        align-items: center;
    }

    .hero .left-column{
        margin-top: 55rem;
        margin: 55rem 2rem 0rem;
    }

    .hero .right-column{
        top: -32rem;
        right: -16rem;
    }

    .value-stack{
        padding: 20rem 0 20rem;
    }

    .the-stakes .left-column .image-2, 
    .services-hero .left-column .image-2, 
    .about .left-column .image-2{
        display: none;
    }

    .hero .slogan{
        font-size: 4rem;
        max-width: 100%;
    }

    .hero .description{
        font-size: 2rem;
        max-width: 80%;
    }

   .value-stack .card-sds{
        width: calc((100% - 30px) / 2 );
   }

   .value-stack .flex-container{
        display: block;
   }

   .value-stack .card-sds{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 100%;
        max-width: 40rem;
   }

   .value-stack .card-3{
       margin-top: 0;
   }

   .the-stakes .right-column, 
   .services-hero .right-column, 
   .about .right-column,
    .seo2 .right-column,
    .seo4 .right-column,
    .leadgeneration2 .right-column,
    .leadgeneration4 .right-column,
    .roi2 .right-column,
    .roi4 .right-column,
    .webdesign2 .right-column,
    .webdesign4 .right-column,
    .webdev2 .right-column,
    .webdev4 .right-column{
       margin-left: 9rem;
       margin-right: 5rem;
       padding-top: 20rem;
   }

   .value-proposition .card-sds{
        width: calc((100% - 30px) / 2 );
        padding-bottom: 4rem;
   }

   .value-proposition .flex-container{
        display: block;
   }

   .value-proposition .card-sds{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 100%;
        max-width: 40rem;
   }

   .value-proposition .card-3{
       margin-top: 0;
   }


   .package-pricing .card{
        width: calc((100% - 30px) / 2 );
   }

   .package-pricing .card-section{
        display: block;
   }

   .package-pricing .card{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 100%;
        max-width: 40rem;
   }

   .package-pricing .card-3{
       margin-top: 0;
   }

   .the-plan .card{
        width: calc((100% - 30px) / 2 );
   }

   .the-plan .card-section{
        display: block;
   }

    .the-plan .card-section #icon-arrow-removed{
       display: block;
   }

   .the-plan .card{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 100%;
        max-width: 30rem;
   }

   .value-stack .card-3{
       margin-top: 0;
   }

   .the-plan .card-section .icon{
       transform: rotate(90deg);
       top: 100%;
       left: 90%;
   }

   .explainer, 
   .aboutexplainer, 
   .service-pitch{
       padding: 10rem 0 10rem;
   }



   .explainer .left-column .image-1, 
   .aboutexplainer .left-column .image-1, 
   .service-pitch .left-column .image-1{
       width: 44rem;
       height: 48rem;
       border-radius: 3%;
       bottom: -1rem;
       right: -16rem;
   }

   .explainer .right-column, 
   .aboutexplainer .right-column, 
   .service-pitch .right-column{
        text-align: center;
   }

   .blog-archive .card{
       border: 5px solid var(--orange);
       text-align: center;
   }

   .blog-archive .blog-content p, 
   .blog-archive .blog-content h2{
       margin-left: auto;
       margin-right: auto;
   }

   .single-blog-post{
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
   }

}

@media (max-width:576px){

    .header .logo{
        padding: 0 7.5rem;
    }

    .heading{
        font-size: 7rem;
        padding: 2rem 0;
    }

    .static-page-heading{
        display: none;
    }

    .hero .right-column{
        top: -14rem;
        right: -2.5rem;
    }

    .hero .flex-container .left-column{
        max-width: 80%;
        padding-top: 0rem;
        margin: 40rem 2rem 0rem;
        z-index: 0;
    }

    .hero .sds-h1{
        font-size: 6rem;
    }

    .hero .description{
        max-width: 100%;
    }

    .hero #chevronButton{
        display: none;
    }

    .value-stack{
        margin: 0;
        padding: 0;
    }

   

    .the-stakes, 
    .services-hero, 
    .about,
    .seo2,
    .seo4,
    .leadgeneration2,
    .leadgeneration4,
    .roi2,
    .roi4,
    .webdesign2,
    .webdesign4,
    .webdev2,
    .webdev4{
        padding: 5rem 0 10rem;
        background-image: none;
    }

    .the-stakes .background-image, 
    .services-hero .background-image, 
    .about .background-image,
    .seo2 .background-image,
    .seo4 .background-image,
    .leadgeneration2 .background-image,
    .leadgeneration4 .background-image,
    .roi2 .background-image,
    .roi4 .background-image,
    .webdesign2 .background-image,
    .webdesign4 .background-image,
    .webdev2 .background-image,
    .webdev4 .background-image{
        background-position: bottom 20px;
    }

    .the-stakes .right-column, 
    .services-hero .right-column, 
    .about .right-column,
    .seo2 .right-column,
    .seo4 .right-column,
    .leadgeneration2 .right-column,
    .leadgeneration4 .right-column, 
    .roi2 .right-column,
    .roi4 .right-column,
    .webdesign2 .right-column,
    .webdesign4 .right-column, 
    .webdev2 .right-column,
    .webdev4 .right-column{
        padding-top: 0rem;
    }

    .the-stakes .left-column .image-2, 
    .services-hero .left-column .image-2, 
    .about .services-hero .image-2{
        display: none;
    }

    .the-stakes .left-column .image-1, 
    .services-hero .left-column .image-1, 
    .about .left-column .image-1,
    .seo2 .left-column .image-1,
    .seo4 .left-column .image-1,
    .leadgeneration2 .left-column .image-1,
    .leadgeneration4 .left-column .image-1,
    .roi2 .left-column .image-1,
    .roi4 .left-column .image-1,
    .webdesign2 .left-column .image-1,
    .webdesign4 .left-column .image-1,
    .webdev2 .left-column .image-1,
    .webdev4 .left-column .image-1{
        width: 40rem;
        height: 19rem;
        border-radius: 3%;
    }

    .value-proposition{
        margin: 0 0;
        padding: 8rem 0;
    }

    .the-guide, 
    .success,
    .seo1,
    .seo3,
    .leadgeneration1,
    .leadgeneration3,
    .roi1,
    .roi3,
    .webdesign1,
    .webdesign3,
    .webdev1,
    .webdev3{
        padding: 8rem 0;
        background-image: none;
    }

    .the-guide .left-column, 
    .success .left-column,
    .seo1 .left-column,
    .seo3 .left-column,
    .leadgeneration1 .left-column,
    .leadgeneration3 .left-column,
    .roi1 .left-column,
    .roi3 .left-column,
    .webdesign1 .left-column,
    .webdesign3 .left-column,
    .webdev1 .left-column,
    .webdev3 .left-column{
        padding-bottom: 8rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 60%;
    }


    .the-guide .right-column .image-1, 
    .success .right-column .image-1,
    .seo1 .right-column .image-1,
    .seo3 .right-column .image-1,
    .leadgeneration1 .right-column .image-1,
    .leadgeneration3 .right-column .image-1,
    .roi1 .right-column .image-1,
    .roi3 .right-column .image-1,
    .webdesign1 .right-column .image-1,
    .webdesign3 .right-column .image-1,
    .webdev1 .right-column .image-1,
    .webdev3 .right-column .image-1{
        width: 34rem;
        height: 32rem;
        border-radius: 3%;
    }

    .package-pricing{
        padding: 14rem 0 0;
    }

    .the-plan{
        background-color: var(--white);
        padding: 10rem 0;
    }

    .call-to-action-banner .heading p{
        padding: 0 15% 0;
    }

    .explainer .left-column .image-1, 
    .aboutexplainer .left-column .image-1, 
    .service-pitch  .left-column .image-1{
        width: 40rem;
        height: 18rem;
    }
    /* 135 in test.test WP Forms */
    .lead-magnet .form-submition #wpforms-135-field_1{
        max-width: 80%;
    }


    footer .flex-container .about-us{
        padding-bottom: 10rem;
        text-align: center;
    }

    footer .flex-container .about-us .wpforms-validate{
        justify-content: center;
    }

    footer .flex-container .about-us .subscription-form{
        justify-content: center;
    }


    footer .flex-container .about-us .subscription-form input{
        font-family: 'Poppins' sans-serif;
        font-size: 2rem;
        font-weight: 600;
        color: var(--black);
        background-color: rgba(217, 217, 217, 0.4);
        border-radius: 40px 0 0 40px;
        border: 1px solid black;
        border-right: none;
        padding: 2rem 1rem;
        /* min-width: 4rem; */
        cursor: pointer;
        transition: .25s;
    }

    footer .flex-container .about-us .subscription-form .orng-btn {
        padding: 2rem 2rem;
    }

    footer .right-column{
        display: block;
        text-align: center;
    }

    footer .flex-container .right-column .menu{
        padding-bottom: 4rem;
    }

    footer .flex-container .right-column .menu h4{
        padding-bottom: 0rem;
    }

    footer .flex-container .right-column .sub-menu{
        padding-bottom: 4rem;
    }

    footer .flex-container .right-column .sub-menu h4{
        padding-bottom: 0rem;
    }

    footer .flex-container .right-column .company{
        padding-bottom: 4rem;
    }

    footer .flex-container .right-column .company h4{
        padding-bottom: 0rem;
    }
}