@import "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css";

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');


 :root {
	 font-family: 'Amatic', cursive;
	 font-style: normal;
	 font-weight: 100;
}
 .body html {
	 height: 100%;
}
 .branch {
	 padding: 1rem 0;
	 background-image: url(../pic/background.jpg);
}
 .products {
	 padding: 1rem 0;
	 background-image: url(../pic/background.jpg);
}
 .section-title {
	 text-align: center;
	 font-size: 2.5rem;
	 margin-top: 2rem;
	 margin-bottom: 4rem;
	 text-transform: capitalize;
	 letter-spacing: 0.1rem;
	 color: white;
}
 .products-center {
	 direction: rtl;
	 width: 90vw;
	 margin: 0 auto;
	 max-width: 100%;
	 display: grid;
	 grid-template-columns: repeat(auto-fit, minmax(160px, 2fr));
	 grid-column-gap: 1.5rem;
	 grid-row-gap: 2rem;
	 justify-content: center;
}
 .img-container {
	 position: relative;
	 overflow: hidden;
}
 .bag-btn {
	 position: absolute;
	 top: 70%;
	 right: 0;
	 background: #f09d51;
	 border: none;
	 text-transform: uppercase;
	 padding: 0.5rem 0.75rem;
	 letter-spacing: 0.1rem;
	 font-weight: bold;
	 transition: all 0.3s linear;
	 transform: translateX(101%);
	 cursor: pointer;
}
 .bag-btn:hover {
	 color: #fff;
}
 .img-container:hover .bag-btn {
	 transform: translateX(0);
}
 .product-img {
	 display: block;
	 width: 100%;
	 min-height: 12rem;
	 max-height: 400px;
	 transition: all 0.3s linear;
}
 .img-container:hover .product-img {
	 opacity: 0.8;
}
 .product h3 {
	 text-transform: capitalize;
	 font-size: 1.2rem;
	 margin-top: 1rem;
	 letter-spacing: 0.1rem;
	 text-align: center;
	 color: white;
}
 .btn-1 {
	 color: #fff;
	 background-color: transparent;
	 border: none;
	 overflow: hidden;
}
 .btn-1:hover:hover {
	 color: #fff;
	 background-image: url(../pic/titleBorder.png);
	 background-color: transparent;
	 border-color: transparent;
	/*set the color you want here*/
	 background-repeat: no-repeat;
	 transition: all 0.7s ease-in-out;
	 background-size: 60px;
	 background-position: center;
}
.row{
  --mo-gutter-x: 0;
}

.container{
  --mo-gutter-x: 0;
}