:root {
   --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --heading-font: "Raleway", sans-serif;
   --nav-font: "Poppins", sans-serif;
 }

 :root {

   --accent-color: #ffc451;

 }

 :root {
   --nav-color: rgba(255, 255, 255, 0.905);
   --nav-hover-color: #ffc451;
   --nav-mobile-background-color: #ffffff;
   --nav-dropdown-background-color: #ffffff;
   --nav-dropdown-color: #212529;
   --nav-dropdown-hover-color: #ffc451;
 }


 .light-background {
   --background-color: #f9f9f9;
   --surface-color: #ffffff;
 }

 .dark-background {
   --background-color: #060606;
   --default-color: #ffffff;
   --heading-color: #ffffff;
   --surface-color: #252525;
   --contrast-color: #2a2727;
 }

 :root {
   scroll-behavior: smooth;
 }

 /*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/


 body {
   color: var(--default-color);
   font-family: var(--default-font);
 }

 a {
   color: var(--accent-color);
   text-decoration: none;
   transition: 0.3s;
 }

 a:hover {
   color: color-mix(in srgb, var(--accent-color), transparent 25%);
   text-decoration: none;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   color: var(--heading-color);
   font-family: var(--heading-font);
   font-display: swap;
 }



 /*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
 .header {
   --background-color: rgba(0, 0, 0, 0.8);
   --heading-color: #ffffff;
   --contrast-color: #ffffff;
   color: var(--default-color);
   background-color: var(--background-color);
   padding: 10px 0;
   transition: all 0.5s;
   z-index: 997;
 }

 .header .logo {
   line-height: 1;
 }

 .header .logo img {
   max-height: 60px;
   margin-right: 8px;
 }

 .header .logo h1 {
   font-size: 32px;
   margin: 0;
   font-weight: 700;
   color: var(--heading-color);
 }

 .header .logo span {
   color: var(--accent-color);
   font-size: 60px;
 }

 .header .btn-getstarted,
 .header .btn-getstarted:focus {
   color: #FFC451;
   font-size: 14px;
   padding: 8px 30px;
   margin: 0 0 0 30px;
   border-radius: 4px;
   transition: 0.3s;
   border: 2px solid var(--accent-color);
   background: transparent;
 }

 .header .btn-getstarted:hover,
 .header .btn-getstarted:focus:hover {
   color: black;
   background: var(--accent-color);
 }


 @media (max-width: 1200px) {
   .header .logo {
     order: 1;
   }

   .header .btn-getstarted {
     order: 2;
     margin: 0 15px 0 0;
     padding: 6px 15px;
   }

   .header .navmenu {
     order: 3;
   }
 }

 .scrolled .header {
   box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
 }

 /* Index Page Header
------------------------------*/
 .index-page .header {
   --background-color: rgba(0, 0, 0, 0);
 }

 /* Index Page Header on Scroll
------------------------------*/
 .index-page.scrolled .header {
   --background-color: #181A19;
 }

 /*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
 /* Navmenu - Desktop */
 @media (min-width: 1200px) {
   .navmenu {
     padding: 0;
   }

   .navmenu ul {
     margin: 0;
     padding: 0;
     display: flex;
     list-style: none;
     align-items: center;
   }

   .navmenu li {
     position: relative;
   }

   .navmenu a,
   .navmenu a:focus {
     color: var(--nav-color);
     padding: 18px 15px;
     font-size: 16px;
     font-family: var(--nav-font);
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: space-between;
     white-space: nowrap;
     transition: 0.3s;
   }

   .navmenu a i,
   .navmenu a:focus i {
     font-size: 12px;
     line-height: 0;
     margin-left: 5px;
     transition: 0.3s;
   }

   .navmenu li:last-child a {
     padding-right: 0;
   }

   .navmenu li:hover>a,
   .navmenu .active,
   .navmenu .active:focus {
     color: var(--nav-hover-color);
   }

   .navmenu .dropdown ul {
     margin: 0;
     padding: 10px 0;
     background: var(--nav-dropdown-background-color);
     display: block;
     position: absolute;
     visibility: hidden;
     left: 14px;
     top: 130%;
     opacity: 0;
     transition: 0.3s;
     border-radius: 0;
     z-index: 99;
     box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
   }

   .navmenu .dropdown ul li {
     min-width: 200px;
   }

   .navmenu .dropdown ul a {
     padding: 10px 20px;
     font-size: 15px;
     text-transform: none;
     color: var(--nav-dropdown-color);
   }

   .navmenu .dropdown ul a i {
     font-size: 12px;
   }

   .navmenu .dropdown ul a:hover,
   .navmenu .dropdown ul .active:hover,
   .navmenu .dropdown ul li:hover>a {
     background-color: var(--nav-dropdown-hover-color);
   }

   .navmenu .dropdown:hover>ul {
     opacity: 1;
     top: 100%;
     visibility: visible;
   }

   .navmenu .dropdown .dropdown ul {
     top: 0;
     left: -90%;
     visibility: hidden;
   }

   .navmenu .dropdown .dropdown:hover>ul {
     opacity: 1;
     top: 0;
     left: -100%;
     visibility: visible;
   }
 }

 /* Navmenu - Mobile */
 @media (max-width: 1199px) {
   .mobile-nav-toggle {
     color: var(--nav-color);
     font-size: 28px;
     line-height: 0;
     margin-right: 10px;
     cursor: pointer;
     transition: color 0.3s;
   }

   .navmenu {
     padding: 0;
     z-index: 9997;
   }

   .navmenu ul {
     display: none;
     list-style: none;
     position: absolute;
     inset: 60px 20px 20px 20px;
     padding: 10px 0;
     margin: 0;
     border-radius: 6px;
     background-color: var(--nav-mobile-background-color);
     overflow-y: auto;
     transition: 0.3s;
     z-index: 9998;
     box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
   }

   .navmenu a,
   .navmenu a:focus {
     color: var(--nav-dropdown-color);
     padding: 10px 20px;
     font-family: var(--nav-font);
     font-size: 17px;
     font-weight: 500;
     display: flex;
     align-items: center;
     justify-content: space-between;
     white-space: nowrap;
     transition: 0.3s;
   }

   .navmenu a i,
   .navmenu a:focus i {
     font-size: 12px;
     line-height: 0;
     margin-left: 5px;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: 0.3s;
     background-color: color-mix(in srgb, var(--accent-color), white 90%);
   }

   .navmenu a i:hover,
   .navmenu a:focus i:hover {
     background-color: color-mix(in srgb, var(--accent-color), white 90%);
   }

   .navmenu a:hover,
   .navmenu .active,
   .navmenu .active:focus {
     background-color: var(--nav-dropdown-hover-color);
   }

   .navmenu .active i,
   .navmenu .active:focus i {
     transform: rotate(180deg);
   }

   .navmenu .dropdown ul {
     position: static;
     display: none;
     z-index: 99;
     padding: 10px 0;
     margin: 10px 20px;
     background-color: var(--nav-dropdown-background-color);
     border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
     box-shadow: none;
     transition: all 0.5s ease-in-out;
   }

   .navmenu .dropdown ul ul {
     background-color: rgba(33, 37, 41, 0.1);
   }

   .navmenu .dropdown>.dropdown-active {
     display: block;
     background-color: rgba(33, 37, 41, 0.03);
   }

   .mobile-nav-active {
     overflow: hidden;
   }

   .mobile-nav-active .mobile-nav-toggle {
     color: #fff;
     position: absolute;
     font-size: 32px;
     top: 15px;
     right: 15px;
     margin-right: 0;
     z-index: 9999;
   }

   .mobile-nav-active .navmenu {
     position: fixed;
     overflow: hidden;
     inset: 0;
     background: rgba(33, 37, 41, 0.8);
     transition: 0.3s;
   }

   .mobile-nav-active .navmenu>ul {
     display: block;
   }
 }

 /*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
 .footer {
   color: var(--default-color);
   background-image: url(../img/footer-bg.webp);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   font-size: 14px;
   position: relative;
 }

 .footer .footer-top {
   padding: 50px 0;
   background-color: color-mix(in srgb, var(--footer-background-color) 90%, white 10%);
 }

 .footer .footer-about .logo {
   line-height: 1;
   margin-bottom: 10px;
 }

 .footer .footer-about .logo img {
   max-height: 40px;
   margin-right: 6px;
 }

 .footer .footer-about .logo span {
   font-size: 26px;
   font-weight: 700;
   letter-spacing: 1px;
   font-family: var(--heading-font);
   color: var(--heading-color);
 }

 .footer .footer-about p {
   font-size: 14px;
   font-family: var(--heading-font);
 }

 .footer .social-links a {
   color: #fff;
   background-color: color-mix(in srgb, var(--default-color) 5%, white 10%);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 4px;
   font-size: 16px;
   margin-right: 10px;
   transition: 0.3s;
 }

 .footer .social-links a:hover {
   color: var(--contrast-color);
   background-color: var(--accent-color);
 }

 .footer h4 {
   font-size: 20px;
   font-weight: bold;
   position: relative;
   padding-bottom: 12px;
 }


 .footer .footer-contact p {
   margin-bottom: 5px;
 }



 .footer .copyright p {
   margin-bottom: 0;
 }




 /*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
 .scroll-top {
   position: fixed;
   visibility: hidden;
   opacity: 0;
   left: 15px;
   bottom: 15px;
   z-index: 99999;
   background-color: #FFC451;
   width: 40px;
   height: 40px;
   border-radius: 4px;
   transition: all 0.4s;
 }

 .scroll-top i {
   font-size: 24px;
   color: #ffff;
   line-height: 0;
 }

 .scroll-top:hover {
   background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
   color: var(--contrast-color);
 }

 .scroll-top.active {
   visibility: visible;
   opacity: 1;
 }

 /*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
 @media screen and (max-width: 768px) {
   [data-aos-delay] {
     transition-delay: 0 !important;
   }
 }

 /*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
 .page-title {
   color: var(--default-color);
   background-color: var(--background-color);
   position: relative;
 }

 .page-title .heading {
   padding: 80px 0;
   border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
 }

 .page-title .heading h1 {
   font-size: 38px;
   font-weight: 700;
 }

 .page-title nav {
   background-color: color-mix(in srgb, var(--default-color), transparent 95%);
   padding: 20px 0;
 }

 .page-title nav ol {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
   font-size: 16px;
   font-weight: 400;
 }

 .page-title nav ol li+li {
   padding-left: 10px;
 }

 .page-title nav ol li+li::before {
   content: "/";
   display: inline-block;
   padding-right: 10px;
   color: color-mix(in srgb, var(--default-color), transparent 70%);
 }

 /*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
 section,
 .section {
   color: black;

   /* background-color: var(--background-color); */
   padding: 60px 0;
   scroll-margin-top: 80px;
   overflow: clip;
 }

 @media (max-width: 1199px) {

   section,
   .section {
     scroll-margin-top: 58px;
   }
 }

 /*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
 .section-title {
   text-align: center;
   padding: 30px 0;
   margin-bottom: 30px;
   position: relative;
 }

 .section-title h2 {
   font-size: 32px;
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 20px;
   padding-bottom: 0;
   position: relative;
   z-index: 2;
   color: black;
 }

 .section-title span {
   position: absolute;
   top: 4px;
   color: color-mix(in srgb, black, transparent 80%);
   left: 0;
   right: 0;
   z-index: 1;
   font-weight: 700;
   font-size: 52px;
   text-transform: uppercase;
   line-height: 1;
 }

 .section-title p {
   margin-bottom: 0;
   position: relative;
   z-index: 2;
 }

 @media (max-width: 575px) {
   .section-title h2 {
     font-size: 28px;
     margin-bottom: 15px;
   }

   .section-title span {
     font-size: 38px;
   }
 }

 /*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
 .hero {
   width: 100%;
   min-height: 100vh;
   position: relative;
   padding: 120px 0 80px 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .hero img {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
 }

 .hero:before {
   content: "";
   background: color-mix(in srgb, var(--background-color), transparent 40%);
   position: absolute;
   inset: 0;
   z-index: 2;
 }

 .hero .container {
   position: relative;
   z-index: 3;
 }

 .hero h2 {
   margin: 0;
   font-size: 56px;
   font-weight: 700;
   font-family: var(--nav-font);
 }

 .hero h2 span {
   color: var(--accent-color);
 }

 .hero article {
   margin: 10px 0 0 0;
   font-size: 24px;
   color: color-mix(in srgb, var(--default-color), transparent 30%);
 }



 .hero .icon-box {
   padding: 30px 20px;
   transition: ease-in-out 0.3s;
   border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
   height: 100%;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 .hero .icon-box i {
   font-size: 32px;
   line-height: 1;
   color: var(--accent-color);
 }

 .hero .icon-box h3 {
   font-weight: 700;
   margin: 10px 0 0 0;
   padding: 0;
   line-height: 1;
   font-size: 20px;
   line-height: 26px;
 }

 .hero .icon-box h3 a {
   color: color-mix(in srgb, var(--default-color), transparent 20%);
   transition: ease-in-out 0.3s;
 }

 .hero .icon-box:hover {
   border-color: var(--accent-color);
 }

 .hero .icon-box:hover h3 a {
   color: var(--accent-color);
 }


 .hero .btn-getstarted,
 .hero .btn-getstarted:focus {
   color: black;
   background: var(--accent-color);
   font-size: 16px;
   padding: 8px 30px;
   margin: 0 0 0 30px;
   border-radius: 4px;
   transition: 0.3s;
   border: 2px solid var(--accent-color);
 }

 .hero .btn-getstarted:hover,
 .hero .btn-getstarted:focus:hover {
   color: black;
   background: var(--accent-color);
 }



 @media (max-width: 768px) {
   .hero h2 {
     font-size: 32px;
   }

   .hero p {
     font-size: 18px;
   }
 }




 /*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
 .call-to-action {
   padding: 80px 0;
   position: relative;
   clip-path: inset(0);
 }

 .call-to-action img {
   position: fixed;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
 }

 .call-to-action:before {
   content: "";
   background: color-mix(in srgb, var(--background-color), transparent 50%);
   position: absolute;
   inset: 0;
   z-index: 2;
 }

 .call-to-action .container {
   position: relative;
   z-index: 3;
 }

 .call-to-action h3 {
   font-size: 28px;
   font-weight: 700;
   color: var(--default-color);
 }

 .call-to-action p {
   color: var(--default-color);
 }


 .call-to-action .cta-btn {
   font-family: var(--heading-font);
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 1px;
   display: inline-block;
   padding: 12px 40px;
   border-radius: 5px;
   transition: 0.5s;
   margin: 10px;
   border: 2px solid var(--default-color);
   color: var(--default-color);
 }

 .call-to-action .cta-btn:hover {
   background: var(--accent-color);
   color: var(--background-color);
   border: 2px solid var(--accent-color);
 }


 .info-btn {

   background-color: #FFC451;
 }

 .info-btn:hover {

   background-color: #e9c378;
   color: black;
 }

 /*  */



 /*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
 .testimonials .testimonial-item {
   background-color: var(--surface-color);
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
   box-sizing: content-box;
   padding: 30px;
   margin: 30px 15px;
   position: relative;
   height: 100%;
 }

 .testimonials .testimonial-item .testimonial-img {
   width: 90px;
   border-radius: 50px;
   margin-right: 15px;
 }

 .testimonials .testimonial-item h3 {
   font-size: 18px;
   font-weight: bold;
   margin: 10px 0 5px 0;
 }

 .testimonials .testimonial-item h4 {
   font-size: 14px;
   color: color-mix(in srgb, var(--default-color), transparent 40%);
   margin: 0;
 }

 .testimonials .testimonial-item .stars {
   margin: 10px 0;
 }

 .testimonials .testimonial-item .stars i {
   color: #ffc107;
   margin: 0 1px;
 }

 .testimonials .testimonial-item .quote-icon-left,
 .testimonials .testimonial-item .quote-icon-right {
   color: color-mix(in srgb, var(--accent-color), transparent 50%);
   font-size: 26px;
   line-height: 0;
 }

 .testimonials .testimonial-item .quote-icon-left {
   display: inline-block;
   left: -5px;
   position: relative;
 }

 .testimonials .testimonial-item .quote-icon-right {
   display: inline-block;
   right: -5px;
   position: relative;
   top: 10px;
   transform: scale(-1, -1);
 }

 .testimonials .testimonial-item p {
   font-style: italic;
   margin: 15px auto 15px auto;
 }

 .testimonials .swiper-wrapper {
   height: auto;
 }

 .testimonials .swiper-pagination {
   margin-top: 20px;
   position: relative;
 }

 .testimonials .swiper-pagination .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background-color: color-mix(in srgb, black, transparent 85%);
   opacity: 1;
 }

 .testimonials .swiper-pagination .swiper-pagination-bullet-active {
   background-color: var(--accent-color);
 }

 @media (max-width: 767px) {
   .testimonials .testimonial-wrap {
     padding-left: 0;
   }

   .testimonials .testimonial-item {
     padding: 30px;
     margin: 15px;
   }

   .testimonials .testimonial-item .testimonial-img {
     position: static;
     left: auto;
   }
 }


 /*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
 .about .content h3 {
   font-size: 2rem;
   font-weight: 700;
   color: black;
 }


 .about .content p:last-child {
   margin-bottom: 0;
 }

 .about .content .read-more {
   background: var(--accent-color);
   color: black;
   font-family: var(--heading-font);
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 1px;
   padding: 12px 30px;
   transition: 0.3s;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 .about .content .read-more i {
   font-size: 18px;
   margin-left: 5px;
   line-height: 0;
   transition: 0.3s;
 }

 .about .content .read-more:hover {
   background: color-mix(in srgb, var(--accent-color), transparent 20%);
   padding-right: 25px;
 }

 .about .content .read-more:hover i {
   margin-left: 10px;
 }



 /*--------------------------------------------------------------
# Features Cards Section
--------------------------------------------------------------*/


 .features-cards .feature-box {
   height: 100%;
   padding: 40px 30px;
   border-radius: 10px;
 }

 .features-cards .feature-box h2 {
   font-size: 50px;
   font-weight: 700;
   margin: 0 0 10px 0;
 }

 .features-cards .feature-box p {
   font-size: 30px;
   margin-bottom: 0;
   font-weight: 400;
 }

 .features-cards .feature-box.orange {
   background-color: #f8dba2;
 }


 .features-cards .feature-box.blue {
   background-color: #f8dba2;
 }


 .features-cards .feature-box.green {
   background-color: #f8dba2;
 }


 .features-cards .feature-box.red {
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('../img/locksmith-open-on-sunday-scaled.jpeg');
   background-repeat: no-repeat;
   background-size: cover;
 }


 .features-cards .read-more {
   background: #FFC451;
   color: black;
   font-family: var(--heading-font);
   font-weight: 500;
   font-size: 16px;
   letter-spacing: 1px;
   padding: 12px 30px;
   transition: 0.3s;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 .features-cards .read-more i {
   font-size: 18px;
   margin-left: 5px;
   line-height: 0;
   transition: 0.3s;
 }

 .features-cards .read-more:hover {
   border: 2px solid #FFC451;
   background: transparent;
   padding-right: 25px;
   color: #FFC451;
 }

 .features-cards .read-more:hover i {
   margin-left: 10px;
 }

 /*  */


 /*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
 .faq .faq-title {
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 1rem;
   color: var(--heading-color);
 }

 .faq .faq-description {
   font-size: 1rem;
   color: var(--default-color);
   margin-bottom: 2rem;
 }

 .faq .faq-arrow {
   color: black;
 }

 .faq .faq-container .faq-item {
   background-color: var(--accent-color);
   position: relative;
   padding: 20px;
   margin-bottom: 15px;
   border-radius: 10px;
   overflow: hidden;
 }

 .faq .faq-container .faq-item:last-child {
   margin-bottom: 0;
 }

 .faq .faq-container .faq-item h3 {
   font-weight: 800;
   font-size: 16px;
   line-height: 24px;
   margin: 0 30px 0 0;
   transition: 0.3s;
   cursor: pointer;
   display: flex;
   align-items: center;
 }

 .faq .faq-container .faq-item h3 .num {
   color: black;
   padding-right: 5px;
 }

 .faq .faq-container .faq-item h3:hover {
   color: black;
 }

 .faq .faq-container .faq-item .faq-content {
   display: grid;
   grid-template-rows: 0fr;
   transition: 0.3s ease-in-out;
   visibility: hidden;
   opacity: 0;
 }

 .faq .faq-container .faq-item .faq-content p {
   margin-bottom: 0;
   overflow: hidden;
 }

 .faq .faq-container .faq-item .faq-toggle {
   position: absolute;
   top: 20px;
   right: 20px;
   font-size: 16px;
   line-height: 0;
   transition: 0.3s;
   cursor: pointer;
 }

 .faq .faq-container .faq-item .faq-toggle:hover {
   color: var(--accent-color);
 }

 .faq .faq-container .faq-active h3 {
   color: black;
 }

 .faq .faq-container .faq-active .faq-content {
   grid-template-rows: 1fr;
   visibility: visible;
   opacity: 1;
   padding-top: 10px;
 }

 .faq .faq-container .faq-active .faq-toggle {
   transform: rotate(90deg);
   color: black;
 }






 /*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
 .contact .info-item+.info-item {
   margin-top: 40px;
 }

 .contact .info-item i {
   color: var(--contrast-color);
   background: var(--accent-color);
   font-size: 20px;
   width: 44px;
   height: 44px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 4px;
   transition: all 0.3s ease-in-out;
   margin-right: 15px;
 }

 .contact .info-item h3 {
   padding: 0;
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 5px;
 }

 .contact .info-item p {
   padding: 0;
   margin-bottom: 0;
   font-size: 14px;
 }

 .contact .contact-details {
   height: 100%;
 }

 .contact .contact-details input[type=text],
 .contact .contact-details input[type=tel],
 .contact .contact-details input[type=email],
 .contact .contact-details textarea {
   font-size: 14px;
   padding: 10px 15px;
   box-shadow: none;
   border-radius: 0;
   color: var(--default-color);
   background-color: color-mix(in srgb, var(--background-color), transparent 50%);
   border-color: color-mix(in srgb, var(--default-color), transparent 80%);
 }

 .contact .contact-details input[type=text]:focus,
 .contact .contact-details input[type=tel]:focus,
 .contact .contact-details input[type=email]:focus,
 .contact .contact-details textarea:focus {
   border-color: var(--accent-color);
 }

 .contact .contact-details input[type=text]::placeholder,
 .contact .contact-details input[type=tel]::placeholder,
 .contact .contact-details input[type=email]::placeholder,
 .contact .contact-details textarea::placeholder {
   color: color-mix(in srgb, var(--default-color), transparent 70%);
 }

 .contact .contact-details button[type=submit] {
   color: var(--contrast-color);
   background: var(--accent-color);
   border: 0;
   padding: 10px 30px;
   transition: 0.4s;
   border-radius: 4px;
 }

 .contact .contact-details button[type=submit]:hover {
   background: color-mix(in srgb, var(--accent-color), transparent 20%);
 }




 /*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
 .section1 .inner-title {
   font-size: 2.75rem;
   font-weight: 700;
   margin: 30px 0;
 }

 @media (min-width: 991px) {
   .section1 .inner-title {
     max-width: 65%;
     margin: 0 0 80px 0;
   }
 }

 .section1 .our-story {
   padding: 40px;
   background-color: color-mix(in srgb, #F8DBA2, transparent 40%);
 }

 @media (min-width: 991px) {
   .section1 .our-story {
     padding-right: 30%;
   }
 }

 .section1 .our-story h4 {
   text-transform: uppercase;
   font-size: 1.1rem;
   color: color-mix(in srgb, var(--default-color), transparent 50%);
 }

 .section1 .our-story h3 {
   font-size: 2.25rem;
   font-weight: 700;
   color: color-mix(in srgb, var(--default-color), transparent 20%);
 }

 .section1 .our-story p:last-child {
   margin-bottom: 0;
 }

 .section1 .about-img {
   min-height: 400px;
   position: relative;
 }

 @media (min-width: 992px) {
   .section1 .about-img {
     position: absolute;
     top: 0;
     right: 0;
     min-height: 600px;
   }
 }

 .section1 .about-img img {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   z-index: 1;
 }



 .btn-getstarted,
 .btn-getstarted:focus {
   background: var(--accent-color);
   color: var(--contrast-color);
   font-size: 20px;
   padding: 8px 30px;

   border-radius: 4px;
   transition: 0.3s;

 }

 .btn-getstarted:hover,
 .btn-getstarted:focus:hover {
   color: black;
   border: 2px solid var(--accent-color);
   background: transparent;
 }




 /*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
 .gallery .gallery-item {
   overflow: hidden;
   border-right: 3px solid var(--background-color);
   border-bottom: 3px solid var(--background-color);
 }

 .gallery .gallery-item img {
   transition: all ease-in-out 0.4s;
 }

 .gallery .gallery-item:hover img {
   transform: scale(1.1);
 }





 /**********BRANDS************/
 /*marquee*/
 .marquee {
   width: 100%;

   margin: 0 auto;
   overflow: hidden;
   white-space: nowrap;
   box-sizing: border-box;
   animation: marquee 50s linear infinite;
   color: #fff;
 }

 .marquee:hover {
   animation-play-state: paused
 }


 .brands {
   background-color: var(--beige);
   padding: 0;


 }

 @keyframes marquee {
   0% {
     text-indent: 27.5em
   }

   100% {
     text-indent: -105em
   }
 }

 .info-item a {
   color: black;
 }

 .brands-section {
   background-color: var(--beige);
   margin-bottom: 1%;
   padding: 0;
 }

 /**********End of BRANDS************/




 .section-content {
   padding: 50px 0;

 }

 .section-heading {
   font-size: 36px;
   font-weight: bold;
   margin-bottom: 20px;
 }

 .section-text {
   font-size: 18px;
   line-height: 1.6;
 }