/* RESPONSIVE */
@media (max-width: 1399px) {
  .benefit-section.active .benefit-list-left {
    transform: translate(0, 0%) scale(0.8);
  }

  .benefit-section.active .benefit-list-right {
    transform: translate(0, 0%) scale(0.8);
  }
}

@media (max-width: 1199px) {
  .benefit-section.active .benefit-list-left {
    transform: translate(0, 0%) scale(0.7);
  }

  .benefit-section.active .benefit-list-right {
    transform: translate(0, 0%) scale(0.7);
  }
}

@media (max-width: 992px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  body {
    background: repeating-linear-gradient(90deg,
        #e2f4fc 0px,
        #e2f4fc 75px,
        #d2eef9 75px,
        #d2eef9 150px);
  }

  .desctop-element {
    display: none;
  }

  .mobile-element {
    display: block;
  }

  .banner-parallax-img.mobile-element {
    opacity: 1;
  }

  #header {
    height: 60px;
    padding: 0 16px;
    transform: translateY(-120%);
  }

  .header-inner-div {}

  .logo a img {
    width: 82.2px;
    height: 40px;
  }

  .menu-container {
    border-radius: 31.3px;
  }

  .ham {
    width: 40px;
    height: 40px;
  }

  .header-inner-bg {
    padding: 18px 5.5%;
    border-radius: 96px;
    background-color: #fff;
  }

  .header .container {
    --bs-gutter-x: 0;
  }

  /* .header-logo {
        width: 100px;
        height: 30.1px;
        transform: scale(1.05);
    } */

  .menu-icon {
    width: 44px;
    height: 44px;
  }

  .side-menu {
    width: 60%;
  }

  .top-btns {
    position: relative;
    transition: all 0.3s ease-in-out;
  }

  /* paralax banner section start */
  #banner-parallax-img3 {
    max-width: 236.1px;
    max-height: 283.5px;
    width: auto;
    height: auto;
  }

  #banner-parallax-img1-mob {
    height: 54vh;
    left: 0;
    bottom: 0;
    transform: translateX(0%);
  }

  #banner-parallax-img2-mob {
    height: 50vh;
    right: 0;
    bottom: 0;
    transform: translateX(0%);
  }

  #banner-parallax-img3-mob {
    width: auto;
    height: 22vh;
    left: 50%;
    top: 0vh;
    transition: transform 2s ease-in-out;
    transform: translate(-50%, 20px) scale(0.9);
  }

  #banner-parallax-img4-mob {
    transform: translateY(0);
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 0;
    bottom: 0;
    height: 30vh;

  }

  /* paralax banner section end */

  /* banner section start*/
  .banner-section {
    margin-bottom: 0;
    align-items: center;
    padding: 10px 0;
  }

  .banner-circle-box {
    transform: translate(-50%, -35%) scale(0.7);
  }

  .banner-content-wrapper {
    justify-content: center;
    align-items: center;
    gap: 50px;
  }

  .banner-content-div {
    flex-direction: column;
    /* padding: 27px 0; */
    padding: 0;
    height: 100px;
    margin-top: 20vh;
  }

  .banner-content {
    height: 110px;
    margin-top: 0;
  }

  .banner-content h2 {
    font-size: 32px;
    text-align: center;
    max-width: 315px;
    padding: 0 10px;
  }

  .main-title {
    font-size: 32px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 24px;
    line-height: 1.4;
  }

  .know-btn {
    margin: 30px auto 0 auto;
    padding: 12px 28px;
    font-size: 17.1px;
  }

  /* banner section end*/

  /* production section start */
  .products-section {
    padding: 30px 0px 60px 0px;
  }

  .products-section .main-title {
    margin: 20px;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .product-card {
    /* width: 190.6px; */
    min-height: 450px;
    padding: 40px 0 25px 0;
  }

  .product-card .product-img {
    min-height: 270px;

  }

  .product-card .product-img img {
    max-width: 225px;
    max-height: 225px;
  }

  .product-card .product-hover-img {
    border-radius: 45%;
  }

  .product-card .product-hover-img img {
    max-width: 300px;
    max-height: 300px;
  }

  .product-card h3 {
    font-size: 28px;
  }

  .product-card .product-btn {
    font-size: 16px;
  }

  .product-card.is-active .product-hover-img {
    transform: scale(1) translateY(-10%);
  }

  .product-card.is-active .product-img {
    transform: rotate(10deg);
  }

  .product-card.is-active h3 {
    transform: translate(0, 0);
    font-size: 16px;
  }

  .product-card.is-active .product-btn {
    transform: translate(0, 0);
  }

  /* production section end */

  /* about-making section start */
  .about-making-section {
    background-image: url(../img/about-making-bg-mob.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: 100%;
    min-height: 100vh;
    padding: 75px 0;
  }

  .about-making-section .col-md-6 {
    width: 100% !important;
  }

  .about-making-section .main-title {
    margin-top: 0;
  }

  .top-bg {
    top: -60px;
    max-height: 92px;
  }

  .about-making-container {
    min-height: 100%;
  }

  .about-making-left {
    align-items: center;
    margin-top: 25px;
  }


  .about-making-left p {
    text-align: center;
    color: rgba(25, 61, 113, 0.8);
    margin-bottom: 15px;
    max-width: 380px;
    font-size: 14px;
  }

  .about-making-left .main-title {
    text-align: center;
  }

  .about-making-right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 10px;
  }

  .about-making-right .about-image-small {
    max-width: 226px;
    height: 160px;
    margin-left: 0;
  }

  .about-making-right .about-image-small img {
    object-fit: contain;

  }

  .about-making-right .about-image-large {
    max-width: 226px;
    height: 160px;
    margin-bottom: 0;
    margin-left: 0;
  }

  .about-making-right .about-image-large img {
    object-fit: contain;


  }

  .about-making-container .row {
    flex-direction: column-reverse;

  }

  .left-bottom-mountain {
    max-width: 100%;
    height: 80px;
  }

  .about-making-right .about-image-small {
    /* max-width: 107px;
            height: 160px; */
  }

  /* about-making section end */

  /* benefit section start */
  .benefit-section {
    padding: 25px 0 0 0;
    overflow: hidden;
    margin-bottom: -25px;
  }

  .benefit-section .main-title {
    margin-top: 20px;
    margin-bottom: 0;
  }

  .benefit-row {
    display: none;

  }

  .benefit-section.active .benefit-list-right,
  .benefit-section.active .benefit-list-left {
    display: none;
  }

  .benefit-desctop {
    display: none;
  }

  .benefit-mob {
    display: block;
    margin-top: 30px;

  }

  .benefit-imgs-wrapper {
    margin: 30px auto;
    max-width: 343px;
  }


  .benefit-left-img {
    left: 0;
    bottom: 2vw;
    width: 20vw;
    max-width: 225px;
    min-width: 110px;
    transform: scale(0.7, 0.7) translateX(7vw);
  }

  .benefit-left-bottom-img {
    left: 4vw;
    bottom: 0vw;
    width: 14vw;
    max-width: 208px;
    min-width: 110px;
    transform: scale(0.7, 0.7) translateX(6vw);
  }

  .benefit-middle-img {
    transform: scale(0.7, 0.7) translateY(-2vw);
  }

  .benefit-right-img {
    right: 3vw;
    bottom: 2vw;
    width: 25vw;
    max-width: 378px;
    min-width: 170px;
    transform: scale(0.7, 0.7) translateX(-2vw);
  }


  .benefit-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 10px;
  }

  .benefit-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .benefit-list li p {

    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    min-height: 27px;
  }

  .benefit-list img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 6px;
  }

  li.full {
    grid-column: 1 / -1;
  }

  li.full p {
    max-width: 140px;
  }

  /* benefit-section end */

  /* falling box start */
  .fall-box {
    margin-bottom: -73px;
  }


  .stripe {
    width: 75px;
  }

  /* falling box end */

  /* certifications section start */
  .certifications-section {
    background-image: url('../img/certification-top-img-mob.webp');
    padding-top: 30px;
    background-size: 100% 89px;
  }

  .certifications-section .main-title {
    margin-top: 30px;
    margin-bottom: 0;
  }

  .certification-div {
    margin-top: 40px;
  }

  .certification-row {
    gap: 20px;
    max-width: 400px;
    flex-wrap: wrap;
  }

  .cert-box {
    max-width: 130.3px;
    height: 91.2px;
  }

  /* certificate section end */

  /* contact section start */
  .contact-section {
    padding-bottom: 100px;
    background-size: 100% 80px;
    background-image: url('../img/contact-bottom-img-mob.webp');
  }

  .contact-section .main-title {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .contact-section .container {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  form.contact-form {
    margin-top: 30px;
  }

  .dog-img {
    width: 100%;
    min-height: 265px;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 11.4px;
  }

  .btn-send {
    padding: 9.5px 26px;
    border-radius: 78px;
    font-size: 17.1px;
    text-align: center;
  }

  /* contact section end */

  /* footer section start */
  .footer-header {
    display: block;
    text-align: center;
  }

  .footer {
    background-image: url('../img/footer-bg-mob.webp');
    padding: 125px 0px 20px 0px;
    background-color: transparent;
  }

  .footer-area {
    padding: 35px 0 0 0;
  }

  .mb-mt-30 {
    margin-top: 30px;
  }

  .connect-btn {
    font-size: 12px;
    padding: 7px 15px;
  }

  .footer-list {
    margin-top: 10px;
  }

  .footer-title {
    font-size: 14px;
    font-weight: 500;
  }

  .footer-list li a {
    font-size: 12px;
  }

  .social-media {
    margin-top: 30px;
  }

  .footer-area .footer-address p,
  a {
    font-size: 14px;
    line-height: 1;
  }

  .vertical-line {
    margin: 0px 5px 0px 5px;
  }

  .footer-terms a {
    font-size: 12px;
  }

  .footer-bottom {
    font-size: 12px;
  }

  .footer-area .footer-copyright {
    flex-wrap: wrap;
    gap: 20px;
    width: 85%;
    margin-top: 20px;
  }

  /* footer section end */
}

@media (max-width: 499px) {
  #banner-parallax-img3-mob {
    height: 16vh;
  }

  .banner-circle-box {
    width: 100vh;
    height: 100vh;
  }

  .banner-circle-box {
    transform: translate(-50%, -37%) scale(0.6);
  }

}

@media (max-width: 399px) {
  #banner-parallax-img3-mob {
    height: 14vh;
  }

  .footer-area .footer-copyright a {
    font-size: 14px;
  }

  .footer-area .footer-copyright {
    width: 100%;
  }

}