* {
    margin: 0px;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
body {
    background: #F5F5F5;
}
.header {
    padding: 20px;
    height: 100px;
    z-index: 900;
    background: white;
    position: sticky;
    top: 0;
    box-shadow: 0px 0px 10px #A2A2A2;
}
.wrapper {
    max-width: 1134px;
    margin: 0 auto;
    padding-right: 0px;
    padding-left: 0px;
}
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-bar ul {
    display: flex;
    align-items: center;
    list-style: none;
    transition: 0.3s ease-in-out;
}
.nav-bar ul li {
    position: relative;

}
.nav-bar ul li .sub-menu {
    display: none;
    position: absolute;
    background: white;
    margin-top: 0px;
    margin-left: -15px;
    width: 200px;
}
.nav-bar ul li .sub-menu li a {
    display: block;
}
.nav-bar ul li:hover .sub-menu {
    display: block;
}
.nav-bar ul li:hover .sub-menu ul {
    display: block;
    width: 150px;
}
.nav-bar ul li:hover .arrow {
    transform: rotate(180deg);
}
.nav-bar ul li:hover .sub-menu ul li {
    padding: 10px;

}
.sub-menu ul li a {
    font-size: 16px;
    position: static;
    font-weight: 100;
    cursor: pointer;
}
.sub-menu ul li:hover a {
    color: #FF9B17;
}
.nav-bar ul li a {
    text-decoration: none;
    font-size: 17px;
    color: #282828;
    font-weight: 600;
    transition: 0.3s;
}
.nav-bar ul li a {
    position: relative;
}
.nav-bar ul li a:after {
    content: "";
    background-color: #CC2300;
    border-radius: 8px;
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -4px;
    left: 0;
}
.nav-bar ul li a:hover:after {
    content: "";
    background-color: #CC2300;
    border-radius: 8px;
    position: absolute;
    width: 25%;
    height: 3px;
    bottom: -4px;
    left: 0;
}
.nav-bar ul li a.active:after {
    content: "";
    background-color: #CC2300;
    border-radius: 8px;
    position: absolute;
    width: 25%;
    height: 3px;
    bottom: -4px;
    left: 0;
}
.sub-menu ul li a.active {
    color: #FF9B17;
}
.sub-menu ul li a:hover::after,
.sub-menu ul li a.active::after {
    content: none;
    background: none;
}
.nav-bar ul li a.active,
.nav-bar ul li a:hover {
    font-weight: bold;
}
.nav-bar .notification {
    position: relative;
    cursor: pointer;
}
.notify {
    width: 8px;
    height: 8px;
    background-color: #CC2300;
    border-radius: 50%;
    position: absolute;
    top: 28px;
    margin-left: 19px;
}
.menu {
    display: none;
    cursor: pointer;
}
.menu div {
    width: 24px;
    margin: 5px;
    background: black;
    height: 3px;
}
.notify-icon {
    display: flex;
    align-items: center;
    gap: 40px;
}
.mob-navig {
    display: flex;
    gap: 20px;
}
.navbar-icon {
    display: none;
    align-items: center;
    gap: 40px;
    list-style: none;
}
.mob-navig {
    display: none;
    gap: 20px;
}
.login-form-container {
    position: fixed;
    top: -105%;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
}
.login-form-container.show {
    top: 0;
    opacity: 1;
}
.login-form-container form {
    background: #FFFFFF;
    border-radius: 5px;
    width: 500px;
    height: 600px;
    align-items: center;
    text-align: center;
    position: relative;
}
.loginbtn {
    cursor: pointer;
}
.login-form-head {
    font-weight: 700;
    font-size: 25px;
    line-height: 34px;
    text-transform: capitalize;
    color: #282828;
    margin-bottom: 40px;
}
.login-google {
    background: #282828;
    border-radius: 5px;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 15px
    line-height: 22px;
    color: #FFFFFF;
    padding: 14px 36px;
    border: none;
    outline: none;
    width: 100%;
    cursor: pointer;
}
.login-or {
    font-weight: 400;
    font-size: 16px;
    line-height: 11px;
    color: #A8A8A8;
    margin-top: 30px;
    margin-bottom: 40px;

}
.form-content {
    margin: 30px 90px;
    position: relative;
}
.coffe_search {
    margin-bottom: 14px;
}

.login-form-grp {}

.login-input {
    margin-bottom: 15px;
    background: rgba(217, 217, 217, 0.2);
    border-radius: 5px;
    border: none;
    outline: none;
    font-weight: 400;
    font-size: 16px;
    line-height: 11px;
    color: #A8A8A8;
    padding: 16px;
    width: 100%;
}

.login-close {
    position: absolute;
    font-size: 20px;
    right: 20px;
    top: 20px;
    color: #CC2300;
    cursor: pointer;
}

.password-settings {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    margin-top: 10px;
}

.remember {
    display: flex;
    align-items: center;
}

.password-settings label {
    font-weight: 400;
    font-size: 14px;
    color: #282828;
    margin-bottom: 0px;
}

.frgt-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 13px;
    color: #FF9B17;
}

.checkbox {
    border: 1px solid #FF9B17;
    border-radius: 2px;
}

.register {
    margin-top: 30px;
    font-weight: 400;
    font-size: 16px;
    color: #282828;
}

.frgt-text:hover {
    color: #FF9B17;
}

.create-one {
    font-weight: 600;
    font-size: 16px;
    color: #FF9B17;
}

.create-one:hover {
    text-decoration: none;
    color: #FF9B17;
}

.items-cart {
    margin: 20px 0px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.items-cart i {
    color: #CC2300;
}

.cart-name {
    font-weight: 700;
    font-size: 25px;
    line-height: 34px;
    color: #282828;
    text-align: center;
}

.cart-item {
    display: flex;
    align-items: center;
    position: relative;
}

.shopping-cart {
    position: absolute;
    top: 110%;
    right: 0;
    border-radius: .5rem;
    background: #FFFFFF;
    border-radius: 5px;
    width: 400px;
    opacity: 0;
    display: none;
    align-items: center;
    box-shadow: 0px 0px 10px -6px rgba(0, 0, 0, 0.1);

}

.shopping-cart.showcart {
    right: 9rem;
    transition: 0.3s linear;
    opacity: 1;
    display: block;
}

.item-cartname {
    font-weight: 600;
    font-size: 14px;
    color: #282828;
}

.item-cartabout {
    font-weight: 400;
    font-size: 14px;
    color: #FF9B17;
}

.cart-box {
    margin: 40px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cart-box .cartremove {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.cart-box .cart-border {
    border-bottom: 0.5px solid #EFEFEF;
    margin-bottom: 16px;
}

.cart-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-buttons button {
    outline: none;
    font-weight: 500;
    font-size: 20px;
    line-height: 15px;
    border-radius: 5px;
}

.cartview {
    border: 1px solid #282828;
    padding: 15px 24px;
    background: none;
}

.cartcheckout {
    background: #282828;
    color: white;
    border: none;
    padding: 15px 28px;
}

.item-rate {
    font-weight: 600;
    font-size: 14px;
    color: #282828;
}

/*.................Main-Section.......................*/
#main-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 150px;
    height: 100vh;
}

.main-row {
    width: 100%;
    margin-right: 0px;
    margin-left: 0px;
}

#main-content .left-section {
    padding-right: 0;
    padding-left: 0;
}

#main-content .left-section .main-head {
    font-size: 56px;
    margin-bottom: 40px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    width: 78%;
}

#main-content button {
    padding: 14px 44px;
    font-size: 20px;
    background-color: #282828;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    border: none;
}

.gallery{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.img-box{
    width: 200px;
    height: 500px;
    border-radius: 15px;
    background-image: url('images/landing Page/coffee-latte-with-cookies-coffiee-beans.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    transition: width 0.5s;
}

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

.img-box:nth-child(1){
   width: 400px;

}

.img-box:nth-child(2){
    background: url('images/landing Page/slashio-photography-ZG9ggI_pjFw-unsplash.jpg');
    background-size: cover;
    background-position: center;
    height: 400px;
}

.img-box:nth-child(3){
    background: url('images/landing Page/iced-coffee-with-splash-tall-glass-dark-background-concept-refreshing-summer-drink.jpg');
    background-size: cover;
    background-position: center;
    width: 150px;
    height: 300px;
}

.img-box:nth-child(1):hover{
    width: 600px;
    cursor: pointer;
}

.img-box:nth-child(2):hover{
    width: 300px;
    cursor: pointer;
}

.img-box:nth-child(3):hover{
    width: 200px;
    cursor: pointer;
}

#main-content .right-section  p {
    font-size: 24px;
    position: absolute;
    color: white;
    bottom: 20px;
    text-align: center;
    width: 100%;
    font-weight: 600;
}

#main-content .right-section .img-box:nth-child(2) p {
    transform: rotate(-90deg);
    bottom: 50px;
}

#main-content .right-section .img-box:nth-child(3) p {
    transform: rotate(-90deg);
    width: max-content;
    bottom: 80px;

}


/* .............................About us................................*/

#about-us {
    margin-bottom: 200px;
}

#about-us h3 {
    font-size: 20px;
    font-weight: 600;
    position: relative;
}

#about-us h3:after {
    content: " ";
    position: absolute;
    background-color: #CC2300;
    border-radius: 10px;
    width: 3%;
    height: 3px;
    bottom: -3px;
    left: 0;
}

#about-us .about-content {
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

#about-us .ab-mob {
    display: flex;
    flex-wrap: wrap;
}

#about-us .about-main {
    margin-top: 40px;
    width: 544px;
    font-size: 60px;
    margin-bottom: 40px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
}

.about-left {
    max-width: 100%;
}

.about-right {
    max-width: 100%;
}

#about-us .about-para {
    font-weight: 400;
    font-size: 16px;
    line-height: 35px;
    color: #282828;
    width: 87%;
}

#about-us .about-img {
    position: relative;
}

#about-us button {
    padding: 14px 30px;
    font-size: 20px;
    background-color: #282828;
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    bottom: 60px;
    left: -100px;
}

#about-us .about-img img {
    border-radius: 6px;
    width: 100%;
}



/*............ Menu...................*/

#menus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 90px;
}

#menus h3 {
    font-size: 20px;
    font-weight: 600;
    position: relative;
}

#menus h3:after {
    content: " ";
    position: absolute;
    background-color: #CC2300;
    border-radius: 10px;
    width: 30%;
    height: 3px;
    bottom: -3px;
    left: 0;
}

#menus .btn-viewall {
    background: #CC2300;
    padding: 10px 20px;
    border-radius: 50px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
}

#menus .menu-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menucards {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#menu-card {
    margin-bottom: 100px;
}

#menu-card .card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #FFFFFF;
    box-shadow: 5px 5px 10px -6px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    text-align: center;
    padding: 6px 6px;
}


#menu-card .card span {
    font-size: 16px;
    font-weight: bold;
}

/*..............................Product...........................*/

#product {
    margin-bottom: 200px;
}

.pro-card {
    margin-left: 0px;
    margin-right: 0px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}


#product .pro-head {
    font-size: 36px;
    color: #FF9B17;
    font-weight: 600;
    margin-bottom: 40px;
}

#product .products {
    margin-bottom: 50px;
}

.pro {
    background: #FFFFFF;
    box-shadow: 5px 5px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 20px;
    display: flex;
    transition: 0.2s;
    flex-direction: column;
    margin-bottom: 50px;
    cursor: pointer;
}

.pro .pro-img {
    margin-bottom: 16px;
}

.pro img {
    border-radius: 6px;
    width: 100%;
}

.pro .review {
    display: flex;
    align-items: center;
    margin-bottom: 1.8rem;
}

.pro .review p {
    margin-bottom: 0;
}

.pro .review img {
    height: 24px;
    width: 24px;
}

.pro-btn {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 10px;
    background: #CC2300;
    border: none;
    border-radius: 50px;
    text-decoration: none;
}
.pro-btn:hover{
    color: white;
}
#product a {
    text-decoration: none;

}

#product a:hover {
    color: #fff;
}

.pro .pro-name img {
    height: 24px;
    width: 24px;
}

.price,
.pro-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.price p {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0px;
}

.pro-details .desc-head {
    font-size: 17px;
    font-weight: 700;
}

.pro-para {
    margin-top: 6px;
    color: #A2A2A2;
    font-size: 16px;
}

.like {
    font-size: 20px;
    color: #CC2300;
}

/*..............Team..................*/
#team {
    margin-bottom: 200px;
}

.heading {
    font-size: 20px;
    font-weight: 600;
    position: relative;
    width: 100%;
}

#team .heading:after {
    content: " ";
    position: absolute;
    background-color: #CC2300;
    border-radius: 10px;
    width: 1rem;
    height: 3px;
    bottom: -3px;
    left: 0;
}

#team .team-head {
    font-size: 56px;
    width: 511px;
    font-weight: 700;
}


#team .team-img {
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    background: url('images/landing page/Team/3.jpg');
    background-position: center;
    width: 100%;
    border-radius: 8px;
    position: relative;
    height: 300px;
}

#team .team-img:nth-child(1) {
    background: none;
}

#team .team-img:nth-child(3) {
    background: url('images/landing page/Team/2.jpg');
}

#team .team-img:nth-child(4) {
    background: url('images/landing page/Team/1.png');
}

.col-ch {
    max-width: 48%;
}

.team-details {
    position: absolute;
    bottom: 0;
    padding-left: 20px;
}

#team .team-img .main-head {
    color: white;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 0px;
}

#team .team-img .sub-head {
    color: white;
    font-size: 24px;
}

#team .social-icon {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    bottom: 20px;
    right: 10px;
    padding-right: 20px;

}

#team .social-icon i {
    font-size: 24px;
    color: white;
}

/*..............Testimonial...........*/

#testimonial {
    display: flex;
    flex-direction: column;
    margin-bottom: 200px;
}

.mySlides #testimonial .heading {
    font-size: 20px;
    font-weight: 600;
    position: relative;
}

#testimonial .heading:after {
    content: " ";
    position: absolute;
    background-color: #CC2300;
    border-radius: 10px;
    width: 30%;
    height: 4px;
    bottom: -5px;
    left: 0;
}

#testimonial .team-head {
    font-size: 56px;
    margin: 30px 0px;
    font-weight: 700;
}

#testimonial .testimonial-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

#testimonial .testimonial-content {
    background: #FFFFFF;
    box-shadow: 5px 5px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 15px;

    width: 764px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 80px;
    flex-wrap: wrap;
}

.slider {
    width: 100%;
    text-align: center;
    color: black;
    cursor: pointer;
}

.slider i:hover {
    color: #FF9B17;
}

.testimonial-content .persons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-content .persons .p-img {
    height: 130px;
    width: 130px;
}

.p-name {
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
}

.sub-address {
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    color: #767676;
    margin-bottom: 0px;
}

.review-star {
    height: 20px;
    width: 20px;
}

.main-des {
    font-weight: 700;
    font-size: 40px;
    color: #FF9B17;
    line-height: 47px;
}

.p-describe {
    width: 56%;
    position: relative;
}

.p-describe:before {
    content: '"';
    position: absolute;
    top: -5px;
    left: -20px;
    font-weight: 400;
    font-size: 42px;
    line-height: 35px;
    text-align: center;
    color: #BFBFBF;
}

.p-describe:after {
    content: '"';
    position: absolute;
    font-weight: 400;
    font-size: 42px;
    line-height: 35px;
    text-align: center;
    color: #BFBFBF;
    bottom: -5px;
    right: -20px;
}

.p-para {
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    color: #282828;
}

/*...............Form-Section........................*/
#form-section {
    margin-bottom: 200px;
}

#form-section .heading {
    font-size: 20px;
    font-weight: 600;
    position: relative;
}

#form-section .heading:after {
    content: " ";
    position: absolute;
    background-color: #CC2300;
    border-radius: 10px;
    width: 30%;
    height: 3px;
    bottom: -4px;
    left: 0;
}

#form-section .main-head {
    font-size: 52px;
    margin-bottom: 40px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
}

form .forms-input {
    padding: 10px 24px;
    background-color: #a2a2a233;
    color: #A2A2A2;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 24px;
    border: none;
}

.form-img {
    width: 100%;
}

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

form .forms-input:focus {
    box-shadow: none;
}

.form-btn {
    padding: 14px 53px;
    background-color: #282828;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    box-shadow: none;
    transition: none;
}

/*.........................Footer...........................*/
#footer {
    background: #282828;
    margin: 0px 0px 0px 0px;
    padding: 80px 0;
}

#footer .footer-log {
    display: flex;
    color: white;
    margin-bottom: 50px;
}

#footer .footer-log img {
    width: 100px;
    height: 100px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-right: 0px;
    margin-left: 0px;
    flex-basis: 100%;
    margin-bottom: 50px;

}

#footer .footer-log .company-name {
    font-size: 20px;
    font-weight: 600;
}

.foot {
    padding-right: 20px;
    padding-left: 0px;
    align-items: flex-start;
}

#footer .footer-para {
    color: white;
    width: 100%;
    font-size: 18px;
    line-height: 32px;
}

.foot-end {
    color: white;
}

.footer-heading {
    margin-top: 25px;
    color: #FF9B17;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 60px;
}

.footer-subhead {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.foot-address {
    color: white;
    font-size: 16px;
    line-height: 34px;
    width: 80%;
}

.link {
    display: flex;
    flex-direction: column;
}

#footer .foot-links {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.media-link {
    display: flex;
    gap: 40px;
}




/*.............................................menu page.......................................*/
#banner {
    margin-bottom: 100px;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#banner.banner-img {
    background-image: url('images/Menu page/coffee.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
}

.banner-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.banner-head {
    color: #fff;
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 0px;
}
#banner img {
    width: 100%;
    height: 100%;
}

.filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    margin: 0px 15px 50px 15px;
}

#product .pro .menu-review {
    margin-bottom: 0px;
}
#Sliding {
    display: flex;
    align-items: flex-start;
}
.count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-weight: 500;
    font-size: 20px;
    line-height: 22px;
    background: #F0F0F0;
    color: #000000;
    margin: 5px;
    padding: 0px 10px;
}
.count.active {
    color: #000000;
    background: #FF9B17;
}
.count-text {
    margin: 0px;
    text-decoration: none;
    color: black;
}
.count-text:hover{
    color: #000000;
}
.Sliding a:hover{
color: #000000;
}
#offer {
    margin-bottom: 100px;
    margin-bottom: 100px;
    display: flex;

}
#offer .offer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
    align-items: center;
}
#offer .offer-content {
    background-image: url("images/Menu page/13.png");
    width: 520px;
    height: 350px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    background-size: cover;
    position: relative;
}

#offer .offer-container .offer-content:last-child {
    background-image: url("images/Menu page/8.png");
}

.off-details {
    position: absolute;
    bottom: 40px;
    left: 20px;
    color: #fff;
}

#offer .off-details .off-main {
    font-weight: 700;
    font-size: 35px;
    line-height: 40px;
    color: #FFFFFF;
}

.off-details .off-price {
    font-weight: 500;
    font-size: 24px;
    line-height: 15px;
    color: #FFFFFF;
    margin-bottom: 40px;
}

.offer-btn {
    background: #FFFFFF;
    border-radius: 10px;
    font-weight: 700;
    font-size: 22px;
    line-height: 15px;
    color: #282828;
    padding: 12px 32px;
    border: none;
}

.offer-btn:hover {
    color: #000000;
    text-decoration: none;
}

/*............................Selected product..............................*/

#product-details {
    margin-top: 100px;
    margin-bottom: 100px;
}

#product-details .pr-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

#product-details .pr-img {
    width: 36%;
    border-radius: 8px;
    height: 400px;
}

#product-details .pr-img img {
    width: 100%;
    border-radius: 6px;
    height: 400px;
}

.sp-head {
    margin-top: 20px;
    font-weight: 700;
    font-size: 35px;
    line-height: 40px;
    color: #282828;
}

.pr-right {
    width: 50%;
}
.pr-descr {
    display: flex;
}

.pr-descr .pr-title {
    font-weight: 600;
    font-size: 22px;
    line-height: 48px;
    color: #282828;
    padding-right: 15px;
    border-right: 0.5px solid #000000;
}
.pr-descr .pr-price {
    font-weight: bold;
    font-size: 22px;
    line-height: 30px;
    color: #282828;
    padding-left: 12px;
}

.pr-right .pr-rating {
    display: flex;
}

.pr-right .pr-rating img {
    height: 18px;
}

.pr-right .pr-rating .rating-count {
    font-weight: 400;
    font-size: 14px;
    line-height: 13px;
    color: #282828;
    padding: 2px 8px;
}

.small-detail {
    font-weight: 400;
    font-size: 1rem;
    line-height: 35px;
    color: #282828;
    width: 80%;
}

.custom-head {
    font-weight: 700;
    font-size: 18px;
    line-height: 13px;
    color: #282828;
}

.custom-detail {
    display: flex;
    flex-wrap: wrap;
}

.custom-detail .cust-item {
    display: flex;
    align-items: center;
}

.cust-name {
    font-weight: 500;
    font-size: 16px;
    line-height: 35px;
    color: #000000;
    margin-bottom: 0px;
    margin-right: 16px;
}

.cust-btn {
    background: #CC2300;
    color: #FFFFFF;
    text-align: center;
    padding: 4px 9px;
    border-radius: 200px;
    margin-right: 30px;
    font-weight: 400;
    font-size: 12px;
    line-height: 10px;
    cursor: pointer;
}

.counter {
    margin: 10px 0px;
}

.counter .box-container {
    display: flex;
    background: rgba(204, 35, 0, 0.1);
    width: max-content;
    padding: 8px;
    font-size: 16px;
    line-height: 22px;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    color: #CC2300;
    align-items: center;
}

.counter input {
    outline: none;
    border: none;
    width: 50px;
    color: #CC2300;
    background: none;
    border: 0;
    font-size: 16px;
    text-align: center;
    line-height: 0%;
    font-weight: 500;
}

.button-grp {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 20px 0px;
}

.purchase-btn {
    background: #FF9B17;
    border-radius: 110px;
    font-weight: 500;
    font-size: 18px;
    line-height: 13px;
    color: #FFFFFF;
    padding: 16px 30px;
    text-decoration: none;
}

.purchase-btn:hover {
    text-decoration: none;
    color: #fff;
}

.cart-btn:hover {
    text-decoration: none;
    color: #CC2300;
}

.cart-btn {
    border-radius: 110px;
    font-weight: 500;
    font-size: 18px;
    line-height: 13px;
    color: #CC2300;
    padding: 16px 30px;
    text-decoration: none;
    border: 1px solid #CC2300;
}
/*........MY CSS.........*/
.width_35{
    width: 35%;
}

.height_30{
    height: 30px;
}

.width_200{
    width: 200px;
}

.form_create_acct{
    width: 505px;
    height: auto;
}
#my-cart{
    padding-bottom: 20px;
}

#cart_total{
    margin-top: 40px;
}

.sign_in a{
    margin-top: -11px;
}

.flex-grow{
     flex-grow: 0.5 !important;
}

.my_superlogin{
    background-color: black;
    color: white;
    margin-bottom: 10px;
}

.js_usermenu .my_coffee {
    color: #FFC72C;
}

.navbar #top_menu{
    font-size: 18px;
    padding-left: 3%;
}
#top_menu_collapse .nav-item:after{
 content: '';
  position: absolute;
  width: 25px;
  transform: scaleX(0);
  height: 3px;
  bottom: 22px;
  background-color: #de2a05;
}

#top_menu_collapse .nav-item:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.pricelist_right{
    padding-left: 52%;
}
.filter-box {
    margin-right: 50px;
    width: 198.32px;
    height: 68px;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
    background: rgba(162, 162, 162, 0.1);
    color: #A2A2A2;
    border-radius: 7px;
}

.filter-box:hover {
    background: #FF9B17;
    color: #FFFFFF;
}

.filter-text {
    margin: 0px;
    padding: 0px;
}

#banner.banner-img {
    background-image: url('/theme_coffee_shop/static/src/images/coffee.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
}
.text-primary{
    color: black !important;
}
a .a-submit{
    color: white !important;
}
a {
    color: #222831;
}
a:hover {
    color: #0000FF;
}
.frm{
    color: #222831;
}
.star{
color:gold;
}
.bg-white .o_add_wishlist {
  color: white;
  background-color: black;
}

.add_buy span{
    color: white;
}
.add_to {
  background-color: white;
  color: red;
  border-radius: 30px;
  border: 2px solid #f44336;
}
.add_to:hover{
  background-color: white;
  color: red;
  border: 2px solid #f44336;
}
.btn-outline-primary:hover {
    color: white;
    border: yellow;
    background-color: #ffae42;
}
.btn-outline-primary {
   border-radius: 30px;
   color: white;
   border: yellow;
   background-color: #ffae42;
}
.btn-outline-primary i {
    display: none;
}
.btn-primary {
  background-color: #222831 !important;
  border-color: #222831 !important;
  letter-spacing: 2px;
  border-radius: 30px;
}

.btn-primary span {
  padding-left: 5px;
}

.btn-primary:hover {
  background-color: #2c3440 !important;
  border: none;
}

.btn-secondary {
  color: #fff;
  background-color: #222831;
  border-color: #222831;
  border-radius: 30px;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #222831;
  border-color: #222831;
}

.img-pay{
    width: 120%;
}

.cstm_tbl{
    border-bottom-width: 0 !important;
    box-shadow: none !important;
}

.tbl-tbl{
    background-color: transparent;
    width: 120%;
}

.tbl-tbl h3{
    margin: 5%;
}

.btn-color{
    background-color: black;
    border: black;
}
.btn-color:hover{
    background-color: black;
    border: black;
}

.pro-buy{
    margin-left: 5%
}

/*.......*/

.sample{
    width: 100%;
}
.image_td{
    width: 10%;
    padding: 0 !important;
}

/*.....................Cart Page...........................*/

.banner-imgcart {
    background-image: url('/theme_coffee_shop/static/src/images/coffee-mugs-blue-textured-wallpaper.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
}

#my-cart .cart-heading {
    font-size: 20px;
    font-weight: 600;
    position: relative;
}

#my-cart .cart-heading:after {
    content: " ";
    position: absolute;
    background-color: #CC2300;
    border-radius: 10px;
    width: 30%;
    height: 4px;
    bottom: -8px;
    left: 0;
}

.cart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
}

.item-mainhead {
    margin-bottom: 50px;
}

.table-head {
    font-weight: 600;
    font-size: 18px;
    line-height: 14px;
    color: #282828;
}

.table-content {
    align-items: center;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
}


.border_link{
 border: 0px !important;
}

.item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.item-img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    position: relative;
}

.item-img img {
    width: 100%;
    height: 100%;
}

.item-desc {
    display: flex;
    flex-direction: column;
}

.product-indicate {
    width: 16px;
    height: 16px;
    border: 1px solid #03C545;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicate-content {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #03C445;
}

.item-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 13px;
    color: #282828;
}

.item-about {
    font-weight: 400;
    font-size: 16px;
    line-height: 12px;
    text-transform: capitalize;
    color: #FF9B17;

}

.item-price {
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    color: #282828;
    margin-bottom: 0px;
}

.close-circle {
    width: 24px;
    height: 24px;
    background: rgba(204, 35, 0, 0.1);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-circle i {
    color: #CC2300;
}

.next-indicate {
    border: 1px solid #CC2300;
}

.background-indicate {
    background: #CC2300;
}

.continue-shopping {
    margin-bottom: 85px;
    margin-top: 35px;
}

#cart-sum {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
}

.conti-shop {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #282828;
}

.shop-details p {
    font-weight: 300;
    font-size: 14px;
    line-height: 22px;
    color: #282828;
    margin-bottom: 10px;
}

.list-row {
    display: flex;
    justify-content: space-between;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 16px;
}

.list {
    font-weight: 400;
    font-size: 18px;
    line-height: 15px;
    color: #282828;
}

.amount {
    font-weight: 600;
    font-size: 18px;
    line-height: 15px;
    color: #282828;
}

.coupon {
    font-weight: 500;
    font-size: 16px;
    line-height: 15px;
    color: #FF9B17;
    text-decoration-line: underline;
    cursor: pointer;
}

.coupon:hover {
    color: #FF9B17;
    text-decoration-line: underline;
}

.grand-total {
    font-weight: 600;
    font-size: 25px;
    line-height: 34px;
    color: #282828;
}

.btn-ckeckout {
    font-weight: 500;
    font-size: 20px;
    line-height: 15px;
    color: #FFFFFF;
    padding: 18px 70px;
    background: #282828;
    border-radius: 5px;
    margin-bottom: 40px;
    text-align: center;
}

.check-btn {
    display: flex;
    flex-direction: column;
}

.btn-ckeckout:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.mob-close {
    display: none;
    position: absolute;
    right: 0;
    top: -15px;

}

/*..........checkout.................*/

.login-method {
    margin-top: 130px;
    margin-bottom: 30px;
    font-weight: 700;
    font-size: 18px;
    line-height: 15px;
    color: #282828;
}

.login,
.login:hover {
    color: #FF9B17;
    text-decoration: underline;
}

.enter-address {
    font-weight: 600;
    font-size: 25px;
    line-height: 34px;
    color: #282828;

}

.address-add {
    width: 50px;
    height: 50px;
    background: #F0F0F0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-add .add {
    background: #FF9B17;
    height: 3px;
    width: 25px;
}

.login-address {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cartform-group {
    margin-bottom: 0px;
}

.catform-btn:hover {
    background: #282828;
}

.summary {
    font-weight: 600;
    font-size: 25px;
    line-height: 34px;
    color: #282828;
    margin-bottom: 45px;
}

.accordion {
    background-color: transparent;
    color: #282828;
    font-weight: 600;
    line-height: 34px;
    color: #282828;
    margin-bottom: 0px;
    cursor: pointer;
    padding: 0px;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.accordion:focus {
    outline: none;
    border: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
    background-color: transparent;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    margin: 20px 0px;
    padding: 50 0px;
    background-color: none;
    display: none;
    overflow: hidden;
}

.accordion:after {
    font-size: 40px;
    color: #000000;
    float: right;
    margin-left: 5px;
}

.accordion.active:after {
    content: "-";
}
.delivery-accordion:after{
    content: '+';
   color: #FF9B17;
    font-size: 40px;
    background: #eaeaea;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.checkoutlast {
    margin-bottom: 100px;
}

.cartform-right {
    margin-top: 0px;
}

/*.............Contact Us.......................*/
.banner-imgContact {
    background-image: url('/theme_coffee_shop/static/src/images/coffee-bannerimg.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
}

.contact-heading {
    font-size: 20px;
    font-weight: 600;
    position: relative;
}

.contact-heading:after {
    content: " ";
    position: absolute;
    background-color: #CC2300;
    border-radius: 10px;
    width: 30%;
    height: 4px;
    bottom: -8px;
    left: 0;
}

#contact .contact-container {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.get-intouch-left {
    width: 50%;
}

.get-intouch-right {
    margin-top: 0px;
    width: 50%;
    align-items: center;
    justify-content: center;
}

.getin-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.getin-img {
    height: 442px;
    width: 448px;
}

.getin-text {
    width: 448px;
    font-weight: 700;
    font-size: 60px;
    line-height: 83px;
    color: #282828;
}

.getin-img img {
    width: 100%;
    height: 100%;
}

.getin-promise {
    font-weight: 400;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    color: #282828;
    width: 100%;
    padding: 0px 50px;
    margin-bottom: 40px;
    margin-top: 40px;
}

.send-btn {
    align-items: center;
    text-align: center;
    background: #282828;
    border-radius: 5px;
    color: #fff;
    padding: 16px 80px;
    font-weight: 500;
    font-size: 20px;
    line-height: 22px;

}
.send-btn:hover{
    color: white;
    text-decoration: none;
}

#map {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
}

.map-container {
    width: 800px;
    height: 445px;
}

/*..............Shop..........................*/

.banner-imgShop {
    background-image: url('/theme_coffee_shop/static/src/images/coffee-shopimg.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
}

#shopping {
    display: flex;
    margin-bottom: 100px;
    justify-content: space-between;
}

.shop-heading {
    font-weight: 600;
    font-size: 25px;
    line-height: 34px;
    color: #282828;
}

.searching-bar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.product-search {
    width: 20%;
}

.searching-bar input {
    outline: none;
    border: none;
    background: transparent;
    font-weight: 400;
    font-size: 16px;
    line-height: 14px;
    color: #282828;
    width: 100%;
}

.search-result {
    width: 75%;

}

.result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 70px;
}

.shop-procard {
    justify-content: space-between;
}

.shop-pro {
    max-width: 30%;
}

.result-head {
    font-weight: 400;
    font-size: 16px;
    line-height: 14px;
    text-transform: capitalize;
    color: #282828;
}

.sorting {
    display: flex;
    align-items: center;
    gap: 28px;
}

#shopping a:hover {
    text-decoration: none;

}

/* Fixed sidenav, full height */
.sidenav {
    width: 200px;
    background-color: transparent;
    padding-top: 20px;
}

.dropdown-btn {
    padding: 16px 0px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
    color: #282828;
    display: flex;
    align-items: center;
    border-bottom: 0.5px solid #E2E2E2;
    justify-content: space-between;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
    border-left: none;
    border-right: none;
    border-top: none;
    margin-bottom: 20px;
}

.dropdown-btn:after {
    content: '+';
    font-size: 28px;
    color: black;
    font-weight: bold;
    float: right;
}

.dropdown-btn.active:after {
    content: "-";

}

.dropdown-btn:focus {
    outline: none;
}

.main {
    margin-left: 200px;
    font-size: 20px;
    padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {}

.dropdown-container {
    margin: 16px 0px;
    display: none;
    background-color: transparent;
}

.dropdown-container a {
    font-weight: 500;
    font-size: 16px;
    line-height: 35px;
    color: #282828;
    display: block;
}

.dropdown-container a:hover,
a.active {
    color: #FF9B17;
}

.shop-filter {
    display: none;
}


/*.....................About page............*/
.banner-imgAbout {
    background-image: url('/theme_coffee_shop/static/src/images/coffee-mugs-blue-textured-wallpaper.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
}

.abt-about {
    margin-top: 200px;
}

#about-feature {
    margin-bottom: 200px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 100px;
}

.since {
    position: absolute;
    width: 160px;
    height: 160px;
    background: #FFFFFF;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    bottom: 60px;
    left: -100px;
}

.since-text .year {
    font-weight: 700;
    font-size: 60px;
    color: #282828;
}

.since-text .yearsub {
    font-weight: 700;
    font-size: 25px;
    color: #282828;

}

.ab-ftcontainer {
    width: 1119.68px;
    max-width: 100%;

    background: #FFFFFF;
    box-shadow: 5px 5px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 100px;
}

.ft-item {
    margin: 30px 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.ft-img {
    width: 55px;
    height: 80px;
}

.ft-img img {
    width: 100%;
    height: 100%;
}

.ft-descr {
    margin: 10px 0px;
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
    color: #FF9B17;

}

.ft-para {
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    text-transform: capitalize;
    color: #282828;
    width: 250px;
}

#promo-vedio {
    margin-bottom: 200px;
}

.promo-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
    flex-wrap: wrap;
}

.promo-content {
    width: 40%;
}


.promo-head {
    width: 544px;
    font-size: 60px;
    margin-bottom: 40px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
}

.promo-para {
    font-weight: 400;
    font-size: 16px;
    line-height: 35px;
    color: #282828;
    margin-top: 16px;
}

.vedio-container {
    width: 640px;
    height: 300px;
    border-radius: 10px;
}

.vedio-container iframe {
    width: 100%;
    height: 100%;
}

/*................Features Page.........................*/
.banner-imgFeature {
    background-image: url('/theme_coffee_shop/static/src/images/top-view-bowls-with-coffee-beans-powder.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
}

#service {
    margin-bottom: 200px;
}

.service-container {
    display: flex;
    align-items: center;
    justify-content: space-between;


}

.service-content {
    width: 45%;
}

.delivery-img {}

.delivery-img img {
    width: 100%;
    height: 100%;
}

.service-head {
    font-weight: 700;
    font-size: 60px;
    color: #282828;
}

.service-para {
    font-weight: 400;
    font-size: 16px;
    line-height: 35px;
    color: #282828;
}

#other-features {
    margin-bottom: 200px;
}

.service-provide {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 26px;

}

.service-name {
    font-weight: 600;
    font-size: 25px;
    color: #282828;
    width: 200px;
}

.ser-col {
    margin-bottom: 40px;
}

/*.......................................Media qeuery........................................*/



@media(max-width:1184px) {
    .wrapper {
        max-width: 978px;
    }

    #main-content {
        margin-bottom: 100px;

    }


    #menu-card .card {

        justify-content: center;

    }

    .card {

        min-width: 306px;

    }

    .pro {
        min-width: 32%;
    }

    .pro {
        padding: 30px;
    }

    .pro-details .desc-head {
        font-size: 24px;

    }

    .pro-para {
        font-size: 18px;
    }

    #product .pro-head {
        text-align: center;

    }

    .price p {
        font-size: 30px;

    }


    .pro-card {

        gap: 70px;
    }


    .pro-btn {
        font-size: 16px;
    }

    .pr-right {
        width: 60%;
    }

    .promo-content {
        width: 75%;
    }

    .promo-container {
        gap: 80px;
    }

    .pro-vedio {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .shop-procard {
        justify-content: center;
        gap: 0px;
    }

    .shop-pro {
        min-width: 75%;
    }

    .product-search {
        width: 50%;
    }

    .sidenav {
        width: 300px;
    }

    .service-head {
        font-size: 52px;
    }
}



@media(max-width:1024px) {

    #offer .offer-content {
        width: 460px;
        height: 330px;
    }

    .since {
        display: none;
    }
}
@media(max-width:1017px) {
    .wrapper {
        max-width: 900px;
    }

    #main-content .left-section .main-head {
        width: 82%;
    }

    .service-head {
        font-size: 46px;
    }

    .service-content {
        width: 65%;
    }

    #main-content .right-section .landing-img:nth-child(3) p {
        width: max-content;
    }

    .col-ch {
        max-width: 47%;
    }
    .img-box {

        height: 450px;

    }
    .img-box:nth-child(2) {

        height: 350px;
    }
    .img-box:nth-child(3) {

        height: 280px;
    }
}

@media(max-width:992px) {
    #about-us .about-main {
        font-size: 46px;
    }

    #about-us .about-para {
        line-height: 30px;
        width: 83%;
    }
}

@media(max-width:984px) {
    .wrapper {
        max-width: 798px;
        margin: 0 auto;
    }
}

@media(max-width:980px) {
    .nav-bar ul {
        background: #fff8e3;
        display: block;
        position: fixed;
        top: 100px;
        width: 300px;
        height: 90vh;
        right: -300px;
    }

    .nav-bar ul.active {
        display: block;
        right: 0px;
    }

    .nav-bar ul li {
        text-align: center;
        margin: 20px;
    }

    .menu {
        display: block;
    }

    .mobile {
        display: block;
    }

    .navbar-mob-icon {
        display: flex;
        gap: 20px;
    }

    .mob-navig {
        display: flex;
        gap: 20px;
    }

    .navbar-icon {
        display: block;
    }

    .notify-icon {
        display: none;
    }

    .wrapper {
        max-width: 796px;
        margin: 0 auto;
    }

    #main-content {
        margin-bottom: 0px;

    }

    #main-content .left-section .main-head {
        font-size: 42px;
        margin-bottom: 50px;
    }

    #main-content .left-section {
        width: 40%;
    }

    #main-content button {
        padding: 16px 20px;
        font-size: 16px;
    }

    #main-content .right-section .landing-img:nth-child(3) p {
        width: max-content;
        margin: 0px;
        text-align: center;
    }

    .img-box {
        height: 429px;
    }
    .img-box:nth-child(2) {
        height: 353px;
    }
    .img-box:nth-child(3) {
        height: 273px;
    }

    #about-us .about-main {
        font-size: 40px;
    }

    #about-us p {
        line-height: 32px;
        width: 88%;
    }

    #about-us button {
        padding: 16px 24px;
        bottom: -25px;
        left: 50px;
    }

    #menu-card .card {
        flex-direction: column;
    }

    .pro {
        min-width: 259px;
    }

    .team-details {
        padding-left: 0px;
    }

    #team .team-head {
        font-size: 50px;
        font-weight: 700;
    }

    #team .heading:after {
        bottom: 12px;
    }

    #team .team-img .main-head {
        font-size: 36px;
        font-weight: 600;
    }

    #team .team-img .sub-head {
        font-size: 20px;
    }

    #team .social-icon {
        padding-right: 6px;
    }

    .col-ch {
        max-width: 47%;
    }

    #testimonial .team-head {
        font-size: 44px;
    }

    .p-describe {
        width: 100%;
    }
    #testimonial .testimonial-content {
        width: 594px;
        gap: 40px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .main-des {
        font-size: 36px;
    }

    #form-section .form-btn {
        padding: 12px 65px;
        font-size: 24px;
    }

    .banner-head {
        font-size: 36px;
    }

    .filter {
        justify-content: center;
    }

    #Sliding {
        justify-content: center;
    }


    #product-details .pr-container {
        align-items: center;
        gap: 30px;
        flex-direction: column;
    }

    #product-details {
        margin-top: 74px;
    }

    #product-details .pr-img {
        width: 80%;
    }

    .pr-right {
        width: 80%;
    }

    .counter input {
        width: 40px;
    }

    #contact .contact-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .get-intouch-left {
        width: 100%;
    }

    .get-intouch-right {
        width: 100%;
        margin-top: 70px;
    }

    .getin-img {
        display: none;
    }

    .ab-ftcontainer {
        gap: 50px;
    }

    .shop-pro {
        min-width: 75%;
    }

    .service-content {
        width: 70%;
    }

}

@media(max-width:967px) {
    #about-us .about-main {
        font-size: 55px;
    }

    #about-us .about-para {
        line-height: 30px;
        width: 80%;
    }

    #form-section .main-head {
        font-size: 50px;
    }

    .wrapper {
        max-width: 720px;
    }

    .service-content {
        width: 100%;
    }

    .service-container {
        margin-top: 20px;
    }
    .img-box:nth-child(1) {
        width: 443px;
    }
    .img-box:nth-child(2) {
        height: 303px;
    }
    .img-box:nth-child(3) {
        height: 229px;
    }
    #main-content .right-section .img-box:nth-child(3) p {

        left: -27px;
    }
}

@media(max-width:925px) {
    #about-us .about-para {
        width: 100%;
    }
}


@media(max-width:830px) {
    #main-content {
        height: 80vh;
    }

    .abt-row {
        flex-direction: column;
    }

    .landing-aboutleft {
        display: block;

    }

    .about-right {
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .abt-about-img {
        width: 60%;
    }

    .promo-content {
        width: 80%;
    }

}


@media(max-width:768px) {
    .wrapper {
        max-width: 600px;
        margin: 0 auto;
    }

    #main-content .left-section .main-head {
        width: 92%;
    }
    #main-content .right-section  p {
        font-size: 22px;
    }

    #main-content {

        height: 62vh;
    }
    .img-box {
        height: 309px;
    }
    .img-box:nth-child(2) {
        height: 256px;
    }
    .img-box:nth-child(3) {
        height: 207px;
    }
    #main-content .right-section .img-box:nth-child(3) p {

        left: -36px;
    }
    #about-us .about-main {
        font-size: 34px;
    }

    #about-us .about-img {
        position: static;
    }

    #about-us .about-para {
        line-height: 30px;
        width: 93%;
    }

    #about-us button {
        margin-top: 50px;
        padding: 12px 46px;
        position: static;
    }

    .landing-about {
        max-width: 624px;
    }

    #menu-card .card {
        min-width: 40%;
    }

    #product {
        margin-bottom: 120px;
    }

    .price p {
        font-size: 24px;
    }

    #team {
        margin-bottom: 100px;
    }

    #team .heading:after {
        bottom: 45px;
    }

    #team .team-img {
        min-width: 95%;
    }

    .form-6 {
        max-width: 90%;
        flex: 1 0 50%;
    }

    .form-img {
        display: none;
    }

    .p-describe {
        width: 100%;

    }

    #testimonial .testimonial-content {

        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .main-des {
        font-size: 30px;
    }

    .p-para {

        font-size: 14px;
        line-height: 26px;
    }

    .pro-card {
        gap: 25px;
    }

    .pro {
        margin: 12px;
    }

    #testimonial .testimonial-content {
        padding: 24px 42px;
    }

    .banner-head {
        font-size: 46px;
    }

    .item {
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .mob-cart {
        display: none;
    }

    .pr-mob {
        max-width: 100%;
        flex: 1 0 100%;
    }


    .mob-col {
        text-align: end;
    }

    .remove {
        display: none;
    }

    #cart-sum {
        flex-direction: column-reverse;
    }

    .mob-close {
        display: block;
        color: #CC2300;
    }

    .checkoutmob-col {
        max-width: 100%;
        flex: 1 0 50%;
    }

    .cartform-right {
        flex: 1 0 50%;
        max-width: 100%;
    }

    .getin-text {
        font-size: 54px;
    }

    #about-us .about-img {
        width: 100%;
    }

    .abt-mr {
        width: 80%;
    }

    .sidenav {
        width: 200px;
    }

    .shop-pro {
        min-width: 100%;
    }

    .result-head {
        font-weight: 500;
        font-size: 14px;
    }

    .sorting {
        gap: 14px;
    }

    .service-container {
        flex-direction: column;
    }

    #service {
        margin-bottom: 100px;
    }

    #other-features {
        margin-bottom: 100px;
    }

    .shopping-cart.showcart {
        right: 10px;
    }

    .shopping-cart {
        width: 75%;
        height: auto;
    }

    .cart-box .cartremove {
        display: block;
    }

    .cart-box {
        margin: 20px;
    }

    .cart-name {
        font-size: 18px;
    }

    .cart-box .cart-border {
        margin-bottom: 0px;
    }

    .items-cart {
        margin: 6px 8px;
        gap: 0px;
    }

    .cart-buttons {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }

    .cart-buttons button {

        font-size: 16px;
        width: 100%;
    }

    .cartview {
        padding: 12px 6px;
    }
}

@media(max-width:649px) {
    #team .team-img {
        min-width: 95%;
    }

    .login-form-container form {
        width: 400px;
        height: auto;
    }

    #main-content .right-section  p {
        font-size: 22px;
        bottom: 18px;
    }

    .form-content {
        margin: 29px 41px;
    }

    .login-form-head {
        font-size: 22px;
    }

    .login-google {
        font-size: 18px;
    }

    .login-or {
        font-size: 14px;
    }

    .login-input {
        padding: 12px 24px;
    }

    .frgt-text {
        font-size: 14px;
    }

    .register {
        font-size: 14px;
    }
}
@media(max-width:640px) {
    .wrapper {
        max-width: 580px;
        margin: 0 auto;
    }
}

@media(max-width:630px) {
    .wrapper {
        max-width: 480px;
        margin: 0 auto;
    }

    #main-content .left-section .main-head {
        width: 100%;
    }

    .shop-filter {
        font-size: 22px;
        cursor: pointer;
        display: block;
    }

    .service-para {
        font-size: 14px;
    }

    #shopping {
        flex-direction: column;
    }

    .product-search {
        width: 100%;
    }

    .sidenav {
        width: 100%;
    }

    .search-result {
        width: 100%;
        margin-top: 50px;
    }

    .pr-categories {
        display: none;
    }
}


@media(max-width:630px) {
    #team .heading:after {
        bottom: 6px;
    }

    #testimonial .testimonial-content {
        width: 498px;
    }

    #main-content button {
        padding: 16px;
        font-size: 20px;
    }

    #main-content {
        height: unset;
    }

    .main-row {
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    #main-content .left-section {
        margin-top: 40px;
        max-width: 100%;
    }

    #main-content .right-section {
        max-width: 100%;
        margin-bottom: 100px;
    }

    #about-us button {
        padding: 12px 22px;
    }

}

@media(max-width:575px) {
    .wrapper {
        max-width: 420px;
        margin: 0 auto;
    }

    #main-content .left-section .main-head {
        width: 46%;
    }

    #main-content .right-section  p {
        font-size: 18px;
    }
    #main-content .right-section .img-box:nth-child(3) p {
        left: -21px;
    }

    #about-us button {
        width: 100%;
    }

    .main-row {
        flex-direction: column;
    }

    #main-content {
        height: auto;
    }

    #main-content .left-section {
        width: 100%;
    }

    .about-left {
        min-width: 100%;
    }

    .about-right {
        min-width: 100%;
    }
}

@media(max-width:540px) {
    .wrapper {
        max-width: 400px;
        margin: 0 auto;
    }

    .form-6 {
        max-width: 100%;
    }

    #about-us button {
        padding: 12px 130px;
    }

    #banner {
        height: 230px;
    }

    .accordion {
        font-size: 22px;
    }


    .btn-ckeckout {
        font-size: 19px;
    }

    #offer .offer-content {
        width: 350px;
        height: 240px;
    }

    .since {
        bottom: -74px;
        left: 139px;
        box-shadow: 5px 5px 10px -6px rgba(0, 0, 0, 0.1);
    }

    .promo-content {
        width: 100%;
    }

    .promo-head {
        font-size: 56px;
    }

    #about-us .about-para {
        font-size: 14px;
        line-height: 30px;
        width: 100%;
    }

    #testimonial .testimonial-content {
        width: 400px;
    }
}

@media(max-width:500px) {
    .wrapper {
        max-width: 335px;
    }

    #about-us button {
        width: auto;
    }

    #main-content {
        margin-bottom: 0px 0px;
        height: auto;
    }

    .main-row {
        gap: 50px;
    }

    #main-content .left-section {
        min-width: 100%;
        margin: 10px 0px;
    }

    #main-content .right-section {
        min-width: 100%;
        margin-bottom: 100px;
        padding:0px ;
    }

    #main-content .left-section .main-head {
        width: 56%;
        margin-bottom: 30px;
    }

    .gallery {
        gap: 18px;
    }

    #main-content .right-section .landing-img p {
        font-size: 20px;
        bottom: 16px;

    }

    #main-content button {
        padding: 14px;
        width: 90%;
    }

    #main-content .right-section .landing-img:nth-child(3) p {
        margin: -22px;
        bottom: 100px;
    }

    #team .team-img {
        min-width: 85%;
    }

    #about-us {
        margin-bottom: 150px;
    }

    .about-left {
        min-width: 100%;
    }

    .about-right {
        min-width: 100%;
    }

    #about-us button {
        position: absolute;
    }

    #about-us button {
        padding: 12px 25px;
        left: 75px;
    }

    #product {
        margin-bottom: 75px;
    }

    #team {
        margin-bottom: 100px;
    }

    .pro {
        min-width: 100%;
        margin: 20px;
    }

    #product .pro-head {
        font-size: 34px;
        text-align: center;
    }

    #testimonial {
        margin-bottom: 100px;
    }

    #testimonial .team-head {
        font-size: 40px;
    }

    #form-section {
        margin-bottom: 100px;
    }

    #form-section .main-head {
        font-size: 48px;
    }

    #team .team-img .main-head {
        font-size: 28px;
    }

    #team .team-img .sub-head {
        font-size: 18px;
    }

    #team .social-icon i {
        font-size: 22px;
    }

    #team .team-img {
        min-width: 100%;
    }

    #banner {
        margin-bottom: 60px;
    }

    .banner-content {
        align-items: center;
    }

    .banner-head {
        font-size: 36px;
    }

    .filter {
        gap: 18px;
    }

    .filter-box {
        width: 142.32px;
        height: 42px;
        font-weight: 500;
        font-size: 16px;
    }

    #offer .offer-content {
        width: 345px;
        height: 245px;
    }

    #offer .off-details .off-main {
        font-weight: 600;
        font-size: 28px;
        line-height: 24px;
    }

    .off-details .off-price {
        font-weight: 400;
        font-size: 18px;
        line-height: 10px
    }

    .offer-btn {
        font-size: 20px;
        line-height: 10px;
        color: #282828;
        padding: 8px 24px;
    }

    .small-detail {
        width: 100%;
    }

    .cust-name {
        font-size: 15px;
        line-height: 34px;
        margin-right: 10px;
    }

    .counter .box-container {
        padding: 6px;
        line-height: 20px;
    }

    .button-grp {
        gap: 20px;
        flex-wrap: wrap;
    }

    .purchase-btn {
        font-size: 14px;
        padding: 12px 24px;
    }

    .cart-btn {
        font-size: 14px;
        padding: 12px 24px;
    }

    .btn-ckeckout {
        font-size: 18px;
        line-height: 12px;
        padding: 18px 32px;

    }

    #banner {
        height: 200px;
    }

    .login-method {
        margin-top: 70px;
        font-size: 16px;
    }

    .enter-address {
        font-size: 20px;
        line-height: 24px;
    }

    .address-add {
        width: 40px;
        height: 40px;
    }

    .address-add .add {
        width: 20px;
    }

    .cartform-right {
        margin-top: 60px;
    }

    .accordion {
        font-size: 20px;
    }

    .accordion:after {
        font-size: 35px;
    }

    .getin-text {
        width: 300px;
        font-size: 40px;
        line-height: 58px;
    }

    .getin-promise {
        padding: 0px 6px;
    }

    #promo-vedio {
        margin-bottom: 100px;
    }

    #about-feature {
        margin-bottom: 100px;
    }

    .ab-ftcontainer {
        gap: 0px;
    }

    .promo-content {
        width: 100%;
    }

    .promo-head {
        font-size: 42px;
    }

    .since {
        bottom: -50px;
        left: 95px;
    }

    .abt-mr {
        margin: 30px;
    }

    .service-head {
        font-size: 36px;
    }

    .service-name {
        font-size: 24px;
    }

    .service-provide {
        margin-bottom: 10px;
    }

    .service-para {
        line-height: 30px;
    }

    .ser-col {
        margin-bottom: 24px;
    }

    .login-form-container form {
        width: 80%;
        height: auto;
    }

    #testimonial .testimonial-content {
        width: 98%;
    }
}

@media(max-width:465px) {

    .form-content {
        margin: 20px 16px;
    }

    .login-form-head {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .login-close {
        font-size: 16px;
        right: 12px;
        top: 12px;
    }

    .login-google {
        font-size: 14px;
        padding: 10px 12px;
    }

    .login-google img {
        display: none;
    }

    .login-or {
        font-size: 12px;
        margin-top: 19px;
        margin-bottom: 25px;
    }

    .login-input {
        font-size: 12px;
        padding: 8px;
    }

    .password-settings label {
        font-size: 10px;
    }

    .frgt-text {
        font-size: 10px;
    }

    .password-settings {
        margin-bottom: 24px;
    }

    .register {
        margin-top: 12px;
        font-size: 12px;
    }

    .create-one {
        font-size: 12px;
        display: block;
    }
}

@media(max-width:396px) {
    #team .team-img {
        min-width: 95%;
    }

    #team .team-head {
        font-size: 42px;
    }

    #team .heading:after {
        bottom: 24px;
    }

    .getin-text {
        font-size: 32px;
    }

    #main-content .left-section .main-head {
        width: 59%;
    }
}


@media(max-width:365px) {
    .wrapper {
        max-width: 290px;
    }

    #main-content .left-section .main-head {
        font-size: 36px;
    }

    .img-box:nth-child(1) {
        width: 443px;
    }
    #main-content .right-section .landing-img p {
        font-size: 16px;
        bottom: 0px;
    }

    #offer .offer-content {
        width: 300px;
        height: 200px;
    }

    #form-section .main-head {
        font-size: 42px;
    }

    #team .team-img {
        height: 230px;
    }

    #team .heading:after {
        bottom: -3px;
    }

    #form-section .form-btn {
        padding: 12px 93px;
    }

    .cust-name {
        font-size: 12px;
    }

    .login-method {
        font-size: 15px;
    }

    .enter-address {
        font-size: 18px;
        line-height: 22px;
    }

    .accordion {
        font-size: 16px;
    }

    .accordion:after {
        font-size: 33px;
    }


    .since {
        left: 76px;
    }

    .abt-mr {
        margin: 35px;
    }
}


@media(max-width:320px) {
    .wrapper {
        max-width: 284px;
    }

    #main-content .left-section .main-head {
        font-size: 42px;
    }
    .img-box {
        height: 200px;
    }
    .img-box:nth-child(2) {
        height: 158px;
    }
    .img-box:nth-child(3) {
        height: 107px;
    }

    #main-content .right-section  p {
        font-size: 13px;
    }
    #main-content .right-section .img-box:nth-child(3) p {
        left: -16px;
        bottom: 27px;
    }
    #form-section .main-head {
        font-size: 32px;
    }

    #about-us .about-main {
        font-size: 32px;
    }

    #team .team-head {
        font-size: 42px;
    }

    #about-us button {
        left: 55px;
    }

    #team .team-img .sub-head {
        font-size: 16px;
    }
    #offer .offer-content {
        width: 280px;
        height: 200px;
    }

    #team .team-img {
        height: 220px;
    }

    #form-section .main-head {
        font-size: 41px;
    }

    .btn-ckeckout {
        font-size: 16px;
        padding: 18px 26px;
    }

    .item-name {
        font-size: 14px;
        line-height: 11px;
    }

    .item-about {
        font-size: 14px;
        line-height: 10px;
    }

    .item-price {
        font-size: 16px;
    }

    .counter input {
        width: 36px;
        font-size: 15px;
    }

    .since {
        left: 75px;
    }

    .accordion:after {
        font-size: 30px;
    }

    .shopping-cart {
        width: 90%;
        height: auto;
    }

    .close-circle {
        width: 16px;
        height: 16px;
    }
}

@media(max-width:312px) {
    .wrapper {
        max-width: 230px;
    }

    #main-content button {
        padding: 10px;
        font-size: 16px;
    }

    #about-us button {
        left: 34px;
    }

    #about-us .about-main {
        font-size: 30px;
    }

    #menu-card .card span {
        font-size: 14px;
    }

    #product .pro-head {
        font-size: 32px;
    }
    #offer .offer-content {
        width: 250px;
        height: 200px;
    }

    .pro {
        padding: 16px;
    }

    .pro-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    #team .team-head {
        font-size: 36px;
    }

    #team .team-img {
        height: 186px;
    }

    #team .team-img .main-head {
        font-size: 24px;
    }

    #team .team-img .sub-head {
        font-size: 14px;
    }

    #team .social-icon i {
        font-size: 15px;
    }

    #testimonial .team-head {
        font-size: 33px;
    }

    .testimonial-content .persons .p-img {
        height: 100px;
        width: 100px;
    }

    .sub-address {
        font-size: 16px;
    }

    #testimonial .testimonial-content {
        gap: 20px;
    }

    .review-star {
        height: 16px;
        width: 16px;
    }

    .main-des {
        font-size: 25px;
    }

    .p-para {
        font-size: 12px;
    }

    .p-name {
        font-size: 17px;
    }

    #form-section .main-head {
        font-size: 33px;
    }

    #form-section .form-btn {
        padding: 10px 64px;
        font-size: 20px;
    }

    .banner-head {
        font-size: 30px;
    }

    .service-head {
        font-size: 25px;
    }

    .service-para {
        font-size: 12px;
        line-height: 27px;
    }

    .service-name {
        font-size: 20px;
    }

    .getin-text {
        font-size: 24px;
    }

    #main-content .left-section .main-head {
        font-size: 31px;
    }
}
@media(max-width: 980px) {
    .getin-img {
        height: auto !important;
        width: auto !important;
        display: flex !important;
    }
}
