/*
    
    Ticket Number: PROWL-180

    Author(s): Web Design Dpt @ William Reed - Digital Delivery 
    Created: 20/03/2023
    Last Modified: 24/04/2025 By CH

    -----------------------------------------------------------

    Desktop Styles

    1.0 Reset Styles
    1.1 Default Values
    1.2 Site Structure Starts Here
    1.3 Header
    1.4 Offer Cards
    1.5 Offer Benefits
    1.6 FAQs
    1.7 accordion Styles
    1.8 - Question
    1.9 - Company logos


    Tablet Styles
    
    2.4 Offer Cards

    
    Mobile Styles
    
    3.2 Site Structure
    3.3 Header
    3.4 Offer Cards
    3.5 Offer Benefits
    3.6 FAQs
    3.7 Company logos

*/

/*
    1. Reset styles
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { box-sizing: border-box; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */

body { font-family: arial; line-height: 1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }


/*
    1.1 Default Values

    Resetting the root body size, to work with 1rem = 10px.

    Brand Colour Root Variables

*/

:root { 
    
    font-size: 62.5%; 

    /* Brand Colour Variables */

    --primary-brand: #62a9a0;
    --primary-brand-dark: #367C81;
    --primary-brand-grey: #f0f2f2;
    --primary-cta: #F8722E;
    --primary-cta-hover: #E15007;
}

/*
    1.2 Site Structure Starts Here
*/

h1, h2, h3 {
    font-family: "klavika-web", sans-serif;
    font-weight: 400;
    font-style: normal;
}


/*
    1.3 Header
*/

#header {
    background-color: var(--primary-brand-dark);
    background-image: url(https://d53bpfpeyyyn7.cloudfront.net/Pictures/100xAny/P/web/r/w/r/diagonalnoise_85365.png);
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#header .brand-and-contact {
    box-sizing: border-box;
    color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;    
    max-width: 144rem;
    padding: 3.2rem 2.4rem 1.8rem 2.4rem;
    width: 100%;
}

    .brand-and-contact .contact-details {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }     

    .brand-and-contact .contact-details a {
        color: #FFF;
        font-size: 1.8rem;
        line-height: 2.8rem;
        text-decoration: none;
    }

    .brand-and-contact .contact-details a:hover {
        text-decoration: underline;
    }

.corp-contact {
    display: flex;
    align-items: center;
}

.brand-and-contact .corp-contact img {
    margin-right: 20px;
}

.brand-and-contact .corp-contact ul {
    color: #FFF;
    font-size: 1.6rem;
    line-height: 2.6rem;
    text-decoration: none;
    list-style-type: none;
}   

.brand-and-contact .corp-contact li {
    color: #FFF;
    font-size: 1.6rem;
    line-height: 2.6rem;
    text-decoration: none;
    margin-bottom: 0;
} 

.brand-and-contact .corp-contact a {
    color: #FFF;
    font-size: 1.6rem;
    line-height: 2.6rem;
    text-decoration: none;
} 

.brand-and-contact .corp-contact a:hover {
    text-decoration: underline;
}

#header .intro {
    box-sizing: border-box;
    max-width: 77rem;
    padding: 0 2.4rem 3.2rem 2.4rem;
    width: 100%;
    text-align: center;
}

#header .intro h1 {
    font-size: 4rem;
    letter-spacing: -0.008em;
    line-height: 3.2rem;
    margin: 0 0 17px 0;
    padding: 0;
	 color: #fff;
}

#header .intro p {
    font-size: 2.2rem;
    line-height: 2.8rem;
    padding: 0;
    margin: 0;
}


#header .corporate-cta {
    background-color: var(--primary-cta);
    border-radius: 0.4rem;
    display: inline-block;
    color: #FFF;
    font-size: 2.2rem;
    font-family: "klavika-web", sans-serif;
    line-height: 1.8rem;
    padding: 1.6rem 2.4rem;
    margin: 0.4rem 0 2.7rem 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

#header .corporate-cta:hover {
    background-color: var(--primary-cta-hover);
}

/*
    1.4 Offer Cards
*/

#offer {
    background: var(--primary-brand-grey);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: auto;
    width: 100%;
    padding: 0 2.4rem 3.2rem;
    gap: 3.2rem;
    margin: 0 0 5.7rem;
    position: relative;
}

#offer:before {
    background: var(--primary-brand-dark);
    background-image: url(https://d53bpfpeyyyn7.cloudfront.net/Pictures/100xAny/P/web/r/w/r/diagonalnoise_85365.png);
    content: '';
    height: 31rem;
    margin: auto;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 0;
}

#offer.ppc-single-card:before  {
    height: 20.25rem;
}

#offer.single-card:before  {
    height: 8rem;
}

#offer .offer-card {
    background: #FFF;
    border-radius: 0.4rem;
    box-shadow: 3.8px 5.9px 9.9px rgba(0, 0, 0, 0.035), 30px 47px 79px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 2.4rem 2.4rem 3.2rem 2.4rem;
    max-width: 39.5rem;
    width: 100%;
    z-index: 1;
}

#offer .offer-card img.icon {
    align-self: center;
}

#offer .offer-card h2 {
    align-self: center;
    font-size: 3.2rem;
    line-height: 3.2rem;
    letter-spacing: -0.012em;
    padding: 0 0 0 0;
    margin: 0.2rem 0 1.9rem 0;
}

#offer .ppc-offer-card {
    background: #FFF;
    border: 6px solid var(--primary-cta);
    box-shadow: 3.8px 5.9px 9.9px rgba(0, 0, 0, 0.035), 30px 47px 79px rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 2.4rem 2.4rem 3.2rem 2.4rem;
    max-width: 44.5rem;
    width: 100%;
    z-index: 1;
}

#offer .ppc-offer-card img.icon {
    align-self: center;
}

#offer .ppc-offer-card h2 {
    align-self: center;
    font-size: 3.2rem;
    line-height: 3.2rem;
    letter-spacing: -0.012em;
    padding: 0 0 0 0;
    margin: 0.2rem 0 1.9rem 0;
    font-weight: bold;
}

#offer .ppc-offer-card h2 span {
    color: var(--primary-cta);

}

/*
    Radio offer select buttons
*/

.offer-select.active {
    background: #FFF5F0;
    border-color: var(--primary-cta);
    color: #18181b !important;
    font-weight: 600;
    text-decoration: none;
  }      
  
  .offer-select.active span {
    font-weight: 600;
  }
   
  .offer-select.active .radio-active {
    display: block;
  }
  
  .offer-select.active .radio-inactive {
    display: none;
  }  
  
  .offer-select {
    align-items: center;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 2px solid #f0f2f2;
    border-radius: 0.4rem;
    color: #18181B !important;
    display: flex;
    font-size: 2rem;
    font-family: "klavika-web", sans-serif;
    height: 5.4rem;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding: 0 1.6rem;
    text-align: left;
    text-decoration: none;
    width: 100%;
  }

  .offer-select.blank {
    background: #FFF;
    border: 2px solid #f0f2f2;
    justify-content: center;
  }
  
  .offer-select.blank:hover {
    background: #FFF;
    border-color: #f0f2f2;
  }

  .offer-select .radio-active { display: none; }
  .offer-select .radio-inactive { display: block; }    
  
  .offer-select:hover {
    background: #FFF5F0;
    border-color: var(--primary-cta);
    color: #18181b !important; 
    text-decoration: none;
  }
  
  .offer-select img {
    margin-right: 12px;
  }  
  
  
  .offer-select span {
    flex-grow: 1;
    font-size: 2rem;
    text-align: right;
  }
  
#offer .offer-card h3 {
    color:#18181B;
    font-size: 2.2rem;
    line-height: 2rem;
    padding: 0;
    margin: 0.4rem 0 1.6rem 0;
}

#offer .offer-card p {
    align-self: center;
    color:rgba(0, 0, 0, 0.85);
    font-size: 1.8rem;
    line-height: 2.8rem;
    padding: 0 0 0 0;
    margin: 0 0 1rem 0;
    text-align: center;
}

#offer .offer-card p.highlight {
    margin: 0 0 3.2rem 0;
}
#offer .offer-card p.highlight span {
    background: #FFD508;
    border-radius: 0.4rem;
    color: #18181b;
    font-family: "klavika-web", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    padding: 0.8rem 1.2rem;
    text-transform: uppercase;
 }

#offer .offer-card p.terms {
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.55);
    font-size: 1.2rem;
    font-style: italic;
    padding: 0 0 0 31px;
    margin: 0 0 0 0;
    text-align: left;
    width: 100%;
}

.offer-card .subscribe-now-button {
    background-color: var(--primary-cta);
    border-radius: 0.4rem;
    color: #FFF;
    font-size: 2.2rem;
    font-family: "klavika-web", sans-serif;
    line-height: 1.8rem;
    padding: 1.6rem 0;
    margin: 0.4rem 0 2.7rem 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.offer-card .subscribe-now-button:hover {
    background-color: var(--primary-cta-hover);
    text-decoration: none;
}    

.subscribe-now-button.inactive { display: none; }
    
.offer-card ul {
    padding: 0 0 0 0;
    margin: 0 0 0.9rem 0;
}

.modal { 
    max-width: 750px !important;
}

.offer-card li {
    /*background-image: url(https://d53bpfpeyyyn7.cloudfront.net/Pictures/web/k/g/v/check_circle_fill0_wght400_grad0_opsz24_572835.svgz);*/
    background-image: url(https://d53bpfpeyyyn7.cloudfront.net/Pictures/web/w/b/l/check_circle_fill0_wght400_grad0_opsz24_593135.svgz);
    background-size: 24px 24px;
    background-position: -0.1rem 0.7rem;
    background-repeat: no-repeat;
    border-bottom: 0.1rem dashed #DFE3E3;
    color:#18181B;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 0.8rem 0 0.7rem 3.2rem;
    margin: 0;
}   

.offer-card li:first-of-type {
    padding-top: 0;
    background-position: -0.1rem 0;
}

.offer-card li:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

#offer .ppc-offer-card h3 {
    color:#18181B;
    font-size: 2.2rem;
    line-height: 2rem;
    padding: 0;
    margin: 0.4rem 0 1.6rem 0;
}

#offer .ppc-offer-card p {
    align-self: center;
    color:rgba(0, 0, 0, 0.85);
    font-size: 1.8rem;
    line-height: 2.8rem;
    padding: 0 0 0 0;
    margin: 0 0 1rem 0;
    text-align: center;
}

#offer .ppc-offer-card p.highlight {
    margin: 0 0 3.2rem 0;
}
#offer .ppc-offer-card p.highlight span {
    background: #FFD508;
    border-radius: 0.4rem;
    color: #18181b;
    font-family: "klavika-web", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    padding: 0.8rem 1.2rem;
    text-transform: uppercase;
 }

#offer .ppc-offer-card p.terms {
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.55);
    font-size: 1.2rem;
    font-style: italic;
    padding: 0 0 0 31px;
    margin: 0 0 0 0;
    text-align: left;
    width: 100%;
}

.ppc-offer-card .subscribe-now-button {
    background-color: var(--primary-cta);
    border-radius: 0.4rem;
    color: #FFF;
    font-size: 2.2rem;
    font-family: "klavika-web", sans-serif;
    line-height: 1.8rem;
    padding: 1.6rem 0;
    margin: 0.4rem 0 2.7rem 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.ppc-offer-card .subscribe-now-button:hover {
    background-color: var(--primary-cta-hover);
    text-decoration: none;
}    

.subscribe-now-button.inactive { display: none; }
    
.ppc-offer-card ul {
    padding: 0 0 0 0;
    margin: 0 0 0.9rem 0;
}

.ppc-offer-card li {
    /*background-image: url(https://d53bpfpeyyyn7.cloudfront.net/Pictures/web/k/g/v/check_circle_fill0_wght400_grad0_opsz24_572835.svgz);*/
    background-image: url(https://d53bpfpeyyyn7.cloudfront.net/Pictures/web/w/b/l/check_circle_fill0_wght400_grad0_opsz24_593135.svgz);
    background-size: 24px 24px;
    background-position: -0.1rem 0.7rem;
    background-repeat: no-repeat;
    border-bottom: 0.1rem dashed #DFE3E3;
    color:#18181B;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 0.8rem 0 0.7rem 3.2rem;
    margin: 0;
}   

.ppc-offer-card li:first-of-type {
    padding-top: 0;
    background-position: -0.1rem 0;
}

.ppc-offer-card li:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

/*
    1.5 - Offer Benefits
*/

#offer-benefits {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: 1440px;
    padding: 0 2.4rem 6.4rem 2.4rem;
    width: 100%;
}

#offer-benefits {
    display: flex;
    justify-content: center;
}

#offer-benefits #tabs {
    display: flex;
    gap: 3.2rem;
    justify-content: center;
    margin: 0 0 3.5rem 0;
}

#offer-benefits .tab-buttons {
    background: #FFF;
    border: 0.2rem solid var(--primary-brand-dark);
    border-radius: 0.4rem;
    color: var(--primary-brand-dark);
    font-size: 2rem;
    font-family: "klavika-web", sans-serif;
    line-height: 1.6rem;
    padding: 1.6rem 0;
    margin: 0 0 0 0;
    text-transform: uppercase;
    text-align: center;
    width: 39.5rem;
}

#offer-benefits .tab-buttons.active, #offer-benefits .tab-buttons:hover {
    background: var(--primary-brand-dark);
    color: #FFF;
    cursor: pointer;
    text-decoration: none;
}

#offer-benefits .tab-buttons:hover {
    text-decoration: underline; 
}

#offer-benefits .tab-buttons.active:hover {
    cursor: text;
    text-decoration: none;
}

#offer-benefits h1.ppc-heading {
    font-size: 3.6rem;
    letter-spacing: -0.008em;
    line-height: 3.2rem;
    margin: 0 0 17px 0;
    padding: 0;
    text-align: center;
}

#offer-benefits h2.ppc-sub-heading {
    color:#18181B;
    font-size: 2.25rem;
    line-height: 3.2rem;
    margin: 0 0 2.6rem 0;
    padding: 0;
}

#offer-benefits h2 {
    color:#18181B;
    font-size: 2.8rem;
    line-height: 3.2rem;
    margin: 0 0 2.6rem 0;
    padding: 0;
}

#offer-benefits p {
    font-size: 1.8rem;
    line-height: 3.2rem;
    margin: 0 0 2.6rem 0;
    padding: 0 0 0 0;
}

#offer-benefits .tab-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#offer-benefits .benefit-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 32px 32px;
    grid-auto-flow: row;
}

#offer-benefits .benefit-card {
    background: #FFF;
    border-radius: 0.4rem;
    box-shadow: 3.8px 5.9px 9.9px rgba(0, 0, 0, 0.035), 30px 47px 79px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#offer-benefits .benefit-card img {
    height: auto;
    width: 100%;
    margin: 0 0 2.4rem 0;
    padding: 0 0 0 0;
}

#offer-benefits .benefit-card h3 {
    color:#18181B;
    font-size: 2rem;
    line-height: 2.8rem;
    margin: 1px 0 12px 0;
    padding: 0 2.4rem 0 2.4rem;
}

#offer-benefits .benefit-card p {
    color:#18181B;
    font-size: 1.6rem;
    line-height: 2.4rem;    
    margin: 0 0 0 0;
    padding: 0 2.4rem 3.2rem 2.4rem;
}

/*
    1.6 - FAQs
*/

#faqs {
    background: var(--primary-brand-grey);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding: 5.8rem 0 6.4rem 0;
    width: 100%;
}

#faqs h2 {
    color:#18181B;
    font-size: 2.8rem;
    line-height: 3.2rem;
    padding: 0 0 1.3rem 0;
    margin: 0;
    max-width: 78rem;
    width: 100%;
}

/* 
    1.7 - accordion Styles
*/

ul.subs-accordion {
    list-style: none;
    padding: 0;
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin: 0 0 0 0;
    width: 100%;
    max-width: 78rem;
  }    
  
  ul.subs-accordion li {
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
  }
    
  ul.subs-accordion li:first-child a.toggle {
    border-top: none;
  }
  
  ul.subs-accordion li a.toggle {
    box-sizing: border-box;
    border-bottom: 0.2rem solid #E5E5E5;
    color: #18181B;
    display: block;
    padding: 1.6rem 0;
    position: relative;
    width: 100%;            
    text-decoration: none;
  }

ul.subs-accordion li a.toggle::before {
    content: "";
    position: absolute;
    right: 0;
    top: 12px;
    width: 30px;
    height: 30px;
    background-image: url(https://d53bpfpeyyyn7.cloudfront.net/Pictures/web/b/b/i/expand_circle_down_fill0_wght400_grad0_opsz48_653004.svgz);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

  ul.subs-accordion li a.toggle:hover {
    color: var(--primary-brand-dark);
  }

  ul.subs-accordion li a.toggled {
    color: var(--primary-brand);
    font-weight: 600;
    border-bottom: 0;
    position: relative;
  }

  ul.subs-accordion li a.toggle.toggled::before {
    transform: rotate(-180deg);
}
  
  ul.subs-accordion .inner {
    box-sizing: border-box;
    border-bottom: 0.2rem solid var(--primary-brand-dark);
    display: none;
    padding: 0 0 2.5rem 0;
    margin: 0;
    overflow: hidden;
  }     
  
  ul.subs-accordion .inner .answer {
    color: rgba(0, 0, 0, 0.55);
    font-family: 'klavika-web';
    font-size: 1.4rem;
    line-height: 1.4rem;
    padding: 0;
    margin: 0 0 0.8rem 0;
    text-transform: uppercase;
  }
  

#footer p.webvision {
    font-size: 1.125rem;
    line-height: 1.802rem;
}

/*
    1.8 - Question
*/

#question {
    background: var(--primary-brand-grey);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding: 5.8rem 0 6.4rem 0;
    width: 100%;
}

#question h2 {
    color:#18181B;
    font-size: 2.8rem;
    line-height: 3.2rem;
    padding: 0 0 1.3rem 0;
    margin: 0;
    max-width: 78rem;
    width: 100%;
}

#question p {
    color: #18181B;
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    max-width: 78rem;
    width: 100%;
}

/*
    1.9 - Company logos
*/

#corporate-logos {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0 0 3.2rem 0;
	margin-bottom: 0;
	width: 100%;
}

#corporate-logos h2 {
    font-size: 24px;
    padding: 0 24px;
	text-align: center;
}


@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 20px 0;
  background: white;
  white-space: nowrap;
  position: relative;
}
.logos.second-tier { 
	margin-bottom: 24px;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

/*
.logos:hover .logos-slide { animation-play-state: paused; }
*/

.logos-slide {
  display: inline-block;
  animation: 45s slide infinite linear;
}

.logos-slide img {
  height: 80px;
  width:auto;
  max-width: 200px;
  margin: 0 20px;
}
  
/*
    Tablet Styles
*/

@media screen and (min-width: 729px) and (max-width: 1120px) {

        #offer-benefits .benefit-content {
            grid-template-columns: 1fr 1fr 1fr;
        }

}

/*
    2.4 Offer Cards
*/

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

    #offer {
        flex-direction: column;
        justify-content: start;
        padding-bottom: 3.2rem;
        margin-bottom: 3.2rem;
    }
    
    .offer-select.blank {
        margin-bottom: 1.2rem!important;
    }
	 
	 .modal {
	 	padding: 10px !important;
	 }

}


/*
    Mobile Styles
*/

/*
    3.3 Header
*/

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

    .brand-and-contact .contact-details a {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }    

    #header .logo img {
        height: 54px;
        width: 230px;
    }

    #header .intro h1 {
        font-size: 3.2rem;
        letter-spacing: -0.008em;
        line-height: 3.2rem;
        margin: 10px 0 14px 0;
        padding: 0;
    } 
    
    #header .intro p {
        margin-bottom: 3px;
    }

}

/*
    3.4 Offer Cards
*/

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

    #offer {
        flex-direction: column;
        justify-content: start;
        padding-bottom: 3.2rem;
        margin-bottom: 3.2rem;
    }

    #offer:before {
        height: 100%;
    }

    #offer .offer-card {
        max-width: 100%;
        width: 100%;
    }

    #offer .offer-card p {
        line-height: 2.4rem;
        margin: 3px 0 18px 0;
    }
}

/*
    3.5 Offer Benefits
*/

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

    #offer-benefits #tabs {
        flex-direction: column;
        row-gap: 1.6rem;
    }    

    #offer-benefits .tab-buttons {
        width: 100%;
    }

    #offer-benefits h2 {
        text-align: center;
    }
    
    #offer-benefits .benefit-content {
        display: flex;
        flex-direction: column;
    }   
    
    #offer-benefits .benefit-content .card {
        width: 100%;
    }
 
}

/*
    3.6 FAQs
*/

@media screen and (max-width: 728px) {
    #faqs {
        box-sizing: border-box;
        padding: 5.8rem 2.4rem 6.4rem 2.4rem;
    }

    #question {
        box-sizing: border-box;
        padding: 5.8rem 2.4rem 6.4rem 2.4rem;
    }
}