/*font-family: "Google Sans Flex", sans-serif;
font-family: "Oswald", sans-serif;*/

:root{
    --black: #1b1b1b;
    --white: #ffffff;
    --primary_color: hsla(10, 94%, 35%, 100%);
    --primary_color_lighter: hsla(10, 94%, 70%, 100%);
    --primary_color_lightest: hsla(10, 94%, 98%, 100%);
    --primary_color_dark: hsla(10, 94%, 20%, 100%);
    --secondary_color: hsla(130, 63%, 35%, 100%);
    --secondary_color_lighter: hsla(130, 63%, 70%, 100%);
    --secondary_color_lightest: hsla(130, 63%, 98%, 100%);
    --secondary_color_dark: hsla(130, 63%, 20%, 100%);
    --offwhite: #f8f8f8;
    --para: "Google Sans Flex", sans-serif;
    --head: "Oswald", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; font-family: "Google Sans Flex", sans-serif; font-size: 18px; }
h1, h2, h3{ font-family: var(--head); text-transform: uppercase; }
h1{ font-size: 60px; }
h2{ font-size: 32px; }
h3{font-size: 44px; }
h4{ font-size: 24px; }
h5{ font-size: 20px; margin-bottom: 0; }
h6{ font-size: 14px; }

.image_wrapper { width: 100%; display: inline-block; position: relative; overflow: hidden; vertical-align: top; border-radius: 10px; }
.image_wrapper:before { content: ""; display: block; padding-top: 100%; }
.image_wrapper img { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

header .navbar-brand img{ max-height: 100; width: 100%; }

header .custom-navbar{ background:#fff; padding:18px 0; box-shadow:0 2px 10px rgba(0,0,0,0.08); }
header .navbar-wrapper{ display:flex; align-items:center; justify-content:space-between; }
header .navbar-brand{ font-size:32px; font-weight:700; text-decoration:none; color:#000; }
header .navbar-brand span{ color:#0d6efd; }
header .desktop-menu ul{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
header .desktop-menu ul li a{ text-decoration:none; color:#222; font-size:16px; font-weight:500; transition:0.3s; }
header .desktop-menu ul li a:hover{ color:#0d6efd; }
header .custom-toggler{ width:40px; height:40px; border:none; background:none; cursor:pointer; display:none; flex-direction:column; justify-content:center; align-items:center; gap:6px; }
header .custom-toggler span{ width:28px; height:3px; background:#000; border-radius:5px; transition:0.3s; }
header .custom-toggler.active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
header .custom-toggler.active span:nth-child(2){ opacity:0; }
header .custom-toggler.active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
header .offcanvas{ width:280px; }
header .offcanvas-body ul{ list-style:none; padding:0; margin:0; }
header .offcanvas-body ul li{ margin-bottom:18px; }
header .offcanvas-body ul li a{ text-decoration:none; color:#222; font-size:18px; font-weight:500; }

@media(max-width:991px){
  header .desktop-menu{ display:none; }
  header .custom-toggler{ display:flex; }
}

@media(min-width:992px){
  header .custom-toggler{ display:none !important; }
  header .desktop-menu{ display:block; }
}

.banner{ padding: 120px 0px; background-position: center top; background-repeat: no-repeat; background-size: cover; }
.banner.inside{ padding: 60px 0px; }
.banner .banner_content{ font-family: var(--head); font-size: 60px; font-weight: 500; }
.banner .banner_content h1{ display: inline-block; margin: 40px 0px; }
.banner .banner_content .banner_points{ display: flex; flex-wrap: wrap; margin-top: 40px; column-gap: 16px; row-gap: 12px; }
.banner .banner_content .banner_points .bpoint{ display: flex; align-items: center; column-gap: 16px; }
.banner .banner_content .banner_points .bpoint span{ position: relative; height: 32px; width: 32px; border-radius: 50%; display: inline-block; background-color: var(--secondary_color_lightest); border: 0.5px solid var(--secondary_color_lighter); font-size: 20px; z-index: 0; }
.banner .banner_content .banner_points .bpoint span i{ color: var(--secondary_color_dark); font-size: 12px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

a.bttn{ display: inline-block; padding: 14px 30px; border-radius: 0px; text-transform: uppercase; background-color: var(--primary_color); color: var(--white); border: 1px solid #c7c7c7; text-decoration: none; transition: all ease-in-out 300ms; }
a.bttn:hover{ background-color: var(--primary_color_lightest); color: var(--primary_color_dark); border: 1px solid var(--primary_color_lighter); }

.services{ margin-top: 100px; }
.services h3{ margin-bottom: 32px; }
.services .serv_box{ padding: 20px; border-radius: 8px; height: 100%; }
.services .row > div{ margin-bottom: 24px; }
.services.red .serv_box{ padding: 20px; border-radius: 8px; background-color: var(--primary_color_lightest); border:0.5px solid var(--primary_color_lighter); color: var(--primary_color_dark); height: 100%; }
.services.green .serv_box{ background-color: var(--secondary_color_lightest); border:0.5px solid var(--secondary_color_lighter); color: var(--secondary_color_dark); }
.services.red h3{ color: var(--primary_color); }
.services.green h3{ color: var(--secondary_color); }

.about .about_content p{ margin: 32px 0px; }

.images{ margin-bottom: 100px; }
.images .image_wrapper:before{ padding-top: 70%; }

.brands h3{ color: var(--primary_color); margin-bottom: 40px; }
.pro_brand{ padding: 40px; border-radius: 12px; background-color: var(--offwhite); height: 100%; filter: drop-shadow(0px 0px 20px rgba(0,0,0,0%)); transition: all ease-in-out 200ms; }
.pro_brand:hover{ background-color: var(--primary_color_lightest); filter: drop-shadow(0px 0px 20px rgba(0,0,0,8%)); }
.pro_brand h4{ color: var(--primary_color_dark); margin-bottom: 20px; }
.pro_brand h5{ color: var(--secondary_color_dark); margin-top: 20px; }
.brands > .container > .row > div{ margin-bottom: 30px; }

.contact_section{ position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; padding: 80px 0px; }
.contact_section:before{ content:''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #fff; opacity: 60%; z-index: 0; }
.contact_section > .container{ position: relative; }
.form_col { display: flex; align-items: center; }
.form-control { border: none; border-bottom: 1px solid #999; border-radius: 0; background: transparent; }
.form-control:focus, select input:focus{ border-bottom: 1px solid #c7c7c7; border: 0px; }
.map_wrapper{ overflow: hidden; border-radius: 20px; }

footer{ background-color: var(--offwhite); padding: 80px 0px; }
footer .foot_logo{ margin-bottom: 28px; }
footer h4{ margin-bottom: 24px; color: var(--secondary_color) }
footer ul{ list-style-type: none; padding-left: 0; margin-left: 0; }
footer ul li:not(:last-child){ margin-bottom: 20px; }
footer ul li a{ text-decoration: none; text-transform: capitalize; color: inherit; }
footer ul li.ico_line i{ margin-right: 4px; }