* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: cursive;
    font-size: 20px;
}

*::selection {
    background-color: rgb(0, 0, 0);
}

/* navbar */
.navbar {
    /* position:absolute; */
    margin-top: 20px;
    border: 0px solid rgba(255, 99, 2, 0.447);
    border-radius: 40px 50px;
    background-color: #f0f0f0;
    display: flex;
}

.navbar-logo {
    width: 450px;
    height: 150px;
    filter: brightness(200%) contrast(250%) saturate(200%);
}

.img-fluid:hover {
    cursor: pointer;
}

.navbar-row {
    border-radius: 5px 5px;
    margin: auto;
}

.home {
    margin-top: 60px;
}

.home a,
.products a,
.galary a,
.about a,
.contact a {
    text-decoration: none;
    cursor: pointer;
    color: #000000;
    font-weight: 200;
    font-size: 23px;
}

.home a:hover,
.products a:hover,
.galary a:hover,
.about a:hover,
.contact a:hover {
    color: rgb(255, 255, 255);
    cursor: pointer;
    background-color: rgb(0, 0, 0);
    font-weight: 900;
    font-size: 23px;
}

.products {
    margin-top: 60px;
}

.galary {
    margin-top: 60px;
}

.about {
    margin-top: 60px;
}

.contact {
    margin-top: 60px;
}

/* home content started here */
.home-content {
    /* background: url(../image/ZigZag.jpg) no-repeat fixed; */
    background-size: cover;
    margin-top: 20px;
    height: 550px;
    border: 0px solid rgba(255, 99, 2, 0.447);
    border-radius: 40px 50px;
    background-color: #f0f0f0;
}

.home-content .container {
    padding-top: 130px;
}

.manufacture {
    text-align: left;
    text-decoration: overline;
    color: #2d0000;
    padding-left: 15px;
    font-weight: 850;
}

.deliver {
    text-align: center;
    text-decoration: overline;
    color: #2d0000;
    padding-left: 15px;
    font-weight: 750;
    margin-top: 45px;
}

.city {
    margin-top: 45px;
    text-align: right;
    color: #2d0020;
    text-decoration: overline;
    padding-right: 15px;
    font-weight: 650;
}

/* products page started here */
.product-content {
    margin-top: 20px;
    padding: 10px;
    border: 0px solid rgba(255, 99, 2, 0.447);
    border-radius: 40px 50px;
    background-color: #f0f0f0;
}

.product-content span {
    display: table;
    margin: 10px auto;
    margin-top: 30px;
    border-bottom: 10px solid rgba(248, 136, 66, 0.447);
    border-top: 10px solid rgba(248, 136, 66, 0.447);
    border-radius: 40px 50px;
}

#carousel {
    margin-top: 50px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(40%);
    width: 60px;
    height: 60px;
}

.zigzag-block {
    width: 300px;
    height: 300px;
}

.cosmic-block {
    width: 350px;
    height: 300px;
}

.rectangle-block {
    width: 360px;
    height: 300px;
}

/* galary content started here */
.galary-content {
    margin-top: 20px;
    padding: 30px;
    border: 0px solid rgba(255, 99, 2, 0.447);
    border-radius: 40px 50px;
    background-color: #f0f0f0;
}

.galary-content span {
    display: table;
    margin: 10px auto;
    border-bottom: 10px solid rgba(248, 136, 66, 0.447);
    border-top: 10px solid rgba(248, 136, 66, 0.447);
    border-radius: 40px 50px;
}


#carousel2 {
    margin-top: 50px;
}

#first-galary-image,
#second-galary-image,
#third-galary-image,
#fourth-galary-image,
#fifth-galary-image,
#sixth-galary-image,
#seventh-galary-image,
#eighth-galary-image,
#nineth-galary-image,
#tenth-galary-image,
#eleventh-galary-image {
    width: 650px;
    border-radius: 25px 35px;
    margin: auto;
}

#zigzag-card-design {
    margin: auto;
    width: 650px;
    height: 550px;
    border-radius: 25px 35px;
}

/* about content started here */
.about-content {
    margin-top: 20px;
    padding: 30px;
    text-align: center;
    border: 0px solid rgba(255, 99, 2, 0.447);
    border-radius: 40px 50px;
    background-color: #f0f0f0;
}

.about-content span {
    display: table;
    margin: 10px auto;
    border-bottom: 10px solid rgba(248, 136, 66, 0.447);
    border-top: 10px solid rgba(248, 136, 66, 0.447);
    border-radius: 40px 50px;
}

.about-content p {
    /* margin: 60px; */
    margin-top: 40px;
    color: #011344;

}

/* contact content started here */
.contact-content {
    margin-top: 20px;
    padding: 30px;
    border: 0px solid rgba(255, 99, 2, 0.447);
    border-radius: 40px 50px;
    background-color: #f0f0f0;
}

.contact-content span {
    display: table;
    margin: 10px auto;
    color: rgb(255, 255, 255);
    border-bottom: 10px solid rgba(248, 136, 66, 0.447);
    border-top: 10px solid rgba(248, 136, 66, 0.447);
    border-radius: 40px 50px;
}

#contact-content div input,
#contact-content div textarea {
    /* margin: 20px; */
    margin-top: 40px;
    border-radius: 5px 50px;
    border: 9px solid rgba(172, 172, 172, 0.553);
}

input::placeholder,
textarea::placeholder {
    font-weight: 900;
    text-align: center;
}

#btnSubmit {
    /* margin-top: 40px; */
    display: block;
    margin: 40px auto;
    margin-bottom: 0;
    /* margin-left: auto; */
}

/* footer content started here */
.footer {
    margin-top: 20px;
    padding-top: 5px;
    margin-bottom: 25px;
    color: rgb(133, 133, 133);
    border: 0px solid rgba(255, 99, 2, 0.447);
    border-radius: 40px 50px;
    background-color: #f0f0f0;
}

.footer .row {
    margin-top: 10px;
}

.footer-logo {
    width: 450px;
    height: 210px;
    margin: auto;
    filter: brightness(200%) contrast(250%) saturate(200%);
}

.footer-description {
    margin-top: 20px;
    margin-right: 30px;
    font-weight: 900;
    text-align: center;
}

.footer strong {
    color: black;
    /* font-weight: 900; */
}

.contact-mail {
    text-decoration: none;
    cursor: pointer;
    color: #ff0000;
    font-weight: 900;
}

.contact-mail:hover {
    color: rgb(255, 255, 255);
    cursor: pointer;
    background-color: rgb(0, 0, 0);
    font-weight: 900;
}

/* responsive design starts here */
@media only screen and (max-width: 768px) {

    /* for all the element styling is this */
    * {
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 15px;
        /* width: auto !important; */
    }

    /* navabar started here */
    .navbar {
        border: 0px solid rgba(255, 99, 2, 0.447);
        border-radius: 40px 50px;
        background-color: #f0f0f0;
        width: auto !important;
    }


    .navbar-row {
        display: inline-flex;
        flex-direction: column;
        margin: auto;
    }

    .navbar-row .col-2 {
        width: 275px;
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .navbar-row button {
        width: 60px;
        height: 50px;
        margin-top: 35px;
        margin-left: 10px;
        cursor: pointer;
        background-color: rgba(224, 224, 224, 0.357);
    }

    .home,
    .products,
    .galary,
    .about,
    .contact {
        text-decoration: none;
        cursor: pointer;
        color: #000000;
        font-weight: 900;
        margin: 5px;
    }

    .home a,
    .products a,
    .galary a,
    .about a,
    .contact a {
        font-size: 16px;
    }


    /* home content started here */
    .home-content {
        border: 0px solid rgba(255, 99, 2, 0.447);
        border-radius: 40px 50px;
        background-color: #f0f0f0;
        height: 440px;
        width: auto !important;
    }

    .home-content .container {
        padding-top: 40px;
    }

    .manufacture {
        text-align: center;
        text-decoration: none;
        color: #000000;
        font-weight: 850;
        font-size: 30px;
        margin-top: 15px;
        border-bottom: 15px solid rgba(175, 174, 173, 0.447);
        border-top: 15px solid rgba(175, 174, 173, 0.447);
        border-radius: 40px 50px;
    }

    .deliver {
        text-align: center;
        text-decoration: none;
        color: #000000;
        font-weight: 750;
        margin-top: 60px;
        font-size: 30px;
        border-bottom: 15px solid rgba(175, 174, 173, 0.447);
        border-top: 15px solid rgba(175, 174, 173, 0.447);
        border-radius: 40px 50px;
    }

    .city {
        text-align: center;
        text-decoration: none;
        color: #2d0000;
        font-weight: 650;
        font-size: 30px;
        margin-top: 60px;
        border-bottom: 15px solid rgba(175, 174, 173, 0.447);
        border-top: 15px solid rgba(175, 174, 173, 0.447);
        border-radius: 40px 50px;
    }

    /* product content */
    .product-content {
        margin-top: 20px;
        padding: 10px;
        border: 0px solid rgba(255, 99, 2, 0.447);
        border-radius: 40px 50px;
        background-color: #f0f0f0;
        width: auto!important;
    }

    .product-content span {
        display: table;
        margin: 10px auto;
        font-size: 50px;
        border-top: 10px solid rgba(133, 133, 133);
        border-bottom: (248, 136, 66, 0.447);
        border-radius: 50px 50px;
        /* margin-left: 40px; */
        margin-bottom: 0px;
    }

    .zigzag-block {
        width: 16rem;
        height: 250px;
    }

    .cosmic-block {
        width: 17rem;
        height: 250px;
    }

    .rectangle-block {
        width: 18rem;
        height: 250px;
    }

    .product-content .card-body {
        padding: 1rem 2rem;
    }

    .product-content .card-body .list-group-flush>.list-group-item {
        padding: 2px;
        font-size: 15px;
    }

    .product-content .card-body .list-group {
        margin-top: 25px;
    }

    .product-content .card-body button {
        padding-left: auto;
        text-align: justify;
        width: 200px;
        margin-top: 15px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        filter: invert(70%);
        width: 25px;
        height: 35px;
    }

    .product-content .carousel-control-prev,
    .carousel-control-next {
        margin-top: 95px;
    }

    /* galary content started here */
    .galary-content {
        margin-top: 20px;
        /* padding: 30px; */
        border: 0px solid rgba(255, 99, 2, 0.447);
        border-radius: 40px 50px;
        background-color: #f0f0f0;
        width: auto!important;
    }

    .galary-content span {
        display: table;
        margin: 10px auto;
        font-size: 50px;
        font-weight: 900;
        border-bottom: 10px solid rgba(248, 136, 66, 0.447);
        border-top: 10px solid rgba(133, 133, 133);
        border-radius: 40px 50px;
    }

    #first-galary-image,
    #second-galary-image,
    #third-galary-image,
    #fourth-galary-image,
    #fifth-galary-image,
    #sixth-galary-image,
    #seventh-galary-image,
    #eighth-galary-image,
    #nineth-galary-image,
    #tenth-galary-image,
    #eleventh-galary-image {
        width: 300px;
        height: 300px;
        /* margin: auto; */
    }

    #zigzag-card-design {
        margin: auto;
        width: 241px;
        height: 291px;

    }

    #carousel2 .carousel-control-prev {
        margin-top: 30px;
        margin-left: -40px;
    }

    #carousel2 .carousel-control-next {
        margin-top: 30px;
        margin-right: -40px;
    }

    /* about content started here */
    .about-content {
        margin-top: 20px;
        padding: 30px;
        /* text-align: center; */
        border: 0px solid rgba(255, 99, 2, 0.447);
        border-radius: 40px 50px;
        background-color: #f0f0f0;
        width: auto!important;
    }

    .about-content span {
        display: table;
        margin: 10px auto;
        font-size: 50px;
        font-weight: 900;
        border-bottom: 10px solid rgba(248, 136, 66, 0.447);
        border-top: 10px solid rgba(133, 133, 133);
        border-radius: 40px 50px;
    }

    .about-content p {
        margin: 40px;
        font-size: 25px;
        color: #011344;
        border-bottom: 10px solid rgba(208, 208, 208, 0.776);
        border-radius: 50px 50px;
    }

    /* contact content started here */
    .contact-content {
        margin-top: 20px;
        padding: 30px;
        border: 0px solid rgba(255, 99, 2, 0.447);
        border-radius: 40px 50px;
        background-color: #f0f0f0;
        width: auto!important;
    }

    .contact-content p {
        text-align: center;
        font-size: 40px;
        margin-left: 15px;
        border-bottom: 5px solid rgb(133, 133, 133);
        border-radius: 50px 50px;
    }

    .contact-content span {
        display: table;
        margin: 10px auto;
        font-size: 50px;
        font-weight: 900;
        border-bottom: 10px solid rgba(248, 136, 66, 0.447);
        border-top: 10px solid rgba(133, 133, 133);
        border-radius: 40px 50px;
    }

    #contact-content div input,
    #contact-content div textarea {
        margin-left: 5px;
        border-radius: 5px 25px;
        border: 5px solid rgba(255, 255, 255, 0.553);
        /* border-bottom: 5px solid rgb(133, 133, 133); */
    }

    #btnSubmit {
        display: block;
        margin: 40px auto;
        margin-bottom: 0;
        color: #ffffff;
        background-color: rgb(133, 133, 133);
        border: 5px solid rgb(209, 209, 209);
        border-radius: 20px 20px;
    }

    /* footer content started here */
    .footer {
        margin-top: 20px;
        padding-top: 5px;
        color: rgb(133, 133, 133);
        margin-bottom: 25px;
        border: 0px solid rgba(255, 99, 2, 0.447);
        border-radius: 40px 50px;
        background-color: #f0f0f0;
    }

    .footer .footer-img {
        height: 190px;
        width: 350px;
    }

    .footer-img .img-fluid {
        max-width: 105%;
    }

    .footer-description {
        margin: 10px;
    }
}