@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');



* {
    padding: 0;
    margin: 0;
    font-family: 'Fira Sans', sans-serif;
    box-sizing: border-box;
}

li {
    list-style: none !important;
}

ul {
    list-style: none;
}

html {
    scroll-behavior: smooth;
}


body::before {
    display: block;
    content: '';
    height: 60px;
    /* or whatever */
}



.navbar-brand img {
    width: 150px;
    height: 50px;
}

.nav-link {
    color: white !important;
    font-size: 1.3rem;
    margin: 0px 10px;
}

.nav-link:hover {
    color: #e01643 !important;
}

.carousel-item {
    height: 100vh;
}

.navbar {
    background: linear-gradient(126deg, rgba(2, 0, 36, 1) 0%, rgba(71, 31, 93, 1) 54%, rgba(224, 22, 67, 1) 100%);
    position: fixed;

}


.portfolio img {
    max-width: 100%;
    height: 100%;
}

.row.no-padding[class*=col-] {
    padding: 0;
}

.my-main {
    position: relative;
    height: 100vh;
    width: 100%;
}

.my-main .about-gallery {
    position: relative;
    height: auto;
    width: 90%;
    margin: auto;
    padding: 45px 0;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 2vmin;
    grid-auto-flow: dense;
}

.my-main .about-gallery .about-img {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;

}

.my-main .about-gallery .about-img:first-child {
    grid-column-start: span 2;
    grid-row-start: span 2;
}

.my-main .about-gallery .about-img:nth-child(2n+3) {
    grid-row-start: span 2;
}

.jarallax {
    position: relative;
    z-index: 0;
    height: 100%;
}

.img1 {
    background-image: url(../img/parallax-img.jpeg);
    min-height: 250px;
    position: relative;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 20px 0;
}

.txtimg img {
    border-radius: 70%;
    border: 3px solid red;
    transition: 0.2s;
    overflow: hidden;

}

.txtimg img:hover {
    border-radius: 70%;
    border: 3px solid red;
    border: 3px solid #032369;


}

.card {
    background-color: transparent !important;
    border: 0px;
}


.card-img-top {
    min-height: 8rem;
    max-height: 15rem;
}

.text-underline {
    border-bottom: 3px solid red;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.ex-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 5px;
}

.ex-box img {
    width: 100%;
    border-radius: 20px;
    transition: transform .5s ease;
    overflow: hidden;
}

.ex-box img:hover {
    width: 100%;
    border-radius: 20px;
    transform: scale(1.1);
    overflow: hidden;
}

.ex-box {
    padding: 10px;
}

.explore-title-text {
    font-weight: 600;
    font-size: 2em;
}

.explore-title-text span {
    border-bottom: 3px solid red;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}



/*ADMIN LOGIN*/

.admin_login_body {
    background: #222D32;
    font-family: 'Roboto', sans-serif;
}

.login-box {
    margin-top: 75px;
    height: auto;
    background: #1A2226;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.login-key {
    height: 100px;
    font-size: 80px;
    line-height: 100px;
    background: -webkit-linear-gradient(#27EF9F, #0DB8DE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-title {
    margin-top: 15px;
    text-align: center;
    font-size: 30px;
    letter-spacing: 2px;
    margin-top: 15px;
    font-weight: bold;
    color: #ECF0F5;
}

.login-form {
    margin-top: 25px;
    text-align: left;
}

.admin_login_body input[type=text] {
    background-color: #1A2226;
    border: none;
    border-bottom: 2px solid #0DB8DE;
    border-top: 0px;
    border-radius: 0px;
    font-weight: bold;
    outline: 0;
    margin-bottom: 20px;
    padding-left: 0px;
    color: #ECF0F5;
}

.admin_login_body input[type=password] {
    background-color: #1A2226;
    border: none;
    border-bottom: 2px solid #0DB8DE;
    border-top: 0px;
    border-radius: 0px;
    font-weight: bold;
    outline: 0;
    padding-left: 0px;
    margin-bottom: 20px;
    color: #ECF0F5;
}

.admin_login_body .form-group {
    margin-bottom: 40px;
    outline: 0px;
}

admin_login_body .form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 2px solid #0DB8DE;
    outline: 0;
    background-color: #1A2226;
    color: #ECF0F5;
}

.admin_login_body input:focus {
    outline: none;
    box-shadow: 0 0 0;
}

.admin_login_body label {
    margin-bottom: 0px;
}

.admin_login_body.form-control-label {
    font-size: 10px;
    color: #6C6C6C;
    font-weight: bold;
    letter-spacing: 1px;
}

.btn-outline-primary {
    border-color: #0DB8DE;
    color: #0DB8DE;
    border-radius: 0px;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-outline-primary:hover {
    background-color: #0DB8DE;
    right: 0px;
}

.login-btm {
    float: left;
}

.login-button {
    padding-right: 0px;
    text-align: right;
    margin-bottom: 25px;
}

.login-text {
    text-align: left;
    padding-left: 0px;
    color: #A2A4A4;
}

.loginbttm {
    padding: 0px;
}

/*ADMIN LOGIN CLOSE*/


.product_cat_heading {
    width: max-content;
    margin: auto;
    font-size: 2.5rem;
    line-height: 56px;
    font-family: 'Righteous', cursive;
    letter-spacing: 2px;
    border-bottom: 3px solid red;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.product_cat_heading_p {
    margin-top: 5px;
    width: auto;
    text-align: center;
    font-size: 20px;
}

.product_cat_wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 5px;
}

@media only screen and (max-width: 693px) {
    .product_cat_wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(150px, 1fr));
        grid-gap: 10px;
    }
}

@media only screen and (max-width: 360px) {
    .product_cat_wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(150px, 1fr));
        grid-gap: 10px;
    }
}

.product_box {
    position: relative;
    overflow: hidden !important;
}

.product_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: .5s ease;
    left: 0;
    bottom: 0;
    overflow: hidden;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.product_box:hover .product_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    left: 0;
    bottom: 0;

}

.product_desc {
    position: absolute;
    width: 100%;
    height: 60px;
    transition: .5s ease;
    left: 0;
    bottom: 0;
    overflow: hidden;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: rgba(183, 183, 185, 0.9);
    padding-top: 10px;

}

@media only screen and (max-width: 693px) {
    .product_desc p {
        font-size: 1rem !important;
    }

    .product_desc {
        height: 40px;
    }
}

@media only screen and (max-width: 693px) {
    .carousel-inner .product_banner_text div {
        font-size: .8rem;
    }
}

.product_box:hover .product_desc {
    position: absolute;
    width: 100%;
    height: 70px;
    padding-top: 20px;
    background-color: rgba(183, 183, 185, 0.7);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    left: 0;
    bottom: 0;
}



.product_cat .span {
    padding: 10px 20px;
    background-color: rgba(36, 71, 150, 0.7);
    font-weight: 600;
    font-size: 1.5rem;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    letter-spacing: 2px;
    width: 100%;


}

.product_box img {
    width: 100%;
    border-radius: 20px;
    transition: transform .5s ease;
    overflow: hidden;
    height: 100%;
}

.product_desc p {
    color: black;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 3px;
}

.counter {
    background-color: #0f2964;
    min-height: 105px;
    color: red;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 3px !important;
}

.product_banner {
    position: relative;
}

.product_banner_overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 635px) {
    .product_banner_overlay {
        width: 80% !important;
    }
}

.product_banner_text {
    padding: 0.5rem 1rem;
    color: white;
    font-size: 3rem;
    font-family: 'Rubik', sans-serif;
    background: rgba(0, 0, 0, 0.38);
}


@media only screen and (max-width: 715px) {
    .product_banner_text {
        padding: 0.5rem 1rem;
        color: white;
        font-size: 2rem;
        font-family: 'Rubik', sans-serif;
    }

}

@media only screen and (max-width: 500px) {
    .product_banner_text {
        background-color: rgba(28, 25, 25, 0.69);
        padding: 0.5rem 1rem;
        color: white;
        font-size: 1.2rem;
        font-family: 'Rubik', sans-serif;
    }

}



.border-radius-0 {
    border-radius: 0 !important;
}

.bathware_card_text {
    color: black;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
}

.row_text {
    position: relative;
}



.contactus_box {
    position: relative;
    text-align: center;
    color: white;
    font-size: 3rem;
    text-transform: uppercase;
}

.contactus_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem 3rem;
    background-color: rgba(0, 0, 0, 0.5);
}


#update_product {
    color: green;

}


.car-text {
    font-size: 40%;
    text-align: center;
    font-weight: 700;
}

.car-text-outer {
    background-color: rgb(255 255 255 / 58%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    padding: 1vw 6vw;
    color: #023148;
    font-size: 4vw;
    font-family: 'Rubik', sans-serif;
    border-top-right-radius: 30%;
    border-bottom-left-radius: 30%;
}

@media only screen and (max-width: 634px) {
    .car-text-outer {
        font-size: 4.5vw;
    }

    .car-text {
        font-size: 2.5vw;
    }
}


.card-body {
    padding: 0.4rem !important;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: calc(1.1vw + 2.5px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.prod_desc {
    font-size: calc(1vw + 1.2px) !important;
}


hr {
    margin: 0.3rem 0 !important;
}


.about_us_new {
    position: relative;
    width: 100%;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.about_us_new:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #202231;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    transform: scaleX(1.5);
}

.about_us_new .content {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 800px;
    text-align: center;
    border-bottom: 2px solid red;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.about_us_new .content h3 {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 3em;
}

.about_ceo {
    font-size: 50px;
}


.ceo_img {
    border-radius: 50%;
    max-height: 400px;
    max-width: 400px;
}


#notfound {
    position: relative;
    height: 100vh
}

#notfound .notfound {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.notfound {
    max-width: 767px;
    width: 100%;
    line-height: 1.4;
    padding: 0 15px
}

.notfound .notfound-404 {
    position: relative;
    height: 150px;
    line-height: 150px;
    margin-bottom: 25px
}

.notfound .notfound-404 h1 {
    font-family: titillium web, sans-serif;
    font-size: 186px;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    background: url(../admin_panel/text.png);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;
    background-position: center;
}

.notfound h2 {
    font-family: titillium web, sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin: 0
}

.notfound p {
    font-family: montserrat, sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    text-transform: uppercase
}

.notfound a {
    font-family: titillium web, sans-serif;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border: none;
    background: #5c91fe;
    padding: 10px 40px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 1px;
    margin-top: 15px;
    -webkit-transition: .2s all;
    transition: .2s all
}

.notfound a:hover {
    opacity: .8
}

@media only screen and (max-width:767px) {
    .notfound .notfound-404 {
        height: 110px;
        line-height: 110px
    }

    .notfound .notfound-404 h1 {
        font-size: 120px
    }
}

.table-img {
    max-height: 129px;
    max-width: 129px;

}

.home {
    position: relative;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: url(../img/slider3.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh;
    text-align: center;
}


.home .content {
    position: relative;
    max-width: 50%;
    padding: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    color: #fff;
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
}

.home .content:before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-color: rgba(255, 255, 255, 0.11);
    background-position: center;
    background-size: cover;
    filter: blur(10px);
}

.home .content h3 {
    position: relative;
    margin: 0 0 20px;
    padding: 0;
    text-transform: capitalize;
    z-index: 2;
}

.home .content p {
    position: relative;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    z-index: 2;

}

.contact_detail {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.card-footer-my {
    background-color: #c6c6c6 !important;
    border-radius: 20px !important;
}

@media only screen and (max-width: 431px) {
    .product_cat_heading {
        font-size: 8vw !important;
    }
}

@media only screen and (max-width: 768px) {
    .mt-md-3 {
        margin-top: 30px;
    }
}

.my_card_body {
    background-color: #dbdbdb;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.p-code-style {
    background-color: #c6c6c6;
    border-radius: 15px;
}

.gallery-column {
    border: 3px solid #dbdbdb;
    border-radius: 22px;
    margin-bottom: 1rem;

}

.gallery-column img {
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
}

.gallery-column {
    font-size: 1.3vw;
}

.gallary_desc {
    font-size: 1vw !important;
}


@media only screen and (max-width: 466px) {
    .gallery-column {
        font-size: 2.7vw;
    }

    .gallary_desc {
        font-size: 2.2vw !important;
    }
}

.gallery-img {
    max-height: 250px;
    min-height: 195px;
}

@media only screen and (max-width: 693px) {
    .gallery-img {
        max-height: 150px;
        min-height: 150px;
    }
}

@media only screen and (max-width: 820px) {
    .gallery-img {
        min-height: 130px;
    }
}

@media only screen and (max-width: 318px) {
    .gallery-img {
        min-height: 10px;
    }
}

@media only screen and (max-width: 768px) {
    .gallery-column {
        font-size: 2.2vw;
    }

    .gallary_desc {
        font-size: 1.8vw !important;
    }
}