body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
    margin: 0px;
    padding: 0px;
}

html {
    font-size: 18px;
}

body {
    font-family: 'Montserrat', sans-serif;
}

p {
    font-size: 1.1rem;
    font-weight: 500;
}

.heading1 {
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    color: #171717;
    font-size: 2.3rem;
}

.heading1 span.highlight {
    color: #878686;
}

.heading1 .underline-text {
    background-color: #000;
    width: 60%;
    height: 3px;
    margin: 0 auto;
    margin-top: 1rem;
}

.btn-custom {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    border-radius: 5px;
    font-size: 1.2rem;
}

.btn-custom.btn-blue {
    background-color: #3B569A;
    color: #fff;
    transition: 0.3s ease;
    padding: 0.8vw 2vw;
}

.btn-custom.btn-blue:hover {
    background-color: #223463;
    color: #fff;
}

.btn-custom.btn-white {
    background-color: #fff;
    color: #3B569A;
    border: 0.2vw solid transparent;
    transition: 0.3s ease;
    padding: 0.8vw 2vw;
}

.btn-custom.btn-white:hover {
    background-color: transparent;
    color: #fff;
    border: 0.2vw solid #fff;
}

.padding-1 {
    padding: 5vw 0vw;
}

/***** Header and Navigation ****/
.topbar{
    padding:1vw;
    position:relative;
}
.topbar .shape{
    clip-path: polygon(5% 0, 100% 0%, 100% 100%, 0% 100%);
    background:#f1f1f1;
    width:55vw;
    height:100%;
    position:absolute;
    right:0px;
    top:0px;
    z-index:-1000;
}
.topbar .brand-logo img{
    width: 10vw;
}
.topbar .calltoactions a img{
    width:2vw;
}
.topbar .calltoactions a {
    font-size:1.1rem;
    font-weight: 500;
    color:#000;
    text-decoration: none;
}
.topbar .calltoactions a:nth-child(1)
{
    border-right:1px solid gray;
    padding-right:2vw;
    margin-right:2vw;
}
nav{
    background-color:#3B569A;
    padding:0.8vw 0vw !important;
}
nav .navbar-nav a{
    color:#fff;
    font-weight:500;
    padding:0px !important;
    transition: 0.3s ease;
}
nav .navbar-nav a.active{
    border-bottom:2px solid #fff;
}
nav .nav-item{
    margin-left:3vw;
}
nav .navbar-nav a:hover{
    color:#fff;
    opacity: 0.5;
}
.navbar-toggler:focus {
    border:none;
    box-shadow: none;
}
.animated-icon3 {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.animated-icon3 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.animated-icon3 span {
    background: #fff;
}

.animated-icon3 span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

.animated-icon3 span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

.animated-icon3 span:nth-child(3) {
    top: 20px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

.animated-icon3.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0px;
    left: 8px;
}

.animated-icon3.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

.animated-icon3.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 21px;
    left: 8px;
}

/**** Banner Video ****/
.banner-video video {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    clip-path: inset(0px);
}

/******* Services Section *******/
.services .services-thumb {
    background-size: cover;
    background-position: center center;
    border-radius: 4px;
    height: 13vw;
    position: relative;
    margin-top: 3vw;
}

.services .services-thumb.bathroom {
    background-image: url('../images/services/bathrooms.webp');
}

.services .services-thumb.backsplash {
    background-image: url('../images/services/backsplashes.webp');
}

.services .services-thumb.kitchen-floor {
    background-image: url('../images/services/kitchenfloor.webp');
}

.services .services-thumb.foyer {
    background-image: url('../images/services/foyer.webp');
}

.services .services-thumb.shower {
    background-image: url('../images/services/shower.webp');
}

.services .services-thumb span {
    background-color: #3B569A;
    font-weight: 600;
    font-size: 1.2vw;
    color: #fff;
    width: 13vw;
    padding: 0.6vw 0vw 0.7vw 0vw;
    border: 0.4vw solid #fff;
    border-radius: 60px;
    position: absolute;
    bottom: -2vw;
    left: 50%;
    transform: translate(-50%, 0);
}

.services a {
    color: #000;
    font-weight: 500;
    font-size: 1.2vw;
    display: inline-block;
    margin-top: 2vw;
    text-decoration: none;
}

/***** About ******/
.about {
    background-color: #F1F1F1;
}

.about img {
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.33);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.33);
}

.about .heading1 .underline-text {
    background-color: #000;
    width: 30%;
    height: 3px;
    margin: unset;
    margin-top: 1rem;
}


/******* CTA *****/

.cta {
    background-color: #3B569A;
    padding: 2vw 0vw;
}

.cta h1 {
    font-size: 2rem;
    color: #fff;
    font-weight: 500;
}

/******* Why Choose US *****/

.whychooseus .heading1 .underline-text {
    background-color: #000;
    width: 40%;
    height: 3px;
    margin: unset;
    margin-top: 1rem;
}

/***** Contact Us ***/
.contact-us {
    position: relative;
}

.contact-us .heading1 .underline-text {
    background-color: #000;
    width: 40%;
    height: 3px;
    margin: unset;
    margin-top: 1rem;
}

.contact-us form {
    background-color: #F1F1F1;
    padding: 2vw;
    border-radius: 5px;
}

.contact-us form {
    border-radius: 5px;
}

.contact-us form h3 {
    font-size: 1.2rem;
    color: #626262;
}

.contact-us form textarea {
    height: 8vw !important;
}

.contact-us form input[type="submit"] {
    border: none;
}

.contact-us ul li a {
    color: #000 !important;
    text-decoration: none !important;
    font-size: 1.1rem;
    font-weight: 500;
}

.contact-us .pattern-img {
    position: absolute;
    bottom: 0px;
    z-index: -1;
    right: 0px;
}

/****** Footer *****/
footer {
    background-color: #3B569A;
    color: #fff;
    padding: 5vw 0vw 0vw 0vw;
}

footer .logo {
    width: 13vw;
}

footer h3 {
    font-weight: 600;
    font-size: 1.4rem;
}

footer ul li a {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    font-size: 1.1rem;
    transition: 0.3s ease;
}

footer ul li {
    margin-bottom: 0.8vw;
}

footer ul li a:hover {
    opacity: 0.5;
    color: #fff;
}

footer .col-12 {
    border-top: 1px solid #fff;
}

/**************/
/*************** ABOUT PAGE ******************/
/**************/

/******* About Banner *****/
.about-banner{
    position:relative;
    overflow: hidden;
}
.about-banner img{
    position:absolute;
    right:0px;
    top:50%;
    transform: translateY(-50%);
    width:35vw;
    border-radius:5px 0px 0px 5px;
}
.about-banner .heading1 .underline-text {
    background-color: #000;
    width: 40%;
    height: 3px;
    margin: unset;
    margin-top: 1rem;
}
.about-banner .bold-text
{
    font-weight: 600;
}
.about-banner .bold-text a
{
    color:#000;
}

/******** About Page Image Grid ********/
.about-img-grid .main-thumb{
    height:18vw;
    background-size:cover;
    background-repeat: no-repeat;
    position:relative;
    background-position: center center;
    transition:0.4s ease;
} 
.about-img-grid .main-thumb .about-overlay{
    position:absolute;
    z-index:2;
    background-color:#00000075;
    height:100%;
    width:100%;
    transition:0.4s ease;
}
.about-img-grid .main-thumb:hover .about-overlay
{
    opacity:0;
}
.about-img-grid .main-thumb:hover .about-overlay-text
{
    opacity:0;
}
.about-img-grid .main-thumb .about-overlay-text{
    position:absolute;
    color:#fff;
    z-index:3;
    font-weight:600;
    right: 50%;
    transition:0.7s ease;
    bottom: 50%;
    font-size: 1.2rem;
    transform: translate(50%,50%);
    letter-spacing: 0.5vw;
}
.about-img-grid .main-thumb.bathroom
{
    background-image: url('../images/bathroom.webp');
}
.about-img-grid .main-thumb.backsplash
{
    background-image: url('../images/backsplash.webp');
}
.about-img-grid .main-thumb.shower
{
    background-image: url('../images/shower.webp');
}

/***** core-values *******/

.core-values .value h2{
    font-size:1.2rem;
    font-weight: 600;
    margin-top:0.7vw;
}
.core-values .value .icon{
    position:relative;
}
.core-values .value .icon img{
    width:5vw;
}
.core-values .value .icon .line 
{
    height:0.4vw;
    background-color:#3B569A;
    width:100%;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    z-index:-2;
}
.core-values .value .icon .line.no-left{
    right:0px;
    width:50%;
} 
.core-values .value .icon .line.no-right{
    left:0px;
    width:50%;
} 

/******* Owner ********/
.owner{
    background-color:#3B569A;
    color:#fff;
}
.owner span 
{
    letter-spacing: 0.7vw;
    font-weight: 600;
}
.owner .heading1{
    color:#fff;
}
.owner .heading1 .underline-text {
    background-color: #fff;
    width: 20%;
    height: 3px;
    margin: unset;
    margin-top: 1rem;
}
.owner a{
    color:#fff;
}

/**************/
/*************** SERVICES PAGE ******************/
/**************/
.services-main .service-card {
    margin-top:2vw;
}
.services-main .service-card .service-img{
    height:12vw;
    background-image: url('../images/services/bathrooms.webp');
    background-size:cover;
    border-bottom:0.5vw solid #3B569A;
    background-position:center center;
    position:relative;
    border-radius:5px 5px 0px 0px;
}
.services-main .service-card .service-img img{
    position:absolute;
    right:1vw;
    bottom:-2vw;
    width:3.5vw;
}
.services-main .service-card .content
{
    background-color:#F1F1F1;
    padding: 1vw;
    min-height: 413px;
    border-radius:0px 0px 5px 5px;
}
.services-main .service-card .content h1{
    font-size: 1.5vw;
}
.services-main .service-card .content .heading1 .underline-text{
    margin:unset;
    margin-top:1rem;
}
.services-main .service-card.bathroom .service-img{
    background-image: url('../images/services/bathrooms.webp');
}
.services-main .service-card.backsplash .service-img{
    background-image: url('../images/services/backsplashes.webp');
}
.services-main .service-card.kitchen-floor .service-img{
    background-image: url('../images/services/kitchenfloor.webp');
}
.services-main .service-card.foyer .service-img{
    background-image: url('../images/services/foyer.webp');
}
.services-main .service-card.shower .service-img{
    background-image: url('../images/services/shower.webp');
}
.services-main .service-card.foyer .content{
    min-height: 17vw;
}
.services-main .service-card.shower .content{
    min-height: 17vw;
}

/**************/
/*************** GALLERY PAGE ******************/
/*************/
.close1{
    height:21vw;
    overflow:hidden;
}
.close2{
    height:32vw;
    overflow:hidden;
}
#showbtn1{
    cursor: pointer;
}
#showbtn2{
    cursor: pointer;
}
.gallery-img-thumb{
    position:relative;
    overflow: hidden;
    border-radius:4px;
    cursor:pointer;
}
.gallery-img-thumb .overlay{
    background-color:rgba(0, 0, 0, 0.497);
    height:100%;
    width:100%;
    position:absolute;
    z-index:3;
    transition: 0.3s;
    border-radius:4px;
    opacity: 0;
}
.gallery-img-thumb:hover .overlay{
    opacity:1;
}
.gallery-img-thumb .zoom-icon{
    right: 50%;
    position: absolute;
    z-index: 5;
    bottom: 50%;
    width:2vw;
    transform: translate(50%,50%);
}
.gallery-img-thumb img{
    width:100%;
    object-fit: cover;
    border-radius:4px;
}
.space{
    height:1vw;
    width:100%;
}
.img1 img:nth-child(2){
    height:10vw;
}
.img2{
    height:21vw;
}
.img3{
    height:100%;
}
.bathroom,.backsplash,.kitchenfloor,.foyers{
    padding-bottom:0px;
}
.facebook-section{
    background-color:#f1f1f1;
}
.showcase-img{
    -webkit-box-shadow: 0px 16px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 16px 35px 0px rgba(0,0,0,0.75);
box-shadow: 0px 16px 35px 0px rgba(0,0,0,0.75);
}
#showcase-modal .modal-body{
    height:70vh;
}
#showcase-modal .modal-body img{
    max-height:100%;
    max-width:100%;
}
.modal-content{
    background:transparent;
}
.modal-header{
    border:none;
}
.modal{
    background: #21212199;
}
.close-icon{
    width:3vw;
    right:2vw;
    position:absolute;
    top: 1vw;
    z-index:1000;
    cursor:pointer;
}
/**************/
/*************** Article Individual page ******************/
/**************/
.article-content{
    padding:0.5vw 0vw;
}
.article-heading{
    /*font weight isn't working*/
    font-weight:600;  
    font-size:1.6vw;
    margin:0.5vw 0vw;
}
#back-arrow{
    transform: rotateY(150deg);
    margin:2vw 1vw 2vw 0vw;
    
}
.article-img{
    width:25vw;
    margin: 0.5vw 1.6vw 0.5vw 0vw;
    border-radius:4px;
}
.article-img-sm{
    height:15vw;
    margin: 0.5vw 1.6vw 0.5vw 0vw;
    border-radius:4px;
}
.article-banner{
    height:20vw;
    background-position: center center;
    background-size:cover;
    border-radius:4px;
}
.article-banner.article1{
    background-image:url('../images/article1/a_img_1.webp');
}
.article-banner.article2{
    background-image:url('../images/article2/article2.webp');
}
.article-banner.article3{
    background-image:url('../images/article3/article3.webp');
}
.article-back-btn{
    font-size:1.1rem;
    font-weight:600;
    color:#000;
    transition:0.3s ease;
    text-decoration:none;
}
.article-back-btn:hover{
    opacity:0.5;
    color:#000;
}

/**************/
/*************** CONTACT PAGE ******************/
/**************/
.contact-banner{
    background-image: url('../images/contact-banner.webp');
    background-size:cover;
    background-position:center center;
    color:#fff;
    position:relative;
    margin-bottom:2vw;
}
.contact-banner h1{
    color:#fff;
}
.contact-banner .heading1 .underline-text {
    background-color: #fff;
}
.contact-banner .contact-links{
    background-color:#3B569A;
    display: inline-block;
    margin:0 auto;
    padding:2vw;
    position:absolute;
    bottom:0vw;
    right:50%;
    transform: translate(50%,50%);
}
.contact-banner .contact-links img{
    width:2.5vw;
}
.contact-banner .contact-links a{
    color:#fff;
    text-decoration:none;
}
.contact-banner .contact-links a:nth-child(1){
    border-right:1px solid #fff;
    margin-right:2vw;
    padding-right:2vw;
}
.form-heading{
    font-size: 1.2rem;
    font-weight: 600;
}

/**************/
/*************** ARTICLES PAGE ******************/
/**************/
.articles-main {
    padding-bottom:0vw !important;
}
.articles-main .article-thumb{
    height:20vw;
    border-radius:4px;
    position:relative;
    margin-top:2vw;
}
.articles-main .article-thumb.article1{
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%),
   url('../images/article1.webp');
   background-size:cover;   
   background-position:center center;
}
.articles-main .article-thumb.article2{
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%),
   url('../images/article2.webp');
   background-size:cover;   
   background-position:center center;
}
.articles-main .article-thumb.article3{
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%),
   url('../images/article3.webp');
   background-size:cover;   
   background-position:center center;
}
.articles-main .article-thumb .content{
    position:absolute;
    bottom:0px;
    left:0px;
    padding:1vw;
}
.articles-main .article-thumb .content h2{
    font-size:1.2rem;
    font-weight:600;
    color:#fff;
    margin-bottom:0.7vw;
}
.articles-main .article-thumb .content a{
    font-size:1.2rem;
    font-weight:500;
    text-decoration:none;
    color:#fff;
}
.articles-main .article-thumb .content a:hover{
    text-decoration:underline;
}

/****** Reviews ******/
.reviews{
    background-color:#3B569A;
}
.reviews .heading1 {
    color: #ffffff;
}
.reviews .heading1 .underline-text {
    background-color: #fff;
    width: 45%;
}
.reviews .review-content{
    color:#fff;
}
.reviews .review-content span{
    background-color:#183276;
    border-radius:60px;
    display:inline-block;
    padding: 0.2vw 0.8vw;
    margin-bottom:1vw;
}
.reviews .reviews-link{
    color:#fff;
}
.reviews .reviews-link a{
    color:#fff;
}
.owl-theme .owl-dots .owl-dot span{
    width:13px !important;
    height:13px !important;
    background: #1a3068 !important; 
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #ffffff !important;
}

/**** Others ****/
.map{
    height:200px;
    border-radius:4px;
}
.fb-cta{
    width:14vw;
}