.elementor-43311 .elementor-element.elementor-element-532c4db{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-43311 .elementor-element.elementor-element-8bcdea4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-43311 .elementor-element.elementor-element-a161e13 .wd-text-block{max-width:910px;}@media(max-width:767px){.elementor-43311 .elementor-element.elementor-element-a161e13 > .elementor-widget-container{margin:10px 10px 10px 10px;}}/* Start custom CSS for html, class: .elementor-element-1b1be36 */.wd-page-content.main-page-wrapper {
    
}

.wd-content-layout {
        padding-block: 0 !important; 
    padding: 0;
     min-width: 100%;
        margin: 0 auto;
}

#hero-section {
  display: flex;
  justify-content: space-between;
  padding: 40px 70px;
  background-image: url('https://bavaryadak.com/wp-content/uploads/Untitled-1-22.jpg');
  background-size: cover;
  background-position: 50% 50%;
  height: 480px;
}
#hero-text-sectoin {
  display: flex;
  flex-direction: column;
  width: 500px;
  margin-top: 80px;
}
#hero-text-sectoin h1 {
  background-color: white;
  text-align: center;
  color: #5c4000;
  padding: 15px;
  position: relative;
  margin-top:12px;
  font-size: 35px;
  font-weight: 800;
}
#hero-text-sectoin h6 {
  color: white;
  font-size: 20px;
  line-height: 2;
  text-align: justify;
  margin: 0;
}
#hero-a-links {
  margin-top: 40px;
  display: flex;
  justify-content: stretch;
}
#hero-a-links a {
  padding: 10px 40px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  margin: 0;
  justify-content: center;
  align-items: center;
}
#hero-a-links .one-day-shipping {
  background-color: transparent;
  border: dashed 2px #231800;
  border-left: none;
  color: white;
  width: 55%;
}
#hero-a-links .cta {
  background-color: #231800;
  border: solid 2px #231800;
  color: #fff;
  transition: 0.4s;
  font-size: 20px;
  width: 55%;
}
#hero-a-links .cta:hover {
  background-color: rgb(207, 207, 207);
  background-color: transparent;
  color: white;
}
#hero-big-img img {
  max-width: 800px;
  margin-top: 20px;
}
/* ===================== BENEFITS ================== */
.benefits-and-banners {
    display: flex;
    flex-direction: column;
      background-image: url('https://bavaryadak.com/wp-content/uploads/motor-oil-landing-padfgdfsdfgge_.jpg');
        height: 635px;
}
#benefits {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.benefit-card {
  width: 250px;
  height: 230px;
  padding: 20px;
  margin: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px;
}
.benefit-card img {
  width: 100px;
    margin-bottom: 20px;
}
.benefit-card h3 {
  font-size: 22px;
  margin-bottom: 5px;
  height: 50px;
  width: 300px;
    color: #f7f4e4;
  display: flex;
  justify-content: center;
  align-items:center;
} 
/* ===================== OIL BANNERS ================== */
.little-oil-banners  {
    display: flex; 
    justify-content: space-around;
    width: 1800px;
    margin: 0 auto;
}

.little-oil-banners > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('https://bavaryadak.com/wp-content/uploads/banner-pg.jpg');
    background-size: cover;
    width: 420px;
    padding: 40px;
}

.little-oil-banners .oil-banner-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-right: 15px;
}
.little-oil-banners .oil-banner-text h3 {
    width: 180px;
    margin-top: 10px;
    font-size: 24px;
}

.little-oil-banners .oil-banner-text a {
    background-color: #231800;
    color: #f7f4e4;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 18px;
    border: 3px solid #231800;
}

.little-oil-banners .oil-banner-text a:hover {
    background-color: transparent;
    color: #231800;
}

.little-oil-banners .oil-banner-image {
    width: 110px;
}

/* ===================== Comparison ================== */
.motor-oil-comparing h3 {
    text-align: center;
    padding: 30px;
    font-size: 35px;
    color: #231800;
    font-weight: 800;
}
.motor-oil-comparing table {
    width: max-content;
    margin: 0 auto 50px;
    
}
.motor-oil-comparing table tr:first-child {
    background-color: #231800;
    color: #f7f4e4;
    font-weight: 800;
    font-size: 20px;
}
.motor-oil-comparing table tr:first-child td {
        color: #f7f4e4 !important;
}
.motor-oil-comparing table tr {
    
}
.motor-oil-comparing table tr:not(:first-child) td:first-child {
    background-color: #f7f4e4;
}
.motor-oil-comparing table td {
    text-align: center;
    color: #231800;
    border: 2px solid #231800;
}
/* ===================== Cars ================== */
.based-on-cars {
    background-image: radial-gradient(white 60%, #faf3ce);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
     align-items: center; 
}
.based-on-cars h3 {
    background-color: #231800; 
    width: 100%;
    color:#f7f4e4;
    text-align: center;
    font-size: 33px;
    padding: 10px; 
}
.based-on-cars .car-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
        width: 1400px;
    margin-bottom: 40px;
}
.based-on-cars .car-list .car-toyota{
    width: 250px;
    position: relative;
}
.based-on-cars .car-list .car-toyota p{
    font-size: 48px;
    font-weight: 900;
    color: #f7f4e4;
    position: absolute;
bottom:  2px;
left: 50%;
transform: translate(-50%);
-webkit-text-stroke: 1px #231800;
    
}
.based-on-cars .car-list .car-toyota img {
    margin-bottom: 10px;
}
.based-on-cars .car-list .car-toyota h5{
    border: 2px solid #231800; 
    color: #231800; 
    border-radius: 3px;
    padding: 5px;
    font-size: 20px;
    text-align: center; 
    margin: 5px 30px;
    margin-top: -20px;
}
.based-on-cars .car-list .car-toyota h5:hover {
background-color:   #231800; 
color: #f7f4e4; 
transition:0.3s;
}
/* ===================== q and a ================== */
#q-and-a {
  background-color: #231800;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 700px;
  position: relative;
  text-align: justify;  
}
#q-and-a .title {
  color: #f7f4e4;
  font-size: 35px;
  margin: 10px;
  margin-right: 80px;
    align-self: flex-start;
}
#q-and-a .questions {
  display: flex;
  flex-wrap: wrap;
}
#q-and-a .question-box {
  width: 700px;
  margin: 10px;
}
#q-and-a .question {
  background-color: #f3df73;
  padding: 5px 15px;
  font-size: 20px;
  padding: 15px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  color: #5d4510;
}
#q-and-a .question:hover,
.active {
  background-color: #dac031;
  transition:0.3s;
}
#q-and-a .question::after {
  content: "+";
  margin-left: 10px;
  font-size: 25px;
  color: #120f08;
  float: left;
}
#q-and-a .question.active::after {
  content: "-";
  transition: 0.2s ease-out;
}
#q-and-a .answer {
  background-color: #f7f4e4;
  color: #5d4510;
  height: 0;
  overflow: hidden;
  padding: 0 15px;
  border-radius: 0 0 10px 10px;
  transition: height 0.3s ease-out, padding 0.3s ease-out;
  box-sizing: border-box;
}
#q-and-a .question-box .q-and-a-image {
  height: 90px;
  position: absolute;
  bottom: 20px;
  left: 100px;
filter: sepia(27%) saturate(114%);    
}
/* ===================== related articles ================== */

.related-articles {
    margin-right: 20px;
    width: 80%;
    margin: 0 auto;
}

.related-articles h3 {
    font-size: 28px;
    margin-top: 30px; 
    color:#231800;
}
.oil-cards-slider-container {
      position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.oil-cards-slider-wrapper {
    position: relative;
overflow: hidden; 
}
/*.cards-slider-wrapper:after {*/
/*     content:"";*/
/*     background-image: url('https://bavaryadak.com/wp-content/uploads/chevron-right.svg'), linear-gradient(90deg,transparent, rgba(255,255,255,0.5));*/
/*     background-size: 150%;*/
/*     background-repeat: no-repeat;*/
/*     background-position: 50%;*/
/*     filter: invert(100);*/
/*     transform: rotate(180deg);*/
/*     display: inline-block;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0; */
/*    height: 100%;*/
/*    width: 50px;*/
/*}*/
.oil-cards-slider-wrapper .oil-cards-slider {
        display: flex;
                overflow-x: auto;
scrollbar-width: none;
/*scroll-behavior: smooth; */
}
.oil-cards-slider-wrapper .oil-cards-slider .oil-card {
    flex: 0 0 auto;
    width: 300px;
    background-color: #f7f4e4; 
    border-radius: 3px;
    margin: 0 5px;
    border: 2px solid grey;
    position: relative; 
}
.oil-cards-slider-wrapper .oil-cards-slider .oil-card a {
      pointer-events: auto;
}
.oil-cards-slider-wrapper .oil-cards-slider .oil-card a img {
    width: 100%;
    height: 170px;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.oil-cards-slider-wrapper .oil-cards-slider .oil-card a h4 {
    color: #231800;
    margin: 15px 0 ;
    font-size: 20px;
    padding: 0 15px;
    font-weight: 700;
}
.oil-cards-slider-wrapper .oil-cards-slider .oil-card a p {
    color: #5d4510;
    font-size: 13px;
    padding: 0 15px;
    text-align: justify;
    line-height:1.5;
}
.oil-cards-slider-wrapper .oil-cards-slider.dragging .oil-card {
  cursor: grab;
  user-select: none;
}

/* ===================== help form ================== */
#help-form .title {
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
}
#help-form .title b {
  color: red;
}


/* ================================== responsive ============================== */
@media screen and (max-width:600px) {
    #hero-section {
  padding: 10px 30px;
  height: 280px;
          flex-direction:column;
          background-image:linear-gradient(-45deg, #dca011 , #3c2601);
}
#hero-text-sectoin {
    width:100%;
}
    #hero-text-sectoin h1 {
     margin-top:-30px;
  padding: 5px;
  font-size:20px;
}

#hero-text-sectoin h6 {
  font-size: 14px;
  line-height: 1.5;
}
#hero-a-links {
  margin-top: 15px;
}
#hero-a-links a {
  padding: 10px 5px;
  font-size: 12px;
  margin: 0;
  text-align:center;
}
#hero-a-links .cta {
  font-size: 14px;
  width: 60%;
}

/* ================= benefits ================= */
.benefits-and-banners {
    display: flex;
    flex-direction: column;
        height: 390px;
}
#benefits {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.benefit-card {
  height: 140px;
  padding: 5px;
  margin: 0px;
}
.benefit-card img {
  width: 50px;
    margin-bottom: 5px;
}
.benefit-card h3 {
  font-size: 12px;
  height: 50px;
  width: 100px;
} 
/* ===================== OIL BANNERS ================== */
.little-oil-banners  {
    display: flex; 
    flex-wrap:wrap;
    width: auto;
}

.little-oil-banners > div {
    background-size: contain;
    background-repeat:no-repeat;
    width: 48%;
    height:100px;
    padding: 10px;
    margin-top:10px;
}

.little-oil-banners .oil-banner-text {
    height: auto;
}
.little-oil-banners .oil-banner-text h3 {
    width: auto;
    margin-top: -10px;
    font-size: 12px;
}
.little-oil-banners .oil-banner-text a {
    margin-top: -15px;
    padding: 0px 10px;
    border-radius: 3px;
    font-size: 11px;
}

.little-oil-banners .oil-banner-image {
    width: 45px;
    margin-top:-5px;
}

/* ===================== Comparison ================== */
.motor-oil-comparing h3 {
    padding: 10px;
    font-size: 25px;
    margin-top:15px;
}
.motor-oil-comparing table {
    width: 100%;
    margin: 0 auto 10px;
    font-size: 13px;
    
}
.motor-oil-comparing table tr:first-child {
    font-size: 15px;
}

/* ===================== Cars ================== */
.based-on-cars {
    display: flex;
    flex-direction: column;
    justify-content: center;
     align-items: center; 
}
.based-on-cars h3 {
    font-size: 23px;
}
.based-on-cars .car-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
        width: 100%;
    margin: -10px 0 10px;
    
}
.based-on-cars .car-list .car-toyota{
    width: 100px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.based-on-cars .car-list .car-toyota p{
    font-size: 25px;
    bottom:  -1px;
}
.based-on-cars .car-list .car-toyota h5{
    padding: 0px;
    font-size: 10px;
    margin: 0px 0px;
    margin-top: -10px;
    width:80%;
}
/* ================= q and a  ================= */
#q-and-a {
  padding: 15px;
  min-height: auto;
  position: relative;
  text-align: justify;  
}
#q-and-a .title {
  color: white;
  font-size: 20px;
  margin: 10px;
  margin-right: 15px;
}
#q-and-a .question-box {
  width: 100%;
  margin: 8px 0px;
}
#q-and-a .question {
  font-size: 14px;
  padding: 12px 10px;
  border-radius: 5px 5px 0 0;
}
#q-and-a .question::after {
  content: "+";
  font-size: 20px;
}
#q-and-a .answer {
  border-radius: 0 0 5px 5px;
font-size:14px;
}
    #q-and-a .question-box .q-and-a-image {
      
        display:none;
    }
    
    /* ===================== related articles ================== */

.related-articles {
    margin-right: 0px;
    width: 100%;
}
.related-articles h3 {
    font-size: 22px;
    margin-top: 20px; 
}
.cards-slider-wrapper .cards-slider .card {
    margin: 0 2px;
    min-width: 180px;
}
.cards-slider-wrapper .cards-slider .card a img {
    width: 100%;
    height: 100px;
}
.cards-slider-wrapper .cards-slider .card a h4 {
    margin: 10px 0 ;
    font-size: 16px;
    text-align:center;
            padding: 0 5px;
font-weight: 700;
}
.cards-slider-wrapper .cards-slider .card a p {
    font-size: 11px;
        padding: 0 5px;
text-align: justify;
  line-height:1.4;

}
    /* ================= form ================= */

#help-form .title {
  font-size: 18px;
  margin-top: 30px;
}
}/* End custom CSS */