:root {

    font-size: 16px;

    scroll-behavior: smooth;

    color: #000;

}



body {

    font-family: "Poppins", sans-serif;

    margin: 0;

    padding: 0;

    font-size: 16px;

    line-height: 24px;

    color: #000;

}



.header-section {

    background-image: url('assets/images/MainBannerImg.jpg');

    min-height: 100vh;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}





.header-container {

    display: flex;

    justify-content: space-between;

    padding-top: 1.5rem;

}



.header-contact-details {

    display: flex;

    gap: 1.5rem;

    align-items: flex-start;

}



.head-call-mail {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.head-call-mail a {

  color: #000;

  text-decoration: none;

}



.enquiry-btn {

    background-color: #CE242D;

    border-radius: 0;

    text-decoration: none;

    color: #FFFFFF;

    display: flex;

    gap: 0.5rem;

    align-items: center;

}



.text-white {

    color: #FFFFFF;

}



.p-0 {

    padding: 0 !important;

}



.p-2 {

    padding: 2rem !important;

}



.mt-2 {

    margin-top: 2rem !important;

}



.pt-2 {

    padding-top: 2rem !important;

}



.m-0 {

    margin: 0 !important;

}



.title-head {

    color: #012D59;

    font-size: 3.125rem;

    line-height: 4.175rem;

    margin-top: 4rem;

}



.blue-bold {

    font-weight: 700;

    color: #012D59;

}



.yellow-bg {

    background-color: #FFCC29;

}



.qoute-form {

    background-color: #365885;

    padding: 2rem 3rem;

    border-radius: 10px;

    position: relative;

    top: -4rem;

}



.quote-title {

    font-size: 1.5rem;

}



.form-field {

    flex: 0 0 100%;

}



.form-fields {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    flex: 0 0 27%;

    padding-right: 1.5rem;

}



.get-a-quote-form {

    display: flex;

}



.get-a-quote-form input, .get-a-quote-form textarea, .get-a-quote-form select {

    width: 100%;

    border-radius: 5px;

    border: 0;

    font-size: .825rem;

    padding: 8px 10px;

    color: #5C5C5C;

    background-color: #FAF8F5;

    min-height: 3.25rem;

}



.sub-field {

    flex: 0 0 19%;

    display: flex;

    align-content: flex-end;

    justify-content: end;

    padding: 0;

}



.get-a-quote-form .submit-btn {

    border: 0;

    border-bottom: solid 3px #CD9A03;

    font-weight: 700;

    font-size: 1.125rem;

    margin-bottom: .45rem;

    flex: 0 0 100%;

    min-height: 3rem;   

    text-transform: uppercase; 

}



.get-a-quote-form .submit-btn:hover {

    background-color: #CD9A03;

}



.blue-title {

    color: #365885;

    font-weight: 700;

}



.h2-title {

    font-size: 2.25rem;

    line-height: 2.875rem;

    font-weight: 700;

    margin-top: 0;

    margin-bottom: 0.5rem;

}



.h2-sub-title {

    font-size: 2.25rem;

    line-height: 2.875rem;

    font-weight: 500;

    margin-top: 0;

    margin-bottom: 0.5rem;

}



.blue-lt-border, .white-lt-border {

    position: relative;

    padding: 2rem;

}



.blue-lt-border::before, .blue-lt-border::after {

    content: '';

    position: absolute;

    background-color: #365885;

}



.white-lt-border::before, .white-lt-border::after {

    content: '';

    position: absolute;

    background-color: #FFFFFF;

}



.blue-lt-border::before, .white-lt-border::before {

    width: 47px;

    height: 5px;

    top: 0;

    left: 0;

}



.blue-lt-border::after , .white-lt-border::after {

    width: 5px;

    height: 47px;

    top: 0;

    left: 0;

}



.power-title, .why-title, .advantages-title {

    display: flex;

    justify-content: center;

}



.blue-bg {

    background-color: #365885;

}



.d-flex {

    display: flex;

}



.power-box-container {

    display: flex;

    justify-content: flex-end;

}



.power-img-box {

    margin-top: -10rem;

}



.banner-text-box {

    flex: 0 0 37%;

    padding: 2rem 1.5rem;

}



.quote-btn-box {

    display: flex;

    align-items: flex-end;

}



.quote-cta {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.bold-title {

    font-size: 1.5rem;

    font-weight: 900;

    line-height: 2.125rem;

}



.mail-link {

    text-decoration: none;

    padding: 0.8rem;

    display: flex;

    gap: 0.85rem;

    font-size: 1.125rem;

    border-bottom: solid 3px #133869;

    text-transform: uppercase;

    align-items: center;

}



.mail-link:hover {

    background-color: #133869;

}



.concrete-container {

    position: relative;

}



.power-banner, .self-mixer-banner {

    width: 100%;

    height: auto;

}



.self-mixer-box-container {

    display: flex;

    justify-content: space-between;

    position: absolute;

    align-items: center;

}



.self-mixer-box-container .banner-text-box {

    margin-top: -1.85rem;

    position: relative;

    overflow: visible;

}



.self-mixer-box-container .banner-text-box::before {

    content: "";

    position: absolute;

    top: 0;

    left: -29px;

    width: 0;

    height: 0;

    border-top: 30px solid transparent;

    border-right: 30px solid #CD9A03;

    z-index: 1;

}



.self-mixer-box-container .banner-text-box::after {

    content: "";

    position: absolute;

    top: 0;

    right: -29px;

    width: 0;

    height: 0;

    border-top: 30px solid transparent;

    border-left: 30px solid #CD9A03;

    z-index: 1;

}





.why-choose-boxes {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    margin-top: -9rem;

    justify-content: center;

}



.why-choose-box {

    flex: 0 0 18%;

    text-align: center;

}



.why-choose-img {

    border: 3px solid #FFCC29;

}



.why-choose-text {

    padding: 1rem 0 0;

}



.technical-highlight-boxes {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

}



.technical-highlight-box {

    display: flex;

    gap: 0.5rem;

    flex: 0 0 48%;

    border: 1px solid #FFCC29;

}



.technical-highlight-img {

    flex: 0 0 33%;

    text-align: center;

    align-content: center;

}



.technical-highlight-text {

    padding: 0.5rem 0.5rem;

    align-content: center;

}



.download-brochure-box {

    display: flex;

}



.download-brochure-text {

    display: flex;

    flex-wrap: wrap;

    gap: 0.625rem;

    align-content: center;

}



.brochure-link {

    text-decoration: none;

    padding: 0.8rem;

    border-bottom: solid 3px #CD9A03;

    color: #000;

    font-weight: 700;

    display: flex;

    gap: 0.85rem;

    font-size: 1.125rem;

    text-transform: uppercase;

    align-items: center;

}



.brochure-link:hover {

    background-color: #CD9A03;

}



.features-boxes {

    display: flex;

    gap: 1rem;

}



.features-box {

    display: flex;

    flex-wrap: wrap;

    flex: 0 0 25%;

    gap: 1.5rem;

    justify-content: center;

    text-align: center;

}





.blue-text, .feature-table .blue-text {

    color: #224F80;

}



.feature-table .blue-bg {

    background-color: #365885;

    color: #FFFFFF;

}



.feature-table th {

    font-size: 1.5rem;

    line-height: 1.625rem;

    border: 0;

    padding: 1rem 0.5rem;

}



.feature-table th.blue-bg {

    border-radius: 0.85rem 0.85rem 0 0;

}



.features-body td:first-child {

    background-color: #365885;

    color: #fff;

    font-weight: 700;

}



.features-body td:last-child {

    background-color: #FFCC29;

    position: relative;

}



.features-body td:last-child::after {

    content: '';

    background-image: url(assets/images/adv-icon.svg);

    background-repeat: no-repeat;

    position: absolute;

    width: 30px;

    height: 30px;

    right: 4%;

}



.features-body td {

    font-size: 1rem;

    line-height: 1.625rem;

    padding: 1.25rem;

}



.features-body td {

    border: 1px solid #fff;

}

.features-body tr:first-child td {

    border-top: 0;

}



.contact-quote-box {

    display: flex;

    gap: 1rem;

    justify-content: center;

    align-items: center;

}



.gallery-boxes {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: repeat(5, 1fr);

    grid-column-gap: 10px;

    grid-row-gap: 10px;

}



.gallery-box {

    position: relative;

    width: 100%;

    height: 100%;

}



.gallery-text {

    position: absolute;

    top: 2%;

    right: 4%;

    font-size: 1.25rem;

    line-height: 1.625rem;

}



.gallery-box.box1 {

  grid-column: 1 / span 1;

  grid-row: 1 / span 2;

}

 

.gallery-box.box2 {

  grid-column: 2 / span 1;

  grid-row: 1 / span 1;

}

 

.gallery-box.box3 {

  grid-column: 2 / span 1;

  grid-row: 2 / span 1;

}

 

.gallery-box.box4 {

  grid-column: 1 / span 2;

  grid-row: 3 / span 2;

}

 

.gallery-box.box5 {

  grid-column: 3 / span 1;

  grid-row: 1 / span 1;

}

 

.gallery-box.box6 {

  grid-column: 3 / span 1;

  grid-row: 2 / span 2;

}

 

.gallery-box.box7 {

  grid-column: 3 / span 1;

  grid-row: 4 / span 1;

}

 

.gallery-box.box8 {

  grid-column: 3 / span 1;

  grid-row: 5 / span 1;

}

 

.gallery-box.box9 {

  grid-column: 1 / span 2;

  grid-row: 5 / span 1;

}





.gallery-box img, .gallery-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}







.why-apollo-boxes {

    display: flex;

    gap: 2rem 0;

    justify-content: center;

    flex-wrap: wrap;

}



.why-apollo-box {

    flex: 0 0 25%;

    justify-items: center;

    gap: 1rem;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}



.apollo-img-box {

    border-bottom: 1rem solid #FFCC29;

    border-right: 1rem solid #FFCC29;

    border-top: 1rem solid transparent;

    border-left: 1rem solid transparent;

    border-radius: 50%;

}



.why-apollo-img {

    border: 1px solid #ffffff;

    border-radius: 100%;

    height: 10.5rem;

    width: 10.5rem;

    object-fit: none;

}



.why-apollo-text {

    font-size: 1rem;

    line-height: 1.625rem;

}



.grey-bg {

    background-color: #F5F5F5;

}





.faq-box {

    background-color: #FFFFFF;

    border-radius: 0.625rem;

    margin-bottom: 1rem;

    overflow: hidden;

    padding: 1.25rem 2.75rem;

}



.faq-title {

    font-size: 18px;

    cursor: pointer;

    color: #000000;

    font-size: 1rem;

    line-height: 1.875rem;

    position: relative;

}



.faq-title::after {

    content: '';

    background-image: url(assets/images/faq-icon.svg);

    position: absolute;

    width: 33px;

    height: 33px;

    right: 0%;

    background-repeat: no-repeat;

    top: -4px;

}



.faq-answer {

    max-height: 0;

    overflow: hidden;

}



.faq-answer p {

    margin: 0;

    padding: 0.5rem 0 0;

}



.faq-box.active .faq-title::after {

    transform: rotate(180deg);

}



.faq-box.active .faq-answer {

  max-height: 100%;

}



.foot-blue-title {

    font-size: 1.875rem;

    color: #365885;

    font-weight: 700;

    line-height: 3.125rem;

}



.foot-blue-subtitle {

    font-size: 1.5rem;

    color: #365885;

    font-weight: 700;

    line-height: 1.875rem;

}



.footer-contact-section {

    display: flex;

    gap: 2rem;

    justify-content: space-between;

}



.footer-address {

    display: flex;

    gap: 1rem;

}



.footer-contact-us {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.footer-contact-us a {

  color: #000;

  text-decoration: none;

}



.copyright-link {

    color: #000;

    text-decoration: underline;

    text-underline-offset: 0.3rem;

}



.footer-call, .footer-mail {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.footer-icon-scanner {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

}



.footer-social-icons {

    display: flex;

    gap: 1rem;

    flex: 0 0 100%;

    justify-content: flex-end;

}



.footer-copyright {

    border-top: solid 1px #C4C4C4;

}





.scroll-to-top {

  position: fixed;

  bottom: 20px;

  right: 20px;

  display: none;

  z-index: 999;

}



.scroll-to-top a img {

  cursor: pointer;

  transition: transform 0.3s ease;

}



.scroll-to-top a img:hover {

  transform: scale(1.1);

}



.footer-contact-us a:hover, .head-call-mail a:hover {

    text-decoration: underline;

    text-underline-offset: 0.3rem;

}



.enquiry-btn:hover {

    background-color: #224F80;

    color: #FFFFFF;

}



.return-link {

    text-decoration: none;

    color: #000;

    padding: .5rem 1rem;

}



.return-link:hover {

    text-decoration: underline;

    text-underline-offset: 0.3rem;

    background-color: #224F80;

    color: #FFFFFF;

}



@media only screen and (max-width: 767px) {

    :root {

        font-size: 9px;

        scroll-behavior: smooth;

    }



    body {

        font-family: "Poppins", sans-serif;

        margin: 0;

        padding: 0;

        font-size: 9px;

        line-height: 14px;

    }

    .self-mixer-box-container {

        flex-wrap: wrap;

        position: relative;

        justify-content: center;

        margin-bottom: 2rem;

    }



    .header-contact-details {

        flex-wrap: wrap;

        justify-content: flex-end;

        gap: 0;

    }



    .header-contact-details img {

        width: 30px;

        height: 30px;

    }



    .footer-contact-section.mt-2 {

        flex-wrap: wrap;

    }



    form.get-a-quote-form {

        flex-wrap: wrap;

        gap: 1rem;

        padding-top: 1rem;

    }



    .form-fields {

        flex: 0 0 47%;

        padding-right: 0;

    }

    .textarea-form-field {

        flex: 0 0 98%;

    }



    .indo-italy {

        padding-bottom: 3rem;

        padding-top: 3rem;

    }



    .power-img-box {

        flex: 0 0 100%;

        margin-top: -3rem;

    }



    .quote-btn-box {

        margin-top: 2rem;

        justify-content: center;

    }

    .banner-text-box {

        flex: 0 0 100%;

    }



    .why-choose-boxes {

        margin-top: -2rem;

        margin-bottom: 2rem;

    }



    .why-choose-box {

        flex: 0 0 48%;

    }



    .blue-lt-border, .white-lt-border {

        padding: 1.5rem;

    }

    .download-brochure-box {

        flex-wrap: wrap;

        padding: 2rem 2rem 0;

    }



    .download-brochure-text {

        justify-content: center;

        text-align: center;

        gap: 1rem;

    }



    .features-boxes {

        padding: 2rem 1rem;

        justify-content: center;

    }



    .features-body td:last-child::after, .faq-title::after {

        width: 20px;

        height: 20px;

        background-size: cover;

    }



    .faq-title::after {

        top: -2px;

    }



    .features-body td {

        padding: 1rem;

    }



    .why-apollo-box {

        flex: 0 0 50%;

        flex-direction: column;

        align-items: center;

    }



    .quote-cta {

        flex-wrap: wrap;

        justify-content: center;

    }



    .footer-icon-scanner {

        justify-content: center;

        margin-top: 2rem;

        flex-wrap: nowrap;

    }



    .footer-icon-scanner .footer-social-icons img {

        width: 40px;

        height: 40px;

        aspect-ratio: 1;

    }



    .footer-social-icons {

        align-items: center;

        gap: 1rem;

        flex-wrap: wrap;

        align-content: center;

        justify-content: center;

        flex: 0 0 50%;

    }



    .footer-social-icons a {

        text-align: center;

        display: flex;

        justify-content: center;

    }



    .footer-scanner {

        flex: 0 0 40%;

        text-align: center;

    }



    .footer-scanner img {

        max-width: 94%;

    }



    .top-bar {

        display: flex !important;

        background: #FFCC29;

        justify-content: space-between;

        padding: 1rem 0.75rem;

    }



    .top-bar .mob-head-call {

        flex: 0 0 36%;

    }



    .top-bar .mob-head-mail {

        flex: 0 0 44%;

    }

    

    .top-bar .head-enquiry {

        flex: 0 0 11%;

        justify-items: center;

    }



    .top-bar .head-enquiry .enquiry-btn {

        font-size: 0;

        gap: 0;

    }



    .top-bar .head-enquiry .enquiry-btn img {

        width: 20px;

        height: 20px;

    }



    .mobile-hide {

        display: none;

    }



    .self-mixer-box-container .banner-text-box::before, .self-mixer-box-container .banner-text-box::after {

        display: none;

    }



    .header-section {

        background-image: url('assets/images/carmix-mobile-banner.png');

        min-height: 420px;

        background-repeat: no-repeat;

        background-size: cover;

    }



    .top-banner-section {

        display: none;

    }



    .header-container {

        justify-content: flex-end;

    }



    .logo img {

        max-width: 46%;

        height: auto;

        aspect-ratio: 1;

    }



    .logo {

        display: flex;

        text-align: end;

    }



    .quote-btn img {

        width: 30px;

        height: 30px;

    }



    .qoute-form {

        top: 0;

    }



    .thankyou-header logo, .thankyou-header .header-container {

        justify-content: flex-start;

        text-align: left;

    }

    .banner-mobile {
        position: relative;
    }

    .banner-mob-link {
        position: absolute;
        top: 0%;
        right: 0%;
        width: 30%;
        height: 100px;
    }



}



.top-bar {

    display: none;

}





@media only screen and (min-width: 767px) and (max-width: 991px) {

    :root {

        font-size: 12px;

        scroll-behavior: smooth;

    }



    body {

        font-size: 12px;

        line-height: 18px;

    }

    .why-choose-boxes {

        justify-content: center;

    }



    .why-choose-box {

        flex: 0 0 23%;

    }



    .footer-contact-section {

        flex-wrap: wrap;

    }



    .footer-contact-us {

        flex-direction: row;

        gap: 2rem;

    }



    .self-mixer-box-container {

        align-items: flex-start;

    }



    .self-mixer-box-container .quote-btn-box {

        margin-top: 1.5rem;

    }



    .self-mixer-box-container .banner-text-box {

        margin-top: -2.5rem;

    }

    .title-head {
        font-size: 1.5rem;
        line-height: 1.75rem;
        margin-top: 1rem;
    }

    .header-section {
        min-height: 60vh;
        background-size: 100%;
    }

}



@media only screen and (max-width: 390px) {

    .header-section {

        min-height: 56vh;

        background-size: cover;

    }

}

@media only screen and (max-width: 349px) {

    .header-section {

        min-height: 48vh;

        background-size: cover;

    }

}



@media only screen and (min-width:450px) and (max-width: 560px) {

    .header-section {

        min-height: 64vh;

        background-size: 100%;

    }

}



@media only screen and (min-width:561px) and (max-width: 767px) {

    .header-section {

        min-height: 90vh;

        background-size: 100%;

        padding-bottom: 5rem;

    }

}



@media only screen and (min-width:1024px) and (max-width: 1200px) {

    :root, body {
        font-size: 12px;
        line-height: 18px;
    }

    .title-head {
        /* color: #012D59;
        font-size: 2.875rem;
        line-height: 3.125rem; */
        margin-top: 1.55rem;
    }

}



@media only screen and (min-width:1201px) and (max-width: 1399px) {

    :root, body {
        font-size: 13px;
        line-height: 20px;
    }


    .title-head {
        line-height: 3.5rem;
        margin-top: 3rem;

    }

    .qoute-form {
        padding: 2rem 2.5rem;
        top: -2rem;
    }

}


@media (min-width:767px) {
    .desk-hide {
        display: none;
    }    
}


@media (min-width: 1600px) { 

    .container {

        max-width: 1520px;        

    }

    .why-choose-img img {

        object-fit: cover;

        width: -webkit-fill-available;

    }

}



@media (min-width: 1800px) { 

    .container {

        max-width: 1720px;        

    }

}



@media (min-width: 2000px) { 

    .container {

        max-width: 1920px;        

    }

}