@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
body.landing {font-family: "Lato", sans-serif; font-size: 22px; color: #000;}
img {max-width: 100%;}
.lpbanner {background: #fccc21; background-size: cover; padding: 40px 0 0; color: #000;}
.lpbanner .container {/* display: flex; gap: 40px; */ max-width: 1450px;}

.lpbanner .mobpic {width: calc(40% - 4px); text-align: center; display: inline-block; vertical-align: middle; max-width: 454px;}
.lpbanner .mobpic .inline {display: inline-block; position: relative; transform: translateY(50px); border-radius: 52px; box-shadow: 0 0 4px rgba(0,0,0,.5);}
.lpbanner .mobpic .inline::before {content: ''; display: block; height: 100%; width: 100%; position: absolute; top: 0; left: calc(100% - 5%); z-index: 0; background: url(../images/Mobile-Shadow.png) 0 0 no-repeat; background-size: 100% 100%; opacity: .20; pointer-events: none;}
.lpbanner .txt {width: calc(60% - 4px); display: inline-block; vertical-align: middle; font-size: 16px;}
.lpbanner .mobpic img {max-height: 536px; box-shadow: 25px 10px 15px rgba(0,0,0,0.2); border-radius: 36px; z-index: 1; position: relative;}
.lpbanner .txt .primary {margin-bottom: 40px;}
.lpbanner .txt .primary h1 {font-size: 72px; margin-bottom: 20px;}
/* .lpbanner .txt .primary h1 span {font-size: 80%;} */
.lpbanner .txt .primary p {font-size: 22px; margin-bottom: 40px;}
.lpbanner .txt .primary .cta {margin-bottom: 20px; display: inline-block; color: #000; text-decoration: none; font-weight: 600; padding: 12px 32px; border-radius: 40px; font-size: 22px; border: 1px solid #000; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);}

.lpbanner .secondary {display: flex; gap: 20px; width: calc(100% + 164px); transform: translateX(-164px); z-index: 2; position: relative;;}
.lpbanner .secondary .tracking {padding: 68px 20px 20px; background: url(../images/Emergency-Bg.png) center no-repeat; background-size: cover; display: flex; gap: 12px; border-radius: 20px; width: 260px; color: #fff; box-shadow: 2px 2px 4px rgba(0,0,0);}
.lpbanner .secondary .tracking.phone {background-image: url(../images/Emergency-Bg2.png);}
.lpbanner .secondary .tracking .icon img {height: 50px; border-radius: 12px; overflow: hidden;}
.lpbanner .secondary .for {text-align: center; margin-left: 40px;}
.lpbanner .secondary .for h3 {font-size: 20px; margin-bottom: 8px;}
.lpbanner .secondary .for .list {display: flex; gap: 32px; padding: 12px 24px; border: 0 solid #4c3f11; border-radius: 12px; border: 1px solid #000;}
.lpbanner .secondary .for .list .item .icon {display: block; margin-bottom: 4px;}
.lpbanner .secondary .for .list .item .icon img {height: 36px;}
.lpbanner .secondary .for .list .item .txt {display: block; width: 100%; font-size: 12px;}

.whyRoadLiv {padding: 80px 0;}
.whyRoadLiv .container {padding-top: 40px;}
.whyRoadLiv .whytxt {display: inline-block; width: calc(50% - 4px); vertical-align: middle; padding-right: 40px;}
.whyRoadLiv .whytxt h2 {font-size: 40px; margin-bottom: 20px;}
.whyRoadLiv .whytxt p {margin-bottom: 36px;}
.whyRoadLiv .whytxt .cta {margin-bottom: 20px; display: inline-block; background: #ffd900; color: #000; text-decoration: none; font-weight: 600; padding: 14px 40px; border-radius: 40px; box-shadow: 0 0 4px rgb(0, 0, 0);}
.whyRoadLiv .whypoints {display: inline-block; width: calc(50% - 4px); vertical-align: middle;}
.whyRoadLiv .whypoints .item {display: inline-block; width: calc(45% - 4px); vertical-align: top; margin: 12px 2.5%; padding: 20px; box-shadow: 0 0 8px rgba(0,0,0,0.1); border-radius: 32px; text-align: center; min-height: 144px;}
.whyRoadLiv .whypoints .item .icon {display: inline-block; width: calc(60px - 4px); vertical-align: top;}
.whyRoadLiv .whypoints .item .txt {display: inline-block; width: calc(100% - 60px - 4px); vertical-align: top; padding-left: 5%; text-align: left;}
.whyRoadLiv .whypoints .item .txt h3 {font-size: 22px; margin-bottom: 8px;}
.whyRoadLiv .whypoints .item .txt p {font-size: 18px; margin-bottom: 0;}
.whyRoadLiv .whypoints .item:nth-child(1) {border-bottom-right-radius: 0;}
.whyRoadLiv .whypoints .item:nth-child(2) {border-bottom-left-radius: 0;}
.whyRoadLiv .whypoints .item:nth-child(3) {border-top-right-radius: 0;}
.whyRoadLiv .whypoints .item:nth-child(4) {border-top-left-radius: 0;}

.watchshorts {padding: 80px 0; background: #f3f3f3;}
.watchshorts .container {max-width: 1450px;}
.watchshorts .head {text-align: center; margin-bottom: 40px;}
.watchshorts .head h4 {font-size: 24px; font-weight: 400; font-style: italic; margin-bottom: 8px;}
.watchshorts .head h2 {font-size: 38px; margin-bottom: 8px; font-weight: 900;}
.watchshorts .head h3 {font-size: 34px; margin-bottom: 8px; font-weight: 400;}
.watchshorts .explaination .img {display: inline-block; width: calc(40% - 4px); vertical-align: middle; text-align: center;}
.watchshorts .explaination .img img {max-height: 800px;}
.watchshorts .explaination .txt {display: inline-block; width: calc(60% - 4px); vertical-align: middle; padding-left: 5%;}
.watchshorts .explaination .txt h2 {font-size: 36px; margin-bottom: 20px; font-weight: 900;}
.watchshorts .explaination .txt h4 {margin-bottom: 28px; font-weight: 400; font-size: 28px;}
.watchshorts .explaination .txt p {margin-bottom: 28px;}
.watchshorts .explaination .txt .points ul {display: block; list-style: none; margin-bottom: 20px;}
.watchshorts .explaination .txt .points li {display: block; margin-bottom: 16px; padding-left: 40px; background: url(../images/CheckMark.png) 0 2px no-repeat; background-size: 24px; font-size: 20px;}
.watchshorts .explaination .txt .gplayqr {display: flex;}
.watchshorts .explaination .txt .gplayqr img {height: 60px;}
.watchshorts .explaination .txt .gplayqr .gp {padding-right: 32px;}
.watchshorts .explaination .txt .gplayqr .qr {padding-left: 32px; border-left: 2px solid #000;}

.lpfaq {padding: 80px 0;}
.lpfaq .head {margin-bottom: 40px;}
.lpfaq .head h4 {font-size: 24px;}
.lpfaq .head h2 {font-size: 46px;}
.lpfaq .faqinner {}
.lpfaq .faqinner .faqs {display: inline-block; width: calc(100% - 5% - 380px - 4px); vertical-align: middle;}
.lpfaq .faqinner .contact {display: inline-block; width: calc(380px - 4px); vertical-align: middle; margin-left: 5%; background: #ffd636; padding: 32px; border-radius: 20px;}
.lpfaq .faqinner .contact h3 {margin-bottom: 12px;}
.lpfaq .faqinner .contact p {margin-bottom: 20px; color: #707070;}
.lpfaq .faqinner .contact .cta a {display: inline-block; background: #000; color: #ffd900; text-decoration: none; font-weight: 600; padding: 12px 32px; border-radius: 40px; box-shadow: 0 0 4px rgb(0, 0, 0);}
.lpfaq .faqinner .faqs .item {display: block; border-bottom: 1px solid #c1c0c0;}
.lpfaq .faqinner .faqs .item h3 {display: block; padding: 20px 0; font-size: 28px; font-weight: 600; cursor: pointer; position: relative;}
.lpfaq .faqinner .faqs .item h3::before {content: '\2b'; display: block; position: absolute; right: 0; font-weight: 400; font-size: 26px; top: 20px; font-family: 'Font Awesome\ 5 Free'; font-weight: 900;}
.lpfaq .faqinner .faqs .item.active h3::before {content: '\f068';}
.lpfaq .faqinner .faqs .item .answer {display: none; padding: 20px; background: #f3f3f3; font-size: 18px;}
.lpfaq .faqinner .faqs .item.active .answer {display: block;}

@media only screen and (max-width: 1600px) {
    body.landing {font-size: 18px;}
    .lpbanner .txt .primary h1 {font-size: 60px;}
    .lpbanner .secondary .tracking {width: 230px;}
    .lpbanner .secondary .tracking .tx {font-size: 14px;}
    .lpbanner .secondary .tracking .icon img {height: 36px;}
    .lpbanner .secondary .for .list {gap: 16px;}
    .lpbanner .secondary {transform: translateX(-120px); width: calc(100% + 120px);}

    .whyRoadLiv .whytxt h2 {font-size: 32px;}
    .whyRoadLiv .whypoints .item .icon {width: calc(48px - 4px);}
    .whyRoadLiv .whypoints .item .txt {width: calc(100% - 48px - 4px);}
    .whyRoadLiv .whypoints .item .txt h3 {font-size: 18px;}
    .whyRoadLiv .whypoints .item .txt p {font-size: 14px;}

    .watchshorts .head h4 {font-size: 20px;}
    .watchshorts .head h2 {font-size: 32px;}
    .watchshorts .head h3 {font-size: 28px;}
    .watchshorts .explaination .txt h2 {font-size: 32px;}
    .watchshorts .explaination .txt h4 {font-size: 22px;}
    .watchshorts .explaination .txt .points li {font-size: 18px; padding-bottom: 12px;}

    .lpfaq .head h2 {font-size: 36px;}
    .lpfaq .faqinner .faqs .item h3 {font-size: 24px;}
}
@media only screen and (max-width: 1360px) {
    body.landing {font-size: 18px;}
    .lpbanner .secondary .for {margin-left: 0;}
    .lpbanner .secondary .tracking {width: 188px; padding: 76px 20px 20px;}
    .lpbanner .secondary .tracking .icon img {height: 36px;}
    .lpbanner .txt {font-size: 13px;}
    .lpbanner .secondary .tracking .txt {width: auto;}
    .lpbanner .secondary {width: calc(100% + 112px); transform: translateX(-112px);}

    .whyRoadLiv .whytxt h2 {font-size: 32px;}

    .whyRoadLiv .whypoints .item .txt h3 {font-size: 14px;}
    .whyRoadLiv .whypoints .item .txt p {font-size: 12px;}

    .watchshorts .head h4 {font-size: 18px;}
    .watchshorts .head h2 {font-size: 28px; margin-bottom: 4px;}
    .watchshorts .head h3 {font-size: 28px;}
    .watchshorts .explaination .img img {max-height: 680px;}

    .lpfaq .faqinner .faqs, .lpfaq .faqinner .contact {vertical-align: top;}
    .lpfaq .head h4 {font-size: 18px;}
    .lpfaq .head h2 {font-size: 28px;}
    .lpfaq .faqinner .faqs .item h3 {font-size: 20px;}
    .lpfaq .faqinner .faqs .item h3::before {font-size: 20px;}

    .lpfaq .faqinner .contact h3 {font-size: 18px;}
    .lpfaq .faqinner .contact p {font-size: 18px;}
}
@media only screen and (max-width: 1260px) {
    .landing .container {width: 90%;}
    .lpbanner .mobpic img {height: 584px; border-radius: 42px;}
    .lpbanner .txt .primary h1 {font-size: 40px; margin-bottom: 12px;}
    .lpbanner .txt .primary p {font-size: 18px; margin-bottom: 18px;}
    .lpbanner .txt .primary .cta {font-size: 16px; margin: 0;}
    .lpbanner .secondary {flex-wrap: wrap; width: calc(100%); transform: none;}
    .lpbanner .secondary .tracking {width: 234px; padding: 64px 20px 14px;}

    .whyRoadLiv, .watchshorts, .lpfaq {padding: 60px 0;}
    
}
@media only screen and (max-width: 960px) {
    body.landing {font-size: 16px;}
    .lpbanner .mobpic .inline {transform: translateY(24px);}
    .lpbanner .mobpic img {height: 450px; border-radius: 33px;}
    .lpbanner .txt .primary h1 {font-size: 28px;}
    .lpbanner .txt .primary p {font-size: 15px;}
    .lpbanner .txt .primary .cta {font-size: 13px;}
    .lpbanner .txt .primary {margin-bottom: 14px;}
    .lpbanner .secondary .tracking {padding: 48px 12px 12px; width: 190px;}
    .lpbanner .secondary .tracking .tx {font-size: 12px;}

    .whyRoadLiv .whytxt {width: 100%;}
    .whyRoadLiv .whypoints {width: 100%;}
    .whyRoadLiv .whytxt h2 {font-size: 28px;}
    .whyRoadLiv .whypoints .item {min-height: 120px;}

    .watchshorts .head h4 {font-size: 16px;}
    .watchshorts .head h2 {font-size: 24px;}
    .watchshorts .head h3 {font-size: 24px;}
    .watchshorts .explaination .txt h2 {font-size: 24px; margin-bottom: 12px;}
    .watchshorts .explaination .txt h4 {margin-bottom: 18px; font-size: 20px;}
    .watchshorts .explaination .txt .points li {font-size: 16px;}
    .watchshorts .explaination .txt .gplayqr img {height: 40px;}

    .lpfaq .head h4 {font-size: 16px;}
    .lpfaq .head h2 {font-size: 24px;}
    .lpfaq .head {margin-bottom: 24px;}
    .lpfaq .faqinner .faqs, .lpfaq .faqinner .contact {width: 100%;}
    .lpfaq .faqinner .faqs {margin-bottom: 40px;}
    .lpfaq .faqinner .contact {margin-left: 0;}
    .lpfaq .faqinner .faqs .item h3 {font-size: 16px;}
    .lpfaq .faqinner .faqs .item h3::before {font-size: 18px;}
}
@media only screen and (max-width: 720px) {
    body.landing {font-size: 14px;}
    .lpbanner .mobpic .inline {transform: none;}
    .lpbanner .mobpic {width: 100%; margin-bottom: 20px;}
    .lpbanner .mobpic img {max-height: 280px; border-radius: 20px;}
    .lpbanner .txt {width: 100%;}

    .lpbanner .secondary .tracking {width: calc(50% - 10px); padding: 54px 10px 12px; gap: 8px;}
    .whyRoadLiv .container {padding-top: 0;}
    .whyRoadLiv .whypoints .item {width: 100%; margin: 0 0 20px; min-height: auto;}
    .lpbanner .secondary .for {width: 100%;}
    .lpbanner .secondary .for .list {padding: 12px 12px; justify-content: space-between; padding-bottom: 20px;}
    .lpbanner .secondary .for .list .item .txt {font-size: 11px;}

    .watchshorts .head h4 {font-size: 15px;}
    .watchshorts .head h2 {font-size: 22px;}
    .watchshorts .head h3 {font-size: 18px;}
    .watchshorts .explaination .img {width: 100%; margin-bottom: 20px;}
    .watchshorts .explaination .img img {height: 280px;}
    .watchshorts .explaination .txt {width: 100%; margin: 0;}
    .watchshorts .explaination .txt h2 {font-size: 20px;}

    .lpfaq .head h4 {font-size: 14px;}
    .lpfaq .head h2 {font-size: 20px;}
    .lpfaq .head {margin-bottom: 12px;}
    .lpfaq .faqinner .faqs .item h3 {padding-right: 40px;}
    .lpfaq .faqinner .contact h3 {font-size: 16px;}
    .lpfaq .faqinner .contact p {font-size: 14px;}
    .lpfaq .faqinner .contact .cta a {}
}