:root {

    font-size: 16px;

    scroll-behavior: smooth;

    color: #000;

    margin: 0;

    padding: 0;

    --primaryRed: #CE242D;

    --secBlue: #224F80;

    --lightGray: #EDEDED;

    --mediumGray: #D9D9D9;

    --softGray: #F5F5F5;

}



body {

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

    margin: 0;

    padding: 0;

    font-size: 16px;

    line-height: 24px;

    color: #000;

}



a {

    text-decoration: none;

}



.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;

}



.header-container {

    display: flex;

    justify-content: space-between;

    padding: 0.25rem 0;

    align-items: center;

}



.header-contact-details {

    display: flex;

    gap: 1.375rem;

    align-items: center;

}



.head-call-mail {

  display: flex;

  align-items: center;

  gap: .625rem;

  font-size: 0.875rem;

}



.head-call-mail a {

  color: #000;

  text-decoration: none;

  font-size: 1rem;

}



.enquiry-btn {

    background-color: var(--primaryRed);

    border-radius: 0;

    text-decoration: none;

    color: #FFFFFF;

    display: flex;

    gap: 0.625rem;

    align-items: center;

    padding: 0.9375rem 1.875rem;

    font-weight: 600;

    text-transform: uppercase;

}



.enquiry-btn:hover {

    background-color: var(--secBlue);

    color: #FFFFFF;

}



.text-white {

    color: #FFFFFF;

}



.banner-title {

    font-size: 3.125rem;

    line-height: 3.75rem;

    position: absolute;

    top: 7%;

    left: 6%;

    padding: 10px 15px;

    z-index: 2;

    font-weight: 300;

}



.bold-text {

    font-weight: 700;

}



.banner-container {

    width: 100%;

    max-width: 100%; /* adjust size as needed */

    height: 97.5vh; /* full viewport height */

    overflow: hidden;

    position: relative;

}



.banner-image {

    width: 100%;

    height: 100%;

    position: absolute;

    opacity: 0;

    object-fit: cover;;

    transition: opacity 1s ease-in-out;

}



.banner-image.active {

    opacity: 1;

    z-index: 1;

}



.qoute-form {

    background-color: #365885;

    padding: 2rem 3rem;

    border-radius: 10px;

    position: relative;

    top: -2.5rem;

    z-index: 3;

}



.quote-title {

    font-size: 1.5rem;

}



.form-field {

    flex: 0 0 100%;

}



.form-fields {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    flex: 0 0 29%;

    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: 1rem;

    padding: 0.5rem 0.625rem;

    color: #000000;

    background-color: #FAF8F5;

    min-height: 3.25rem;

}



.select.form-field {

    padding-bottom: 0.201rem;

}



.sub-field {

    flex: 0 0 13%;

    display: flex;

    align-content: flex-end;

    justify-content: end;

    padding: 0;

}



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

    border: 0;

    font-weight: 500;

    font-size: 1.125rem;

    margin-bottom: .45rem;

    flex: 0 0 100%;

    min-height: 3rem;   

    text-transform: uppercase; 

    background-color: #D99D3B;

    color: #FFFFFF;

}



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

    background-color: var(--secBlue);

    color: #D99D3B;

    border: solid 3px #D99D3B;

}



.quote-brochure-boxes {

    display: flex;

    gap: 1.5rem;

}



.quote-brochure-box {

    display: flex;

    align-items: center;

    background: var(--mediumGray);

    padding: 1.5rem 2rem;

    border-radius: 0.625rem;

    gap: 1rem;

    font-size: 1.25rem;

    font-weight: 500;

    line-height: 1.625rem;

}



.quote-brochure-title {

    font-size: 1.5rem;

    font-weight: 600;

    line-height: 2.125rem;

}



.bg-grey {

    background-color: var(--lightGray);

}



.blue-title {

    color: var(--secBlue);

}



.section-title {

    font-weight: 700;

    font-size: 2.25rem;

    line-height: 3.125rem;

}



.red-bg {

    background-color: var(--primaryRed);

}



.cta {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 1rem;

}



.cta-text {

    font-size: 1.5rem;

    line-height: 2.125rem;

}



.cta-btn {

    padding: 0.625rem 1.25rem;

    text-transform: uppercase;

    font-size: 1.125rem;

    line-height: 1.5rem;

}



.cta-btn a {

    display: flex;

    gap: 0.5rem;

    align-items: center;

}



.cta-btn:hover {

    background-color: var(--secBlue);

}



.who-img-text {

    display: flex;

    justify-content: space-between;

}



.who-we-are-content {

    flex: 0 0 55%;

    display: flex;

    flex-wrap: wrap;

    align-content: space-evenly;

}



.benefits-list {

    display: flex;

}



.benefit-item {

    display: flex;

    flex-wrap: wrap;

    gap: .625rem;

    justify-content: center;

    text-align: center;

    padding: 0.625rem 1rem;

}



.atp-inline-section, .use-case-section, .faqs-section {

    background-color: var(--softGray);

}



.grey-line {

    background-color: #5C5C5C;

    height: 0.3125rem;

    width: 9.625rem;

    margin: 0.5rem 0rem 1rem;

}



.atp-title {

    display: flex;

    justify-content: center;

    flex-direction: column;

    align-items: center;

}



.atp-inline-title {

    display: flex;

    align-items: center;

}



.line {

    flex: 1;

    height: 1px;

    background-color: var(--mediumGray);

}



.atp-title-box {

    padding: 0.625rem;

    background-color: var(--mediumGray);

    font-weight: bold;

    color: #000;

}



.atp-model-line {

    width: 100%;

    height: 5px;

    background: linear-gradient(to right, var(--secBlue) 80%, var(--primaryRed) 20%);

}



.atp-model-boxes {

    display: flex;

    gap: 1rem;

}



.atp-model-box {

    display: flex;

    justify-content: center;

    text-align: center;

    gap: .5rem;

    flex-direction: column;

}



.atp-model-name {

    color: var(--secBlue);

    font-size: 1.5rem;

    line-height: 1.625;

}



.core-strengths {

    background: linear-gradient(0deg, rgba(255, 253, 253, 0.80) 35.1%, rgba(255, 255, 255, 0.00) 100%);

}



.core-strength-section {

    background-image: url(assets/images/core-bg.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    min-height: 140vh;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background-position: center bottom;

}

.mobile-img {
    display: none;
}



.core-strength-boxes {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

}



.core-strength-box {

    align-items: center;

    gap: 1rem;

    display: flex;

    flex-wrap: wrap;

    flex-direction: column;

}



.core-img-box {

    border-bottom: var(--secBlue);

    border-right: transparent;

    border-top:  transparent;

    border-left: transparent;

    border-radius: 50%;

    border-width: 0.75rem;

    border-style: solid;

    position: relative;

    display: flex;

    justify-content: center;

    width: 11rem;

    height: 11rem;

    aspect-ratio: 1;

}



.core-strength-img {

    border: 2px solid #ffffff;

    border-radius: 100%;

    height: 9.875rem;

    width: 9.875rem;

    object-fit: none;

    aspect-ratio: 1;

}



.core-text {

    font-size: 1rem;

    line-height: 1.625rem;

    font-weight: 500;

}



.coreid {

    display: flex;

    background: var(--primaryRed);

    color: #fff;

    position: absolute;

    padding: 0.5rem 1rem;

    border-radius: 100%;

    bottom: 6%;

    left: 0%;

}



.feature-heads-atp th {

    font-size: 1.25rem;

    font-style: normal;

    font-weight: 700;

    line-height: 1.625rem;

    text-align: center;

    padding: 0 0.625rem;

    align-content: end;

}



.feature-heads-atp .first-head {

    color: #224F80;

    padding: 1rem 2rem;

}



.feature-heads-atp .second-head {

    color: #ffffff;

    background-color: #224F80;

    border-radius: 10px 10px 0 0;

    padding: 1rem 2rem;

}



.feature-heads-atp .third-head {

    color: #000000;

    background-color: #D9D9D9;

    border-radius: 10px 10px 0 0;

    padding: 1rem 2rem;

}



.atp-features-body tr {

    border-bottom: 1px solid #fff;

}



.atp-features-body td {

    width: 29.923%;

    padding-right: 2.5rem;

}



.atp-features-body tr td:first-child {

    color: #ffffff;

    font-size: 1rem;

    font-style: normal;

    font-weight: 700;

    line-height: 1.625rem;

    background-color: #224F80;

    width: 22.273%;

}



.atp-features-body tr td:nth-child(2) {

    background-color: #D8EFFF;

    position: relative;

}



.atp-features-body tr td:nth-child(3) {

    background-color: var(--lightGray);

    position: relative;

}



.atp-features-body tr td:nth-child(2)::after {

    content: '';

    background-image: url(assets/images/apollo-feature.svg);

    background-repeat: no-repeat;

    position: absolute;

    width: 30px;

    height: 30px;

    right: 4%;

    top: 31%;

}



.atp-features-body tr td:nth-child(3)::after {

    content: '';

    background-image: url(assets/images/other-feature.svg);

    background-repeat: no-repeat;

    position: absolute;

    width: 30px;

    height: 30px;

    right: 4%;

    top: 31%;

}



section.features-section {

    background-image: url(assets/images/features-bg.png);

    background-repeat: no-repeat;

    background-position: bottom left;

    background-size: 30%;

}



.use-case-first-sec {

    display: flex;

    justify-content: space-between;

}



.use-case-boxes {

    display: flex;

    gap: 1.875rem;

}



.use-case-box {

    text-align: center;

    position: relative;

    display: flex;

    justify-content: center;

}



.use-case-name {

    color: #fff;

    position: absolute;

    bottom: 0;

    width: 100%;

    height: 5.808rem;

    align-content: center;

    background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 20%, rgba(102, 102, 102, 0.00) 100%);

}



.avail-box {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.download-available {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.625rem;

    justify-content: flex-end;

}



.tds-boxes {

    display: flex;

    gap: 1.625rem;

}



.tds-box {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    text-align: center;

}



.tds-img {

    background-image: url(assets/images/brochure-bg.svg);

    padding: 0.875rem 0.0125rem 0 0;

}



.tds-img img {

    border: solid 1px #d9d9d9;

}



.tds-name a {

    text-decoration: none;

    color: #000;

}



.tds-name a:hover {

    text-decoration: underline;

    text-underline-offset: 0.3rem;

}



.why-apollo-section {

    background-color: #F5F5F5;

}



.why-apollo-boxes {

    display: flex;

    gap: 1.5rem 0;

    justify-content: center;

    flex-wrap: wrap;

}



.why-apollo-box {

    flex: 0 0 20%;

    text-align: center;

    gap: 1rem;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}



.apollo-img-box {

    border-bottom: var(--secBlue);

    border-right: var(--secBlue);

    border-top:  transparent;

    border-left: transparent;

    border-radius: 50%;

    border-width: 0.625rem;

    border-style: solid;

    position: relative;

    display: flex;

    justify-content: center;

    aspect-ratio: 1;

    width: 10rem;

    height: 10rem;

}



.why-apollo-img {

    border-radius: 100%;

    height: 8.75rem;

    width: 8.75rem;

    object-fit: none;

    background-color: #fff;

}



.why-apollo-text {

    font-size: 1rem;

    line-height: 1.625rem;

}



.faq-box {

    background-color: #FFFFFF;

    border-radius: 0.625rem;

    margin-bottom: 1rem;

    overflow: hidden;

    padding: 1.25rem 2.75rem;

}



.faq-title {

    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;

    background-color: var(--secBlue);

    display: flex;

    background-position: center;

    border-radius: 100%;

    background-size: 0.875rem 0.4375rem;

}



.faq-answer {

    max-height: 0;

    overflow: hidden;

}



.faq-answer p {

    margin: 0;

    padding: 0.5rem 0 0;

}



.faq-box.active .faq-title {

    color: var(--secBlue);

    font-weight: 700;

}



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

    transform: rotate(180deg);

    background-color: var(--primaryRed);

}



.faq-box.active .faq-answer {

  max-height: 100%;

}



.foot-title {

    font-size: 1.875rem;

    font-weight: 700;

    line-height: 3.125rem;

}



.foot-blue-subtitle {

    font-size: 1.5rem;

    color: var(--secBlue);

    font-weight: 700;

    line-height: 1.875rem;

}



.footer-contact-section {

    display: flex;

    gap: 1rem;

    flex-direction: column;

    justify-content: space-between;

}



.footer-address {

    display: flex;

    gap: 1rem;

}



.footer-contact-us a, .foot-link {

  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.625rem;

}



.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;

    margin: .625rem 0 1rem;

}



.footer-row {

    display: flex;

    gap: 0.625rem;

}



.foot-qr-social {

    flex: 0 0 17%;

}



.foot-call-address-mail {

    flex: 0 0 30%;

}



.foot-map-location {

    flex: 0 0 50%;

}





.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;

  background: var(--secBlue);

  border-radius: 50%;

  padding: 1rem;

}



.scroll-to-top a img:hover {

  transform: scale(1.1);

  background-color: var(--primaryRed);

}



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

    text-decoration: underline;

    text-underline-offset: 0.3rem;

}



.return-link {

    text-decoration: none;

    color: #ffffff;

    padding: .5rem 1rem;

}



.return-link:hover {

    text-decoration: underline;

    text-underline-offset: 0.3rem;

    background-color: var(--secBlue);

}



.thankyou-content {

    background-color: var(--softGray);

}



/* responsive-CSS */



.mobile-toggle {

  display: none;

  flex-direction: column;

  gap: 5px;

  cursor: pointer;

  background-color: var(--secBlue);

  padding: 1rem;

}



.mobile-toggle span {

  width: 25px;

  height: 3px;

  background: #fff;

}



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

    :root, html {

        font-size: 14px;

    }

    body {

        font-size: 14px;

        line-height: 21px;

        scrollbar-color: var(--secBlue);

    }



    .header-container {

        flex-wrap: wrap;

        padding: 0.625rem;

    }



    .mobile-toggle {

        display: flex;

    }



    .header-contact-details {

        display: none;

        flex-wrap: wrap;

        padding: 2rem 1.5rem;

        width: 100%;

    }



    .header-contact-details.active {

        display: flex;

    }





    /* footer-css */

    .footer-row {

        flex-direction: column;

    }



    .foot-call-address-mail,

    .foot-map-location,

    .foot-qr-social {

        flex: 1 1 100%;

    }



    .footer-icon-scanner {

        justify-content: center;

        align-items: center;

        text-align: center;

    }



    .footer-social-icons {

        justify-content: center;

        margin-bottom: 1rem;

    }



    .footer-scanner {

        display: flex;

        justify-content: center;

    }



    .footer-scanner img {

        width: 140px;

        height: 140px;

    }



    .foot-title {

        font-size: 1.375rem;

        text-align: center;

    }



    .foot-blue-subtitle {

        font-size: 1rem;

    }



    .footer-contact-section {

        gap: 1.25rem;

        align-items: flex-start;

    }



    .footer-call,

    .footer-mail,

    .footer-address {

        flex-direction: row;

        align-items: flex-start;

    }



    .footer-contact-text a,

    .footer-mail a,

    .footer-address-text {

        font-size: 0.875rem;

    }

    .footer-row .grey-line {
        justify-self: center;
    }

    .grey-line {
        margin: 0.25rem 0;
    }



    .copyright-text {

        font-size: 0.75rem;

        padding: 0 1rem;

        text-align: center;

    }



    .scroll-to-top {

        right: 10px;

        bottom: 10px;

    }







    .tds-boxes {

        flex-wrap: wrap;

        justify-content: center;

    }



    .tds-box {

        flex: 0 0 45%;

        justify-content: flex-start;

    }



    .avail-box {

        flex-direction: row;

        align-items: flex-start;

        gap: 1rem;

    }



    .quote-brochure-boxes, .cta, .benefits-list {

        flex-wrap: wrap;

        justify-content: center;

        text-align: center;

    }

    .use-case-first-sec {

        flex-wrap: wrap;

    }



    .use-case-boxes {

        overflow-x: scroll;

    }



    .use-case-box {

        flex: 0 0 70%;

    }



    .benefit-item {

        flex: 0 0 50%;

    }

    .atp-model-boxes.py-4 {

        overflow: scroll;

    }



    .atp-model-box {

        flex: 0 0 70%;

        justify-content: flex-start;

    }



    .qoute-form {

        padding: 2rem 1rem;

        top: -1.5rem;

    }



    .get-a-quote-form {

        flex-wrap: wrap;

        gap: 0.625rem;

        margin: .625rem 0;

    }



    .form-fields {

        flex: 0 0 100%;

        padding-right: 0;

        gap: 0.625rem;

    }



    .banner-title {

        font-size: 1.875rem;

        line-height: 2.5rem;

        padding: 0;

        display: none;

    }



    .banner-container {

        height: 50vh;

    }



    .banner-image img {

        width: 100%;

    }



    .who-img-text {

        flex-direction: column;

    }



    .who-we-are-content {

        padding: 2rem 0 !important;

    }



    .p-0, .px-0 {

        padding-left: calc(var(--bs-gutter-x) * .5) !important;

        padding-right: calc(var(--bs-gutter-x) * .5) !important;

    }



    .quote-brochure-boxes, .section-title {

        padding-top: 1.5rem;

    }



    .section-title {

        font-size: 2rem;

        line-height: 3rem;

    }

    .core-strength-section {

        background-image: none;
    }



    .core-strength-boxes {

        flex-wrap: nowrap;

        overflow: scroll;

        justify-content: flex-start;

    }

    .mobile-img {
        display: block;
        padding: 1.5rem 0;
    }



    .atp-features-body td {

        min-width: 250px;

    }



    .py-5 {

        padding-top: 2rem !important;

        padding-bottom: 2rem !important;

    }

    .why-apollo-box {

        flex: 0 0 50%;
    }

    .faq-box {
        padding: 1.25rem 2rem 1.25rem 1rem;
    }

    .faq-title::after {
        right: -5%;
        width: 22px;
        height: 22px;
        top: 0;
    }

    .feature-heads-atp th div {
        min-height: 5.25rem;
        align-content: center;
    }



}





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


    :root, html {

        font-size: 14px;

    }

    body {

        font-size: 14px;

        line-height: 21px;

        scrollbar-color: var(--secBlue);

    }

    .banner-container {
        height: 50vh;
    }


    .banner-image img {
        max-width: 100%;
    }

    .banner-title {
        font-size: 2.125rem;
        line-height: 2.75rem;
        top: 5%;
        left: 2%;
        padding: 0px 15px;
    }

    .header-contact-details {

        flex-wrap: wrap;

        gap: 0.625rem;

        padding: 1rem;

        justify-content: space-between;

    }



    .quote-brochure-boxes, .benefits-list {

        flex-wrap: wrap;

        justify-content: center;

        text-align: center;

    }

    .core-strengths {
        background: linear-gradient(0deg, rgba(255, 253, 253, 0.80) 65.1%, rgba(255, 255, 255, 0.00) 100%);
    }

    .core-strength-section {
        background-position: center top;
        background-size: 100%;
        min-height: 95vh;
    }

    .core-strength-boxes {
        flex-wrap: nowrap;
        overflow-x: scroll;
        justify-content: flex-start;
    }

    .core-strength-box {
        flex: 0 0 28%;
    }

    .cta {
        flex-direction: column;
    }

    .who-we-are-content {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .benefit-item {
        flex-direction: column;
        flex: 0 0 25%;
        padding: 0.625rem 0;
    }

    .faq-title::after {
        right: -2%;
    }

    .why-apollo-box {
        flex: 0 0 25%;
        align-items: flex-start;
    }
    .why-apollo-text {
        font-size: 0.925rem;
    }

    .feature-heads-atp th div {
        min-height: 5.25rem;
        align-content: center;
    }



    .footer-row {

        flex-wrap: wrap;

    }

    .foot-call-address-mail, .foot-map-location {
        flex: 0 0 47%;
    }


}


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

    .core-strength-section {
        min-height: 165vh;
    }

    .core-strength-boxes {
        gap: 0.625rem;
    }

    .core-strength-box {
        flex: 0 0 15%;
    }

    .core-text br {
        display: none;
    }

}