.elementor-43763 .elementor-element.elementor-element-fbbd521{--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;}/* Start custom CSS for html, class: .elementor-element-b0d25e4 */#hero-section{
        background-image: linear-gradient(90deg, #080c1b, #172d55, #080c1b);
        display: flex;
        justify-content: space-between;
        align-items: center;
}
#hero-section .text-section {
    margin-right: 80px;
}
#hero-section .text-section h1 {
    color: #172d55;
    background-color: #e8edf6; 
    padding: 10px 20px;
    font-size: 2.5rem;
}
#hero-section .text-section h3{
    color: #e8edf6;
    font-size: 1.8rem;
    font-weight: 400;
    text-align: center
}
#hero-section .a-tag-section{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
#hero-section .a-tag-section p {
    color: white;
        width: 55%;
         display: flex; 
    justify-content: center;
    align-items: center;
        height: 55px;
        background-color: ble;
            font-size: 1.2rem;
    font-weight: 600;
    border: 2px dashed white;
    border-left: none; 
}

#hero-section .a-tag-section a {
    background-color: #e8edf6; 
    color: #172d55;
    width: 45%;
    height: 55px;
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
        border: 2px solid #e8edf6;
        transition: 0.3s;
}

#hero-section .a-tag-section a:hover {
    background-color: transparent; 
    color: white;
    
}
#hero-section img {
    margin-left: 40px;
}
/*=============================== disk purchase ===============================*/
.toyota-disk-purchase, .toyota-plate-purchase{
    display: flex; 
    justify-content: space-between; 
    margin: 50px 100px;
    width: 80%;
    position: relative;
}
.toyota-clutch-disk, .toyota-clutch-plate {
    display: flex; 
}
.toyota-clutch-disk span {
    background-color: #e8edf6; 
    width: 180px;
    height: 180px;
    position: absolute; 
    top: 25px;
    margin-right: 20px;
    z-index: 1;
    border-radius: 15px;
}
.toyota-clutch-disk #last-span{
    margin-right: -10px;
}
.toyota-clutch-disk img,  .toyota-clutch-plate img {
    height: 190px; 
    z-index: 2; 
}
.toyota-clutch-disk .text-section, .toyota-clutch-plate .text-section{
    margin-right: 35px;
    margin-top: 40px; 
    max-height: 20px;
}
.toyota-clutch-disk .text-section h4, .toyota-clutch-plate .text-section h4 {
    font-size: 1.9rem;
    line-height: 0.2;
}
.toyota-clutch-disk .text-section p,  .toyota-clutch-plate .text-section p {
    font-size: 1.2rem;
}
.toyota-clutch-disk .text-section a , .toyota-clutch-plate .text-section a {
    font-size: 1.4rem;
    color: white; 
    background-color: #333;
    padding: 5px 30px; 
    border-radius: 50px;
    border: 1px solid #333; 
    transition: 0.3s; 
}
.toyota-clutch-disk .text-section a:hover , .toyota-clutch-plate .text-section a:hover {
    background-color: transparent;
    color: #333;
}

/*=============================== benefits ===============================*/

.disk-and-plate-benefits {
            background-image: linear-gradient(90deg, #080c1b, #172d55, #080c1b);
    display: flex; 
    position: relative;
    overflow: hidden;
    height: 300px;
} 
.disk-and-plate-benefits > img {
    height: 500px; 
    position: absolute; 
} 
.disk-and-plate-benefits > img:first-child {
    top: -120px
}
.disk-and-plate-benefits > img:last-child {
    left: 0; 
    height: 550px;
    top:50px;
}
.disk-and-plate-benefits .benefits-section {
    margin-right: 470px;
    margin-top: 50px;
}

.disk-and-plate-benefits .benefits-section .benefit {
    display: flex; 
    gap: 10px; 
}
.disk-and-plate-benefits .benefits-section .benefit img {
    height: 30px;
}
.disk-and-plate-benefits .benefits-section .benefit h3 {
    color: #f6f6f6; 
}


/*=============================== alert ===============================*/

h3.alert-before-buying {
                background-image: linear-gradient(90deg, #080c1b, #172d55, #080c1b);
color: #e8edf6; 
display: flex;
align-items: center;
justify-content: center;
height: 80px; 
font-size: 1.8rem
}

/*=============================== bearing ===============================*/

.clutch-bearing {
    display: flex; 
    justify-content: space-between; 
}

.clutch-bearing .text-section {
        padding: 60px
}
.clutch-bearing .text-section p {
    color: #0c152a; 
    font-size: 2rem;
    width: 90%;
    font-weight: 200;

}
.clutch-bearing .text-section p b {
    color: #0d2a89;
        font-weight: 400;

}
.clutch-bearing .text-section a {
    background-color: #333333; 
    color: white; 
    font-size: 1.7rem; 
    border-radius: 20px; 
    padding: 10px 25px;
        font-weight: 200;
border: 2px solid #333; 
transition: 0.3s; 
}

.clutch-bearing .text-section a:hover {
    color: #333;
    background-color: transparent;
}

.clutch-bearing img {
    height: 300px;
    margin-left: 80px;
}



/* ===================== q and a ================== */
#q-and-a {
  background-color: #0f162f;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 500px;
  position: relative;
  text-align: justify;  
}
#q-and-a .title {
  color: white;
  font-size: 35px;
  margin: 10px;
  margin-right: 15px;
}
#q-and-a .questions {
  display: flex;
}
#q-and-a .question-box {
  max-width: 700px;
  margin: 10px;
}
#q-and-a .question {
  background-color: #bfc8e9;
  padding: 5px 15px;
  font-size: 20px;
  padding: 15px;
  border-radius: 10px 10px 0 0;
  user-select: none;
  cursor: pointer;
  color: #0f162f;
  transition: 0.3s;
}
#q-and-a .question:hover,
.question.active {
  background-color: #94a7ec;
}
#q-and-a .question::after {
  content: "+";
  margin-left: 10px;
  font-size: 28px;
  font-weight: 900;
  color: rgb(75, 75, 75);
  float: left;
  color:#4e5ace;
}
#q-and-a .question.active::after {
  content: "-";
  transition: 0.2s ease-out;
}
#q-and-a .answer {
  background-color: #e4e9f9;
  color: #27292f; 
  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: 80px;
  position: absolute;
  bottom: 20px;
  left: 100px;
}


@media screen and (max-width:600px) {
    .wd-content-layout {
        padding-block: 0 !important; 
    padding: 0;
     min-width: 100%;
        margin: 0 auto;
}

/*-------------------- hero section ------------------*/
#hero-section{
        display: flex;
        flex-direction:column;
        justify-content: space-between;
        margin-bottom:20px;
}
#hero-section .text-section {
    margin-right: 0px;
    padding:30px;
}
#hero-section .text-section h1 {
    color: #172d55;
    background-color: #e8edf6; 
    padding: 10px;
    font-size: 1.2rem;
    text-align:center;
}
#hero-section .text-section h3{
    font-size: 1.2rem;
    font-weight: 200;
    text-align: center;
    margin-top:-15px;
}
#hero-section .a-tag-section{
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
#hero-section .a-tag-section p {
    width:50%;
        height: 55px;
            font-size: 0.9rem;
    font-weight: 400;
    border: 1px dashed white;
    border-left: none; 
    text-align:center;

}
#hero-section .a-tag-section a {
        width:50%;
text-align:center;
    height: 55px;
    font-size: 1rem;
    font-weight: 400;
    border: 1px solid #e8edf6;
}
#hero-section img {
    margin-left: 0px;
    margin-top:-50px;
    
}

/*-------------------- toyota purchase ------------------*/

.toyota-disk-purchase, .toyota-plate-purchase{
    display: flex; 
    flex-direction:column;
    justify-content: space-between; 
    gap:40px;
    margin: 0px ;
    width: 100%;
    margin-bottom:20px;
}
.toyota-clutch-disk, .toyota-clutch-plate {
    display: flex; 
}
.toyota-clutch-disk span {
    width: 100px;
    height: 100px;
    top: 25px;
    margin-right: 20px;
    border-radius: 10px;
}
.toyota-clutch-disk #last-span{
    top: 170px;
    margin-right: 20px;
}
.toyota-clutch-plate #last-span{
    margin-right: 10px;
    top: 50px;
    margin-right: 20px;
}
.toyota-clutch-disk img,  .toyota-clutch-plate img {
    height: 120px; 
}
.toyota-disk-purchase:nth-of-type(1) .toyota-clutch-disk:last-child img {
    height:140px;
    margin-left: 10px;
}
.toyota-clutch-disk .text-section, .toyota-clutch-plate .text-section{
    margin-right: 15px;
    margin-top: 20px; 
    max-height: 20px; 
}
.toyota-clutch-disk .text-section h4, .toyota-clutch-plate .text-section h4 {
    font-size: 1rem;
    line-height: 0.2;
}
.toyota-clutch-disk .text-section p,  .toyota-clutch-plate .text-section p {
    font-size: 0.8rem;
}
.toyota-clutch-disk .text-section a , .toyota-clutch-plate .text-section a {
    font-size: 0.8rem;
    padding: 2px 20px; 
    margin-top:-10px;
}
/*-------------------- benefits ------------------*/

.disk-and-plate-benefits {
    height: 250px; 
    margin-bottom:30px; 
} 
.disk-and-plate-benefits > img:first-child {
        display:none;
}
.disk-and-plate-benefits > img:last-child {
    left: 15px; 
    height: 300px;
    top:110px;
}
.disk-and-plate-benefits .benefits-section {
    margin-right: 0px;
    margin-top: 20px;
}
.disk-and-plate-benefits .benefits-section .benefit {
    display: flex; 
    gap: 10px; 
} 
.disk-and-plate-benefits .benefits-section .benefit img {
    height: 15px;
}
.disk-and-plate-benefits .benefits-section .benefit h3 {
    color: #f6f6f6; 
    font-size:0.8rem;
    line-height:0.5;
}  
/*-------------------- alert ------------------*/
h3.alert-before-buying {
height: 70px; 
font-size: 1rem; 
text-align: center;
}
/*-------------------- bearing ------------------*/
.clutch-bearing {
    display: flex; 
    flex-direction:column;
    justify-content: space-between; 
}

.clutch-bearing .text-section {
        padding: 20px
}
.clutch-bearing .text-section p {
    font-size: 1.2rem;
    width: 100%;
}
.clutch-bearing .text-section a {
    font-size: 1.1rem; 
    border-radius: 10px; 
    padding: 5px 20px;
border: 1px solid #333; 
}
.clutch-bearing img {
    height: 150px;
    margin: 20px;
}

/*-------------------- q & a ------------------*/
#q-and-a {
  padding: 15px;
  min-height: auto;
  position: relative;
  text-align: justify;
  /*flex-wrap:wrap;*/
}
#q-and-a .questions {
      flex-direction:column;
}
#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;
} 
    
}/* End custom CSS */