@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --primary-main: rgb(61, 105, 146);
    --secondary-main: #131921;
    --gray-main: #f3f3f3;
    --dark-gray-main: #f2f2f2;
}


.knt-block {
    display: block;
}
.knt-grid {
    display: grid;
}
.knt-flex {
    display: flex;
}

.breadcrumb {
    display: flex;
    grid-gap: 10px;
    padding: 10px;
}
.breadcrumb li {
    list-style: none;
}
.breadcrumb li:not(:last-child)::after {
    content: ' >';
    padding: 0 5px;
}

.breadcrumb li a {
    text-decoration: none;
}


* {
    margin: 0;
    padding: 0;
    user-select: text;
    box-sizing: border-box;
}

body {
    background: #ffffff;
    font-family: 'Montserrat';
    position: relative;
}

/* HEADER BEGINS */
header {
    background-color: #ffffff;
    height: 80px;
    display: flex;
    grid-gap: 20px;
    place-content: center;
    align-items: center;
}
header img {
  width: 200px;
  height: auto;
  padding: 25px;
}
header .call-now-btn {
    cursor: pointer;
    padding: 10px;
    color: #ffffff;
    font-size: 14px;
    background-color: var(--primary-main);
}
header nav ul {
    display: flex;
}
header nav ul li {
    list-style: none;
    padding: 8px;
    text-transform: uppercase;
}
header nav ul li:hover {
    border-bottom: 2px solid var(--primary-main);
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 2s ease-in-out;
}
header nav ul li a {
    color: #000000;
    text-decoration: none;
    font-size: 14px;
}
/* HEADER ENDS */


img.homepage-banner {
    width: 100%;
    height: 500px;
}

img.aboutpage-banner {
    width: 100%;
    height: 500px;
}

img.productspage-banner {
    width: 100%;
    height: 650px;
}

/* MAIN CONTAINER BEGINS */
.main-container {
    width: 100%;
    padding: 50px;
    display: grid;
    grid-gap: 100px;
    background-color: var(--dark-gray-main);
}
/* MAIN CONTAINER ENDS */




/* INTROS BEGINS */
.intros {
    display: flex;
    grid-gap: 50px;
    place-content: center;
}
.intros .intro-graphics img.intro-main-logo {
    width: 600px;
    height: 400px;
}
.intros .intro-graphics h2 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: normal;
}

.intros .intro {
    display: grid;
    align-content: center;
    place-content: center;
}
.intros .intro .intro-item {
    background-color: white;
    place-content: center;
    text-align: center;
    border-right: 2px solid var(--dark-gray-main);
    border-bottom: 2px solid var(--dark-gray-main);
    width: 300px;
    cursor: pointer;
    height: 250px;
}
.intros .intro .intro-item img.intro-item-img {
    width: 60px;height: 60px;place-self:center;place-content:center;
}
.intros .intro .intro-item .intro-title {
    font-size: 15px;
    text-transform: capitalize;
    margin-bottom: 10px;
}
.intros .intro .intro-item span.explore-btn {
    font-size: 12px;
    color: var(--primary-main);
    font-weight: bold;
    text-transform: capitalize;
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.explore-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8%;
  height: 2px;
  width: 0%;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.explore-btn:hover::after {
  width: 100%;
}
/* INTROS ENDS */


/* GALLERY BEGINS */
.gallery {
    width: 100%;
    align-content: center;
    place-content: center;
}
.gallery .gallery-banner {
    width: 100%;
    border-radius: 10px;
}
.gallery .gallery-container {
    width: 100%;
    display: flex;
    justify-content: center; /* centers items horizontally */
    flex-wrap: wrap;       
}
.gallery .gallery-container .gallery-item {
    width: 300px;
    height: 300px;
    place-self: center;
    place-content: center;
    background-color: #ffffff;
    margin: 30px;
    border-radius: 20px;
    align-content: start;
    text-align: center;
}
.gallery .gallery-container .gallery-item img.gallery-logo {
    width: 250px;
    height: 250px;
}
/* GALLERY ENDS */

/* FOOTER BEGINS */
footer {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    background-size: 100%;
    height: 350px;
    margin-top: 60px;
    border-top: 2px solid #f3f3f3;
    display: grid;
    grid-gap: 50px;
}
footer .footer-items {
    width: 100%;
    background-position: left;
    background-size: 100%;
    padding: 50px;
    display: flex;
}
/* footer::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: left;  
  background-size: contain;
  opacity: 0.4;
  z-index: 1;
} */
footer .about img.about-logo {
    width: 200px;
}
footer nav {
    display: flex;
    width: 100%;
    place-content: end;
    grid-gap: 100px;
    font-size: 18px;
}
footer nav ul li {
    list-style: none;
}
footer nav .submenu span {
    display: block;
    width: 200px;
    background-color: var(--primary-main);
    padding: 5px 10px;
    text-align: center;
    color: #ffffff;
}
footer nav .submenu ul {
    margin-top: 20px;
}

.design-section {
    text-align: center;
}
.design-section a {
    text-decoration: none;
    color: var(--primary-main);
}
/* FOOTER ENDS */


/* PRODUCTS BEGINS */
.products {
    padding: 50px;
    grid-gap: 50px;
}
.products .knt-block .products-category {
    margin-bottom: 20px;
}
.products .products-category .category-item {
  background-color: var(--secondary-main);
  color: #ffffff;
  padding: 8px;
  margin-bottom: 2px;
  transition: background-color 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 270px;
}
.products .products-category .category-item li {
    list-style: none;
    cursor: pointer;
}
.products .products-category .category-item:hover {
    background-color: var(--primary-main);
}


.products .products-sizes .sizes-item {
    padding: 10px;
    border-bottom: 1px solid var(--dark-gray-main);
}

.products .products-sizes .sizes-item li {
    list-style: none;
}

.products-container {
    display: flex;
    justify-content: center; /* centers items horizontally */
    flex-wrap: wrap;     
}
.products-container .products-item {
    width: 350px;
    height: 350px;
    margin: 5px;
    cursor: pointer;
    place-self: center;
    place-content: center;
    background-color: #ffffff;
    border: 1px solid #f2f2f2;
    border-radius: 0px;
    align-content: start;
    text-align: center;
}
.products-container .products-item:hover {
    box-shadow: 0 0 10px #f3f3f3;
}
.products-container .products-item .product-logo {
    width: 300px;
    height: 280px;
}
.products-container .products-item h4.product-title {
    font-weight: normal!important;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 5px;
}
.products-container .products-item .product-size {
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    color: var(--primary-main);
}

/* PRODUCTS ENDS */

/* ABOUT SECTION BEGINS */
.about-description .about-banner {
    width: 100%;
}
.about-description .about-title {
    font-size: 35px;
    font-weight: normal!important;
}
.about-description hr {
    margin-top: 5px;
    color: var(--gray-main);
}
/* ABOUT SECTION ENDS */

/* FLIPBOOK BEGINS */
.dflip-book {
  margin: 40px auto;
  max-width: 90%;
}
/* FLIPBOOK ENDS */