/* media css */
@media (max-width: 991px){
  .topbar{
    padding: 20px 40px 10px;
    }
  .home-hero-wrapper{
    height: 465px !important;
  }
  .home-content-row{
    top: 10rem;
    left: 0rem;
  }
  .side-nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
  }
  .side-nav li{
    margin-bottom: 0;
  }
  .side-nav .social-grid{
    justify-content: center;
    display: flex;
    gap: 10px;
    width: 100%;
  }
   /* for intro */
  .intro-image{
    height: 21rem;
    padding: 0;
  }
  .intro-leftside{
    width: 65%;
  }
  .into-top{
    top: 30px;
  }
  .into-bottom{
    top: 250px;
  }
  .intro-title{
    font-size: 1.7rem;
    margin-bottom: 20px;
  }
  .intro-description{
    font-size: 0.7rem;
    margin: 0;
  }
  .intro-btn{
    margin-top: 0.4rem;
    width: 30% !important;
  }
  .intro-btn p{
    font-size: 10px;
  }
  /* since section */
  .since-intro-image{
    height: 21rem;
    padding: 0;
  }
  .since-intro-center{
    width: 50%;
  }
  .since-into-top{
    top: 150px;
  }
  .since-intro-title{
    font-size: 1rem;
    margin-bottom: 20px;
  }
  .since-intro-description{
    font-size: 10px;
    margin-bottom: 7px;
  }
  /* about-section */
  .about-intro-image{
    height: 335px;
    padding: 0;
  }
  .about-intro-center{
    width: 55%;
    left: 40%;
    margin-top: 65px;
  }
  .about-intro-title{
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
  .about-intro-description {
    font-size: 10px;
 }
  /* subscribe section */
 .subscribe-section{
    padding: 60px 0px;
  }
  .subscribe-leftside{
    text-align: center;
  }
  .col-lg-6 img{
    max-width: 80%;
    margin-top: 30px;
  }

  /* about page hero section */
  .aboutus-hero-wrapper{
    height: 766px;
  }
  .aboutus-content-row{
    top: 10rem;
    gap: 0.7rem;
    width: 85% !important;
    height: 69%;
  }
  .aboutus-title{
    font-size: 1.6rem;
  }
  .aboutus-heading{
    font-size: 0.9rem;
  }

  /* ourteam page hero section */
  .ourteam-hero-wrapper{
    height: 725px;
  }
  .ourteam-content-row{
    top: 13.5rem;
    gap: 0.7rem;
    width: 85% !important;
    height: 69%;
  }
  .members-panel{
    padding: 20px 15px 15px;
  }
  .members-title{
    font-size: 1.6rem;
  }
  .members-card{
    height: 140px;
  }
  .members-card-details-main{
    height: 140px;
  }
  .members-center-label{
    font-weight: 400;
    font-size: 0.7rem;
    line-height: 1.4;
    padding-bottom: 2px;
  }
  .members-center-dis {
    font-weight: 400;
    font-size: 0.6rem;
    margin: 5px 0px;
  }
  .social{
    gap: 0.5rem
  }

  /* gallery page hero section */
  .gallery-hero-wrapper{
    height: 725px;
  }
  .gallery-content-row{
    top: 13.5rem;
    gap: 0.7rem;
    width: 85% !important;
    height: 69%;
  }
  .gallery-title{
    font-size: 1.6rem;
    margin-bottom: 10px;
  }
  .product-label{
    width: 95%;
    font-weight: 500;
    font-size: 0.8rem;
  }
  .product-center-label{
    font-weight: 400;
    font-size: 0.7rem;
    line-height: 1.4;
    padding-bottom: 2px;
  }
  .product-card-details p{
    font-weight: 400;
    margin: 5px 0px;
  }

  /* contact page hero section */
  .contact-hero-wrapper{
    height: 725px;
  }
  .contact-content-row{
    top: 13.5rem;
    gap: 0.7rem;
    width: 85% !important;
    height: 69%;
  }
  .contact-title{
    font-size: 1.6rem;
  }
}

@media (min-width:480px) and (max-width: 767px){
  .topbar{
    padding: 15px 20px 10px;
    position: relative;
    background: #f9f9f8;
    }
  .topbar .d-flex{
    width: 100% !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .finzaraa-logo{
    max-width: 160px;
  }
  .contact-info{
    flex-direction: column;
    align-items: center;
    gap: 6px !important;
    padding-top: 0 !important;
  }
  .home-hero-wrapper{
    height: 360px !important;
  }
  .home-content-row{
    top: 4rem;
    left: 0;
    width: 90% !important;
    justify-content: center;
  }
  .side-nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
  }
  .side-nav li{
    margin-bottom: 0;
  }
  .social-grid{
    justify-content: center;
    display: flex;
    gap: 10px;
  }
   /* for intro */
  .intro-image{
    height: 19rem;
  }
  .intro-leftside{
    width: 75%;
  }
  .into-top{
    top: 30px;
  }
  .into-bottom{
    top: 230px;
  }
  .introduction-eyebrow{
    font-size: 0.6rem;
  }
  .intro-title, .since-title{
    font-size: 1.3rem;
    margin-bottom: 15px;
  }
  .intro-description, .since-description{
    font-size: 7px;
  }
  .intro-btn{
    width: 25% !important;
    padding: 0.2rem !important;
  }
  /* since section */
  .since-intro-image{
    height: 19rem;
  }
  .since-intro-center{
    width: 80%;
  }
  .since-into-top{
    top: 127px;
  }
  .since-intro-title{
    font-size: 1.6rem;
    margin-bottom: 15px;
  }
  .since-intro-description{
    font-size: 8px;
  }
  /* about-section */
  .about-intro-image{
    height: 312px;
    margin-top: 30px;
  }
  .about-intro-center{
    width: 52%;
  }
  .about-intro-title{
    font-size: 1rem;
    margin-bottom: 15px;
  }
  .about-eyebrow{
    font-size: 0.5rem;
  }
  .about-intro-description{
    font-size: 8px;
  }
  /* testimonials section */
  .testimonial-row-flex{
    flex-direction: column;
    gap: 15px;
  }
  .testimonial-card{
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
  }
  .testimonials-leftside{
    text-align: center;
  }
  .testimonials-user-image{
    margin: 0 auto;
  }
  /* subscribe section */
  .subscribe-content-row{
    width: 90% !important;
  }
  .subscribe-title{
    font-size: 1.8rem;
  }
  .subscribe-description{
    font-size: 11px;
  }
  .subscribe-btn{
    font-size: 15px;
    padding: 12px !important;
    width: 40% !important;
  }
  .form-group input{
    padding: 10px !important;
  }
  .col-lg-6 img{
    max-width: 70%;
  }

  /* about page hero section */
  .aboutus-content-row{
    position: relative;
    top: 4rem !important;
    left: 0;
    width: 90% !important;
    height: 87% !important;
    scrollbar-width: none !important;
  }
  .aboutus-content-row .col-lg-3,
  .aboutus-content-row .col-lg-9{
    width: 100%;
  }
  .side-nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
  }
  .side-nav li{
    margin-bottom: 0;
  }
  .social-grid{
    justify-content: center;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  .aboutus-panel{
    padding: 20px 20px 25px !important;
    height: auto !important;
  }
  .aboutus-title{
    font-size: 1.4rem;
  }
  .aboutus-heading{
    font-size: 0.85rem;
  }

  /* ourteam page hero section */
  .ourteam-content-row{
    top: 4rem;
    left: 0;
    width: 90% !important;
    height: 89%;
    scrollbar-width: none;
  }
  .ourteam-content-row .col-lg-3,
  .ourteam-content-row .col-lg-9{
    width: 100%;
  }
  .side-nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
  }
  .side-nav li{
    margin-bottom: 0;
  }
  .social-grid{
    justify-content: center;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  .members-panel{
    padding: 20px 15px 20px;
  }
  .members-title{
    font-size: 1.4rem;
  }
  .members-col{
    width: 50%;
  }
  .members-card{
    height: 160px;
  }
  .members-card-details-main{
    height: 160px;
  }

  /* gallery page hero section */
  .gallery-content-row{
    top: 4rem;
    left: 0;
    width: 90% !important;
    height: 89% !important;
    scrollbar-width: none;
  }
  .product-card-details p{
    font-size: 0.6rem;
  }
  .product-col {
    width: 50%;
  }

  /* contact page hero section */
  .contact-content-row{
    top: 4rem;
    gap: 0.7rem;
    height: 89%;
    scrollbar-width: none;
  }
  .contact-title{
    font-size: 1.6rem;
  }
}

@media (max-width: 480px){
  .topbar{
    padding: 12px 15px 10px;
  }
  .finzaraa-logo{
    max-width: 65px;
  }
  .contact-info{
    font-size: 0.3rem;
  }
  .home-hero-wrapper{
    height: 225px !important;
  }
  .home-content-row{
    top: 5rem;
  }
  .side-nav a, .side-nav a i{
    margin-right: 3px;
    font-size: 0.5rem;
  }
  .social-grid a{
    width: 25px;
    height: 25px;
  }
  .side-nav ul{
    gap: 5px;
    margin-bottom: 3px;
  }
  /* for intro */
  .intro-image{
    height: 11rem;
  }
  .intro-leftside{
    width: 70%;
  }
  .into-top{
    top: 20px;
  }
  .into-bottom{
    top: 125px;
  }
  .introduction-eyebrow{
    font-size: 0.3rem;
  }
  .intro-title, .since-title{
    margin-top: 0.2rem;
    font-size: 0.8rem;
  }
  .intro-description, .since-description{
    font-size: 5px;
  }
  .intro-btn{
    width: 25% !important;
    padding: 0rem !important;
  }
  .intro-btn p {
    font-size: 7px;
  }
  /* since section */
  .since-intro-image{
    height: 11rem;
  }
  .since-intro-center{
    width: 50%;
  }
  .since-into-top{
    top: 72px;
  }
  .since-intro-title{
    font-size: 0.8rem;
    margin-bottom: 2px !important;
  }
  .since-intro-description{
    font-size: 5px;
    margin-bottom: 3px;
  }
  /* about-section */
  .about-intro-image{
    height: 174px;
    margin-top: 10px;
  }
  .about-intro-center{
    width: 45%;
    margin-top: 30px;
  }
  .about-intro-title{
    font-size: 0.8rem;
    margin-bottom: 3px !important;
  }
  .about-eyebrow{
    font-size: 0.5rem;
  }
  .about-intro-description{
    font-size: 6px;
  }
   /* testimonials section */
   .testimonials-background{
    height: 25rem;
    padding: 30px 0;
  }
   .testimonial-card{
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
  }
  .testimonials-user-image{
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
  }
  .testimonials-eyebrow{
    font-size: 0.77rem;
    margin-bottom: 0px;
  }
  .testimonials-heading{
    font-size: 1.7rem;
    margin-bottom: 12px;
  }
  .testimonial-title{
    font-size: 1rem;
  }
  .testimonial-text{
    font-size: 0.55rem;
    line-height: 1.6;
  }
  .testimonial-arrow{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  /* subscribe section */
  .subscribe-eyebrow{
    font-size: 0.77rem;
    margin-bottom: 0px;
  }
  .subscribe-section{
    padding: 40px 0px;
  }
  .subscribe-title{
    font-size: 1.5rem;
  }
  .subscribe-btn{
    width: 85% !important;
    padding: 10px !important;
  }
  .col-lg-6 img{
    max-width: 90%;
  }

  /* about page hero section */
  .aboutus-content-row {
   top: 7rem !important;
   gap: 0.7rem;
   height: 83% !important;
   scrollbar-width: none;
  }
  .aboutus-eyebrow{
    font-size: 0.75rem;
  }
  .aboutus-title{
    font-size: 1.2rem;
  }
  .aboutus-heading{
    font-size: 0.8rem;
  }
  .aboutus-panel p{
    font-size: 12px;
  }

  /* ourteam page hero section */
  .ourteam-content-row{
    top: 7rem !important;
    height: 83%;
    scrollbar-width: none;
  }
  .ourteam-eyebrow{
    font-size: 0.75rem;
  }
  .members-title{
    font-size: 1.2rem;
  }
  .members-col{
    width: 100%;
  }
  .members-card{
    height: 200px;
  }
  .members-card-details-main{
    height: 200px;
  }
  .members-center-label{
    font-size: 0.8rem;
  }
  .members-center-dis{
    font-size: 0.65rem;
  }

  /* gallery page hero section */
  .gallery-content-row {
   top: 7rem !important;
   gap: 0.7rem;
   height: 83% !important;
   scrollbar-width: none !important;
  }
  .gallery-eyebrow{
    font-size: 0.75rem;
  }
  .gallery-title{
    font-size: 1.2rem;
  }
  .gallery-heading{
    font-size: 0.8rem;
  }
  .product-card {
    height: 200px;
  }
  .product-card-details-main{
    height: 200px;
  }
  .product-card-details p{
    font-size: 12px;
  }

  /* contact page hero section */
  .contact-content-row{
    top: 7rem;
    gap: 0.7rem;
    height: 83% !important;
    scrollbar-width: none !important;
  }
  .contact-title{
    font-size: 1.6rem;
  }
}