h1, h2, h3, h4, h5, h6, p {
    color: black;
}


@media (max-width: 576px) {
    h1 {
        font-size: 28px;
    }
}


/*******************************/
/********** Hero CSS ***********/
/*******************************/
.hero {
    background-image: url(../img/pic\ 1.webp);
    box-shadow: 0px 60px 100px -40px black inset;
}

.hero .hero-text {
    padding-top: 3rem;
}
.hero .hero-text h1 { 
    font-weight: 300;
    letter-spacing: 0px;
    color: white;
}
.hero .hero-text h1 strong{
    font-weight: 700;
    color: black;
}
.hero .hero-text p {
    font-weight: 400;
    font-size: 23px;
    color: black;
    margin-right: 20px;
}

.hero .hero-btn .btn {
    color: white;
    background: #000;
    border-radius: 50px;
    box-shadow: inset 0 0 0 50px black;
}
.hero .hero-btn .btn:hover {
    background: #ecd9c9;
    color: black;
    box-shadow: inset 0 0 0 50px #ecd9c9;
}
.hero .checkIcon img {
    width: 20px;
    margin: .3rem;
}
.hero .checkIcon p {
    margin: 0;
    font-size: smaller;
}

@media (max-width: 960px) {
    .hero {
        padding-bottom: 80px;
    }    
}
@media (max-width: 768px) {
    .hero {
        padding-top: 30%;
        padding-bottom: 40%;
    }  
    .hero img {
        display: none;
    }
    .hero .hero-text p {
        margin-right: 0;
        text-align: left;
    }
    .hero .hero-text h1 {
        text-align: left;
    }
    .hero .checkIcon img {
        display: inline-block;
    }
}
@media (max-width: 576px) {
    .hero .hero-text p {
        font-weight: 400;
        font-size: 16px;
        margin-right: 20px;
    }
}

/*******************************/
/********** icon_area CSS ***********/
/*******************************/
.icon_area {
    text-align: center;
}
.icon_area h1 {
    font-weight: bold;
    margin-bottom: 5rem;
    margin-top: 2rem;
}
.icon_area p {
    font-weight: 500;
    text-align: center;
}
.icon_area img {
    width: 50px;
}

@media (max-width: 768px) {
    .icon_area p {
        margin-bottom: 50px;
    }  
    .icon_area h1 {
        margin-top: 30px;
    }
}
@media (max-width: 576px) {
    .icon_area h1 {
        margin-bottom: 2rem;
    }
    .icon_area p {
        margin-bottom: 1rem;
        font-size: 14px;
        text-align: left;
    }
    .icon_area h4 {
        font-size: 20px;
    }
}


/*******************************/
/********** personal positioning CSS ***********/
/*******************************/
.personal_positioning {
    background-image: url(../img/pic\ 4\ \(1\).jpg);
    text-align: right;
    margin-top: 7rem;
}
.personal_positioning h3 {
    margin-top: 10rem;
}
.personal_positioning p {
    font-weight: 500;
    background-color: white;
    padding: 1rem;
}
.p_btn {
    margin-top: 5rem;
    margin-bottom: 5rem !important;
}

@media (max-width: 1200px) {
    .personal_positioning h3 {
        color: white;
    }
}
@media (max-width: 576px) {
    .personal_positioning h3 {
        margin-top: 5rem;
    }
    .p_btn {
        margin-top: 2rem;
    }
}



/*******************************/
/********** testimonial CSS ***********/
/*******************************/
@media (max-width: 576px) {
    .testimonial {
        padding: 0;
        margin-top: 5rem;
    }
}



/*******************************/
/********** call_action CSS ***********/
/*******************************/
.call_action {
    background: #4e677d;
    text-align: center;
    padding-top: 10rem;
    padding-bottom: 3rem;
}
.call_action h1 {
    color: white;
}
.call_action p {
    font-weight: 500;
    color: white;
}


/*******************************/
/********** call_action CSS ***********/
/*******************************/
.why_chose {
    text-align: center;
    margin-top: 10rem;
}
.why_chose p {
    margin-bottom: 2rem;
}
.why_chose .checkIcon img {
    width: 30px;
    margin: .5rem;
}
.why_chose .checkIcon h5 {
    margin: 0;
}
@media (max-width: 576px) {
    .why_chose {
        text-align: center;
        margin-top: 5rem;
    }
    .why_chose .checkIcon h5 {
        font-size: 14px;
    }
    .why_chose .checkIcon img {
        width: 20px;
        margin: .3rem;
    }
}



/*******************************/
/********** carousel_roll CSS ***********/
/*******************************/
.carousel_roll {
    margin-left: 30vh;
    margin-right: 30vh;
    margin-top: 5rem;
}
.carousel_roll h3{
    background-color: white;
    color: black;
    padding: 1rem;
}
@media (max-width: 1100px) {
    .carousel_roll {
        margin-left: 10vh;
        margin-right: 10vh;
    }
    .carousel_roll h3 {
        font-size: 25px;
    }
}
@media (max-width: 768px) {
    .carousel_roll {
        margin-left: 0;
        margin-right: 0;
    }
    .carousel_roll h3 {
        font-size: 18px;
    }
}
@media (max-width: 576px) {
    .carousel_roll h3 {
        font-size: 14px;
        padding: .5rem;
    }
}

/*******************************/
/********** recent_projects CSS ***********/
/*******************************/
.recent_projects {
    text-align: center;
}
.recent_projects h3 {
    margin-top: 10rem;
}
.recent_projects h1 {
    margin-bottom: 3rem;
}
.recent_projects img {
    width: 100%;
}
.recent_projects p {
    font-weight: 500;
    text-align: left;
    margin-bottom: 2rem;
}
.recent_projects .hero-btn {
    margin-top: 5rem;
}
.recent_projects .hero-btn .btn:hover {
    background: #000000;
    color: black;
    box-shadow: inset 0 0 0 50px #ffffff;
    border-color:#ffffff;
    border: 2px solid transparent;
}

@media (max-width: 576px) {
    .recent_projects h3 {
        font-size: 16px;
    }
}


/*******************************/
/********** cellphone CSS ***********/
/*******************************/
.cellphone {
    margin-top: 10rem;
}
.cellphone p {
    font-weight: 500;
}
.cellphone img {
    width: 100%;
}


/*******************************/
/********** call_action_2 CSS ***********/
/*******************************/
.call_action_2 {
    background-image: url(../img/pic\ 4\ \(2\).jpg);
    text-align: center;
    padding-top: 10rem;
}
.call_action_2 h3 {
    color: white;
}
.call_action_2 p {
    font-weight: 500;
    margin-bottom: 3rem;
    color: white;
}

@media (max-width: 576px) {
    .call_action_2 {
        padding-top: 5rem;
    }
}


/*******************************/
/********** footer_content CSS ***********/
/*******************************/
.footer_content {
    background: #4e677d;
    text-align: center;
    padding-bottom: 10rem;
}
.footer_content h1 {
    margin-top: 10rem;
    font-size: 60px;
    color: white;
}
.footer_content p {
    font-weight: 500;
    margin-bottom: 3rem;
    margin-bottom: 5rem;
    color: white;
}

@media (max-width: 576px) {
    .footer_content h1 {
        font-size: 40px;
    }
}


/*******************************/
/********** form_action CSS ***********/
/*******************************/
.form_action {
    background-image: url(../img/pic\ 1.webp);
    box-shadow: 0px 60px 100px -40px black inset;
    padding-top: 10rem;
    padding-bottom: 10rem;
    background-position: 50% 26%;
    background-repeat: no-repeat;   
    background-size: cover;
}
.form_action form {
    background-color: white;
    opacity: .9;
    padding: 3rem;
    color: black;
}
.form_action h2 {
    margin-bottom: 2rem;
}
.form_action img {
    width: 50px;
    filter: invert(100%);
    margin-right: 1rem;
}
.form_action button {
    padding: .5rem 1rem .5rem 1rem;
}
.form_action p {
    color: gray;
    font-size: 14px;
}
.form_action button:hover {
    background: black;
}
@media (max-width: 576px) {
    .form_action {
        padding-top: 3rem;
        padding-bottom: 5rem;
    }
    .form_action form {
        background-color: white;
        opacity: .9;
        padding: 1.3rem;
        color: black;
    }
    .form_action button {
        padding: .2rem 1rem .2rem 1rem;
    }
}