@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,800;1,400&family=Raleway:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

div.jumbotron.carousel-hero {
    height: 90vh;
    color: #fff;
    text-align: center;
    background-size: cover;
    background-position: center;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-bottom: 0
}

div.jumbotron.natural {
    background-image: url(../../assets/img/slide1.jpg)
}

div.jumbotron.interior {
    background-image: url(../../assets/img/slide2.jpg)
}

div.jumbotron.exterior {
    background-image: url(../../assets/img/slide3.jpg)
}

div.jumbotron.waterproofing {
    background-image: url(../../assets/img/slide4.jpg)
}

h1.hero-title,
h2.hero-title,
h3.hero-title {

    color: #fff;
    font-size: 60px;
    font-weight: 600 !important;
    text-shadow: -2px 2px 0 #000,
        2px 2px 0 #000,
        2px -2px 0 #000,
        -2px -2px 0 #000;
        -webkit-font-smoothing: antialiased;
    /* display: inline-block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    text-shadow: 0 3px 3px rgba(0, 0, 0, .4); */
}

p.hero-subtitle {
    max-width: 900px;
    margin: 25px auto;
    padding: 10px 15px;
    color: rgb(255, 255, 255);
    margin-top: 90px;
    background: rgb(5, 0, 0);
    border-radius: 30px 30px 30px 30px;
    opacity: 0.8;
    text-align: justify;
}

/* }
.tbg{
    background: linear-gradient(90deg, rgba(55,3,167,1) 0%, rgba(21,39,227,1) 25%, rgba(0,187,252,1) 50%, rgba(255,165,0,1) 75%, rgba(255,0,0,1) 100%);
    
    border-radius: 0px 30px 0px 30px;
    max-width: 300px;
    padding: 5px 5px;
    margin: 10px auto;
} */
.plat {
    border-radius: 0
}

.btn-primary.focus,
.btn-primary:focus {
    box-shadow: 0 0 0 0 #048f83 !important;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5)
}

.btn-primary:hover {
    color: #fff;
    background-color: #016090;
    border-color: #016090
}

.btn.btn-primary {
    background-color: #048f83 !important;
    border-color: #048f83 !important
}

span {
    font-style: inherit;
    font-weight: inherit
}

.bs-icon {
    --bs-icon-size: .75rem;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: var(--bs-icon-size);
    width: calc(var(--bs-icon-size) * 2);
    height: calc(var(--bs-icon-size) * 2);
    color: var(--bs-primary)
}

.bs-icon-xs {
    --bs-icon-size: 1rem;
    width: calc(var(--bs-icon-size) * 1.5);
    height: calc(var(--bs-icon-size) * 1.5)
}

.bs-icon-sm {
    --bs-icon-size: 1rem
}

.bs-icon-md {
    --bs-icon-size: 1.5rem
}

.bs-icon-lg {
    --bs-icon-size: 2rem
}

.bs-icon-xl {
    --bs-icon-size: 2.5rem
}

.bs-icon.bs-icon-primary {
    color: var(--bs-white);
    background: var(--bs-primary)
}

.bs-icon.bs-icon-primary-light {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .2)
}

.bs-icon.bs-icon-semi-white {
    color: var(--bs-primary);
    background: rgba(255, 255, 255, .5)
}

.bs-icon.bs-icon-rounded {
    border-radius: .5rem
}

.bs-icon.bs-icon-circle {
    border-radius: 50%
}







/**** carousal home****/
.natural .home {
    font-size: 90px;
    color: white;
    letter-spacing: 3px;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    text-shadow: 0px 1px 0px #ccc,
        0px 2px 0px rgb(87, 85, 85),
        0px 3px 0px rgb(93, 92, 92),
        0px 4px 0px rgb(96, 95, 95),
        0px 5px 0px rgb(76, 75, 75),
        0px 6px 0px rgb(102, 101, 101),
        0px 7px 0px rgb(81, 80, 80);
}

#tag {
    font-size: 30px;
    color: navy;
    font-family: 'Kaushan Script', cursive !important;
    text-shadow: 0px 1px 0px #ccc,
        0px 2px 0px #ccc,
        0px 3px 0px #ccc;
}

#nat {
    color: red;
}

#pa {
    color: green;
}



/*** Footer ***/
.footer {
    color: #999999;
}


.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .copyright a:hover {
    color: var(--primary);
}