html { scroll-behavior: smooth; }

body { font-family: 'Montserrat', sans-serif; background-color: rgb(245, 245, 245); }

a { color: white; text-decoration: none; font-size: 16px; }

@media only screen and (max-width: 900px) {

    body {

        overflow-x: hidden !important;

    }

}



@keyframes fade-in {

    from {opacity: 0; transform: translateY(25px);}

    to {opacity: 1;}

}



.fade-in-element { animation: fade-in 1.2s; }



/* ---------------------------------------------- 

                  Hero Section

   ---------------------------------------------- */



header { min-height: 700px; display: flex; flex-direction: column; align-items: center; position: relative; background-color: #333; background-image: url("../img/home-hero.jpg"); background-position: top; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }







.topbar { position: fixed; background-color: #3f48cc; padding: 8px 0px; min-height: 20px; width: 100%; top: 0; z-index: 7; display: flex; flex-direction: row; justify-content: space-between; }



.topbar-left, .topbar-right { display: flex; flex-direction: row; justify-content: center; }

.top-email { display: flex; flex-direction: row; justify-content: center; align-items: center; margin-left: 5px; }

.top-phone { display: flex; flex-direction: row; justify-content: center; align-items: center; margin-left: 17px; }

.topbar-left img, .topbar-right img { height: 21px; width: auto; }

.topbar-left h6 { font-size: 19px; font-weight: 600; color: white; margin-left: 9px; }

.top-location {display: flex; flex-direction: row; justify-content: center; align-items: center; margin-right: 15px; }

.topbar-right p { font-size: 17px; color: #ffffff; margin-left: 0px; }



.topbar-right { display: flex; flex-direction: row; justify-content: center; }



nav { padding: 20px 5px; position: fixed; background-color: #f8f8f8; z-index: 12; width: 100%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; margin-top: 37px; }



.logo-wrapper h2 { color: black; font-size: 40px; font-weight: 700; }

.logo { height: 70px; width: auto; }

.nav-item { margin: 0 15px; font-size: 17px; font-weight: 600; color: rgb(0, 0, 0); }

.nav-btn { background-color: #3f48cc; color: white; padding: 8px 30px; border-radius: 5px; transition: all, .3s; }

.nav-btn:hover { background-color: #860202; }





.nav-arrow { margin: 0; padding: 0; font-size: 12px; margin-left: 3px; }  



.dropdown { position: relative; display: inline-block; }

  

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #F8F8F8;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

  margin: 0px 0;

}

  

.dropdown-nav-item { display: flex; flex-direction: row; justify-content: center; align-items: center; }



.dropdown-content-text { color: rgb(19, 19, 19); padding: 12px 16px; text-decoration: none; display: flex; flex-direction: row; justify-content: start; align-items: center; font-size: 16px; font-weight: 600; }



.dropdown-content a:hover {background-color:#e7e7e7; }



.dropdown:hover .dropdown-content { display: flex; flex-direction: column; justify-content: center; align-items: stretch; }



.dropdown:hover .dropbtn {background-color: #e7e7e7; }





.hero-wrapper { margin: 0 auto; margin-top: 0px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; padding: 30px 0px; margin-top: 0px; position: absolute; left: 0; bottom: 0; top: 0; right: 0; z-index: 2; }



.hero-wrapper-text { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.hero-wrapper h1 { font-size: 80px; font-weight: 700; margin: 10px 0; color: white; text-align: center; }

.hero-wrapper p { font-size: 40px; line-height: 32px; font-weight: 700; margin: 10px 0; color: rgb(255, 255, 255); text-align: center; }

.hero-wrapper a { padding: 23px 5px; width: 17%; text-align: center; background-color: #3f48cc; color: white; margin-top: 30px; font-size: 21px; font-weight: 600; border-radius: 3px; box-shadow: 0 1px 5px rgb(46, 46, 46); }





@media only screen and (max-width: 850px) {



    header { min-height: 450px; display: flex; flex-direction: column; align-items: center; padding-bottom: 0px; background-attachment: scroll; }



    nav { display: none; }

    .logo { margin-bottom: 30px; }

    .nav-items { display: flex; flex-direction: column; justify-content: center; align-items: center; }

    .nav-item { margin: 10px 0; font-size: 22px; }

    .phone-number { margin-top: 30px; }



    .hero-wrapper { margin-top: 70px; width: 100%; padding-left: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 0px; }



    .hero-wrapper h1 { font-size: 50px; margin: 10px 0; margin-top: 0; color: white; text-align: center; }

    .hero-wrapper a { padding: 16px 5px; width: 60%; text-align: center; background-color: #3f48cc; color: white; margin-top: 30px; font-size: 21px; font-weight: 600; border-radius: 3px; box-shadow: 0 1px 5px rgb(46, 46, 46); }



}





/* ---------------------------------------------- 

                  Tabs Section

   ---------------------------------------------- */

#tabs { display: flex; flex-direction: row; justify-content: center; width: 100%; }

.tab-wrapper { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background-color: rgb(97, 97, 97); width: 25%; min-height: 160px; padding-bottom: 30px; }

.tab-wrapper-one { background-image: url("../img/about1.jpg"); background-position: center; background-size: cover; }

.tab-wrapper-two { background-image: url("../img/services1.jpg"); background-position: center; background-size: cover; }

.tab-wrapper-three { background-image: url("../img/our-work1.jpg"); background-position: center; background-size: cover; }

.tab-wrapper-four { background-image: url("../img/contact.jpg"); background-position: center; background-size: cover; }

.tab-wrapper-main { background-color: #3f48cc; background: linear-gradient(#b048e4, #3f48cc, #7b25a7); display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 0; }

.tab-wrapper a { font-size: 26px; text-align: center; color: white; font-weight: 500; }

.tab-wrapper-main a { font-size: 30px; font-weight: 700; line-height: 40px; text-align: center; }



@media only screen and (max-width: 850px) {

    #tabs { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; width: 100%; }

    .tab-wrapper { width: 50%; }

    .tab-wrapper-main { display: none; }

}





/* ---------------------------------------------- 

                 Intro Section

   ---------------------------------------------- */

#intro { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; padding: 50px 0; }

.intro-text-wrapper { display: flex; flex-direction: column; width: 45%; }

.intro-text-wrapper h2 { font-size: 45px; line-height: 50px; font-weight: 600; margin-bottom: 15px; }

.intro-text-wrapper p { font-size: 17px; margin: 10px 0 15px 0; line-height: 25px; }

.intro-text-wrapper a { padding: 14px 5px; width: 32%; text-align: center; background-color: #3f48cc; color: white; margin: 20px 0 35px 0; font-size: 16px; font-weight: 600; cursor: pointer;}



#concrete-calculator { scroll-margin-top: 150px;; }

.calculator-wrapper { width: 40%; border-radius: 5px; background-color: white; box-shadow: 0 3px 10px rgb(210, 210, 210); display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 10px; }

.calculator-wrapper h3 { font-size: 26px; text-align: center; padding: 20px 0; width: 100%; }

.calculator-input { margin: 11px 0; padding: 12px 10px; width: 85%; border-radius: 4px; font-size: 18px; border: 1px solid rgb(206, 206, 206); }

.calculator-wrapper a { padding: 14px 5px; width: 32%; text-align: center; background-color: #3f48cc; color: white; margin: 20px 0 35px 0; font-size: 16px; font-weight: 600; cursor: pointer;}

.calculator-wrapper h4 { padding: 25px 0; font-size: 30px; font-weight: 500; background-color: #3f48cc; color: white; width: 100%; text-align: center; }



#intro img { width: 40%; }



@media only screen and (max-width: 850px) {

    #intro { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 70px 0; }

    .intro-text-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 95%; }

    .intro-text-wrapper h2 { text-align: center; }

    .intro-text-wrapper p { text-align: center; }

    .intro-text-wrapper a { width: 60%; }

    #intro img { width: 90%; margin-top: 20px; }



    .calculator-wrapper { width: 95%; }

}



/* ---------------------------------------------- 

                 About Section

   ---------------------------------------------- */

#about { padding: 90px 0; display: flex; flex-direction: row; justify-content: space-around; align-items: center; background-color: #333; background-image: url("img/concrete-background.png"); background-position: center; background-size: cover; background-attachment: fixed; }

.about-heading-wrapper { display: flex; flex-direction: column; width: 40%; }

.about-heading-wrapper h2 { font-size: 57px; line-height: 70px; font-weight: 700; color: white; }

.about-heading-wrapper p { font-size: 17px; color: white; line-height: 26px; margin-top: 20px; }



.about-feature-wrapper { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; flex-wrap: wrap; width: 45%; }

.about-feature { width: 45%; margin: 25px 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.about-feature img { width: 70px; height: auto; margin-bottom: 20px; }

.about-feature p { color: white; font-size: 16px; text-align: center; }



@media only screen and (max-width: 850px) {

    #about { padding: 90px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }

    .about-heading-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 95%; }

    .about-heading-wrapper h2 { font-size: 57px; line-height: 70px; font-weight: 700; color: white; text-align: center; }

    .about-heading-wrapper p { font-size: 17px; color: white; line-height: 26px; margin-top: 20px; text-align: center; }

    .about-feature-wrapper { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; flex-wrap: wrap; width: 95%; }

}



/* ---------------------------------------------- 

                 CTA Section

   ---------------------------------------------- */

#cta { padding: 60px 0; background-color: #3f48cc; display: flex; flex-direction: row; justify-content: space-around; align-items: center; }

#cta h2 { font-size: 45px; color: white; font-weight: 700; }

#cta a { padding: 14px 5px; width: 17%; text-align: center; background-color: #f7f7f7; color: #3f48cc; font-size: 16px; font-weight: 600; border-radius: 3px; }



@media only screen and (max-width: 850px) {

    #cta { padding: 60px 0; background-color: #3f48cc; display: flex; flex-direction: column; justify-content: center; align-items: center; }

    #cta h2 { text-align: center; }

    #cta a { width: 60%; margin-top: 50px; }

}







/* ---------------------------------------------- 

                Services Section

   ---------------------------------------------- */

#services { background-color: #333; background-image: url("img/concrete-background.png"); background-position: center; background-size: cover; background-attachment: fixed; padding: 50px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }   

.services-wrapper { display: flex; flex-direction: row; justify-content: center; background-color: white; width: 90%; }

.service-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 33%; padding: 20px; padding-bottom: 35px; }

.service-wrapper-one { background-color: rgb(241, 241, 241); }

.service-wrapper img { width: 100%; height: auto; }

.service-wrapper h2 { font-size: 30px; margin: 30px 0; font-weight: 700; color: #444; text-align: center; }

.service-wrapper p { font-size: 16px; line-height: 23px; text-align: center; color: #444; }



@media only screen and (max-width: 850px) {

    .services-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: white; width: 90%; }

    .service-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 90%; padding: 20px; padding-bottom: 35px; }

}





/* ---------------------------------------------- 

                   Footer

   ---------------------------------------------- */



footer { background-color: #222; padding: 25px 0; display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; }



.copyright { color: rgb(167, 167, 167); margin: 0; }

footer a { margin: 0; }

footer img { width: 230px; height: auto; margin: 0; }



@media only screen and (max-width: 850px) {

    footer { display: flex; flex-direction: column; justify-content: center; align-items: center; }

    .copyright { margin: 5px 0; }

    footer a { margin: 5px 0; }

}



/* ---------------------------------------------- 

                Service Page

   ---------------------------------------------- */



.service-header { min-height: 500px; display: flex; flex-direction: column; align-items: center; position: relative; background-color: #333; background-image: url("../img/home-hero.jpg"); background-position: top; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }



#service-page-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 0; }

#service-page-wrapper h2 { font-size: 45px; font-weight: 700; text-align: center; margin-bottom: 30px; }

.service-page-top-wrapper { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; }

.service-span { margin-right: 8px; color: black; font-weight: 700; }

.service-page-top-wrapper p { width: 30%; color: rgb(78, 78, 78); text-align: center; font-size: 20px; font-weight: 500; margin: 15px 0; }



@media only screen and (max-width: 850px) {

    .service-header { background-attachment: scroll; }

    .service-page-top-wrapper { display: flex; flex-direction: row; justify-content: space-around; align-items: center; flex-wrap: wrap; }

    .service-page-top-wrapper p { width: 40%; }

}





#about-page-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 0; }

#about-page-wrapper h2 { font-size: 26px; line-height: 35px; font-weight: 600; margin-bottom: 5px; margin-top: 30px; }

.about-page-top-wrapper { display: flex; flex-direction: row; justify-content: space-around; align-items: center; }

.about-page-text-wrapper { display: flex; flex-direction: column; width: 42%; }

.about-page-text-wrapper p { font-size: 16px; line-height: 24px; margin: 10px 0; }

.about-page-top-wrapper img { width: 45%; height: auto; border: 10px solid #3f48cc; border-radius: 5px; }



@media only screen and (max-width: 850px) {

    .about-page-top-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; }

    .about-page-text-wrapper { display: flex; flex-direction: column; width: 95%; }

    .about-page-top-wrapper img { width: 95%; margin-top: 30px; }

}



.page-works-wrapper { padding: 60px 0; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; }



#testimonial-page-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 0; }

.testimonial-page-header { display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; }

.testimonial-page-header h2 { font-size: 30px; line-height: 40px; width: 60%; font-weight: 600; }

.testimonial-page-header a { padding: 13px 40px; text-align: center; background-color: #3f48cc; color: white; font-weight: 600; border-radius: 4px; }

.testimonial-top-wrapper { width: 100%; margin-top: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.testimonial-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 90%; background-color: white; border: 2px solid #3f48cc; border-radius: 4px; margin: 10px 0; padding: 25px 0px; }

.testimonial-wrapper p { font-size: 18px; line-height: 25px; text-align: center; font-weight: 600; margin-bottom: 15px; width: 98%; }

.testimonial-wrapper h3 { font-size: 18px; font-weight: 500; }



@media only screen and (max-width: 850px) {

    .testimonial-page-header { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }

    .testimonial-page-header h2 { text-align: center; margin-bottom: 30px; width: 95%; }

    .testimonial-wrapper { width: 95%; border: 2px solid #5f0303; }

}





#contact-page-wrapper { padding: 80px 0 50px 0; display: flex; flex-direction: row; justify-content: space-around; }

.contact-left { width: 42%; display: flex; flex-direction: column; }

.contact-left h2 { font-size: 55px; line-height: 55px; color: #333; margin-bottom: 35px; font-weight: 700; }

.contact-left h6 { font-size: 29px; color: #555; font-weight: 700; margin-bottom: 15px; }

.contact-left p { font-size: 18px; color: #555; font-weight: 500; line-height: 32px; margin: 15px 0; }



.contact-right { width: 41%; }

.contact-right h6 { font-size: 26px; color: #555; font-weight: 700; margin-bottom: 15px; }



.contact-form, #contact-form { width: 100%; display: flex; flex-direction: column; justify-content: center; align-content: center;  margin: 0px auto; }

.contact-wrapper { width: 100%; margin: 5px 0; display: flex; flex-direction: column; }

.label, .input { width: 100%; }

.label { margin: 20px 0 10px 0; font-size: 14px; font-weight: 600; color: rgb(15, 15, 15); }

.input { padding: 10px 5px; font-size: 17px; border-radius: 4px; border: none; }

.submit-btn { padding: 12px 20px; margin-top: 35px; color: #f7f7f7; background-color: #3f48cc; font-weight: 600; border-radius: 4px; font-size: 17px; border: 1px solid #3f48cc; transition: all, .3s; }

.submit-btn:hover { background-color: #810505; } 



.contact-left a[href^=tel] { color: black; }



@media only screen and (max-width: 850px) {

    #contact-page-wrapper { background-image: url("img/nav-background.jpg"); background-position: center; background-size: cover; background-attachment: scroll; display: flex; flex-direction: column; justify-content: center; align-content: center; padding: 60px 0; }

    #contact-page-wrapper h4 { font-size: 30px; width: 95%; }

    .contact-left { width: 95%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

    .contact-left h2 { text-align: center; font-size: 40px; line-height: 50px; }

    .contact-right { width: 95%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

    .contact-wrapper { width: 90%; margin: 15px auto; }

    .submit-btn { margin: 35px auto 0 auto; font-weight: 600; border-radius: 4px; font-size: 17px; }

}







#pricing-page-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 0; width: 100%; }



.pricing-wrapper { margin: 15px 0; background-color: white; padding: 30px 0; width: 80%; border-radius: 3px; box-shadow: 0 3px 10px rgb(180, 180, 180); }

.pricing-wrap { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; }

.price-block { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 30%; margin: 10px; }

.price-block h2 { font-size: 21px; font-weight: 700; text-align: center; }

.price-block p { font-size: 19px; font-weight: 500; text-align: center; }

.pricing-text { font-size: 18px; line-height: 30px; font-weight: 600; text-align: center; margin: 25px auto 10px auto; width: 90%; }



@media only screen and (max-width: 850px) {

    .pricing-wrapper { width: 95%; } 

    .price-block { margin: 10px 5px; }

    .price-block h2 { font-size: 18px; }

    .price-block p { font-size: 16px; }

    .pricing-text { font-size: 16px; }

}



.col {
	float: left;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}
.cols {
	float: left;
	width: 100%;
	padding: 0px;
	box-sizing: border-box;
}


.col-xs-11 {
	width: 91.662%;
}
.col-xs-10 {
	width: 83.332%;
}
.col-xs-9 {
	width: 75%;
}
.col-xs-8 {
	width: 66.662%;
}
.col-xs-7 {
	width: 58.331%;
}
.col-xs-6 {
	width: 50%;
}
.col-xs-5 {
	width: 41.662%;
}
.col-xs-4 {
	width: 33.332%;
}
.col-xs-3 {
	width: 25%;
}
.col-xs-2 {
	width: 16.662%;
}
.col-xs-1 {
	width: 8.332%;
}

/*only if the device width is atleast 768px or higher*/
@media screen and (min-width: 768px) {
.col-sm-11 {
	width: 91.662%;
}
.col-sm-10 {
	width: 83.332%;
}
.col-sm-9 {
	width: 75%;
}
.col-sm-8 {
	width: 66.662%;
}
.col-sm-7 {
	width: 58.331%;
}
.col-sm-6 {
	width: 50%;
}
.col-sm-5 {
	width: 41.662%;
}
.col-sm-4 {
	width: 33.332%;
}
.col-sm-3 {
	width: 25%;
}
.col-sm-2 {
	width: 16.662%;
}
.col-sm-1 {
	width: 8.332%;
}
}
 @media screen and (min-width: 1024px) {
.col-md-11 {
	width: 91.662%;
}
.col-md-10 {
	width: 83.332%;
}
.col-md-9 {
	width: 75%;
}
.col-md-8 {
	width: 66.662%;
}
.col-md-7 {
	width: 58.331%;
}
.col-md-6 {
	width: 50%;
}
.col-md-5 {
	width: 41.662%;
}
.col-md-4 {
	width: 33.332%;
}
.col-md-3 {
	width: 25%;
}
.col-md-2 {
	width: 16.662%;
}
.col-md-1 {
	width: 8.332%;
}
}
 @media screen and (min-width: 1024px) {
.col-lg-11 {
	width: 91.662%;
}
.col-lg-10 {
	width: 83.332%;
}
.col-lg-9 {
	width: 75%;
}
.col-lg-8 {
	width: 66.662%;
}
.col-lg-7 {
	width: 58.331%;
}
.col-lg-6 {
	width: 50%;
}
.col-lg-5 {
	width: 41.662%;
}
.col-lg-4 {
	width: 33.332%;
}
.col-lg-3 {
	width: 25%;
}
.col-lg-2 {
	width: 16.662%;
}
.col-lg-1 {
	width: 8.332%;
}
}