@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;400&family=Nunito:wght@300&family=Oswald:wght@200;300;400;500;600&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100&family=Roboto+Flex:opsz,wght@8..144,300&family=Roboto+Slab:wght@100;400;500&family=Yantramanav:wght@100;300&display=swap');

* {
    margin: 0;
    padding: 0;
    /* overflow-x: auto; */
}

body {

    background-size: cover;
    min-height: 600px;
    width: 100vw;
    overflow-x: hidden;
    font-family: kanit;
    scrollbar-width: thin;
    /* "auto" or "thin" */
    /* scrollbar-color: blue orange;   scroll thumb and track  */

}

body::-webkit-scrollbar {
    width: 12px;
    /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
    background: rgb(255, 255, 255);
    /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
    background-color: #fdd14a;
    /* color of the scroll thumb */
    border-radius: 20px;
    /* roundness of the scroll thumb */
    border: 3px solid rgb(255, 255, 255);
    /* creates padding around scroll thumb */
}


.mainPageHead {

    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

#menu {
    border: none;
    border: 0px;
    margin: 0px;

    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    width: 100vw;
}

#navMain {
    height: 50px;
    list-style: none;
    margin: 0;
    padding-top: 1rem;
    float: left;
    z-index: 10;
    position: absolute;
    width: 100vw;

}

#navMain li {
    display: inline-block;
    position: relative;
    float: left;
    background: transparent;
    text-align: center;

}

#navMain li {
    display: inline-block;
    width: 150px;
    line-height: 50px;
    padding: 0;
    text-decoration: none;
    color: #21201c;
}

#navMain li li {
    float: left;

}



#navMain li a:hover {
    border-bottom: 2px solid #21201c;
}

/*--- Sublist Styles ---*/
#navMain ul {
    position: absolute;
    padding: 0px;
    left: 0;
    display: none;

}

#navMain ul li {
    background-color: rgb(240, 240, 240);
    width: 200px;
}

#navMain ul li:hover {
    background-color: rgb(211, 211, 211);
}

/*--- Hide Sub Sublists ---*/
#navMain li:hover ul ul {
    display: none;

}

/*--- Sublevel UL's display and position on hover ---*/
#navMain li:hover ul {
    display: flex;
    flex-direction: column;
    width: 150px;
    font-size: 14px;
    padding: 0;
}

#navMain a {
    text-decoration: none;
    color: #21201c;

}

#navMain li li a:hover {
    border-bottom: none;

}

#navMain li li:hover ul {
    font-size: 12px;
    margin-left: 200px;
    margin-top: -50px;
    display: flex;
    height: 40px;
    flex-direction: column;
    padding: 0;

}

#l1 {
    width: 50px;
    height: 50px;
}

#l2 {
    height: 80px;
}

.logoImage {
    width: 350px !important;
}

.logoImage {
    /* height: 50px; */
}

.logoImage a {
    border-bottom: none !important;
}


#contactDetails {
    position: relative;
    width: 100vw;
    background-color: #21201c;
    display: flex;

}

#navContact {
    display: flex;
    text-decoration: none;
    list-style: none;

    padding: 0.1rem;
    padding-left: 2rem;
}

#navContact a {
    text-decoration: none;
    color: white;
    font-size: small;
    height: 30px;
    display: block;
    padding-top: 0.5rem;
}


#navContact a:hover {
    color: #fdd41a;
}

#navContact li {
    width: fit-content;
    padding-left: 25px;
}

#navSocial {
    position: relative;

    left: 40%;
    list-style: none;
    display: flex;
}

#navSocial li {
    width: 50px;
    padding: 0.1rem;
    color: white;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    font-size: large;
}

.addpadding {
    padding-right: 5px;
}

#navSocial a {
    color: white;

}

#navSocial a:hover {
    color: #fdd41a;
}

#navSocial {
    padding-top: 5px;
}


.mySlides {
    display: none;
    width: 100vw;
    height: 150vh;
    box-sizing: border-box;

}

.mySlides img {
    vertical-align: middle;
    width: 100vw;
    height: 900px;
}

.slideshow-container {
    min-width: 1000px;
    position: relative;
    width: 100vw;
    height: 900px;

}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: relative;
    bottom: 72vh;
    left: 20px;
    width: auto;
    padding: 15px 25px;
    margin-left: 15px;
    color: white;
    font-weight: bold;
    font-size: 25px;
    transition: 0.6s ease;
    user-select: none;
    /* background-color: white; */
    border: 2px solid #fdd41a;
}

/* Position the "next button" to the right */
.next {
    right: 16px;
    border: 2px solid #fdd41a;
    color: white;

}

/* On hover, add a black background color with a little bit see-through */
.prev:hover {
    background-color: #fdd41a;
    color: white;
}

.next:hover {
    background-color: #fdd41a;
    color: white;
}

.text1,
.text2,
.text3,
.text4,
.text5 {
    /* color: #ffffff; */
    font-family: Arial, Helvetica, sans-serif;
    padding: 8px 12px;
    position: relative;
    bottom: 70%;

    text-align: center;
}

/* Caption text */
.text1 {


    color: #fff;
    text-shadow: 2px 2px 4px #000;
    font-size: 2.5rem;
    transition: all .2 ease;
    width: 100%;
    opacity: 0;
    width: 300px;
    transform: translateX(-10%);
    /* Initially move it outside the viewport on the left */
    animation: slideLeft 1s forwards;
    /* Apply the slide-in animation */
    font-weight: 500;
}

@keyframes slideLeft {
    to {
        opacity: 1;
        /* Fade in by changing opacity */
        transform: translateX(0);
        /* Slide in from left to right */
    }
}

.text2 {


    color: #332405;
    text-shadow: 2px 2px 4px #000;
    font-size: 2.5rem;
    width: 100%;
    opacity: 0;
    transform: translateY(-20%);
    /* Initially move it outside the viewport on the left */
    animation: slideIn 1s forwards;
    /* Apply the slide-in animation */
}

@keyframes slideIn {
    to {
        opacity: 1;
        /* Fade in by changing opacity */
        transform: translateY(0);
        /* Slide in from left to right */
    }
}

.text4 {

    color: #332405;
    text-shadow: 2px 2px 4px #fff;
    font-size: 2.5rem;
    width: 100%;
    transform: translateY(-20%);
    /* Initially move it outside the viewport on the left */
    animation: slideIn 1s forwards;
    /* Apply the slide-in animation */
}

.text3 {

    color: #ffffff;
    text-shadow: 2px 2px 4px #cd9d37;
    font-size: 2.7rem;
    width: 30%;
    transform: translateX(20%);
    /* Initially move it outside the viewport on the left */
    animation: slideLeft 1s forwards;
    /* Apply the slide-in animation */
}

@keyframes slideLeft {
    to {
        opacity: 1;
        /* Fade in by changing opacity */
        transform: translateX(0);
        /* Slide in from left to right */
    }
}

.text5 {

    color: #ffffff;
    text-shadow: 2px 2px 4px #cd9d37;
    font-size: 2.7rem;
    width: 30%;
}

.imagePs {
    position: relative;
    width: 275px;
    height: 150px;
}

.services {

    position: relative;
    bottom: 20% !important;
    display: flex;
    padding-left: 3.7rem;
    /* width: 100vw; */
}

.service {
    cursor: pointer;
    margin: 1rem;
    border-right: 4px solid #fdd41a;
    height: 150px;

}

.service:hover .more {
    color: rgb(0, 0, 0);
}

.overlayimage {

    /* margin: 1rem; */
    cursor: pointer;
    position: absolute;
    top: 1rem;
    width: 275px;
    height: 150px;
    background-color: #21201c;
    /* Initially transparent */
    opacity: 0.5;
    /* Initially transparent */
    /* transition: background-color 0.3s ease, opacity 0.3s ease; */
    /* Smooth transition effect */
}

.more {
    display: flex;
    position: absolute;
    top: 1rem;
    z-index: 10;
    padding: 1rem;
    width: 243px;
    color: #fff;
    height: 150px;
}

.num {
    font-size: 3rem;
}

.textall {
    display: flex;
    flex-direction: column;
    width: 200px;
    padding: 0 1rem;
    text-align: center;
}

.headingSer {
    font-weight: 900;
    padding-bottom: 0.5rem;
    text-align: left;
}

.headingserline {
    font-size: small;
    width: 180px;
    text-align: left;
}


.ourhistorydiv {
    width: 100vw;
    margin-top: 20rem;
    display: flex;
    /* text-align: center; */
    justify-content: space-between;
    background-image: url("http://www.nicdarkthemes.com/themes/construction/wp/demo/construction/wp-content/uploads/sites/2/2019/09/bg-bw.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.image1history img {
    position: relative;
    width: 313px;
    height: 525px;
}

.historytext {
    margin-left: 8rem;
    width: 500px;
    text-align: center;
    padding-top: 10rem;
}

.image1history {
    position: relative;
    padding-top: 10rem;
    margin-right: 8rem;
}


.image2history img {

    width: 263px;
    height: 263px;
}

.image2history {
    position: absolute;
    bottom: 12%;
    right: 80%;
}

.historytext h3 {
    color: #21201c;
    margin-top: 2rem;
}

.historytext h1 {
    color: #21201c;
    margin-top: 2rem;
    font-size: 50px;

    line-height: 60px;
    letter-spacing: 1px;
    font-weight: normal;
}

.historytext p {
    font-size: 14px;
    line-height: 27px;
    padding-top: 2rem;
}

.historytext img {
    margin-top: 3rem;
    width: 300px;
    height: 126px;
}



.parallax-window {
    margin-top: 2rem;
    min-height: 400px;
    height: 700px;
    width: 100vw;
    background: linear-gradient(rgba(17, 17, 17, 0.8), rgba(122, 116, 31, 0.8));
    /* The least supported option. */
    padding-bottom: 0;
}

.projectHeadingnavigation {

    display: flex;
    /* width: 100vw; */
    justify-content: space-between;
    padding: 4rem 6rem;
    align-items: center;
    color: #fff;


}

.navigationProject {}

.projectnav {

    display: flex;
    text-decoration: none;
    list-style: none;

}

.headingProject h1 {
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 1px;
    font-weight: normal;
}

.headingProject h3 {
    letter-spacing: 2px;
    font-weight: normal;
}

.projectnav li {
    padding: 1rem;

    text-align: center;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    line-height: 27px;

}

.projectnav li:hover {
    color: #cacaca;
}

.project img {

    width: 237px;
    height: 338.5px;
    position: absolute;
}

.project {
    margin: 1rem;
    width: 100vw;
    margin-bottom: 0;
    color: #fff;
}



.projectsGallery {
    display: flex;

}




.projectImagenav {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    position: relative;
    width: 237px;
    height: 338.5px;
    justify-content: space-between;
    letter-spacing: 2px;
    font-size: 13px;

}

.buttonplusnav {
    margin: 2rem;
    display: flex;
    justify-content: space-between;

    text-transform: uppercase;
    letter-spacing: 2px;

}

.projectImagenav h3 {
    margin: 2rem;
    padding: 0.2rem;
    text-align: right;
    background-color: #000;
    width: fit-content;
    height: fit-content;
    float: right;
    text-transform: uppercase;
}

.buttonplusnav button {
    text-align: right;
    background-color: #fdd41a;
    color: #fff;
    border: none;

    width: 25px;
    height: 25px;
    align-items: center;
    text-align: center;
}

.buildingstepsdiv {
    display: flex;
    text-align: center;
    margin: 2rem;
    padding: 1rem;

}

.buildingsite {
    width: 100vw;
    height: 150vh;
    text-align: center;
    padding-top: 4rem;
    background-image: url("http://www.nicdarkthemes.com/themes/construction/wp/demo/construction/wp-content/uploads/sites/2/2019/09/bg-bw.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.buildingheadingsite h1 {


    /* width: 100vw; */
    text-align: center;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 1px;
    font-weight: normal;
}

.buildingheadingsite h3 {
    color: #7e7e7e;
    letter-spacing: 2px;
    font-weight: normal;
    text-transform: uppercase;
}





.buidlingstep {
    margin: 2rem;
    width: 400px;
}

.stepnumber {
    font-size: 100px;
    line-height: 100px;
}

.stepheading {
    padding-top: 1rem;
    font-size: 25px;
    line-height: 25px;
    letter-spacing: 1px;
    padding: 0.5rem 1rem;
}

.stepdetail {
    padding-top: 1rem;
    font-size: 14px;
    line-height: 27px;
    letter-spacing: 1px;
    padding: 0.5rem 1rem;
    color: #7e7e7e;
}

.broucher img {
    width: 370px;
    height: 245px;
}

.broucher {
    width: 370px;
    height: 305px;
    margin: 1rem;
}

.downloadbroucher {
    background-color: #fdd41a;
    display: flex;
    text-align: center;
    margin-top: -10px;
    padding: 1rem 3rem;
    align-items: center;
}

a {
    text-decoration: none;
    color: #fff;
}

.downloadbroucher img {
    width: 15px;
    height: 15px;
}

.broucherheading {
    margin: 0;
    width: fit-content;
    height: 30px;
    text-align: center;
    padding-left: 1.5rem;

}

.broucherheading h3 {
    text-align: center;
    align-items: center;
}

.point {
    display: flex;
}

.textpoint {
    display: flex;
    flex-direction: column;
}

.howwework {
    display: flex;
    margin: 4rem;
}

.pointsonhow {

    height: 400px;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 30px;
}

.imagepoint img {
    width: 50px;
    margin-right: 1rem;
}

.point {
    width: 344px;
    height: 170px;
    text-align: left;
    padding: 0 2rem;
}

.pointdetailbuttonmore {
    background-color: #fff;
    border: none;
    cursor: pointer;
    font-size: 20px;
    width: 100px;
    text-align: left;
    font-size: 13px;
    line-height: 13px;
    border-radius: 0px;
    border: 0px solid;
    text-transform: uppercase;
    color: #2d2d2d;

}

.detailpoint {
    width: 300px;
    margin: 20px 0px;
    color: #7e7e7e;
    font-size: 15px;
    line-height: 25px;


}

.pointheading {
    color: #2d2d2d;
    font-size: 20px;
    line-height: 20px;
}

.headingblogs {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blognewsmain {
    padding-left: 83px;
    padding-right: 83px;
}

.checkallbutton {
    width: 224px;
    height: 40px;
    text-transform: uppercase;
    line-height: 20px;
    font-size: 20px;
    background-color: #2d2d2d;
    padding: 10px 20px;
    border: none;
    color: #ffffff;
}

.headingnewsblog h3 {
    color: #7e7e7e;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 2px;
    font-weight: normal;
    text-transform: uppercase;
}

.headingnewsblog h1 {
    color: #2d2d2d;
    padding-top: 10px;
    text-align: ;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 1px;
    font-weight: normal;
}

.blog img {
    width: 370px;
    height: 246px;
}

.blogs {
    display: flex;
    width: 370px;
}

.blog {
    /* margin: 1rem; */
    margin-right: 1rem;
}

.blogmore {
    display: flex;
    width: 400px;
}

.blogmore img {
    width: 100px;
    height: 100px;
}

.bigblogimage img {
    width: 400px;
    height: 276px;
}

.blog h3 {
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 1px;
    font-weight: normal;
    color: #2d2d2d;
}

.blog p {

    font-size: 14px;
    line-height: 27px;
    letter-spacing: 1px;
    padding: 0.5rem 0;
    color: #7e7e7e;
}

.detailsblogs {
    width: 310px;
    padding: 1rem;
}

.readmoreblog {
    background-color: #fdd41a;
    border: none;
    cursor: pointer;
    color: #FFF;
    padding: 10px 20px;
    font-size: 13px;
    line-height: 13px;
    margin-top: 1rem;
}

.nameblog {
    font-size: 20px;
    line-height: 20px;
    font-weight: normal;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.dateblog {
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.readmoreblogmini {
    background-color: #fdd41a;
    border: none;
    cursor: pointer;
    color: #FFF;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 12px;

}

.detailblog {
    margin-left: 1rem;
}

.blogmore {
    margin-bottom: 1rem;
}


.contactus {
    background-image: url("../images/parallexcontact.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    padding: 4rem 8rem;
    display: flex;
    color: #fff;

}


.ourteam {
    /* margin: 1rem; */
    padding-right: 2rem;
    padding-bottom: 1rem;
}

.formcontact {
    color: #7e7e7e;
    display: flex;
    flex-direction: column;
}

.formtocontactus {
    background-color: #fff;
    width: 510px;
    height: 461px;
    padding: 2rem;
}

.headingforform {
    text-align: center;
    padding-bottom: 2rem;
    color: #7e7e7e;
}

.headingforform h1 {
    letter-spacing: 1px;
    font-size: 25px;
    line-height: 25px;
    font-weight: normal;
    color: #2d2d2d;
    text-transform: uppercase;

}

.headingforform p {
    font-size: 14px;
    line-height: 27px;
    color: #7e7e7e;
    letter-spacing: 1px;
    padding-top: 1rem;
}

input {
    margin: 0.3rem 0rem;
    width: 490px;
    height: 34px;
    padding: 0.5rem;
    background-color: #f9f9f9;
    color: #7e7e7e;
    ;
    border-color: #f1f1f1;
    outline: 0;
    border: 1px solid #f1f1f1;
}

textarea {
    margin: 0.3rem 0rem;
    width: 490px;
    padding: 0.5rem;
    background-color: #f9f9f9;
    border-color: #f1f1f1;
    color: #7e7e7e;
    ;
    outline: 0;
    border: 1px solid #f1f1f1;

}

.team {
    padding: 1rem 0;
    margin-right: 5rem;
    color: #fff;
    display: flex;
    align-items: center;
}

.team img {
    width: 50px;
    height: 50px;
    padding-right: 1rem;
}

.designteam {
    font-size: 20px;
    line-height: 20px;
    padding-bottom: 0.6rem;
}

.contactteam {
    font-size: 14px;
    font-weight: normal;
}

.detailteam {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.headingcontact h3 {
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: normal;
}

.headingcontact h1 {
    font-size: 50px;
    line-height: 60px;
    letter-spacing: 1px;
    font-weight: normal;
    padding: 1rem 0;
}

.formButton {
    background-color: #fdd41a;
    text-transform: uppercase;
    width: 510px;
    height: 34px;
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    color: #fff;
    margin-top: 0.2rem;
}

.freerequest {
    background-color: #fdd41a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding: 10px 6rem;
}

.textfree h3 {
    color: #fff;
    font-size: 25px;
    line-height: 25px;
    font-weight: normal;
    letter-spacing: 1px;
}

.buttonrequestfunc {
    width: 214px;
    height: 40px;
    line-height: 20px;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px 20px;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

footer {
    height: fit-content;
    width: 100vw;
    /* background-color: #000; */
    /* opacity: 0.5; */
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('http://www.nicdarkthemes.com/themes/construction/wp/demo/construction/wp-content/uploads/sites/2/2019/09/paral-01.jpg');
    /* background-image: url ('http://www.nicdarkthemes.com/themes/construction/wp/demo/construction/wp-content/uploads/sites/2/2019/09/paral-01.jpg'); */

}

.footerrights {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #cacaca;

}

.footerrights h3 {
    padding-left: 6rem;
}

.footernav {
    display: flex;

}

.footernav {}

.footernavdiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 6rem;
}

.footer1social {
    width: 560px;
    height: 250px;
}

.socialsfooter {
    padding-top: 1.5rem;
}

.footer1social p {
    padding-top: 1.5rem;
    color: #ffffff;
    font-size: 14px;
    line-height: 27px;
    font-weight: normal;
    letter-spacing: 1px;
}

.navfoot {
    padding: 2rem 2rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: normal;
}

.navfoot li {
    list-style-type: none;
    padding-left: 2px;
}

.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.navfoot img {
    width: 10px;
}


.mainImagePage {
    background-image: url('../images/about-us-main.jpg');
    height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contactimg{
    background-image: url('../images/contactus-image-main.jpg');
}

.servicesimg{
    background-image: url('../images/services-main-image.jpg');
}

.mainImagePage h1 {
    font-size: 3rem;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
}

.aboutusdetail {
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4rem;
}

.paraabout {
    width: 60%;
    color: #7e7e7e;
    padding-right: 2rem;
}

.contactusDivmini {
    background-image: url('../images/about-us-contact.jpeg');
    width: 25%;
    height: 300px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    flex-direction: column;


}

.overlayimageA {

    /* margin: 1rem; */
    cursor: pointer;
    position: absolute;

    width: inherit;
    height: inherit;
    background-color: #21201c;
    /* Initially transparent */
    opacity: 0.9;
    /* Initially transparent */
    /* transition: background-color 0.3s ease, opacity 0.3s ease; */
    /* Smooth transition effect */
}



.contactAbout {
    display: flex;
    position: relative;

    z-index: 10;
    padding: 1rem;

    color: #fff;
    display: flex;

    text-align: left;
}

.para {
    display: flex;
    flex-direction: column;
}

.paraaboutcontact {
    color: #fff !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.contactAbout {
    display: flex;
}

.aboutcontactimage {
    width: 20px;
}

.contactAbout i {
    font-size: 2.2rem;
    padding: 0 1rem;
    padding-top: 0.2rem;
}

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto;
    /* grid-auto-columns: 100px; */
    background-color: #fff;
    color: #444;
    width: 80%;
    height: 420px !important;
    margin: 5rem;
  }

  .box {
    background-color: #cd9d37;
    color: #fff;
    border-radius: 5px;
    padding: 0;
    font-size: 150%;

  }

  .a {
    grid-column: 1 / 3;
    grid-row: 1;
    width: 520px;
  }
  .b {
    grid-column: 3 ;
    grid-row: 1 / 3;
    width: 290px;
    height: 455px;
  }
  .c {
    grid-column: 1 ;
    grid-row: 2 ;
    width: 250px;
    height: 220px;

  }
  .d {
    grid-column: 2;
    grid-row: 2;
    width: 260px;
    height: 220px;

    
  }

  .e {
    grid-column: 4 / 5;
    grid-row: 1 / 3; 
    width: 360px;
    display: flex;
    height: 455px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .e input, .e textarea, .e button{
    width: 300px;
    margin: 0.5rem 1rem;
    padding: 0.1rem;
    background-color: transparent;
    padding: 0.7rem;
    
  }

  .e button{
    background-color: #cacaca;
    height: 35px;
    border: none;
    color: #7e7e7e;
    text-transform: uppercase;
    letter-spacing: 2px;
    width: 325px;
  }

  ::placeholder {
    color: white;
    opacity: 1; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: white;
  }

  .e p{
    font-size: 1rem;
  }


.servicemorelist{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 4rem;
}

.servicemorelist img{
    width: 100%;
}

.servicepage{
    width: fit-content;
    position: relative;
    display: flex;
    height: fit-content;
}

.overlayB{
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

.colrchangeoverlay{
    background-color: #fdd14a;
}

.changdirection{
    flex-direction: column;
    margin: 7rem 4rem;
    color: #ffffff;
    width: fit-content;
    height: fit-content;
    font-size: 1.5rem;
    font-weight: 200;
    font-family: 'Poppins', sans-serif;
}