/* ---------------General body Style---------------- */body { margin: 0; padding: 0; box-sizing: content-box;}/* -------------End General body Style--------------- *//* -------------loader effect---------------- */ .content { display: none; text-align: center; font-family: 'Arial', sans-serif; } .loading-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; } .loading-spinner { border: 10px solid rgba(255, 255, 255, 0.3); border-top: 10px solid #ffbb00; border-radius: 50%; width: 80px; height: 80px; box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); animation: spin 1.5s linear infinite, shimmer 1s ease-in-out infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes shimmer { 0% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); } 50% { box-shadow: 0 0 25px rgba(255, 215, 0, 1); } 100% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); } }/* --------------End loader Effect-------------- */ /* ----------------Start Form--------------- *//* ----------form Container-------------- */.form_container{ background: #fff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0, 0, 0, .2), 0 10px 10px rgba(0, 0, 0, .2); position: relative; overflow: hidden; width: 768px; max-width: 100%; min-height: 480px; }.form-container { position: absolute; top: 0; height: 100%; transition: all .6s ease-in-out;}.form-container form { background: #fff; display: flex; flex-direction: column; padding: 0 50px; height: 100%; justify-content: center; align-items: center; text-align: center;}.form-container input { background: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 100%;}.sign-in-container { left: 0; width: 50%; z-index: 2;}.sign-up-container { left: 0; width: 50%; z-index: 1; opacity: 0;}/* ----------End form Container-------------- *//* ------------form icons------------ */.social{ color: #000000; font-size: 14px; text-decoration: none; margin: 15px 0; transition-property: color, background-color; transition-duration: 0.5s;}.social:hover{ color: #ffffff; background-color:#c45f00;}.social-container { margin: 20px 0;}.social-container a { border: 1px solid #e06c00; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; margin: 0 5px; height: 40px; width: 40px;}/* ------------End form icons------------ *//* ------------Form Buttons----------- */button { border-radius: 20px; border: 1px solid #000000; background: #8a4300; color: #fff; font-size: 12px; font-weight: bold; padding: 12px 45px; letter-spacing: 1px; text-transform: uppercase; transition: transform 80ms ease-in;}button:active { transform: scale(.95);}button:focus { outline: none;}button.ghost { background: transparent; border-color: #fff;}/* ------------End Form Buttons----------- *//* -------------overlay-------------------- */.overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform .6s ease-in-out; z-index: 100;}.overlay { background: #ff416c; background: linear-gradient(to right, #a75900, #1b0e02) no-repeat 0 0 / cover; color: #fff; position: relative; left: -100%; height: 100%; width: 200%; transform: translateY(0); transition: transform .6s ease-in-out;}.overlay-panel { position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 40px; height: 100%; width: 50%; text-align: center; transform: translateY(0); transition: transform .6s ease-in-out;}.overlay-right { right: 0; transform: translateY(0);}.overlay-left { transform: translateY(-20%);}/* Move signin to right */.form_container.right-panel-active .sign-in-container { transform: translateY(100%);}/* Move overlay to left */.form_container.right-panel-active .overlay-container { transform: translateX(-100%);}/* Bring signup over signin */.form_container.right-panel-active .sign-up-container { transform: translateX(100%); opacity: 1; z-index: 5;}/* Move overlay back to right */.form_container.right-panel-active .overlay { transform: translateX(50%);}/* Bring back the text to center */.form_container.right-panel-active .overlay-left { transform: translateY(0);}/* Same effect for right */.form_container.right-panel-active .overlay-right { transform: translateY(20%);}/* -------------End overlay-------------------- *//* -------End Form---------------- *//* ---------- Navbar Styles ----------- */#logo { display: block; margin: 0 auto;}nav ul { display: flex; justify-content: center; list-style: none; padding: 0;}nav ul li { margin: 0 15px;}.dropdown_menu { display: none;}.nav-item:hover .dropdown_menu { display: block; position: absolute; background-color: #fff; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); z-index: 1;}/* Responsive Navbar */@media (max-width: 767px) { nav ul { flex-direction: column; text-align: center; } .navbar-toggler { position: absolute; right: 10px; }}/* Move the toggler to the right side for small screens */@media (max-width: 480px) { .navbar-toggler { position: absolute; right: 10px; }}/* Hero Section Styles */.hero-section { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 2rem; color: white;}.hero-section .main { flex: 1; max-width: 500px;}.hero-section .mirror-image { flex: 1; width: 100%; object-fit: cover; max-height: 400px;}.welcome { font-size: 2rem; color: #ffbb00;}.clear-reflection { font-size: 3rem; font-weight: bold;}.para { font-size: 1.25rem;}.newButton { background-color: #ffa600; border: none; padding: 10px 20px; color: white; font-size: 1.2rem; cursor: pointer; transition: background-color 0.3s ease;}.newButton:hover { background-color: #ff6347;}/* Responsive Design */@media (max-width: 768px) { .hero-section { flex-direction: column; align-items: center; } .main { text-align: center; margin-bottom: 2rem; } .mirror-image { display:none; }}/* Responsive Design */@media (max-width: 900px) { .hero-section { flex-direction: column; align-items: center; } .main { text-align: center; margin-bottom: 2rem; } .mirror-image { display:none; } .navbar-toggler { position: absolute; right: 10px; }}/* Responsive Design */@media (max-width: 1103px) { .hero-section { flex-direction: column; align-items: center; } .main { text-align: center; margin-bottom: 2rem; } .mirror-image { display:none; } .navbar-toggler { position: absolute; right: 10px; }}@media (max-width: 576px) { .welcome { font-size: 1.5rem; } .clear-reflection { font-size: 2rem; } .para { font-size: 1rem; } .newButton { font-size: 1rem; padding: 8px 16px; }}/* Explore Our Mirror */.newButton {padding: 0.2rem;border-radius: 5px;border: none;position: relative;top: 20px;overflow: hidden;background-color: #fcc30a;cursor: pointer;transition: 0.5s;}#twoBorder .in {padding: 1rem 2rem;position: relative;background: #000000;font-size: 1rem;color: white;text-transform: uppercase;transition: 0.5s;z-index: 99;}#twoBorder::after {content: '';position: absolute;top: 50%;left: 50%;width: 2rem;height: 10rem;background: rgb(0, 0, 0);transform: translate(-50%, -50%) rotate(55deg);animation: twoBorder 2s linear infinite;}.newButton:hover {background-color: #ff6347;}#twoBorder .in {padding: 1rem 2rem;background: #000000;color: white;transition: 0.5s;z-index: 99;}#nav-link {color: rgb(255, 166, 0);}.item2 {color: white;}nav {display: flex;justify-content: center;align-items: center;}.nav-link {color: #fcc30a;position: relative;right: 1.2rem;}.item2 {color: #ffffff;position: relative;right: 0.9rem;}.underline {list-style: none;display: flex;gap: 40px;}#nav-link::before,#nav-link::after {content: '';position: absolute;width: 0;height: 4px;background-color: #ffffff;transition: width 0.3s ease;}#nav-link::before {top: -5px;left: 0;}#nav-link::after {bottom: -5px;left: 0;}#nav-link:hover::before,#nav-link:hover::after {width: 100%;}#nav-link1:hover {color: #ffffff;}#nav-link1::before,#nav-link1::after {content: '';position: absolute;width: 0;height: 4px;background-color: #fcc30a;transition: width 0.3s ease;}#nav-link1::before {top: -5px;left: 0;}#nav-link1::after {bottom: -5px;left: 0;}#nav-link1:hover::before,#nav-link1:hover::after {width: 100%;}#nav-link1:hover {color: #fcc30a;}@keyframes twoBorder {100% {transform: translate(-50%, -50%) rotate(225deg);}}#twoBorder:hover .in {transition-delay: 0.5s;background: #fcc30a;color: black;}#twoBorder:hover {transition-delay: 0.3s;background: #fcc30a;box-shadow: 0 0 2px white, 0 0 4px white, 0 0 8px white;}@media (max-width: 375px) {#logo1{width: 25%;}ul {display: flex;gap: 2px;list-style: none;}.collection_section{display: none;}.mirror-image{display: none;}.form1{display: none;}}/* Mobile Portrait */@media (max-width: 480px) {/* CSS styles for mobile portrait */#logo1{width: 25%;}ul {display: flex;gap: 2px;list-style: none;}.collection_section{display: none;}.mirror-image{display: none;}.form1{display: none;}}/* Mobile Landscape */@media (min-width: 481px) and (max-width: 767px) {/* CSS styles for mobile landscape */body{background-size: cover;}.mirror-image{display: none;}.form1{display: none;}.collection_section{display: none;}ul {display: flex;gap: 10px;list-style: none;}.navbar-toggler {position: absolute;right: 10px;}}#nav-link{color: rgb(255, 255, 255);font-size: 30px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}#nav-link1{color: rgb(255, 196, 0);font-size: 30px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}/* Cart Icon Styles */.cart-icon { color: #fcc30a; /* Yellow color */ transition: color 0.3s ease; /* Smooth color transition */}.cart-icon:hover { color: #ff9900; /* Darker yellow on hover */}#cart-count { background-color: #ff6347; /* Red color for the badge */ color: white; padding: 0.2rem 0.6rem; border-radius: 50%; font-size: 1rem; transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition */}#cart-count:hover { transform: scale(1.2); /* Slight zoom effect */ background-color: #ff4500; /* Slightly darker red on hover */}/* Centering the Navbar */.navbar { display: flex; justify-content: center; /* Horizontally center the navbar */ align-items: center; /* Vertically center the navbar */}/* Navbar items centered in the container */.navbar-nav { display: flex; justify-content: center; /* Horizontally center the nav items */ align-items: center; /* Vertically align the nav items */ width: 100%; /* Ensure it takes up the full width */}/* Optionally, if you want to ensure the navbar collapses centered, you can adjust the collapse behavior */.navbar-collapse { display: flex; justify-content: center; width: 100%;}/* Ensure that the cart icon and badge are aligned correctly */.nav-item { display: flex; align-items: center; /* Vertically align the cart icon and badge */}.nav-link { padding: 0.5rem 1rem; /* Add padding for a better look */}#cart-count { background-color: #ff6347; /* Red for the cart badge */ color: white; padding: 0.3rem 0.6rem; border-radius: 50%; font-size: 1rem; transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition */}#cart-count:hover { transform: scale(1.2); /* Slight zoom effect */ background-color: #ff4500; /* Darker red on hover */}.navbar-toggler-icon { background-color: #ffbb00; /* Make the toggle icon itself white */ border: 2px solid black; border-radius: 5px;font-size: 30px;}/* ------why section------ */.why_section{ background-color: #000000;}.heading_container h2 { position: relative; margin-bottom: 0; font-size: 3.5rem; font-weight: bold; color: #ffffff; text-align: center;}.heading_container h2::after { content: ""; display: block; width: 70px; height: 5px; background: #ffae00; margin: 10px auto 10px; color: #ffffff;}.why_section .box { text-align: center; margin-top: 45px; background-color: #ffae00da; padding: 45px 50px; border-radius: 5px; color: #ffffff;}.why_section .box2{ background-color: #eae7e7; color: #000;}.detail-box h5 { font-size: 21px; font-weight: 700;}.remove_line_bt h2::after { display: none;}.why_section .box .img-box { margin-bottom: 15px;}.why_section .box .img-box svg { width: 55px; height: auto; fill: #ffffff;}/* -------Our Products------- */.product_section{ background-color: #000000; }.product_section .heading_container { margin-bottom: 20px;}.product_section .box { position: relative; color: rgb(255, 255, 255); margin-top: 25px; padding: 35px 35px; background-color: #000000; -webkit-transition: all .3s; transition: all .3s; overflow: hidden; box-shadow: 5px 5px 5px -5px rgba(0,0,0,.2); border: solid #fff 10px;}.product_section .box .img-box { display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 300px;}.product_section .box .img-box img { max-height: 300px; width: 300px; -webkit-transition: all .3s; transition: all .3s;}.product_section .box .detail-box { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}.product_section .box .detail-box h5 { font-size: 18px; margin-top: 10px; color: #ffc400;}.product_section .box .detail-box h6 { margin-top: 10px; color: #ffbb00; font-weight: 600; position: relative; left: 15px;}.product_section .box:hover .option_container { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0);}.arrival_section { background-color: #d4ced0;}.product_section .option_container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(255, 255, 255, 0.6); z-index: 3; opacity: 0; visibility: hidden; -webkit-transition: all .2s; transition: all .2s; -webkit-transform: translateY(100%); transform: translateY(100%);}.product_section .options { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}.product_section .options a { display: inline-block; padding: 8px 15px; border-radius: 30px; width: 165px; text-align: center; -webkit-transition: all .3s; transition: all .3s; margin: 5px 0;}.product_section .options .option1 { background-color: #f19d00; border: 1px solid #f7af44; color: #ffffff;}.product_section .options .option1:hover { background-color: transparent; color: #000000;}.product_section .options .option2 { background-color: #552424; border: 1px solid #000000; color: #ffffff;}.product_section .options .option2:hover { background-color: transparent; color: #000000;}.product_section .btn-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 45px;}.product_section .btn-box a { display: inline-block; padding: 10px 40px; background-color: #f7c744; border: 1px solid #ffaa0d; color: #ffffff; border-radius: 0; -webkit-transition: all 0.3s; transition: all 0.3s;}.discount-badge { position: absolute; top: 10px; left: 10px; background-color: #ff0000; color: #fff; padding: 5px 10px; font-size: 14px; font-weight: bold; border-radius: 5px; } .discounted-price { color: #ff0000; font-weight: bold; } .detail-box{ position: relative;top: 20px; }/* ---------offer----------- */ .offer_section .row > div { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; } .offer_section .box { margin: 10px; height: 100%; position: relative; min-height: 175px; } .offer_section .box img { width: 100%; min-height: 100%; } .offer_section .box .detail-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #ffffff; padding: 25px; background-color: rgba(0, 0, 0, 0.15); } .offer_section .box .detail-box h2 { font-weight: bold; } .offer_section .box .detail-box a { display: inline-block; padding: 8px 40px; background-color: transparent; color: #ffffff; border-radius: 0; border: 1px solid #ad6b07; -webkit-transition: all .2s; transition: all .2s; margin-top: 10px; } .offer_section .box .detail-box a:hover { background-color: #ad6b07; color: #ffffff; } .offer_section .box.offer-box1 { min-height: 225px; } .offer_section .box.offer-box1 .detail-box { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .offer_section .box.offer-box1 .detail-box h2 { font-size: 3rem; } .offer_section .box.offer-box2 .detail-box h2, .offer_section .box.offer-box3 .detail-box h2 { font-size: 2rem; } .offer_section .box.offer-box2 .detail-box { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .offer_section .box.offer-box3 .detail-box { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /* -----categories------ */.Categoreis-bg{ background-color: #000;} #category{ padding: 5% 6%; } #product-cards{ padding: 5% 10%; } #footer{ margin-bottom: 2%; margin-top: 2%; } .filter-btns{ text-align: center; } .filter-btn{ background: none; cursor: pointer; border: none; font-family: inherit; text-transform: uppercase; display: inline-block; font-size: 16px; color: #d3d3d3; font-weight: 600; letter-spacing: 2px; position: relative; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .filter-btn::after{ content: ""; position: absolute; top: 110%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 2px; width: 0; background-color: #555; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out } .filter-btn:hover{ color: #ffffff; } .filter-btn:hover::after{ width: 100%; } /* active button */ .active-btn{ color: #ffffff; } .active-btn::after{ width: 100%; } .canvas-title{ text-align: center; } /* Shopping Cart */ .btn-purchase{ text-align: center; margin: auto; padding: 2%; width: 50%; color: white; } #shopping-cart{ padding: 5% 5%; color: white; } .cart-total{ text-align: right; font-size: 1.3rem; color: white; } .up-icon{ color: rgb(243, 243, 243); position: fixed; float: right; z-index: 1; left: 95%; top: 85%; font-size: 2rem; } /* ------New Collection-------- */.collection_section{ width: 100%; float: left; padding-bottom: 0px; background-color: #000;}.new_text{width: 100%;float: left;color: #ffffff; text-align: center;}.consectetur_text{width: 100%;float: left;font-size: 14pt;color: #ffffff;font-weight: 400;margin-left: 0px; padding-bottom: 30px; text-align: center;}.collection_section_2{width: 100%;float: left;}.about-img { width: 100%; float: left; background-color: hsl(39, 64%, 89%); height: auto; margin-left: 64px; box-shadow: 0px 0px 10px 0px; position: relative; z-index: 1; border: 3px solid rgb(255, 174, 0);}.about-img2 { width: 100%; float: left; background-color: hsl(39, 64%, 89%); height: auto; margin-left: 64px; box-shadow: 0px 0px 10px 0px; position: relative; z-index: 1; border: 3px solid rgb(255, 174, 0);}.new_bt{float: left;background-color: #000; border: 5px dotted rgb(255, 174, 0);font-size: 1rem;text-align: center;color: #ffffff;margin-left: -60px; }.mirror-img{width: 100%;float: left;text-align: center;padding-top: 40px;padding-bottom: 40px;margin: 0px;}@media (max-width: 768px) { .offer__container { flex-direction: column; text-align: center; } .offer__data { max-width: 100%; padding-right: 0; }}.Rounded-Mirror { width: 24%; text-align: center; padding-top: 30px; font-size: 16pt; color: #0c0116; border-bottom: 1px solid#000; margin: 0 auto;}.dolar_text{width: 100%;float: left;text-align:center;color: #000;font-size: 20pt;}.star_icon{ width: 25%; margin: 0 auto; position: relative; right: 415px; bottom: 70px; }.star_icon ul{ margin: 0px; padding: 0px;} .star_icon li{ float:left; padding-right:0px; padding-bottom: 25px;}.about-img2{width: 100%;float: left;background-image: url(../images/about-img2.png);height: auto;box-shadow: 0px 0px 10px 0px;margin-left: -50px; margin-top: 74px;}.mirror_img{ width: 100%; float: left; padding-top: 30px; }.mirror-img2{width: 100%;float: left;text-align: center;padding-top: 100px;padding-bottom: 40px;margin: 0px}.seemore_bt{width: 32%;height: 50px;color: #ffffff;background-color: #ffffff;color: #ffffff;font-size: 16pt;margin-top: 35px; margin-bottom: 90px;}.collectipn_section_3{ width: 100%; float: left; padding-top: 0px;}.racing_shoes { width: 100%; float: left; background-color: #eae7e7; height: auto; padding-top: 70px; background-size: 100%; padding-bottom: 70px;}.collection_text{ width: 100%; float: left; color: #ffffff; text-align: center; font-weight: bold; font-size: 40px; background-color: #ffffff; padding: 30px 0px; } .about-img, .about-img2 { perspective: 1000px; /* Create 3D space for the hover effect */ position: relative;}.about-img .mirror-img, .about-img2 .mirror-img2 { transition: transform 0.3s ease, box-shadow 0.3s ease;}.about-img:hover .mirror-img, .about-img2:hover .mirror-img2 { transform: rotateY(10deg) rotateX(10deg) scale(1.05); /* Apply rotation and scale on hover */ }/* ------blog-------- */.latest-blog { padding: 80px 0; border-bottom: 2px solid white;}.latest-blog .title-all { text-align: center; margin-bottom: 50px;}.latest-blog .title-all h1 { font-size: 36px; font-weight: 700; color: #ffffff; margin-bottom: 10px;}.latest-blog .title-all p { font-size: 16px; color: #ffffff; line-height: 1.7; max-width: 800px; margin: 0 auto;}.blog-box { position: relative; background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;}.blog-box:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);}.blog-img img { width: 100%; height: 250px; object-fit: cover; border-bottom: 5px solid #f5f5f5; transition: transform 0.3s ease;}.blog-box:hover .blog-img img { transform: scale(1.05);}.blog-content { padding: 25px;}.title-blog h3 { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 15px;}.title-blog p { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 20px;}.option-blog { display: flex; justify-content: flex-start; margin-top: 10px;}.option-blog li { margin-right: 15px;}.option-blog li a { color: #d33b33; font-size: 16px; transition: color 0.3s ease;}.option-blog li a:hover { color: #010101;}@media (max-width: 1200px) { .blog-box { margin-bottom: 30px; }}@media (max-width: 992px) { .latest-blog .title-all h1 { font-size: 28px; } .blog-box { margin-bottom: 30px; } .option-blog li { margin-right: 10px; } .blog-img img { height: 250px; /* Fixed height */ object-fit: cover; }}@media (max-width: 768px) { .col-md-6 { flex: 0 0 100%; max-width: 100%; } .latest-blog .title-all h1 { font-size: 26px; } .title-blog h3 { font-size: 18px; } .title-blog p { font-size: 14px; } .option-blog li { margin-right: 8px; }}@media (max-width: 576px) { .latest-blog .title-all h1 { font-size: 24px; } .blog-content { padding: 20px; } .title-blog h3 { font-size: 16px; } .title-blog p { font-size: 12px; } .option-blog li { margin-right: 5px; }}/* special offer */.offer{ position: relative; border-top: 2px solid white; border-bottom: 2px solid white; background-color: #1d1b1b; height: 450px; background-repeat: no-repeat; } .offer__container{ grid-template-rows: max-content 220px; } .offer__bg{ position: absolute; top: 0; left: 0; width: 100%; height: 160%; object-fit: cover; object-position: center; } .offer__data, .offer__img{ position: relative; } .offer__data{ text-align: center; } .offer__title{ margin-bottom: 2rem; position: relative; right: 290px; top: 100px; } .offer__description{ margin-bottom: 3rem; position: relative; right: 290px; top: 100px; } .offer__img{ position: absolute; max-width: initial; width: 450px; bottom: 2rem; right: 90px; top: 1px; } .nav-link2{ position: relative; right: 230px; top: 70px; text-decoration: none; border-radius: 50px;background-color: #000;color: white; padding: 20px; border: 4px solid red; transition-duration: 0.5s; transition-property: color,background-color; } .nav-link2:hover{ background-color: red; color: #ffffff; } #subscribeForm{ position: relative; right: 210px; } .email1{ padding: 10px; width: 100%; max-width: 300px; margin: 10px 0; font-size: 1em; border: 1px solid #ddd; border-radius: 5px; background-color: #fff; } /* footer section*/.footer_section { padding: 175px 0 25px 0; -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%); background-color: #000000; color: #fefefe; } .footer_section .footer-col { margin-bottom: 45px; } .footer_section h4 { text-transform: uppercase; position: relative; margin-bottom: 20px; color: #ffffff; font-weight: 600; } .footer_section .social_box { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 25px; } .footer_section .social_box a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 100%; width: 40px; height: 40px; border: 1px solid #ffffff; color: #ffffff; font-size: 18px; margin-right: 10px; } .footer_section .social_box a:hover { color: #bb7c2a; border-color: #9c6603; } .footer_section .contact_nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .footer_section .contact_nav a { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #ffffff; margin-bottom: 10px; } .footer_section .contact_nav a i { font-size: 22px; margin-right: 10px; } .footer_section .contact_nav a:hover { color: #ffc267; } .footer_section .footer_form input { width: 100%; border: none; height: 45px; margin-bottom: 15px; padding-left: 25px; background-color: #eaeaea; outline: none; color: #101010; } .footer_section .footer_form button { display: inline-block; padding: 10px 45px; background-color: #ff9100; color: #000000; -webkit-transition: all 0.3s; transition: all 0.3s; border: 1px solid transparent; border-radius: 0px; } .footer_section .footer_form button:hover { background-color: transparent; border-color: #ff9100; color: #ff9100 ; } .footer_section .footer-info { text-align: center; border-top: 1px solid #ff9900; padding-top: 25px; margin-top: 25px; } .footer_section .footer-info p { margin: 0; margin: 0 auto; text-align: center; } .footer_section .footer-info p a { color: inherit; } .clear{ text-decoration: none; } /* end footer section*/ /* ---Contact Us----- */iframe{ padding: 20px;} .container9{ background-color: #000;} .container3 {border: 2px solid yellow; }#submit{ background-color: #000; border: 2px solid rgb(255, 187, 0); transition-property: background-color border color; transition-duration: 0.5s; padding-left: 50px; padding-right: 50px;}#submit:hover{ background-color: rgb(255, 187, 0); border: 2px solid rgb(255, 187, 0); color: #000;} /* -------single cart------ */ .product-card img { width: 100%; height: 300px; object-fit: cover; }/* Our Gallery */ .ourgallery{background-color: #000000;padding-bottom: 100p; } .container4{ width:100%; height: 50vh; display: flex; position: relative; right: 60px; justify-content: center; align-items: center; gap: 8rem; transform-style: preserve-3d; transform: perspective(1000px); }.container4 .item4{ width: 15rem; height: 15rem; transition: 0.5s; cursor: pointer; border: 3px solid rgb(248, 170, 0); }.container4 .item4:hover{ filter: brightness(1); transform: translateZ(200px);}/* add hover animation to the right item */.container4 .item4:hover + *{ filter: brightness(0.6); transform: translateZ(150px) rotateY(40deg);}.container4 .item4:hover + * + *{ filter: brightness(0.4); transform: translateZ(70px) rotateY(20deg);}/* for left of the hover *//* +* represent the right element but for left we don't have any thing like this */.container4 .item4:has(+ *:hover){ filter: brightness(0.6); transform: translateZ(150px) rotateY(-40deg);}.container4 .item4:has(+ * + *:hover){ filter: brightness(0.4); transform: translateZ(70px) rotateY(-20deg);}.item4 img{ width: 140%; height: 150%; object-fit: cover;}/* -------------loader effect---------------- */ /* Hide the content initially */ .content { display: none; /* Hide the content until loading is complete */ text-align: center; font-family: 'Arial', sans-serif; } /* Style the loading container */ .loading-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */ display: flex; justify-content: center; align-items: center; z-index: 9999; } /* Spinner style with a luxurious metallic look */ .loading-spinner { border: 10px solid rgba(255, 255, 255, 0.3); /* Light metallic border */ border-top: 10px solid #ffbb00; /* Gold-like border */ border-radius: 50%; width: 80px; height: 80px; box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* Soft glowing effect */ animation: spin 1.5s linear infinite, shimmer 1s ease-in-out infinite; /* Added shimmer effect */ } /* Keyframes for spinning animation */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Keyframes for the shimmer effect */ @keyframes shimmer { 0% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); } 50% { box-shadow: 0 0 25px rgba(255, 215, 0, 1); } 100% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); } } /* Additional styling for content */ .content h1 { font-size: 36px; margin-top: 20px; color: #333; } .content p { font-size: 18px; color: #666; }@media (max-width: 1036px) {.offer{ display: none;}}@media (max-width: 576px) { .container3 .content { flex-direction: column; } .container3 .content .left-side { width: 100%; } .container3 .content .right-side { width: 100%; } .button input[type="button"] { width: 100%; }}/* ---------- About Us Section Styling ---------- */.aboutContainer { display: flex; /* Enable flexbox for the container */ flex-direction: column; /* Stack children vertically */ justify-content: center; /* Vertically center content */ align-items: center; /* Horizontally center content */ text-align: center; /* Center text within the container */ padding: 60px 20px; background-color: #0a0a0a; /* Dark background for elegance */ border: 2px solid #fff; /* Light border for contrast */ border-radius: 12px; /* Rounded corners */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */ min-height: 100vh; /* Ensure it takes at least the full height of the viewport */}.aboutWrapper { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; /* Ensure wrapping content stays centered */}.aboutImage img { border-radius: 12px; /* Round image corners for a soft look */ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Softer, more prominent shadow */ transition: transform 0.3s ease-in-out; /* Smooth scale on hover */}.aboutImage img:hover { transform: scale(1.05); /* Slight zoom on hover */}.aboutTextRight { padding-left: 25px; color: #fff; display: flex; flex-direction: column; /* Stack text vertically */ justify-content: center; /* Center text vertically */ align-items: center; /* Center text horizontally */}#welcomeHeader { font-size: 2.8rem; font-weight: 700; line-height: 1.3; color: #FFD700; /* Gold color for emphasis */ margin-bottom: 20px;}#welcomeHeader span { color: #FFD700; /* Ensure the span is highlighted */}.aboutTextRight p { font-size: 1.2rem; line-height: 1.6; color: #ddd; margin-bottom: 20px;}.experienceAndChefsWrapper { display: flex; justify-content: center; /* Center the experience and chefs sections */ gap: 40px; margin-top: 30px;}.experienceWrapper, .chefsWrapper { text-align: center; flex: 1;}.insideWrapper h1 { font-size: 3.2rem; color: #FFD700; margin-bottom: 10px;}.paragAndHeader p { font-size: 1.2rem; color: #ddd;}.paragAndHeader h5 { font-size: 1.1rem; color: #ccc;}.aboutBtn { margin-top: 20px; padding: 12px 25px; font-size: 1.2rem; color: #fff; background-color: #FFD700; border: none; border-radius: 6px; transition: background-color 0.3s ease-in-out;}.aboutBtn a { color: inherit; text-decoration: none;}.aboutBtn:hover { background-color: #e6c100; /* Slightly darker gold on hover */ cursor: pointer;}@media (max-width: 767px) { .aboutWrapper { flex-direction: column; align-items: center; } .aboutTextRight { padding-left: 0; margin-top: 20px; text-align: center; } .aboutImage img { max-width: 100%; /* Make images full width on smaller screens */ height: auto; } .experienceAndChefsWrapper { flex-direction: column; align-items: center; } .experienceWrapper, .chefsWrapper { margin-bottom: 20px; }}.view{ color: black; border: 2px solid rgb(255, 191, 0); transition-property: background-color; transition-duration: 0.5s; } .view:hover{ background-color: rgb(255, 191, 0); } @media (max-width: 767px) { .shop-item-image { max-width: 100%; /* Ensure image fits well on small screens */ height: auto; } .shop-item-title { font-size: 1.2em; /* Adjust font size for smaller screens */ } .shop-item-price { font-size: 1.1em; } .shop-item-button { font-size: 1em; }}