/* Source and licensing information for the line(s) below can be found at https://qsjmotors.com.ph/themes/custom/qsjmotor/css/qsjmotors-paragraph.css. */
/* 
    QSJ Motors
    Website CSS - Paragraph Contents
    By: Glimsol Web & Digital Solutions (PH)
*/

/* Paragraph */
.paragraph-section{padding-block: 30px;}

/* Paragraph Content Intelligence redefining Luxury */
.content-intel-redefine { position: relative; padding-block: 50px 60px;}
.content-intel-redefine > img { position: absolute; bottom: 0; z-index: -1;}
.upper-title > div { display: flex; flex-direction: column; justify-content: center; padding-bottom: 6px;}
.upper-title { display: flex; gap: 30px;}
.upper-title > div img { width: 100%; max-width: 175px;}
.header-wrapper .title { text-transform: uppercase; align-self: flex-end; line-height: 1; font-size: 4rem; color: var(--qsj-dark-blue); margin-bottom: 0;}
.upper-title .upper-title { text-align: left;}
.lower-title .title { text-align: right;}
.content-intel-redefine .container { padding-inline: 15vw;}
.upper-title span { text-transform: uppercase; color: var(--qsj-yellow); font-weight: 700; font-family: 'Bai-Jamjuree'; font-size: 0.9rem; margin-top: 6px;}
.content-intel-redefine .description { max-width: 70%; margin-inline: auto; text-align: center; text-wrap: balance; padding-block: 30px;}
.content-intel-redefine .cta-btn{margin-inline: auto;}
.content-intel-redefine .modal-body .media * { width: 100%; height: auto;}
/* .content-intel-redefine .modal-body > button { position: absolute; right: 20px; top: 20px; z-index: 3;} */
.content-intel-redefine .modal-body > button {
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 3;
    opacity: 1;
    background: var(--qsj-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 8px;
}
.content-intel-redefine .modal-body > button::before {
    content: '\f00d';
    color: var(--qsj-white);
    font-family: 'fontAwesome';
    font-size: 1.2rem;
}
.content-intel-redefine .modal .modal-dialog { transform: none; max-width: 70%;}

/* Paragraph Content Discover our Brands */
.content-discover-our-brands .description{margin-top: 10px;}
.content-discover-our-brands .title{max-width: 320px;}
.brand-item img { aspect-ratio: 235 / 140; object-fit: contain; border: 1px solid var(--qsj-light-gray); border-radius: 5px; transition: all 300ms;}
.our-brands-wrapper { margin-top: 30px;}
.brand-item{ cursor: pointer; padding: 2px; position: relative;}
.brand-item a::before { content: 'View More'; width: calc(100% - 4px); background: var(--qsj-dark-blue); height: fit-content; display: block; position: absolute; bottom: 2px; color: var(--qsj-white); text-align: center; padding: 5px; border-radius: 0 0 5px 5px; font-family: 'Bai-Jamjuree'; text-transform: uppercase; font-weight: 400; z-index: 3; opacity: 0; transition: all 300ms; font-size: 0.9rem;}
.brand-item:hover img { border-color: var(--qsj-dark-blue);}
.brand-item:hover a::before {opacity: 1;}
.brand-item.pointer-none{
    pointer-events: none;
}


/* Paragraph Statistics  */
.content-statistic{background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center;}
.content-statistic img { position: absolute; left: 0; top: 0; width: 100%; z-index: -1;}
.content-statistic { position: relative; overflow: hidden; padding: 60px; margin-bottom: 30px;}
.content-statistic::before { background: var(--qsj-blue); content: ''; position: absolute; top: 0; width: 100%; height: 100%; left: 0; opacity: 0.8;}
.content-statistic .container { position: relative; z-index: 2; color: var(--qsj-white); text-align: center; padding-inline: 60px;}
.statistic-item h5 { font-size: 2.5rem; margin-bottom: 0;}
.statistic-item span { font-size: 0.8rem;}
.statistic-item { display: grid; place-content: center;}

/* Content: Alternate Image  */
.alternate-image-info { height: 100%; display: grid; place-content: center; width: 90%; padding-block: 30px;}
.alternate-image-info:not(.right-pos){padding-left: 50px;}
.alternate-image-info.right-pos{padding-right: 50px;}
.content-alternate-image img { width: 100%;}
.content-alternate-image .title::after { content: ''; width: 15%; height: 3px; background: var(--qsj-soft-blue); display: block; margin-top: 15px;}
.content-alternate-image .title { position: relative; margin-bottom: 15px;}
.content-alternate-image .title:before { content: ''; width: 30%; height: 3px; background: var(--qsj-light-gray); position: absolute; bottom: 0; left: 0; z-index: -1;}
.alternate-image-info > div:has(p) { line-height: 1.8;}

/* Content: Center Title Description with Views */
.content-title-description-views.paragraph-section { background: var(--qsj-dr-white); padding-block: 60px;}
.upper-header { text-align: center; max-width: 700px; margin-inline: auto;}
.upper-header h3 { max-width: 650px; margin-inline: auto;}
.upper-header h3.title::after { content: ''; width: 13%; height: 3px; background: var(--qsj-soft-blue); display: block; margin-top: 15px; position: relative; z-index: 2; left: 50%; transform: translateX(-50%);}
.upper-header h3.title { position: relative; margin-bottom: 15px;}
.upper-header h3.title:before { content: ''; width: 25%; height: 3px; background: var(--qsj-light-gray); position: absolute; bottom: 0; left: 50%; z-index: 1; transform: translateX(-50%);}
.footer-view-all { display: flex; justify-content: center; margin-top: 40px;}
.news-events h6 { font-size: 1.25rem; color: var(--qsj-dark-blue); text-transform: uppercase;}
.dates-and-events span:not(:last-child) { border-right: 1px solid var(--qsj-gray); padding-right: 10px; color: var(--qsj-yellow);}
.dates-and-events { text-transform: uppercase; font-size: 0.8rem; display: flex; gap: 10px; line-height: 1; margin-bottom: 20px; font-weight: 500;}
.dates-and-events span:last-child { color: var(--qsj-gray);}
.news-events-body { display: flex; flex-direction: column; height: 100%; padding-block: 10px; border-bottom: 2px solid var(--qsj-light-gray);}
.news-events-body > a { margin-top: auto; display: block; text-decoration: none; font-weight: 600; color: var(--qsj-dark-blue); transition: all 300ms; padding-top: 10px;}
.news-events-body > a:hover{color: var(--qsj-yellow);}
.news-events-body > a svg {  margin-left: 5px;}
.news-events img { height: 100%; object-fit: cover; border-radius: 5px;}
.news-events-wrapper li > div,
.news-events-wrapper li > div > span { height: 100%; display: block;}
.news-events > .row, .news-events{ height: 100%;}
.news-events-wrapper { margin-top: 50px;}
.news-events-description { color: var(--qsj-gray); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 46px;}


/* Content: Views With title */
.view-content > div > ul.landing-page-news-event{padding-inline: 40px;}
.landing-page-news-event li { margin-bottom: 30px;}
.landing-page-news-event .news-events-item h4 { color: var(--qsj-dark-blue); margin-bottom: 10px; text-transform: uppercase;}
.landing-page-news-event .news-events-item .news-events-description { font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 46px;}
.landing-page-news-event .news-events-item .news-events-body > a { font-size: 0.85rem;} 
.landing-page-news-event .news-events-item img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px; transition: all 300ms;} 
.landing-page-news-event .news-events-item a:has(img) { display: block; overflow: hidden; border-radius: 5px;}
.landing-page-news-event .news-events-item a:hover img { transform: scale(1.06);}
.news-events a:hover img {transform: scale(1.06);}
.news-events a img {transition: all 300ms;}
.news-events a:has(img) { display: block; overflow: hidden; border-radius: 5px;}

/* Content: Card With Background  */
main.node-11 .content-card-with-bg.paragraph-section { padding-top: 0;}
.card-item-wrapper { background: var(--qsj-blue); display: flex; justify-content: center; color: var(--qsj-white); text-align: center; flex-wrap: wrap; padding-block: 30px; border-radius: 5px; row-gap: 30px; }
.card-item img { width: 50px; margin-bottom: 8px;}
.card-item p { margin-bottom: 0; font-weight: 500; font-size: 0.9rem;}
.card-item { width: 20%; min-width: 150px;}
.card-item:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.3);}
.content-card-with-bg h5 { margin-bottom: 15px; color: var(--qsj-blue);}

/* Content: Card With description  */
.card-item-description-wrapper .card-item { width: 100%; text-align: center; color: var(--qsj-dark-gray); border: 1px solid var(--qsj-light-gray); border-radius: 5px; padding: 20px; height: 100%;}
.card-item-description-wrapper .row { row-gap: 10px;  --bs-gutter-x: 10px; justify-content: center;}
.card-item-description-wrapper { margin-top: 30px;}
.card-item-description-wrapper h6 { color: var(--qsj-blue); margin-block: 15px 7px;}
.card-item-description-wrapper .card-item p { font-weight: 400;}

/* Content: Alternate Image with Background  */
.alternate-image-w-bg .row { --bs-gutter-x: 0;}
.alternate-image-w-bg .alternate-image-info.right-pos,
.alternate-image-w-bg .alternate-image-info:not(.right-pos){ padding: 50px;}
.alternate-image-w-bg .col-12.col-md-6:has(.alternate-image-info){background: var(--qsj-blue);}
.alternate-image-w-bg .alternate-image-info{ width: 100%; background: transparent; color: var(--qsj-white);}
.alternate-image-w-bg .title { color: var(--qsj-white); position: relative; margin-bottom: 20px}
.alternate-image-w-bg .title::before { content: ''; width: 28%; height: 3px; background: var(--qsj-light-gray); position: absolute; bottom: 0; left: 0; z-index: 1;}
.alternate-image-w-bg .title::after { width: 13%; height: 3px; background: var(--qsj-soft-blue); display: block; margin-top: 20px; position: relative; z-index: 2; left: 0; content: '';}
.alternate-image-w-bg img { height: 100%; object-fit: cover;}
.alternate-image-w-bg .cta-btn { border-color: var(--qsj-white); color: var(--qsj-white);}
.alternate-image-w-bg .alternate-image-info > div p:last-child { margin-bottom: 0;}
.alternate-image-w-bg .alternate-image-info > div { line-height: 1.8;}
.alternate-image-w-bg .alternate-image-info > div + a.cta-btn{margin-top: 20px;}

/* Content: Timeline */
.content-timeline .small-title { text-align: center;}
.content-timeline .title { max-width: 600px; text-align: center; margin-inline: auto;}
.milestone-wrapper { margin-top: 50px;}
.milestone-item { display: grid; grid-template-columns: 1fr 70px 1fr; grid-template-areas: 'milestone-img milestone-separator milestone-body'; padding-bottom: 40px; position: relative;}
.milestone-image { grid-area: milestone-img;}
.milestone-separator { grid-area: milestone-separator;}
.milestone-body { grid-area: milestone-body;}
.milestone-image img { width: 100%; max-width: 350px;}
.milestone-image { grid-area: milestone-img; text-align: end;}
.milestone-body { grid-area: milestone-body; background: var(--qsj-blue); color: var(--qsj-white); padding: 35px 40px; border-radius: 5px;}
.milestone-line { background: var(--qsj-blue); width: 2px; height: 100%; margin-inline: auto; position: absolute; left: 50%; transform: translateX(-50%); top: 0;}
.milestone-line::after { content: ''; width: 10px; height: 10px; background: var(--qsj-blue); position: absolute; left: -4px; top: 30px; border-radius: 50%;}
.milestone-line::before { width: 0px; height: 0px; border-style: solid; border-width: 12px 20px 12px 0; border-color: transparent #14386C transparent transparent; transform: rotate(0deg); content: ''; position: absolute; top: 23px; left: 16px;}
.content-timeline .milestone-body .small-title { text-align: left; font-size: 1.5rem; margin-bottom: 0;}
.milestone-description { margin-top: 20px;}
.milestone-description p:last-child { margin-bottom: 0;}
.milestone-wrapper > div:last-child  { padding-bottom: 0;}
.milestone-wrapper > div:last-child .milestone-separator{ height: 100%;}
.milestone-item:nth-child(even) { grid-template-areas: 'milestone-body milestone-separator milestone-img';}
.milestone-item:nth-child(even) .milestone-image{ text-align: left;}
.milestone-item:nth-child(even) .milestone-line::before{transform: rotate(180deg); right: 16px; left: unset;}

/* Content: Brands and Showroom */
#tab-content iframe { width: 100%; height: 100%; min-height: 300px;}
.list-brands-wrapper .nav-header { color: var(--qsj-white); background: var(--qsj-dark-blue); text-align: center; padding: 15px 10px;}
.list-brands-wrapper .nav-header h6 { font-family: 'Montserrat'; margin-bottom: 0;}
.list-brands-wrapper .nav-link { display: flex; flex-direction: column; color: var(--qsj-blue); font-weight: 700; border: none; border-radius: 0;}
.list-brands-wrapper .nav-link.active { color: var(--qsj-blue); background: var(--qsj-lighter-gray); border-top: 1px solid var(--qsj-gray);}
.list-brands-wrapper .nav-item { width: 100%; text-align: center;}
.list-brands-wrapper .nav-link span { font-size: 0.8rem; font-weight: 500; color: var(--qsj-gray);}
.list-brands-wrapper .nav-tabs{ border: none;}
.list-brands-wrapper { border-radius: 3px; overflow: hidden; border: 1px solid var(--qsj-gray);}
.list-brands-wrapper .nav-item:not(:last-child) a { border-bottom: 1px solid var(--qsj-gray);}
.content-brands-and-showroom .row:has(.list-brands-wrapper) { margin-top: 30px;}
.content-brands-and-showroom .tab-content { height: 100%; display: grid;}

/* Content: Webform  */
.content-webform > div > .row { --bs-gutter-x: 60px;}
.webform-information { padding: 50px; background: var(--qsj-blue); color: var(--qsj-white); height: 100%; display: grid; place-content: center;}
.webform-information h3 { font-family: 'Montserrat'; font-weight: 500; padding-right: 30px;}
.webform-information .description { color: var(--qsj-dr-white); font-weight: 300; margin-bottom: 30px;}
.webform-content h4 { color: var(--qsj-dark-blue); font-family: 'Montserrat';}
.webform-content #edit-processed-text p { color: var(--qsj-dark-gray);}
.webform-content #edit-processed-text{ margin-bottom: 20px;}
.agree-checkbox .description { color: var(--qsj-black); margin-left: 10px; font-size: 1rem;}
.agree-checkbox { display: flex; align-items: center;}
.agree-checkbox input { margin-top: 3px;}
.webform-content label { font-weight: 500; color: var(--qsj-dark-gray);}
.node-26 .alert.alert-error.alert-danger { display: none;}
.webform-details { display: grid; grid-template-areas: 'icon item'; grid-template-columns: 30px 1fr; gap: 15px;}
.webform-details-item p { margin-bottom: 3px;}
.webform-details-icon img { width: 100%; height: auto;}
.webform-details-item h6 { margin-top: 5px;}
.webform-content { padding-block: 20px;}
.webform-details-item h6 { font-family: 'Montserrat'; font-weight: 500;}
.webform-content #edit-actions input { width: 100%; text-transform: uppercase;}

/* Content: Dealership Directory  */
.content-dealership-directory .nav-pills { justify-content: center; gap: 15px 25px; margin-top: 35px;}
.content-dealership-directory .nav-pills .cta-btn{ font-size: 0.9rem; width: 190px; padding: 5px;}
.content-dealership-directory .nav-pills .cta-btn.active::before{opacity: 1;}
.dealership-wrapper { margin-top: 50px;}
.dealership-item { box-shadow: 0px 2px 6px #31313129; border-radius: 5px; overflow: hidden; height: 100%;}
.dealership-wrapper .row li > div { height: 100%;}
.dealership-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; background: linear-gradient(180deg, rgba(20, 56, 108, 1) 0%, rgba(7, 32, 68, 1) 100%); color: var(--qsj-white); gap: 10px; height: 100%;}
.dealership-header h6 { margin-bottom: 0; text-transform: uppercase;}
.dealership-body p { margin-bottom: 5px; color: var(--qsj-dark-gray); word-break: break-word; font-size: 0.9rem;}
.dealership-body { padding: 20px; display: none;}
.dealership-header span { background: var(--qsj-yellow); border-radius: 3px; padding: 0px 15px;}
.dealership-header span { background: var(--qsj-yellow); border-radius: 3px; padding: 0px 15px; text-transform: uppercase; font-weight: 500; font-size: 0.75rem;}
.dealership-body p span { font-weight: 600; margin-right: 5px; text-wrap: nowrap;}
.dealership-wrapper .row { row-gap: 15px; --bs-gutter-x: 15px;}
/* Source and licensing information for the above line(s) can be found at https://qsjmotors.com.ph/themes/custom/qsjmotor/css/qsjmotors-paragraph.css. */