@charset "UTF-8";
/*/
Theme Name: DRIVE VGS
Theme URI: drivevgs.com
Author: Axis Cross media
Author URI: http://www.axiscrossmedia.com
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
divv{border:1px dotted #ccc;}

body{
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
}

p{
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, h5 {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: normal
}


.text-teal{color: #087;}
.text-blue{color:#059;}

.bg-orange{background-color: #e80;}
.bg-blue{background-color: #047;}
.bg-ltblue{background-color: #def;}
.bg-ltgrey{background-color: #eee;}

.barlow-medium {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: normal;
  }

  .barlow-bold {
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  .barlow-regular-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: italic;
  }

.btnHome {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

  .bg-swish {
    background-image: url(""); /* The image used */
    background-color: #bcd; /* Used if the image is unavailable */
    /* You must set a specified height */
    background-position-x: center; /* Center the image */
    background-position-y: center;
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;

  }

  .push-down {
    padding-top: 166px;
}
.bg-productArea {
  background-image: url(""); /* The image used */
  background-color: #047; /* Used if the image is unavailable */
  /* You must set a specified height */
  background-position-x: center; /* Center the image */
  background-position-y: top;
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: contain;

}

  .bg-rightArea {
    background-image: url(""); /* The image on left */
    background-color: #047; /* Used if the image is unavailable */
    /* You must set a specified height */
    background-position-x: left; /* Center the image */
    background-position-y: top;
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 150%;

  }

  .bg-leftArea {
    background-image: url(""); /* The image on right */
    background-color: #047; /* Used if the image is unavailable */
    /* You must set a specified height */
    background-position-x: center; /* Center the image */
    background-position-y: top;
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain;

  }

    .nextLevel {
      font-size: 3rem;
      margin:0;
      padding:0;
      line-height:normal;
  }
    .homeText{
      font-size:1.5rem;
    }

li.nav-item {
  padding: 0 20px;
  font-size: 1.5rem;
}

li.nav-item:hover {
  padding: 0 20px;
  font-size: 1.5rem;
  background-color: #047;
}

li.nav-item.active {
  padding: 0 20px;
  font-size: 1.5rem;
  background-color: #e80;
}

li.nav-item:last-child {
  background-color:#e80;
}

li .dropdown-item {
  padding: 10px 20px;
  font-size: 1.3rem;
}

li .dropdown-item:hover {
  padding: 10px 20px;
  font-size: 1.3rem;
  color: #fff;
  background-color: #17B;
}

a.nav-link{
  color: #fff;
}
a.nav-link:hover{
  color: #fff;
}

li.nav-itemm {
  padding: 5px 0px;
  font-size: 1.5rem;
}

li.footer-nav::marker {
  content: "";
}

@media (min-width: 500px) {

  .push-down {
    padding-top: 205px;
}

}

  @media (min-width: 576px) {
    .howwHigh {
     height:500px; 
    }

    .push-down {
      padding-top: 210px;
  }
     .nextLevel {
      font-size: 3rem;
      margin:0;
      padding:0;
      line-height:normal;
  }
     .homeText{
      font-size:1.5rem;
    }

  }

  @media (min-width: 768px) {
    .howHigh {
     height:450px; 
    }

    .homeText{
      font-size:1.5rem;
    }
    
    .push-down {
      padding-top: 0px;
      
  }
    
  .bg-productArea {
    background-image: url("/wp-content/uploads/2024/09/home_productHeader.jpg"); /* The image used */
    background-color: #047; /* Used if the image is unavailable */
    /* You must set a specified height */
    background-position-x: center; /* Center the image */
    background-position-y: center;
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;

  }
  
    .bg-rightArea {
      background-image: url("/wp-content/uploads/2024/10/homePage_Heroes_contact.jpg"); /* The image on left */
      background-color: #047; /* Used if the image is unavailable */
      /* You must set a specified height */
      background-position-x: center; /* Center the image */
      background-position-y: center;
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover;
  
    }
  
    .bg-leftArea {
      background-image: url("/wp-content/uploads/2024/10/homePage_Heroes_software.jpg"); /* The image on right */
      background-color: #047; /* Used if the image is unavailable */
      /* You must set a specified height */
      background-position-x: center; /* Center the image */
      background-position-y: center;
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover;
  
    }

     .nextLevel {
      font-size: 3.5rem;
      margin:0;
      padding:0;
      line-height:normal;
  }

  }

  @media (min-width: 992px) {
    .howHigh {
     height:450px; 
    }
    
    .homeText{
      font-size:1.8rem;
    }
    
    li.nav-item {
      padding: 0 10px;
      font-size: 1.2rem;
    }
    
    li.nav-item:hover {
      padding: 0 10px;
      font-size: 1.2rem;
      background-color: #047;
    }
    
    li.nav-item.active {
      padding: 0 10px;
      font-size: 1.2rem;
      background-color: #e80;
    }
	
	li.nav-item:last-child {
  background-color:#e80;
}
	  li.nav-item:last-child:hover {
  background-color:#c60;
}
    
    li .dropdown-item {
      padding: 10px 20px;
      font-size: 1.2rem;
    }
    
    li .dropdown-item:hover {
      padding: 10px 20px;
      font-size: 1.2rem;
      color: #fff;
      background-color: #17B;
    }

        .nextLevel {
      font-size: 3rem;
      margin:0;
      padding:0;
      line-height:normal;
  }

  }


  @media (min-width: 1200px) {
    .howHigh {
     height:777px; 
    }
    
    .homeText{
      font-size:2.5rem;
    }
    
    li.nav-item {
      padding: 0 20px;
      font-size: 1.5rem;
    }
    
    li.nav-item:hover {
      padding: 0 20px;
      font-size: 1.5rem;
      background-color: #047;
    }
    
    li.nav-item.active {
      padding: 0 20px;
      font-size: 1.5rem;
      background-color: #e80;
    }
    
    li .dropdown-item {
      padding: 10px 20px;
      font-size: 1.3rem;
    }
    
    li .dropdown-item:hover {
      padding: 10px 20px;
      font-size: 1.3rem;
      color: #fff;
      background-color: #17B;
    }

    .nextLevel {
      font-size: 4.5rem;
      margin:0;
      padding:0;
      line-height:normal;
  }

}

  @media (min-width: 1400px) {
    .howHigh {
     height:777px; 
    }
}


.btn-black {
  color: #fff;
  background-color: #000;
  text-align:center;
  border: 1px solid #fff;
}

.btn-black:hover {
  color: #fff;
  background-color: #222;
  border: 1px solid #fff;
}

.btn-blue {
  color: #fff;
  background-color: #17B;
  text-align:center;
  border: 1px solid #fff;
}

.btn-blue:hover {
  color: #fff;
  background-color: #037;
  border: 1px solid #fff;
}

.btn-orange {
  color: #fff;
  background-color: #e80;
  text-align:center;
  border: 1px solid #fff;
}

.btn-orange:hover {
  color: #fff;
  background-color: #c60;
  border: 1px solid #fff;
}

.navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}