@font-face {
    font-family: "Questrial";
    src: url("../fonts/Questrial-Regular.ttf");
}

:root { /* These are global variables changing these will change colours and fonts everywhere. Any new global variables should also be defined here */
    --ahs-primary-color: #0042FF;
    --ahs-secondary-color: #17B0B2;
    --ahs-accent-color: #0000B0;

    --ahs-text-color: #FFF;

    --ff-primary: "Helvetica", "Questrial", sans-serif;

    --fw-light: 100;
    --fw-regular: 400;
    --fw-semi-bold: 500;
    --fw-bold: 700;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--ff-primary);

    padding: 0;
    margin: 0;
}

body::-webkit-scrollbar {
    width: 5px;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--ahs-primary-color);
}

/* All base values in each selector is based on a 212px width screen size. Media queries are then used to make the required changes for larger screen sizes */
/* When updating media queries only change the property that needs changing. Remember DRY! */

.hero-section { 
    /* Below is an example of defining scoped variables. 
       Any variable with the underscore prefix shouldn't be used outside of the highest selector of the scope. They can be change independantly of the global variables if needed. */
    --_hero-bg-color: var(--ahs-primary-color);
    --_hero-text-color: var(--ahs-text-color);
    --_hero-gradient-color-one: var(--ahs-accent-color);
    --_hero-gradient-color-two: var(--ahs-primary-color);
    --_hero-gradient-color-three: var(--ahs-secondary-color);

    background: var(--_hero-bg-color); /* Fallback background */
    background: linear-gradient(140deg, var(--_hero-gradient-color-one) 22%, var(--_hero-gradient-color-two) 56%, var(--_hero-gradient-color-three) 100%); /* Fallback gradient background */
    background-image: url("../img/AHS_HeroImage.png");
    background-size: cover;
    background-repeat: none;
    background-position: bottom 5% right 10%;

    color: var(--_hero-text-color);
    min-height: 100vh;
}

.hero-section .logo {
    width: 16rem; /* rem (root em). 1rem is the equivalent to the root font size of the HTML document, which is 16px in most browsers. 
                     1em is equivalent to the font-size of the parent element. */
}

@media only screen and (min-width: 375px) {
    .hero-section .logo {
        width: 22rem;
    }
}

@media only screen and (min-width: 425px) {
    .hero-section .logo {
        width: 25rem;
    }
}

@media only screen and (min-width: 500px) {
    .hero-section .logo {
        width: 30rem;
    }
}

@media only screen and (min-width: 750px) {
    .hero-section .logo {
        width: 40rem;
    }
}

@media only screen and (min-width: 1440px) {
    .hero-section .logo {
        width: 50rem;
    }
}

.hero-subtitle {
    --_hero-subtitle-fs: 1.2rem;
    display: flex;
    flex-wrap: wrap;

    position: relative;

    padding-inline: 1.2rem;
}

.hero-subtitle > span {
    position:absolute;
    margin-inline: .5rem;
    font-size: var(--_hero-subtitle-fs);
}

.hero-subtitle img {
    width: 15rem;
    transition: transform .5s ease-in-out;
}

.hero-subtitle img:hover {
    transform: scale(1.05) translateX(2px);
    cursor: pointer;
}

@media only screen and (min-width: 375px) {
    .hero-subtitle {
        padding-inline: 1.7rem;
    }
}

@media only screen and (min-width: 425px) {
    .hero-subtitle {
        --_hero-subtitle-fs: 1.35rem;
        padding-inline: 1.8rem;
    }

    .hero-subtitle > span {
        margin-inline: .6rem;
    }

    .hero-subtitle img {
        width: 18rem;
        transition: transform .5s ease-in-out;
    }
}

@media only screen and (min-width: 500px) {
    .hero-subtitle {
        flex-wrap: nowrap;
        padding-inline: 2.5rem;
    }

    .hero-subtitle > span {
        position:relative;
        height: 25px;
        margin: 2rem 0 0 .6rem;
    }
}

@media only screen and (min-width: 750px) {
    .hero-subtitle {
        --_hero-subtitle-fs: 1.5rem;
        padding-inline: 3.5rem;
    }
}

@media only screen and (min-width: 1440px) {
    .hero-subtitle {
        --_hero-subtitle-fs: 1.9rem;
        flex-wrap: nowrap;
        padding-inline: 4.5rem;
    }

    .hero-subtitle img {
        width: 20rem;
    }
}

.hero-footer {
    display:flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.hero-chevron {
    width: 2rem;
    transition: transform .25s ease-in-out;
}

.hero-chevron:hover {
    transform: scale(1.15);
}

.products-section {
    background-color: #f2f2f2; /* Fallback background */
    background-image: url(../img/AHS_icon_white_RGB-01.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: right -35% bottom -65%;

    min-height: 80dvh; /* DVH: Dynamic Viewport Height. Used to account for size differences caused by browser UI on different devices*/

    padding-top: 2rem;
}

.products-section h1 {
    display: block;
    text-align: center;
    font-size: 2rem;
    margin: 0 0 1rem 0;
}

.product-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    justify-content: center;
    align-items: center;

    padding-inline: 4rem;
}

.product {
    border: 10px solid var(--ahs-secondary-color);
    background: #FFF;

    -webkit-box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 12px -4px rgba(0,0,0,0.75);

    transition: transform .5s ease-out;
}

.product:hover {
    transform: scale(1.02);
}

.product img {
    width: 10rem;
}

.product-cg {
    padding: .6rem .1rem;
}

.product-sc {
    padding: .1655rem .15rem;
}

@media only screen and (min-width: 375px) {
    .products-section {
        min-height: 80dvh;
    }

    .products-section h1 {
        font-size: 2rem;
        margin: 0 0 1rem 0;
    }

    .product img {
        width: 12.5rem;
    }

    .product-cg {
        padding: .6rem .1rem;
    }
    
    .product-sc {
        padding: .056rem .15rem;
    }
}

@media only screen and (min-width: 400px) {
    .products-section {
        min-height: 83.5dvh;
    }
}

@media only screen and (min-width: 500px) {
    .products-section {
        min-height: 86dvh;
    }

    .product img {
        width: 15rem;
    }

    .product-cg {
        padding: .69rem .1rem;
    }
    
    .product-sc {
        padding: .056rem .15rem;
    }
}

@media only screen and (min-width: 750px) {
    .products-section {
        min-height: 88dvh;
    }

    .products-section h1 {
        font-size: 2.5rem;
        margin: 0 0 3rem 0;
    }

    .product img {
        width: 18rem;
    }

    .product-cg {
        padding: .8rem .1rem;
    }
    
    .product-sc {
        padding: .01rem .15rem;
    }
}

@media only screen and (min-width: 1440px) {
    .products-section {
        min-height: 88.5dvh;
    }

    .product-container {
        gap: 3rem;
    }
    .product img {
        width: 25rem;
    }

    .product-cg {
        padding: 1.1rem .25rem;
    }
    
    .product-sc {
        padding: 0 .15rem;
    }
}

@media only screen and (min-width: 2560px) {
    .products-section {
        background-position: right -35% bottom 75%;
    }
}

.contact-container {
    text-align: center;
    margin-top: 3rem;
}

.contact-container a {
    font-size: 1.5rem;
    color: var(--ahs-primary-color);
}
.accreditation-images {
    display: flex;
	flex-wrap: wrap;
    justify-content: center; /* center them */
    align-items: center;
    gap: 20px; /* spacing between images */
    margin-top: 2rem;
	margin-bottom: 2rem;
}

.accreditation-images img {
    height: 80px; /* adjust to fit your design */
    width: auto;
}
@media only screen and (min-width: 375px) {
    .contact-container {
		padding-bottom: 3rem;
    }
}

@media only screen and (min-width: 750px) {
    .contact-container {
        margin-top: 12rem;
		padding-bottom: 2rem;
    }
}

@media only screen and (min-width: 1440px) {
    .contact-container {
        margin-top: 8rem;
		padding-bottom: 3rem;
    }

    .contact-container a {
        font-size: 1.75rem;
    }
}

footer {
    --_footer-text-color: var(--ahs-text-color);
    --_footer-bg-color: var(--ahs-primary-color);
    --_hero-gradient-color-one: var(--ahs-accent-color);
    --_hero-gradient-color-two: var(--ahs-primary-color);
    --_hero-gradient-color-three: var(--ahs-secondary-color);

    display: flex;
    flex-direction: row;

    background-color: var(--_footer-bg-color);
    background: linear-gradient(140deg, var(--_hero-gradient-color-one) 22%, var(--_hero-gradient-color-two) 56%, var(--_hero-gradient-color-three) 100%);
    color: var(--_footer-text-color);

    padding: 10px;
}

footer div {
    margin-right: 50px;
    padding-inline: 10px;
}

footer a {
    color: var(--_footer-text-color);
}

footer .policy-container {
    display: flex;
    flex-direction: column-reverse;
}

footer a.no-click { /* ONLY used to to prevent numbers on chrome mobile browsers showing as telephone numbers. DO NOT USE ELSE WHERE. */
    text-decoration: none;
    pointer-events: none;
}

footer > p {
    margin: .2rem;
}

footer > p:first-child {
    margin-top: 1rem;
}

@media only screen and (min-width: 375px) {
    footer {
        padding: 5px;
    }
}