/* Common Code Start */
@import url("https://fonts.googleapis.com/css2?family=Catamaran:wght@200;300;400;500;600;700&family=Poppins:wght@400;500;600;700;800;900&family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap"); :root {
    font-size: 10px;
}

body {
    margin: 0px;
    padding: 0px;
}
/* Common Code End */
/* Nav Section Start */
nav {
    width: 100%;
    height: 80px;
}

.nab_area {
    width: 90%;
    margin: 0px auto;
}

.nav_brand {
    width: 15%;
    float: left;
    clear: right;
    margin: 22px 0px;
    cursor: pointer;
}

.nav_bar {
    width: 73%;
    float: left;
    clear: right;
    margin: 16px 0px;
    text-align: center;
}

.nav_bar ul {
    margin: 0px;
    padding: 0px;
}

.nav_bar ul li {
    list-style: none;
    display: inline-block;
}

.nav_bar ul li a {
    text-decoration: none;
    font-family: Catamaran, sans-serif;
    font-size: 1.7rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    display: inline-block;
    padding: 10px 20px;
    transition: all 0.3s linear 0s;
}

.nav_icon {
    width: 12%;
    float: left;
    clear: right;
    margin: 22px 0px;
    cursor: pointer;
}

.nav_icon i {
    font-size: 1.6rem;
    color: rgb(0, 0, 0);
    padding: 10px;
    background: rgb(238, 238, 238);
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.2s linear 0s;
}

.nav_icon i:last-child {
    margin-right: 0px;
}

.nav_bar ul li a:hover {
    color: rgb(251, 92, 66);
}

.nav_icon i:hover {
    color: rgb(251, 92, 66);
}
/* Nav Section End */
/* Header Section Start */
header {
    width: 100%;
    height: 600px;
    background: url("../photos/slideshow.jpg") 0% 0% / cover no-repeat;
    position: relative;
}

section.header_inner {
    width: 40%;
    float: right;
    margin: 125px 0px;
    line-height: 1;
}

.header_inner p {
    font-family: Catamaran, sans-serif;
    font-weight: 300;
    font-size: 2rem;
    color: rgb(33, 37, 41);
    margin: 0px;
}

.header_inner h1 {
    font-family: Poppins, sans-serif;
    font-weight: 800;
    font-size: 9rem;
    color: rgb(251, 92, 66);
    margin: 0px;
    padding: 20px 0px;
}

.header_inner h1 span {
    color: rgb(0, 0, 0);
}

.header_inner a {
    font-family: Catamaran, sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: rgb(255, 255, 255);
    text-decoration: none;
    background: rgb(251, 92, 66);
    padding: 20px 40px;
    display: inline-block;
    margin: 50px 0px 0px 25px;
    position: relative;
    transition: all 0.5s linear 0s;
}

.header_inner a:hover {
    background: rgb(0, 0, 0);
}

.header_inner a::before {
    content: "";
    position: absolute;
    border: 2px solid rgb(251, 92, 66);
    top: -12px;
    left: -12px;
    width: 100%;
    height: 100%;
    transition: all 0.5s linear 0s;
}

.header_inner a:hover::before {
    border-color: rgb(0, 0, 0);
}

.left-arrow {
    width: 5%;
    height: 5%;
    background: rgb(251, 92, 66);
    padding: 20px 2px 12px;
    color: rgb(255, 255, 255);
    font-size: 2rem;
    border-radius: 50%;
    text-align: center;
    float: left;
    clear: right;
    position: absolute;
    top: 50%;
    left: 5%;
    z-index: -1;
    transition: all 0.1s linear 0s;
    cursor: pointer;
}

.right-arrow {
    width: 5%;
    height: 5%;
    background: rgb(251, 92, 66);
    padding: 20px 2px 12px;
    color: rgb(255, 255, 255);
    font-size: 2rem;
    border-radius: 50%;
    text-align: center;
    float: right;
    clear: left;
    position: absolute;
    top: 50%;
    right: 5%;
    z-index: -1;
    transition: all 0.1s linear 0s;
    cursor: pointer;
}

header:hover .right-arrow {
    z-index: 1;
}

header:hover .left-arrow {
    z-index: 1;
}
/* Header Section End */
/* Discount Section Start */
.discount {
    width: 100%;
    height: 250px;
}

.discount_inner {
    width: 90%;
    height: 100%;
    margin: 50px auto;
}

.discount_card {
    width: 28%;
    float: left;
    clear: right;
    background: rgb(240, 241, 245);
    padding: 20px 40px 0px 0px;
    margin-right: 30px;
    position: relative;
}

.discount_card:last-child {
    margin-right: 0px;
}

.dis-image {
    width: 100%;
    height: 100%;
    float: left;
    text-align: center;
}

.dis-image img {
    width: 100%;
    height: auto;
}

.dis-info {
    position: absolute;
    right: 45px;
    top: 50px;
}

.dis-info p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: rgb(117, 117, 117);
    margin: 0px;
}

.dis-info h4 {
    font-family: Catamaran, sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    margin: 0px;
}

.dis-info a {
    font-family: Catamaran, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: rgb(251, 92, 66);
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid rgb(251, 92, 66);
    margin-top: 20px;
}
/* Discount Section End */
/* Products Section Start */
.products {
    width: 100%;
    height: 1030px;
}

.product_inner {
    width: 90%;
    height: 100%;
    margin: 0px auto;
}

.productTitle {
    width: 30%;
    margin: 20px auto;
    text-align: center;
}

.productTitle h2 {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 3.8rem;
    color: rgb(0, 0, 0);
    margin: 0px;
}

.productTitle p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: rgb(117, 117, 117);
    margin: 0px;
}

.product_wrap {
    width: 100%;
    height: 410px;
    margin: 50px 0px;
    display: inline-block;
}

.product_wrap:last-child {
    margin: 0px;
}

.singelProduct {
    width: 23%;
    height: auto;
    float: left;
    clear: right;
    text-align: center;
    margin-right: 30px;
    position: relative;
    transition: all 2s linear 0s;
    cursor: pointer;
}

.singelProduct .onSale {
    font-family: Catamaran, sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    background: rgb(251, 92, 66);
    color: rgb(255, 255, 255);
    padding: 5px 10px;
    display: inline-block;
    position: absolute;
    top: 25px;
    right: 0px;
    z-index: 99999;
}

.singelProduct:last-child {
    margin-right: 0px;
}

.singelProduct img {
    width: 100%;
    transition: all 2s linear 0s;
}

.singelProduct h4 {
    font-family: Catamaran, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    margin: 15px 0px 0px;
}

.singelProduct p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: rgb(119, 119, 119);
    margin: 0px;
}

.product-icon {
    position: absolute;
    bottom: 125px;
    left: 31%;
    z-index: -1;
    transition: all 0.4s linear 0s;
    transform: scale(0.6);
}

.product-icon i {
    background: rgb(0, 0, 0);
    padding: 16px;
    color: rgb(255, 255, 255);
    font-size: 1.6rem;
    border-radius: 50%;
    transition: all 0.1s ease 0s;
}

.singelProduct img.hover-img {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    transition: all 0.4s linear 0s;
    transform: scale(0.6);
}

.singelProduct:hover img.hover-img {
    transform: scale(1);
    z-index: 1;
}

.singelProduct:hover .product-icon {
    transform: scale(1);
    z-index: 1;
}

.product-icon i:hover {
    background: rgb(251, 92, 66);
}
/* Products Section End */
/* Ads Section Start */
.ads-section {
    width: 100%;
    height: 500px;
    background: url("../photos/counter.jpg") 0% 0% / cover no-repeat;
    margin: 60px 0px;
}

.ads-area {
    width: 90%;
    height: 100%;
    margin: 0px auto;
}

.ads_content {
    width: 50%;
    float: right;
    line-height: 1;
    margin: 50px 0px;
}

.ads_content h3 {
    font-family: Catamaran, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: rgb(34, 34, 34);
    background: rgb(242, 191, 201);
    display: inline-block;
    padding: 15px 20px;
}

.ads_content h2 {
    font-family: Catamaran, sans-serif;
    font-size: 6rem;
    font-weight: 700;
    color: rgb(255, 255, 255);
    margin: 0px;
}

.ads_content h4 {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: rgb(255, 255, 255);
    margin: 25px 0px 40px;
}

.ads_content p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 2.1rem;
    font-weight: 400;
    color: rgb(117, 117, 117);
    margin: 0px;
}

.ads_content a {
    font-family: Catamaran, sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: rgb(255, 255, 255);
    text-decoration: none;
    background: rgb(251, 92, 66);
    padding: 25px 50px;
    display: inline-block;
    margin: 50px 0px 0px;
    transition: all 0.5s linear 0s;
}

.ads_content a:hover {
    background: rgb(0, 0, 0);
}
/* Ads Section End */
/* Product List Section start */
.products-list {
    width: 100%;
    height: 630px;
    border-bottom: 2px solid #eee;
}

.products-list-area {
    width: 90%;
    height: 100%;
    margin: 0px auto;
}

.quality-product {
    width: 35%;
    float: left;
    clear: right;
    margin-right: 50px;
}

.quality-product img {
    width: 100%;
}

.best-sellers {
    width: 26%;
    float: left;
    clear: right;
    margin-right: 50px;
}

.new-arrivals {
    width: 30%;
    float: left;
    clear: right;
}

.best-sellers h3 {
    font-family: Catamaran, sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    border-bottom: 2px solid rgb(238, 238, 238);
    padding-bottom: 10px;
    margin: 0px 0px 30px;
    position: relative;
}

.best-sellers h3::before {
    content: "";
    position: absolute;
    width: 30%;
    height: 2px;
    background: rgb(251, 92, 66);
    bottom: -2px;
}

.new-arrivals h3 {
    font-family: Catamaran, sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    border-bottom: 2px solid rgb(238, 238, 238);
    padding-bottom: 10px;
    margin: 0px 0px 30px;
    position: relative;
}

.new-arrivals h3::before {
    content: "";
    position: absolute;
    width: 30%;
    height: 2px;
    background: rgb(251, 92, 66);
    bottom: -2px;
}

.features-card {
    width: 100%;
    height: 80px;
    display: inline-block;
    margin-bottom: 10px;
    line-height: 2;
}

.features-img {
    width: 20%;
    height: 100%;
    float: left;
    clear: right;
}

.features-info {
    width: 80%;
    height: 100%;
    float: left;
    clear: right;
    margin: 0px;
}

.features-img img {
    width: 100%;
}

.features-info h5 {
    font-family: Catamaran, sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: rgb(0, 0, 0);
    margin: -5px 0px 0px 20px;
}

.features-info p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: rgb(0, 0, 0);
    margin: -5px 0px 0px 20px;
}
/* Product List Section End */
/* Features Section Start  */
.features {
    width: 100%;
    height: 160px;
}
.features-area {
    width: 90%;
    height: 100%;
    margin: 0px auto;
}
.feature-block {
    width: 25%;
    float: left;
    clear: right;
    margin: 55px 0px;
}
.feature-block i{
    width: 25%;
    float: left;
    clear: right;
    font-size: 4rem;
    color: rgb(251, 92, 66);
}
.feature-block .content {
    float: left;
    clear: right;
    font-family: Catamaran, sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
}
.content h3 {
    font-family: Catamaran, sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    margin: 0px;
    line-height: 1;
    padding-bottom: 10px;
}
.content p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: rgb(117, 117, 117);
    line-height: 1;
    margin: 0px;
}    
/* Features Section End  */
/* Big Footer Section Start */
.big-footer {
    width: 100%;
    height: 235px;
    background: #F9F9F9;
    padding: 80px 0px;
}
.big-footer-area {
    width: 90%;
    height: 100%;
    margin: 0px auto;
}
.flogo {
    width: 30%;
    float: left;
    clear: right;
    margin-right: 145px;
}
.flogo h4 {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 2rem;
    font-weight: 500;
    color: rgb(117, 117, 117);
    line-height: 1.9;
    margin: 20px 0px;
}    
.flogo p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: rgb(117, 117, 117);
    line-height: 1.6;
    margin: 0px;
}    
.flogo p span {
    font-weight: 700;
}
.category {
    width: 16%;
    float: left;
    clear: right;
}
.category h3 {
    font-family: Catamaran, sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    margin: 0px;
    line-height: 1;
    padding-bottom: 25px;
}
.category ul {
    margin: 0px;
    padding: 0px;
}
.category ul li {
    list-style: none;
}
.category ul li a {
    font-family: Catamaran, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #757575;
    text-decoration: none;
    margin: 0px;
    line-height: 2.5;
    padding-bottom: 10px;
}
.useful-link {
    width: 16%;
    float: left;
    clear: right;
}
.useful-link h3 {
    font-family: Catamaran, sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    margin: 0px;
    line-height: 1;
    padding-bottom: 25px;
}
.useful-link ul {
    margin: 0px;
    padding: 0px;
}
.useful-link ul li {
    list-style: none;
}
.useful-link ul li a {
    font-family: Catamaran, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #757575;
    text-decoration: none;
    margin: 0px;
    line-height: 2.5;
    padding-bottom: 10px;
}
.opening-hours {
    width: 25%;
    float: left;
    clear: right;
}
.opening-hours h3 {
    font-family: Catamaran, sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    margin: 0px;
    line-height: 1;
    padding-bottom: 25px;
}
.opening-hours ul {
    margin: 0px;
    padding: 0px;
}
.opening-hours ul li {
    list-style: none;
    font-family: Catamaran, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #212529;
    text-decoration: none;
    margin: 0px;
    line-height: 2.2;
    padding-bottom: 10px;
}
.opening-hours ul li span {
    float: right;
}
.opening-hours h4 {
    font-family: Catamaran, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: rgb(0, 0, 0);
    margin: 0px;
    line-height: 1;
    padding: 25px 0px;
}
/* Big Footer Section End */
/* Small Footer Section Start */
.small-footer {
    width: 100%;
    height: 100px;
}
.small-footer-area {
    width: 90%;
    height: 100%;
    margin: 0px auto;
}
.small-footer-left {
    width: 40%;
    float: left;
    clear: right;
    margin: 20px 0px;
}
.small-footer-left p {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: rgb(0, 0, 0);
}
.small-footer-left p a {
    color: #fb5c42;
    text-decoration: none;
}
.small-footer-right {
    width: 60%;
    float: right;
    margin: 25px 0px;
    text-align: right;
}
.small-footer-right ul {
    padding: 0px;
    margin: 0px;
}
.small-footer-right ul li {
    list-style: none;
    display: inline-block;
}
.small-footer-right ul li a {
    font-family: Catamaran, sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: rgb(0, 0, 0);
    padding: 10px 15px;
    display: inline-block;
    text-decoration: none;
}
/* Small Footer Section End */