* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Arial, Helvetica, sans-serif;
     letter-spacing: -0.25px;
 }

 html {
     scrollbar-color: red black;
     scrollbar-width: thin;

 }
 html, body {
  width: 100%;
  overflow-x: hidden;
}




 .header {
     width: 100%;
     background-color: #000000;
     padding: 8px 0 8px 0;
 }

 .navbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     max-width: 100%;





 }

 .navbar>.logo {
     width: 235px;
     height: 93.42px;


 }

 .logo>img {
     width: 239px;
     height: 99.42px;
     object-fit: contain;
 }

 .nav-links {
     display: flex;
     list-style: none;
     align-items: center;
     gap: 30px;
 }

 .nav-links a {
     color: #fff;
     text-decoration: none;
     font-size: 23px;
 }

 /* .nav-links a:hover {
     color: #ff0000;
 } */

 .nav-buttons {
     display: flex;
     gap: 15px;
 }

 .btn {
     padding: 20px 20px;
     border-radius: 50px;
     text-decoration: none;
     font-size: 14px;
     white-space: nowrap;
 }

 .btn.outline {
     border: 1px solid #fff;
     color: #fff;
 }

 .btn.solid {
     background: #ff0000;
     color: #fff;
     border: none;
     
 }


 .btn.outline:hover {
     border: 1px solid #fff;
     color: #fff;
 }

 .page {
     display: flex;
    
     flex-direction: column;
 }
.carousel,
.carousel-inner,
.carousel-item,
.carousel-item img {
  width: 100%;
  max-width: 100%;
}

.carousel-item img {
  object-fit: cover;
}

 .btn.outline,
 .btn.solid {
     border-radius: 45px;
     color: #ffffff;
     padding: 12px 13.5px 12px 13.5px;
     font-size: 14px;
     font-weight: 400;
 }

 .section2 {
     background-color: black;
     padding: 70px 15px 70px 15px;
     position: relative;

 }

 @font-face {
     font-family: 'apercu';
     src: url('./fonts/apercu/apercu_regular_pro.otf') format('opentype'),
         url('./fonts/apercu/apercu_bold_pro.otf') format('opentype');
 }

 .text {
     font-family: 'apercu';
     font-style: normal;
     font-weight: 300;
     font-size: 36px;
     line-height: 43px;
     color: #FFFFFF;
     text-align: center;
     padding-bottom: 20px;
 }

 .title-line p {
     font-family: 'apercu';
     font-style: normal;
     font-weight: 300;
     font-size: 41px;
     line-height: 24px;
     color: rgb(255, 255, 255);
     text-align: center;
     margin-bottom: 10px;

 }

 .text>h2 {
     font-family: 'apercu';
     font-style: normal;
     font-weight: 300;
     font-size: 50px;
     line-height: 43px;
     color: #FFFFFF;
     text-align: center;
 }

 @font-face {
     font-family: 'futurak';
     src: url('./fonts/futurak/futurak.ttf')
 }

 .logo-text {
     font-family: 'futurak';
     font-style: normal;
     font-weight: 400;
     line-height: 62px;
     color: #FFFFFF;
 }

 .instruction {
     font-family: 'apercu';
     font-style: normal;
     font-weight: 400;
     font-size: 20px;
     line-height: 24px;
     color: rgba(255, 255, 255, 0.7);
     text-align: center;
 }

 .belt {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1%;
 }

 .card1,
 .card2,
 .card3,
 .card4 {
     background-color: white;
     padding: 20px;
     border-radius: 5px;
     width: 100%;
 }

 .cards img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 5px;
     object-fit: contain;
 }

 .order-now {
     width: 174px;
     height: 50px;
     margin: auto;
     margin-top: 24px;
     text-align: center;
 }

 .order-now a {
     display: block;
     width: 174px;
     height: 50px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 50px;
     font-style: normal;
     font-weight: 500;
     font-size: 14px;
     line-height: 50px;
     color: #FFFFFF;
     margin: auto;
     margin-top: 24px;
     text-decoration: none !important;
 }

 .section3 {
     background-color: rgb(15 15 15);
     background-image: url("./images/s.webp");
     background-repeat: no-repeat;
     background-position: top 30px right 30px;

     padding-bottom: 60px;
     padding-top: 60px;
 }

 .text2,
 .text3 {
     font-family: 'apercu';
     font-style: normal;
     font-weight: 300;
     font-size: 36px;
     line-height: 43px;
     color: #FFFFFF;
     text-align: center;
     padding-top: 60px;
     margin-top: -122px;
 }

 .text2>h2 {
     font-family: 'apercu';
     font-style: normal;
     font-weight: 300;
     font-size: 50px;
     line-height: 43px;
     color: #FFFFFF;
     text-align: center;
     padding-top: 60px;
 }

 @font-face {
     font-family: 'butler';
     src: url('./fonts/butler/Butler_Bold.otf') format('truetype'),
         url('./fonts/butler/butler_light.ttf') format('truetype');
 }

 .title-line2 p {
     font-family: 'butler';
     font-style: normal;
     font-weight: 300;
     font-size: 50px;
     line-height: 24px;
     color: rgb(255, 255, 255);
     text-align: center;
     margin-top: 10px;
 }

 .information {
     font-family: 'apercu';
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 19px;
     letter-spacing: 0.03em;
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 48px;
 }

 .rfs {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
     padding: 0% 5%;
 }

 .rf {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     padding: 24px;
 }

 .r2 {
     flex-direction: row-reverse;
 }

 .rf>.p {
     padding: 0px 15% 0 2%;
     width: 50%;
 }

 .rf>.picture {
     width: 50%;

 }

 .rf>.picture>img {
     width: 100%;
     height: auto;
     object-fit: contain;
 }

 @font-face {
     font-family: "Font Awesome 5 Pro";
     src: url("./fonts/awsome\ 5/fa-solid-900.woff2") format("woff2"),
         url("./fonts/awsome\ 5/fa-solid-900.woff") format("woff");
 }

 .fas {
     font-family: "Font Awesome 5 Pro";
     font-weight: 500;
     font-style: normal;
     font-size: 16px;
     color: rgba(255, 255, 255, 0.7);

 }

 .city {
     font-family: 'apercu';
     font-style: normal;
     font-weight: 500;
     font-size: 16px;
     line-height: 20px;
     letter-spacing: 0.48em;
     text-transform: uppercase;
     color: #ED1C24;
     margin-bottom: 8px;
     display: block;
 }

 .location {
     font-family: 'Apercu';
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 19px;
     letter-spacing: 0.03em;
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 10px;
 }

 .name p {
     font-style: normal;
     font-weight: 400;
     font-family: 'apercu';
     font-size: 32px;
     line-height: 38px;
     color: #FFFFFF;
     margin-bottom: 24px;
     display: inline;
     padding-left: 4px;
 }

 .name h3 {
     font-family: 'futurak';
     font-style: normal;
     font-weight: 400;
     font-size: 32px;
     line-height: 29px;
     color: #FFFFFF;
 }

 .phone a {
     font-family: 'Apercu';
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 19px;
     letter-spacing: 0.03em;
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
 }

 .fa {
     font-family: "Font Awesome 5 Pro";
     font-weight: 500;
     font-style: normal;
     font-size: 16px;
     color: rgba(255, 255, 255, 0.7);
 }

 .fa-phone {
     transform: rotate(90deg);
     margin-left: -4px;
     margin-right: 2px;
 }

 .direction {
     margin-top: 48px;
 }

 .direction>a {
     color: white;
     padding: 15px;
     margin-top: 40px;
     text-decoration: none;
     border: 1px solid white;
     border-radius: 50px;
     align-items: center;


 }

 .fa-arrow-right {
     margin-left: 10px;
     color: red;
     background-color: white;
     padding: 5px;
     border-radius: 50%;
 }

 .section4 {
     background-color: black;
 }

 .section4 {
     background-image: url("./images/p.webp");
     background-repeat: no-repeat;
     background-position: top 41px right 9%;
     background-size: 97%;
     padding-bottom: 60px;
     padding-top: 60px;
 }

 .text3 {
     font-family: 'apercu';
     font-style: normal;
     font-weight: 300;
     font-size: 36px;
     line-height: 43px;
     color: #FFFFFF;
     text-align: center;
     padding-top: 60px;
     padding-bottom: 20px;
     margin-top: -104px;
 }

 .text3>h2 {
     font-family: 'apercu';
     font-style: normal;
     font-weight: 300;
     font-size: 50px;
     line-height: 43px;
     color: #FFFFFF;
     text-align: center;
     padding-top: 60px;

 }

 .efs {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10%;
     flex-wrap: wrap;
     padding: 0% 5%;
 }

 .ef {
     width: 25%;
     display: flex;
     flex-direction: column-reverse;
    
     text-align: center;

 }

 .ef>.p {
     padding-bottom: 3%;
     width: 100%;
     height: 254px;
 }

 .ef>.picture-2 {
     width: 100%;
     height: 254px;
     margin-bottom: 5%;

 }

 .ef>.picture-2>img {
     width: 100%;
     height: auto;
     object-fit: contain;
 }

 .ef>.p>.city {

     font-size: 12px;

 }

 .ef>.p>.name h3 {
     font-size: 24px;
 }

 .ef>.p>.name p {
     font-size: 24px;
 }

 .ef>.p>.location {
     font-size: 14px;

 }

 .ef>.p>.location p {
     letter-spacing: -0.5px;
 }

 .section5 {
     background-color: rgb(15 15 15);
 }

 .village {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 2%;
     padding: 60px 5%;
 }

 .direction>a.v {
     color: white;
     padding: 15px;
     margin-top: 40px;
     text-decoration: none;
     border: transparent;
     border-radius: 50px;
     align-items: center;
     background-color: #28a745;
 }

 .direction>a.v:hover {
     background-color: transparent;
     color: white;
     border: 1px solid #28a745;
 }

 .fa-arrow-right.v {
     margin-left: 10px;
     color: #28a745;
     background-color: white;
     padding: 5px;
     border-radius: 50%;
 }

 .p {
     width: 50%;
 }

 .village>img {
     width: 50%;
     height: auto;
     object-fit: contain;
 }

 .section6 {
     background-color: black;
 }

 #p {
     display: inline-block;
 }

 #os {
     margin-left: 10px;
     font-size: 24px;
 }
 .card-container{
    padding: 0px 10% 0px 10%;
 }
 .row-cards {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.r-card{
    flex: 0 0 auto;
    width: 33.33333333%;
    padding: 20px;
}
.r-img{
    height: 271px;
    background: #FFFFFF;
    border-radius: 4px;
    text-align: center;
    padding: 25px 24px;
    margin: auto;
    margin-bottom: 32px;
}
.r-img img{
    display: block;
    margin: auto;
    margin-bottom: 16px;
}
.r-img small{
    font-family: 'Apercu';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.48em;
    text-transform: uppercase;
    color: #ED1C24;
    margin-bottom: 8px;
    display: inline-block;
}

.r-img h4{
    font-family: 'FuturaBlack BT';
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    line-height: 30px;
    text-align: center;
    color: #000000;
}
.r-img p {
    font-family: 'FuturaBlack BT';
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    line-height: 29px;
    text-align: center;
    color: #000000;
}
 .section7 {
     background-color: #0f0f0f;
 }

 .section7 {

     background-image: url('./images/s2.webp');
     background-repeat: no-repeat;
     background-size: 338px;
     background-position: top 233px right 98%;

 }

 .footer {
     display: grid;
    grid-auto-flow: row;
     width: 100%;
     grid-template-rows: auto;
     /* grid-template-areas: ". . . ."; */
     grid-template-columns: 1.5fr 0.8fr 1fr 0.8fr;
     gap: 30px 45px;
     position: relative;
     z-index: 1;
     padding-bottom: 55px;
     color: #ccc;
     padding: 60px 218px;
     font-family: 'Apercu';
 }



 .footer a {
     color: #ccc;
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .footer a:hover {
     color: #fff;
 }

 .web-logo {
     width: 180px;
     margin-bottom: 20px;
 }

 .footer_detail_box_one p {
     margin: 0px !important;
     padding-bottom: 24px;
     padding-right: 0px;
     text-align: left;
     font-family: 'Apercu';
     font-style: normal;
     font-weight: 400;
     font-size: 15px;
     line-height: 21px;
     letter-spacing: 0.03em;
     color: rgba(255, 255, 255, 0.7);
 }

 .footer_detail_box_heading {
     position: relative;
     padding-bottom: 24px;
 }

 .footer_detail_box_content_list {
     display: flex;
     flex-direction: column;
     width: 100%;
     padding: 0px !important;
     margin: 0px !important;
 }

 .footer_detail_box_content_list li {
     list-style: none;
     display: flex;
     align-items: center;
     gap: 0px 5px;
     padding-bottom: 16px;
 }

 .footer_detail_box_content_list li a {
     font-family: 'Apercu';
     font-style: normal;
     font-weight: 400;
     font-size: 15px;
     text-decoration: none;
     line-height: 20px;
     letter-spacing: 0.03em;
     color: rgba(255, 255, 255, 0.7) !important;
 }

 .footer_data h3 {
     margin-bottom: 0px !important;
     font-family: 'Butler';
     font-style: normal;
     font-weight: 700;
     font-size: 16px;
     line-height: 19px;
     color: #FFFFFF;
 }

 .footer_detail_box_heading {
     position: relative;
     padding-bottom: 24px;
 }

 .footer_contact_list {
     display: flex;
     flex-direction: column;
     width: 100%;
     padding: 0px !important;
     margin: 0px !important;
 }

 .footer_contact_list li {
     list-style: none;
     display: flex;
     padding-bottom: 16px;
 }

 .footer_contact_list li a {
     font-family: 'Apercu';
     font-style: normal;
     font-weight: 400;
     font-size: 15px;
     text-decoration: none;
     line-height: 20px;
     letter-spacing: 0.03em;
     color: rgba(255, 255, 255, 0.7) !important;
 }

 .footer_contact_list .contact_heading {
     margin-bottom: 0px !important;
     font-style: normal;
     font-weight: 700;
     font-size: 16px;
     line-height: 19px;
     color: #FFFFFF;
 }

 .f-links a {
     display: flex;
     align-items: center;
     margin-right: 8px;
     justify-content: center;
     width: 40px;
     height: 40px;
     background: #ED1C24;
     color: #fff;
     text-decoration: none;
     border-radius: 50px;
 }

 .footer_detail_box_heading h3 {
     color: #fff;
     font-size: 18px;
     margin-bottom: 20px;
 }

 .footer ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer li {
     margin-bottom: 0px;
     font-size: 14px;
 }

 .contact_heading {
     color: #fff;
     font-weight: bold;
     margin-top: 15px;
 }

 .f-links {
     display: flex;
     gap: 15px;
     margin-bottom: 25px;
 }

 @font-face {
     font-family: "Font Awesome brand ";
     src: url("./fonts/awsome\ 5/fa-brands-400.woff2") format("woff2"),
         url("./fonts/awsome\ 5/fa-brands-400.woff") format("woff");
 }

 .fa-facebook,
 .fa-twitter,
 .fa-instagram {
     font-family: "Font Awesome brand ";
     font-weight: 500;
     font-style: normal;
     font-size: 16px;
     color: #fff;
 }

 .fa-facebook::before {
     content: "\f39e";
 }

 .fa-instagram::before {
     content: "\f16d";
 }

 .fa-twitter::before {
     content: "\f099";
 }

 .app-links ul {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .app-links img {
     width: 150px;
 }

 .info-usefull-links {
     display: flex;
     gap: 15px;
     font-size: 13px;
 }
.section8{
    background-color: #000000;
}
.copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 218px;
    gap: 75%;
    margin: 0 auto;
    font-family: 'Apercu';
    font-style: normal;
    font-size: 14px;
    line-height: 17px;
    color: rgba(255, 255, 255, 0.7);
}
.copyright span, .copyright a {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
 
.container,
.belt,
.rf,
.village,
.footer {
  width: 100%;
  max-width: 100%;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}






@media (max-width: 992px) {

  /* Navbar */
  .navbar {
    flex-direction: column;
    gap: 15px;
    padding: 10px 20px !important;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }

  .nav-links a {
    font-size: 18px;
  }

  .carousel-item img {
    height: 420px;
  }

  .belt {
    flex-wrap: wrap;
    gap: 30px;
  }

  .cards {
    width: 45%;
  }


  .rf {
    flex-direction: column;
    text-align: center;
  }

  .rf > .p,
  .rf > .picture {
    width: 100%;
    padding: 0;
  }
  .direction {
    margin-top: 25px;
    margin-bottom: 25px;
  }


  .ef {
    width: 45%;
  }
  .ef>.p {
     margin-top: 25%;
  }
  .village {
    flex-direction: column;
    text-align: center;
  }

  .village img,
  .village .p {
    width: 100%;
  }

  .r-card{
    width: 50%;
  }

  .footer {
    grid-template-columns: 1fr 1fr;
    padding: 60px 40px;
  }
 .footer_data h3 {
  text-align: center;
 }
    .footer ul{
    justify-self: center;
  }
  .footer_data ul li{
    justify-content: center;
  }
   .f-links  {
    justify-content: center;
  }
  .app-links ul {
    align-items: center;
  }
}

@media (max-width: 768px) {
  * {
    max-width: 100vw;
  }
}


@media (max-width: 576px) {

  .logo img {
    width: 100%;
    height: auto;
  }

  .nav-links {
    flex-direction: column;
  }

  .nav-buttons {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }


  .carousel-item img {
    height: 280px;
  }


  .text h2,
  .text2 h2,
  .text3 h2 {
    font-size: 34px;
    line-height: 40px;
  }

  .title-line p,
  .title-line2 p {
    font-size: 26px;
  }


  .cards {
    width: 100%;
  }

  .ef {
    width: 100%;
  }
    .ef>.p {
     margin-top: 25%;
  }

  .direction {
    margin-top: 25px;
  }
  .r-card{
    width: 100%;
  }

  .footer {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 50px 20px;
  }

   .footer_data h3 {
    text-align: center;
 }
  .footer ul{
    justify-self: center;
  }

  .footer_data ul li {
    justify-content: center;
  }
  .footer_detail_box_one p {
    text-align: center;
  }


  .web-logo {
    margin: auto;
    display: block;
  }
 .f-links  {
    justify-content: center;
  }
  .app-links ul {
    align-items: center;
  }
  .copyright {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
}

.hamburger span {
    width: 30px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}


@media (max-width: 768px) {

    .hamburger {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: black;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 25px 0;
        display: none;
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-buttons {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
}