/* /// fonts /// */

@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600&family=Poiret+One&display=swap');


/* /// variables /// */

:root {

    /* /// colour /// */

    --colour-0: #ffffff;
    --colour-1: #f8f9fa;
    --colour-2: #e9ecef;
    --colour-3: #666e75;
    --colour-4: #03071e;
    --colour-5: #d90429;
    
    /* /// padding /// */
    
    --padding-0: .5rem;
    --padding-1: 1rem;
    --padding-2: 2rem;
    --padding-3: 3rem;
    --padding-4: 4rem;
    --padding-5: 7rem;

    /* /// margin /// */

    --margin-0: .5rem;
    --margin-1: 1rem;
    --margin-2: 2rem;
    --margin-3: 3rem;
    --margin-4: 4rem;
    --margin-5: 7rem;
    
}


/* /// global reset /// */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* /// default styling /// */

body {
    font-family: 'Hind Madurai', sans-serif;
    font-size: 10px;
    background: var(--colour-1);
}


/* /// utility classes /// */

p {
    font-size: .9rem;
    font-weight: 300;
    color: var(--colour-3);
}

h1 {
    font-size: 3rem;
    font-weight: 600;
}

h2 {
    font-size: 1rem;
    font-weight: 300;
}

h3 {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--colour-4);
}

h4 {
    font-size: 1.5rem;
    font-weight: 400;
}

h5 {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--colour-5);
}

h6 {
    font-size: 1.1rem;
    font-weight: 400;
}

a {
    font-size: .9rem;
    text-decoration: none;
    font-weight: 300;
}

ul {
    list-style: none;
    font-size: 1rem;
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* /// navigation /// */

.navigation-info {
    width: 100%;
    height: 5rem;
    background: var(--colour-0);
}

.navigation-info .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navigation-info .container a img {
    width: 2.6rem;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; */
}

.navigation-info .container .wrapper {
    height: 100%;
    display: flex;
    align-items: center;
}

.navigation-info .container .wrapper .phone,
.navigation-info .container .wrapper .time,
.navigation-info .container .wrapper .email {
    display: flex;
}

.navigation-info .container .wrapper .phone .wrapper-icon,
.navigation-info .container .wrapper .time .wrapper-icon,
.navigation-info .container .wrapper .email .wrapper-icon {
    padding: 0 var(--padding-2);
    display: grid;
    place-items: center;
}

.navigation-info .container .wrapper .phone .wrapper-icon i,
.navigation-info .container .wrapper .time .wrapper-icon i,
.navigation-info .container .wrapper .email .wrapper-icon i {
    font-size: 1.2rem;
    color: var(--colour-5);
}

.navigation-info .container .wrapper .phone .wrapper-infomation .special,
.navigation-info .container .wrapper .time .wrapper-infomation .special,
.navigation-info .container .wrapper .email .wrapper-infomation .special {
    font-weight: 500;
}

.navigation-info .container .wrapper .phone .wrapper-infomation a p,
.navigation-info .container .wrapper .email .wrapper-infomation a p {
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    .navigation-info .container .wrapper .phone .wrapper-infomation a p:hover,
    .navigation-info .container .wrapper .email .wrapper-infomation a p:hover {
        color: var(--colour-5);
    }

}

.navigation-info .container .wrapper ul {
    padding-left: 2rem;
    display: flex;
}

.navigation-info .container .wrapper ul li {
    padding-right: var(--padding-1);
}

.navigation-info .container .wrapper ul li:last-child {
    padding-right: unset;
}

.navigation-info .container .wrapper ul li a {
    text-decoration: none;
}

.navigation-info .container .wrapper ul li i {
    font-size: 1.2rem;
    color: var(--colour-5);
    padding: var(--padding-0);
    border-radius: .5rem;
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    .navigation-info .container .wrapper ul li i:hover {
        background-color: var(--colour-5);
        color: var(--colour-0);
    }

}

nav {
    width: 100%;
    height: 3rem;
    background: var(--colour-2);
}

nav .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .container ul {
    display: flex;
}

nav .container ul li {
    padding-right: var(--padding-4);
}

nav .container ul li a p {
    padding: var(--padding-0);
    color: var(--colour-3);
    font-weight: 500;
    border-radius: .5rem;
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    nav .container ul li a p:hover {
        color: var(--colour-0);
        background-color: var(--colour-5);
    }

}

nav .container ul li:last-child {
    padding-right: unset;
}

nav .container div a {
    height: 3rem;
    width: 8.5rem;
    background-color: var(--colour-5);
    display: grid;
    place-content: center;
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    nav .container div a:hover {
        background-color: var(--colour-0);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    }

}

nav .container div a p  {
    color: var(--colour-0);
    font-weight: 500;
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    nav .container div a:hover p {
        color: var(--colour-5);
    }

}

nav .navigation-mobile {
    display: none;
}


/* /// hero /// */

#hero {
    position: relative;
    width: 100%;
    min-height: 45rem;
    background: url('./img/hero-home.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#hero .container {
    z-index: 1;
}

#hero .container h1,
#hero .container h5 {
    color: var(--colour-0);
    margin-bottom: var(--margin-1);
}

#hero .special {
    width: 50%;
}

#hero .container .wrapper {
    display: flex;
    margin-top: var(--margin-1);
}

#hero .container .wrapper .services,
#hero .container .wrapper .gallery {
    width: 11rem;
    height: 4rem;
    border-radius: .5rem;
    display: grid;
    place-items: center;
    background: var(--colour-5);
    margin-right: var(--margin-1);
    transition-property: all;
    transition-duration: .5s;
}

#hero .container .wrapper .gallery {
    display: none;
}

@media (hover: hover) {

    #hero .container .wrapper .services:hover,
    #hero .container .wrapper .gallery:hover {
        background: var(--colour-0);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    }

}

#hero .container .wrapper .services p,
#hero .container .wrapper .gallery p {
    color: var(--colour-0);
    font-weight: 500;
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    #hero .container .wrapper .services:hover p,
    #hero .container .wrapper .gallery:hover p {
        color: var(--colour-5);
    }

}

#hero .container .wrapper .contact {
    width: 11rem;
    height: 4rem;
    border-radius: .5rem;
    display: grid;
    place-items: center;
    color: var(--colour-0);
    border: var(--colour-0) solid .1rem;
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    #hero .container .wrapper .contact:hover {
        background-color: var(--colour-0);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    }

}

#hero .container .wrapper .contact p {
    font-weight: 500;
    color: var(--colour-0);
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    #hero .container .wrapper .contact:hover p {
        color: var(--colour-5);
    }

}

#hero .overlay {
    position: absolute;
    background-color: var(--colour-4);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .3;
}


/* /// about-banner /// */

#about-banner::after {
    content: '';
    display: block;
    width: 100%;
    height: .1rem;
    background: var(--colour-0);
}

#about-banner .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 2rem;
}

#about-banner .container .wrapper-left {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding: var(--padding-3) 0;
    gap: 4rem;
}

#about-banner .container .wrapper-left .wrapper-a,
#about-banner .container .wrapper-left .wrapper-b {
    display: flex;
}

#about-banner .container .wrapper-left .wrapper-a .icon,
#about-banner .container .wrapper-left .wrapper-b .icon {
    padding: 0 var(--padding-2) 0 0;
    font-size: 3rem;
    color: var(--colour-5);
}

#about-banner .container .wrapper-right {
    position: relative;
    z-index: 2;
}

#about-banner .container .wrapper-right .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .5rem;
    width: 90%;
    background: var(--colour-0);
    position: absolute;
    border-radius: .5rem;
    right: 0;
    bottom: 40%;
    padding: var(--padding-3) var(--padding-2);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

#about-banner .container .wrapper-right .wrapper .wrapper-c,
#about-banner .container .wrapper-right .wrapper .wrapper-d {
    padding: 0 var(--padding-2);
    background-color: var(--colour-0);
}

#about-banner .container .wrapper-right .wrapper .wrapper-c i,
#about-banner .container .wrapper-right .wrapper .wrapper-d i {
    color: var(--colour-5);
    font-size: 3rem;
    padding-bottom: var(--padding-1);
}

#about-banner .container .wrapper-left .wrapper-a span,
#about-banner .container .wrapper-left .wrapper-b span,
#about-banner .container .wrapper-right .wrapper .wrapper-c span,
#about-banner .container .wrapper-right .wrapper .wrapper-d span  {
    /* color: var(--colour-4); */
    font-size: 1rem;
    font-weight: 500;
}


/* /// about /// */

#about {
    padding: var(--padding-5) 0;
}

#about .container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
}

#about .container .wrapper-left  {
    height: 100%;
    display: flex;
    align-items: center;
}

#about .container .wrapper-left .align-wrapper h5 {
    margin-bottom: var(--margin-1);
}

#about .container .wrapper-left .align-wrapper h3 {
    margin-bottom: var(--margin-2);
}

#about .container .wrapper-left .align-wrapper .mobile {
    display: none;
}

#about .container .wrapper-left .align-wrapper .wrapper {
    display: grid;
    grid-template-columns: 55% 45%;
}

#about .container .wrapper-left .align-wrapper .wrapper .about-info {
    margin-right: var(--margin-3);
}

#about .container .wrapper-left .align-wrapper .wrapper .about-info-mini .wrapper-a,
#about .container .wrapper-left .align-wrapper .wrapper .about-info-mini .wrapper-b {
    display: flex;
}

#about .container .wrapper-left .align-wrapper .wrapper .about-info-mini .wrapper-a {
    margin-bottom: var(--margin-2);
}

#about .container .wrapper-left .align-wrapper .wrapper .about-info-mini .wrapper-a .icon,
#about .container .wrapper-left .align-wrapper .wrapper .about-info-mini .wrapper-b .icon {
    padding-right: var(--padding-1);
    color: var(--colour-5);
    margin-top: .2rem;
}

#about .container .wrapper-left .align-wrapper .wrapper .about-info-mini .wrapper-a .text,
#about .container .wrapper-left .align-wrapper .wrapper .about-info-mini .wrapper-b .text {
    padding-right: var(--padding-3);
}

#about .container .wrapper-left .align-wrapper .wrapper .about-info-mini .wrapper-a .text h6,
#about .container .wrapper-left .align-wrapper .wrapper .about-info-mini .wrapper-b .text h6 {
    color: var(--colour-4);
}

#about .container .wrapper-right .background-image {
    position: relative;
    height: 32rem;
    background: url('./img/about.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    overflow: hidden;
}

#about .container .wrapper-right .overlay {
    position: absolute;
    background-color: var(--colour-4);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .3;
}


/* /// services /// */

#services {
    position: relative;
    padding: var(--padding-5) 0;
    width: 100%;
}

#services .overlay {
    position: absolute;
    width: 100%;
    height: 12rem;
    background: var(--colour-2);
    bottom: 0;
    z-index: 0;
}

#services .container h5 {
    text-align: center;
    margin-bottom: var(--margin-1);
}

#services .container h3 {
    text-align: center;
    margin-bottom: var(--margin-3);
}

#services .container .mobile {
    display: none;
}

#services .container .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
}

#services .container .wrapper .card-a,
#services .container .wrapper .card-b,
#services .container .wrapper .card-c,
#services .container .wrapper .card-d,
#services .container .wrapper .card-e,
#services .container .wrapper .card-f {
    padding: var(--padding-4);
    background: var(--colour-0);
    border-radius: .5rem;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

#services .container .wrapper .card-a i,
#services .container .wrapper .card-b i,
#services .container .wrapper .card-c i,
#services .container .wrapper .card-d i,
#services .container .wrapper .card-e i,
#services .container .wrapper .card-f i {
    font-size: 5rem;
    color: var(--colour-5);
    margin-top: var(--margin-1);
    margin-bottom: var(--margin-1);
}

#services .container .wrapper .card-a h3,
#services .container .wrapper .card-b h3,
#services .container .wrapper .card-c h3,
#services .container .wrapper .card-d h3,
#services .container .wrapper .card-e h3,
#services .container .wrapper .card-f h3 {
    text-align: unset;
    margin-bottom: var(--margin-1);
}

#services .container .wrapper .card-a p,
#services .container .wrapper .card-b p,
#services .container .wrapper .card-c p,
#services .container .wrapper .card-d p,
#services .container .wrapper .card-e p,
#services .container .wrapper .card-f p {
    margin-bottom: var(--margin-2);
}


/* /// services-plus /// */

#services-plus {
    padding: 0 0 var(--padding-5) 0;
    background: var(--colour-2);
}

#services-plus .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
}

#services-plus .container .wrapper-left h5 {
    margin-bottom: var(--margin-1);
}

#services-plus .container .wrapper-right p {
    margin-bottom: var(--margin-3);
}

#services-plus .container .wrapper-right .wrapper {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

#services-plus .container .wrapper-right .wrapper a .NHBRC,
#services-plus .container .wrapper-right .wrapper a .BBBEE {
    height: 6rem;
    width: 9rem;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

#services-plus .container .wrapper-right .wrapper a .NHBRC {
    background-color: var(--colour-0);
    background-image: url('./img/NHBRC.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#services-plus .container .wrapper-right .wrapper a .BBBEE {
    background-color: var(--colour-0);
    background-image: url('./img/BBBEE.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


/* /// why us /// */

#why-us {
    padding: var(--padding-5) 0;
}

#why-us .container .wrapper-a {
    text-align: center;
}

#why-us .container .wrapper-a h5 {
    margin-bottom: var(--margin-1);
}

#why-us .container .wrapper-a h3 {
    margin-bottom: var(--margin-3);
}

#why-us .container .wrapper-a .mobile {
    display: none;
}

#why-us .container .wrapper-b {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 2rem;
}

#why-us .container .wrapper-b .card-a,
#why-us .container .wrapper-b .card-b,
#why-us .container .wrapper-b .card-c {
    padding: var(--padding-3);
    border-radius: .5rem;
    background: var(--colour-0);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

#why-us .container .wrapper-b .card-a i,
#why-us .container .wrapper-b .card-b i,
#why-us .container .wrapper-b .card-c i {
    font-size: 2rem;
    padding: .5rem;
    border-radius: .5rem;
    background: var(--colour-5);
    color: var(--colour-0);
}

#why-us .container .wrapper-b .card-a h4,
#why-us .container .wrapper-b .card-b h4,
#why-us .container .wrapper-b .card-c h4 {
    margin: var(--margin-1) 0;
    vertical-align: middle;
}


/* /// gallery /// */

#gallery-home {
    padding: var(--padding-5) 0;
}

#gallery-home .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
}

#gallery-home .container .image {
    position: relative;
    height: 32rem;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    overflow: hidden;
}

#gallery-home .container .image .overlay {
    position: absolute;
    background-color: var(--colour-4);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .3;
}

#gallery-home .container .image-1 {
    background-image: url('./img/gallery-home-1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#gallery-home .container .image-2 {
    background-image: url('./img/gallery-home-2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#gallery-home .container .image-3 {
    background-image: url('./img/gallery-home-3.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#gallery-home .container .image-4 {
    background-image: url('./img/gallery-home-4.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* /// contact /// */

#contact {
    padding: var(--padding-5) 0;
}

#contact .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
}

#contact .container .wrapper-left {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding-right: var(--padding-4);
}

#contact .container .wrapper-left .wrapper h5 {
    margin-bottom: var(--margin-1);
}

#contact .container .wrapper-left .wrapper h3 {
    margin-bottom: var(--margin-2);
}

#contact .container .wrapper-left .wrapper .mobile {
    display: none;
}

#contact .container .wrapper-left .wrapper .contact-info-mobile {
    display: none;
}

#contact .container .wrapper-right {
    padding: var(--padding-4);
    border-radius: .5rem;
    background: var(--colour-0);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

#contact .container .wrapper-right form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3.2rem 3.2rem 3.2rem 10rem 4rem;
    gap: 1rem;
}

#contact .container .wrapper-right form #name,
#contact .container .wrapper-right form #email,
#contact .container .wrapper-right form #number,
#contact .container .wrapper-right form #address,
#contact .container .wrapper-right form #message {
    width: 100%;
    height: 100%;
    font-family: 'Hind Madurai', sans-serif;
    font-size: .9rem;
    padding: var(--padding-1);
    border: var(--colour-2) solid .1rem;
    border-radius: .5rem;
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    #contact .container .wrapper-right form #name:hover,
    #contact .container .wrapper-right form #email:hover,
    #contact .container .wrapper-right form #number:hover,
    #contact .container .wrapper-right form #address:hover,
    #contact .container .wrapper-right form #message:hover {
        border: var(--colour-5) solid .1rem;
    }

}

#contact .container .wrapper-right form #name:focus,
#contact .container .wrapper-right form #email:focus,
#contact .container .wrapper-right form #number:focus,
#contact .container .wrapper-right form #address:focus,
#contact .container .wrapper-right form #message:focus {
    border: var(--colour-4) solid .1rem;
    outline: none;
}

#contact .container .wrapper-right form #name {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

#contact .container .wrapper-right form #email {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

#contact .container .wrapper-right form #number {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

#contact .container .wrapper-right form #address {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
}

#contact .container .wrapper-right form #message {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
}

#contact .container .wrapper-right form #submit {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
    background: var(--colour-5);
    border: none;
    color: var(--colour-0);
    border-radius: .5rem;
    font-weight: 500;
    font-family: 'Hind Madurai', sans-serif;
    font-size: .9rem;
    cursor: pointer;
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    #contact .container .wrapper-right form #submit:hover {
        background: var(--colour-0);
        color: var(--colour-5);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    }

}


/* /// footer /// */

#footer {
    background: var(--colour-4);
}

#footer .container .wrapper-top  {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 7rem;
    padding-top: var(--padding-5);
    margin-bottom: var(--margin-5);
}

#footer .container .wrapper-top .wrapper-left .wrapper-logo {
    margin-bottom: var(--margin-2);
    display: flex;
    gap: .5rem;
}

#footer .container .wrapper-top .wrapper-left .wrapper-logo a img {
    width: 1.5rem;
    vertical-align: middle;
}

#footer .container .wrapper-top .wrapper-left .wrapper-logo h6 {
    margin-top: .1rem;
    vertical-align: middle;
    color: var(--colour-1);
}

#footer .container .wrapper-top .wrapper-left .special {
    margin-bottom: var(--margin-2);
}

#footer .container .wrapper-top .wrapper-left p {
    margin-right: var(--margin-0);
    margin-bottom: var(--margin-0);
    color: var(--colour-1);
}

#footer .container .wrapper-top .wrapper-left p a {
    color: var(--colour-1);
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    #footer .container .wrapper-top .wrapper-left p a:hover {
        color: var(--colour-5);
    }

}

#footer .container .wrapper-top .wrapper-left .special-2 {
    margin-bottom: unset;
}

#footer .container .wrapper-top .wrapper-left p i {
    margin-right: var(--margin-1);
}

#footer .container .wrapper-top .wrapper-right {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

#footer .container .wrapper-top .wrapper-right .wrapper-a h6,
#footer .container .wrapper-top .wrapper-right .wrapper-b h6,
#footer .container .wrapper-top .wrapper-right .wrapper-c h6 {
    margin-bottom: var(--margin-2);
    color: var(--colour-1);
}

#footer .container .wrapper-top .wrapper-right .wrapper-a ul li,
#footer .container .wrapper-top .wrapper-right .wrapper-b ul li,
#footer .container .wrapper-top .wrapper-right .wrapper-c ul li {
    margin-bottom: var(--margin-1);
}

#footer .container .wrapper-top .wrapper-right .wrapper-b ul li p {
    color: var(--colour-1);
}

#footer .container .wrapper-top .wrapper-right .wrapper-a ul li a p,
#footer .container .wrapper-top .wrapper-right .wrapper-b ul li a p,
#footer .container .wrapper-top .wrapper-right .wrapper-c ul li a p {
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    #footer .container .wrapper-top .wrapper-right .wrapper-a ul li a p:hover,
    #footer .container .wrapper-top .wrapper-right .wrapper-b ul li a p:hover,
    #footer .container .wrapper-top .wrapper-right .wrapper-c ul li a p:hover {
        color: var(--colour-5);
    }

}

#footer .container .wrapper-top .wrapper-social {
    display: none;
}

#footer .container .wrapper-top .wrapper-social h6 {
    margin-bottom: var(--margin-2);
    color: var(--colour-1);
}

#footer .container .wrapper-top .wrapper-social ul {
    display: flex;
    gap: 3rem;
}

#footer .container .wrapper-top .wrapper-social ul li a i {
    font-size: 2rem;
    color: var(--colour-3);
    transition-property: all;
    transition-duration: .5s;  
}

@media (hover: hover) {

    #footer .container .wrapper-top .wrapper-social ul li a i:hover {
        color: var(--colour-5);
    }

}

#footer .separator {
    width: 100%;
    height: .02rem;
    background: var(--colour-1);
}

#footer .container .wrapper-bottom  {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--margin-4);
    padding-bottom: var(--padding-4);
}

#footer .container .wrapper-bottom .mobile {
    display: none;
}

#footer .container .wrapper-bottom .desktop,
#footer .container .wrapper-bottom .mobile {
    color: var(--colour-1);
}

#footer .container .wrapper-bottom .desktop a,
#footer .container .wrapper-bottom .mobile a {
    color: var(--colour-5);
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    #footer .container .wrapper-bottom .desktop a:hover,
    #footer .container .wrapper-bottom .mobile a:hover {
        color: var(--colour-1);
    }

}

#footer .container .wrapper-bottom ul {
    display: flex;
}

#footer .container .wrapper-bottom ul li {
    padding-right: var(--padding-2);
}

#footer .container .wrapper-bottom ul li:last-child {
    padding-right: unset;
}

#footer .container .wrapper-bottom ul li a i {
    font-size: 1.2rem;
    color: var(--colour-1);
    padding: var(--padding-0);
    border-radius: .5rem;
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    #footer .container .wrapper-bottom ul li a i:hover {
        background-color: var(--colour-5);
        color: var(--colour-1);
    }

}


/* /// cookie pop-up /// */

#cookie-pop-up {
    position: fixed;
    bottom: 2rem;
    left: 0;
    right: 0;
    z-index: 2;
}

.cookies.hide {
    opacity: 0;
    visibility: hidden;
    /* transition-property: all;
    transition-duration: .6s; */
}

#cookie-pop-up .container {
    padding: var(--padding-2);
    background-color: var(--colour-0);
    border-radius: .5rem;
    display: grid;
    grid-template-columns: 1fr 3fr 3fr;
    gap: 1rem;
    place-items: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

#cookie-pop-up .container i {
    font-size: 5rem;
    display: inline;
    color: var(--colour-5);
}

#cookie-pop-up .container p {
    display: inline;
}

#cookie-pop-up .container p a {
    text-decoration: underline;
    color: var(--colour-5);
}

#cookie-pop-up .container .button-wrapper {
    display: flex;
}

#cookie-pop-up .container .button-wrapper .consent {
    width: 11rem;
    height: 4rem;
    display: grid;
    place-content: center;
    background-color: var(--colour-5);
    color: var(--colour-0);
    border-radius: .5rem;
    font-weight: 500;
    margin-right: var(--margin-0);
    transition-property: all;
    transition-duration: .6s;
}

@media (hover: hover) {

    #cookie-pop-up .container .button-wrapper .consent:hover {
        background-color: var(--colour-0);
        color: var(--colour-5);
    }

}

#cookie-pop-up .container .button-wrapper .learn-more {
    width: 11rem;
    height: 4rem;
    display: grid;
    place-content: center;
    border: .2rem var(--colour-5) solid;
    color: var(--colour-5);
    border-radius: .5rem;
    font-weight: 500;
    margin-left: var(--margin-0);
    transition-property: all;
    transition-duration: .6s;
}

@media (hover: hover) {

    #cookie-pop-up .container .button-wrapper .learn-more:hover {
        background-color: var(--colour-5);
        color: var(--colour-0);
    }

}





/* /// gallery page /// */

/* /// hero  /// */

#hero-gallery {
    position: relative;
    width: 100%;
    min-height: 35rem;
    background: url('./img/hero-gallery.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#hero-gallery .container {
    z-index: 1;
}

#hero-gallery .container h1,
#hero-gallery .container h5 {
    color: var(--colour-0);
    margin-bottom: var(--margin-1);
}

#hero-gallery .container .special {
    width: 50%;
}

#hero-gallery .overlay {
    position: absolute;
    background-color: var(--colour-4);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .3;
}


/* /// gallery /// */

#gallery {
    padding: var(--padding-5) 0;
}

#gallery .container .wrapper-images {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
}

#gallery .container .wrapper-images .image {
    height: 32rem;
    border-radius: .5rem;
    background-color: var(--colour-4);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

#gallery .container .wrapper-images .image a {
    cursor: pointer;
}

#gallery .container .wrapper-images .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(75%);
    transition-property: all;
    transition-duration: .6s;
}

@media (hover: hover) {

    #gallery .container .wrapper-images .image img:hover {
        filter: brightness(100%)
    }

}





/* /// hero terms & conditions page /// */

/* /// hero  /// */

#hero-terms-conditions {
    position: relative;
    width: 100%;
    min-height: 35rem;
    background: url('./img/hero-terms.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#hero-terms-conditions .container {
    z-index: 1;
}

#hero-terms-conditions .container h1,
#hero-terms-conditions .container h5 {
    color: var(--colour-0);
    margin-bottom: var(--margin-1);
}

#hero-terms-conditions .container .special {
    width: 50%;
}

#hero-terms-conditions .overlay {
    position: absolute;
    background-color: var(--colour-4);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .3;
}


/* /// terms & conditions /// */

#terms-conditions {
    padding: var(--padding-5);
}

#terms-conditions .container {
    padding: 0 var(--padding-10);
}

#terms-conditions .container .accordion-content {
    padding: var(--padding-4);
    background-color: var(--colour-0);
    border-radius: .5rem;
    margin-bottom: var(--margin-2);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

#terms-conditions .container #cookies {
    margin-bottom: unset;
}

#terms-conditions .container .accordion-content .wrapper-heading {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    /* transition-property: all; */
    /* transition-duration: .5s; */
}

#terms-conditions .container .accordion-content .wrapper-heading h4 {
    text-transform: uppercase;
    font-weight: 500;
}

#terms-conditions .container .accordion-content .wrapper-heading i {
    font-size: 1.8rem;
    color: var(--colour-5);
}

#terms-conditions .container .accordion-content .wrapper-text {
    height: 0;
    overflow: hidden;
    transition-property: all;
    transition-duration: .5s;
}

#terms-conditions .container .accordion-content .wrapper-text .special {
    margin-top: var(--margin-2);
}

#terms-conditions .container .accordion-content .wrapper-text .special-cookie {
    margin: var(--margin-2) 0;
}

#terms-conditions .container .accordion-content .wrapper-text h5 {
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-1);
    color: var(--colour-4);
}

#terms-conditions .container .accordion-content .wrapper-text p i {
    font-size: .4rem;
    color: var(--colour-5);
    margin-right: var(--margin-0);
    vertical-align: middle;
    padding-bottom: .15rem;
}

#terms-conditions .container .accordion-content .wrapper-text p a {
    color: var(--colour-4);
    text-decoration: underline;
    transition-property: all;
    transition-duration: .5s;
}

@media (hover: hover) {

    #terms-conditions .container .accordion-content .wrapper-text p a:hover {
        color: var(--colour-5);
    }

}





/* /// media quiries /// */

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


    /* /// navigation /// */

    .navigation-info {
        display: none;
    }

    nav {
        position: fixed;
        top: 0;
        z-index: 3;
        width: 100%;
        background-color: var(--colour-0);
        height: 5rem;
    }

    nav .navigation-desktop {
        display: none;
    }

    nav .navigation-mobile {
        display: block;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    nav .navigation-mobile a img {
        width: 2.6rem;
        margin-left: var(--margin-1);
    }

    nav .navigation-mobile ul li {
        padding-right: unset;
        padding-bottom: var(--padding-0);
    }

    nav .navigation-mobile ul li:last-child {
        padding-bottom: unset;
    }

    .nav-links {
        position: absolute;
        top: 5.1rem;
        min-height: 5rem;
        padding: var(--padding-2);
        background-color: var(--colour-0);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        transform: translateY(-100%);
        z-index: -1;
        transition-property: all;
        transition-duration: 1s;
        box-shadow:
        0px 11.8px 13px -74px rgba(0, 0, 0, 0.11),
        0px 94px 104px -74px rgba(0, 0, 0, 0.22);
    }

    .nav-links li {
        opacity: 0;
        padding: 0;
    }
    
    .burger {
        cursor: pointer;
        margin-right: var(--margin-1);
    }

    .burger div {
        width: 2.5rem;
        height: 4px;
        background-color: var(--colour-4);
        margin-bottom: var(--margin-0);
        transition-property: all;
        transition-duration: .6s;
    }
    
    .burger div:last-child {
        margin-bottom: 0;
    }


    /* /// hero /// */

    #hero {
        margin-top: 5rem;
        min-height: 35rem;
        padding: var(--padding-4) var(--padding-3);
    }

    #hero .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #hero .container h1 {
        font-size: 2.8rem;
    }

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

        #hero .container h1 {
            font-size: 2.2rem;
        }
        
    }

    #hero .container h1,
    #hero .container h5 {
        text-align: center;
    }

    #hero .special {
        width: 100%;
    }

    #hero .container .wrapper {
        display: flex;
        flex-direction: column;
        margin-top: var(--margin-1);
    }

    #hero .container .wrapper .services {
        display: none;
    }

    #hero .container .wrapper .gallery {
        display: grid;
        margin-right: unset;
        margin-bottom: var(--margin-1);
    }

    #hero .container .wrapper .gallery,
    #hero .container .wrapper .contact {
        width: 15rem;
    }

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

        #hero .container .wrapper .gallery,
        #hero .container .wrapper .contact {
            width: 13.8rem;
        }

    }


    /* /// about-banner /// */

    #about-banner {
        display: none;
    }


    /* /// about /// */

    #about {
        padding: var(--padding-5) 0 0 0;
    }

    #about .container {
        display: block;
        margin: 0 var(--margin-1);
    }

    #about .container .wrapper-left .align-wrapper h5,
    #about .container .wrapper-left .align-wrapper h3 {
        text-align: center;
    }

    #about .container .wrapper-left .align-wrapper .desktop {
        display: none;
    }

    #about .container .wrapper-left .align-wrapper .mobile {
        display: block;
    }

    #about .container .wrapper-left .align-wrapper .wrapper {
        grid-template-columns: 1fr;
    }

    #about .container .wrapper-left .align-wrapper .wrapper .about-info {
        margin-right: unset;
    }

    #about .container .wrapper-left .align-wrapper .wrapper .about-info p {
        text-align: center;
    }

    #about .container .wrapper-left .align-wrapper .wrapper .about-info-mini {
        display: none;
    }

    #about .container .wrapper-right {
        display: none;
    }


    /* /// services /// */

    #services {
        padding: var(--padding-5) 0 0 0;
    }

    #services .container {
        margin: 0 var(--margin-1);
    }

    #services .container .desktop {
        display: none;
    }

    #services .container .mobile {
        display: block;
    }

    @media screen and (max-width: 320px) {
        
        #services .container .wrapper {
            grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        }

    }

    #services .container .wrapper .card-a,
    #services .container .wrapper .card-b,
    #services .container .wrapper .card-c,
    #services .container .wrapper .card-d,
    #services .container .wrapper .card-e,
    #services .container .wrapper .card-f {
        padding: var(--padding-3);
        text-align: center;
    }


    /* /// services-plus /// */

    #services-plus {
        padding: var(--padding-5) 0;
    }

    #services-plus .container {
        margin: 0 var(--margin-1);
    }

    #services-plus .container .wrapper-left h5 {
        text-align: center;
    }

    #services-plus .container .wrapper-left h3 {
        text-align: center;
    }

    #services-plus .container .wrapper-right p {
        text-align: center;
    }

    #services-plus .container .wrapper-right .wrapper {
        justify-content: center;
    }

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

        #services-plus .container .wrapper-right .wrapper {
            flex-direction: column;
            align-items: center;
        }

    }


    /* /// why us /// */

    #why-us {
        padding: var(--padding-5) 0 0 0;
    }

    #why-us .container {
        margin: 0 var(--margin-1);
    }

    #why-us .container .wrapper-a .desktop {
        display: none;
    }

    #why-us .container .wrapper-a .mobile {
        display: block;
    }

    #why-us .container .wrapper-b {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        gap: 2rem;
    }

    #why-us .container .wrapper-b .card-a,
    #why-us .container .wrapper-b .card-b,
    #why-us .container .wrapper-b .card-c {
        text-align: center;
    }


    /* /// gallery /// */

    #gallery-home {
        display: none;
    }


    /* /// contact /// */

    #contact {
        padding: var(--padding-5) 0;
        margin: 0 var(--margin-1);
    }

    #contact .container {
        gap: 3rem;
    }

    #contact .container .wrapper-left {
        padding-right: unset;
    }

    #contact .container .wrapper-left .wrapper h5,
    #contact .container .wrapper-left .wrapper h3,
    #contact .container .wrapper-left .wrapper p {
        text-align: center;
    }

    #contact .container .wrapper-left .wrapper .desktop {
        display: none;
    }

    #contact .container .wrapper-left .wrapper .mobile {
        display: block;
    }

    #contact .container .wrapper-left .wrapper .special {
        margin-bottom: var(--margin-3);
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile {
        display: block;
        text-align: center;
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .contact-number,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .email,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .address,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .opening-hours {
        margin-bottom: var(--margin-2);
        padding: var(--padding-3);
        background-color: var(--colour-0);
        border-radius: .5rem;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .opening-hours {
        margin-bottom: unset;
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .contact-number i,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .email i,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .address i,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .opening-hours i {
        display: block;
        font-size: 2rem;
        margin-bottom: var(--margin-1);
        color: var(--colour-5);
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .contact-number a ,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .email a {
        display: inline-block;
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .email .break {
        display: none;
    }

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

        #contact .container .wrapper-left .wrapper .contact-info-mobile .email .full {
            display: none;
        }

        #contact .container .wrapper-left .wrapper .contact-info-mobile .email .break {
            display: block;
        }
        
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .opening-hours p {
        margin-bottom: unset;
    }

    #contact .container .wrapper-right {
        padding: var(--padding-3);
    }

    #contact .container .wrapper-right form {
        grid-template-columns: 1fr;
        grid-template-rows: 3.2rem 3.2rem 3.2rem 3.2rem 10rem 4rem;
    }

    #contact .container .wrapper-right form #name {
        grid-column-end: 2;
    }

    #contact .container .wrapper-right form #number {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 4;
    }

    #contact .container .wrapper-right form #address {
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;
    }

    #contact .container .wrapper-right form #message {
        grid-column-end: 2;
        grid-row-start: 5;
        grid-row-end: 6;
    }

    #contact .container .wrapper-right form #submit {
        grid-column-end: 2;
        grid-row-start: 6;
        grid-row-end: 7;
    }


    /* /// footer /// */

    #footer .container {
        margin: 0 var(--margin-1);
    }

    #footer .container .wrapper-top  {
        gap: 3rem;
    }

    #footer .container .wrapper-top .wrapper-left {
        display: none;
    }

    #footer .container .wrapper-top .wrapper-right {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }

    #footer .container .wrapper-top .wrapper-right .wrapper-b {
        display: none;
    }

    #footer .container .wrapper-top .wrapper-right .wrapper-a ul li:last-child,
    #footer .container .wrapper-top .wrapper-right .wrapper-c ul li:last-child {
        margin-bottom: unset;
    }

    #footer .container .wrapper-top .wrapper-right .wrapper-a ul li p,
    #footer .container .wrapper-top .wrapper-right .wrapper-c ul li p {
        color: var(--colour-3);
    }

    #footer .container .wrapper-top .wrapper-social {
        display: block;
        text-align: center;
    }

    #footer .container .wrapper-top .wrapper-social ul {
        justify-content: center;
    }

    #footer .container .wrapper-bottom  {
        justify-content: center;
    }

    #footer .container .wrapper-bottom .desktop {
        display: none;
    }

    #footer .container .wrapper-bottom .mobile {
        display: block;
        text-align: center;
    }

    #footer .container .wrapper-bottom ul {
        display: none;
    }





    /* /// cookie pop-up /// */

    #cookie-pop-up {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
    }

    #cookie-pop-up .container {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    #cookie-pop-up .container i {
        margin-bottom: var(--margin-1);
    }

    #cookie-pop-up .container p {
        margin-bottom: var(--margin-2);
        text-align: center;
    }

    #cookie-pop-up .container .button-wrapper {
        flex-direction: column;
    }

    #cookie-pop-up .container .button-wrapper .consent {
        margin-bottom: var(--margin-1);
    }

    #cookie-pop-up .container .button-wrapper .learn-more {
        margin-bottom: var(--margin-0);
    }

    #cookie-pop-up .container .button-wrapper .consent,
    #cookie-pop-up .container .button-wrapper .learn-more {
        margin-left: unset;
        margin-right: unset;
        width: 15rem;
    }

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

        #cookie-pop-up .container .button-wrapper .consent,
        #cookie-pop-up .container .button-wrapper .learn-more {
            width: 12rem;
        }
        
    }





    /* /// gallery page /// */

    /* /// hero  /// */

    #hero-gallery {
        margin-top: 5rem;
        padding: var(--padding-4) var(--padding-3);
    }

    #hero-gallery .container h1 {
        font-size: 2.8rem;
    }

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

        #hero-gallery .container h1 {
            font-size: 2.2rem;
        }
        
    }

    #hero-gallery .container h1,
    #hero-gallery .container h5 {
        text-align: center;
    }

    #hero-gallery .container .special {
        width: 100%;
    }


    /* /// gallery /// */

    #gallery .container {
        margin: 0 var(--margin-1);
    }

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

        #gallery .container .wrapper-images {
            grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        }

    }





    /* /// hero terms & conditions page /// */

    /* /// hero  /// */

    #hero-terms-conditions {
        margin-top: 5rem;
        padding: var(--padding-4) var(--padding-3);
    }

    #hero-terms-conditions .container h1 {
        font-size: 2.8rem;
    }

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

        #hero-terms-conditions .container h1 {
            font-size: 2.2rem;
        }
        
    }

    #hero-terms-conditions .container h1,
    #hero-terms-conditions .container h5 {
        text-align: center;
    }

    #hero-terms-conditions .container .special {
        width: 100%;
    }


    /* /// terms & conditions /// */

    #terms-conditions {
        padding: var(--padding-5) 0;
    }

    #terms-conditions .container {
        margin: 0 var(--margin-1);
    }

    #terms-conditions .container .accordion-content {
        padding: var(--padding-3);
    }
    
}





@media (min-width: 501px) and (max-width: 850px) {


    /* /// navigation /// */

    .navigation-info {
        display: none;
    }

    nav {
        z-index: 3;
        height: 5rem;
        background-color: var(--colour-0);
        /* box-shadow:
        0px 11.8px 13px -74px rgba(0, 0, 0, 0.11),
        0px 94px 104px -74px rgba(0, 0, 0, 0.22); */
    }

    nav .navigation-desktop {
        display: none;
    }

    nav .navigation-mobile {
        display: block;
        height: 100%;
        display: flex;
        margin: 0 var(--margin-1);
    }

    nav .navigation-mobile a img {
        width: 2.6rem;
    }

    nav .container ul li a p {
        padding: var(--padding-1);
    }

    nav .navigation-mobile ul li {
        padding-right: unset;
    }

    .burger {
        display: none;
    }


    /* /// hero /// */

    #hero {
        padding: var(--padding-4) var(--padding-3);
    }

    #hero .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #hero .container h1,
    #hero .container h5 {
        text-align: center;
    }

    #hero .special {
        width: 100%;
    }

    @media screen and (min-width: 580px) {

        #hero .special {
            width: 75%;
        }
        
    }

    #hero .container .wrapper .services {
        display: none;
    }

    #hero .container .wrapper .gallery {
        display: grid;
    }


    /* /// about-banner /// */

    #about-banner {
        display: none;
    }


    /* /// about /// */

    #about {
        padding: var(--padding-5) 0 0 0;
    }

    #about .container {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        margin: 0 var(--margin-1);
    }

    #about .container .wrapper-left .align-wrapper h5,
    #about .container .wrapper-left .align-wrapper h3 {
        text-align: center;
    }

    #about .container .wrapper-left .align-wrapper .desktop {
        display: none;
    }

    #about .container .wrapper-left .align-wrapper .mobile {
        display: block;
    }

    #about .container .wrapper-left .align-wrapper .wrapper {
        grid-template-columns: 1fr;
    }

    #about .container .wrapper-left .align-wrapper .wrapper .about-info {
        margin-right: unset;
    }

    #about .container .wrapper-left .align-wrapper .wrapper .about-info p {
        text-align: center;
    }

    #about .container .wrapper-left .align-wrapper .wrapper .about-info-mini {
        display: none;
    }


    /* /// services /// */

    #services {
        padding: var(--padding-5) 0 0 0;
    }

    #services .container {
        margin: 0 var(--margin-1);
    }

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

        #services .container .desktop {
            display: none;
        }
    
        #services .container .mobile {
            display: block;
        }
        
    }

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

        #services .container .wrapper {
            grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
        }
        
    }

    #services .container .wrapper .card-a,
    #services .container .wrapper .card-b,
    #services .container .wrapper .card-c,
    #services .container .wrapper .card-d,
    #services .container .wrapper .card-e,
    #services .container .wrapper .card-f {
        text-align: center;
    }


    /* /// services-plus /// */

    #services-plus {
        padding: var(--padding-5) 0;
    }

    #services-plus .container {
        margin: 0 var(--margin-1);
    }

    #services-plus .container {
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    }

    #services-plus .container .wrapper-left h5 {
        text-align: center;
    }

    #services-plus .container .wrapper-left h3 {
        text-align: center;
    }

    #services-plus .container .wrapper-right p {
        text-align: center;
    }

    #services-plus .container .wrapper-right .wrapper {
        justify-content: center;
    }


    /* /// why us /// */

    #why-us {
        padding: var(--padding-5) 0 0 0;
    }

    #why-us .container {
        margin: 0 var(--margin-1);
    }

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

        #why-us .container .wrapper-a .desktop {
            display: none;
        }
    
        #why-us .container .wrapper-a .mobile {
            display: block;
        }

    }

    #why-us .container .wrapper-b {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
        gap: 2rem;
    }

    #why-us .container .wrapper-b .card-a,
    #why-us .container .wrapper-b .card-b,
    #why-us .container .wrapper-b .card-c {
        padding: var(--padding-4);
        text-align: center;
    }


    /* /// gallery /// */

    #gallery-home {
        padding: var(--padding-5) 0 0 0;
        margin: 0 var(--margin-1);
    }

    @media screen and (min-width: 800px) {

        #gallery-home .container {
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        }
        
    }

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

        #gallery-home .container .image-2,
        #gallery-home .container .image-3,
        #gallery-home .container .image-4 {
            display: none;
        }
        
    }


    /* /// contact /// */

    #contact {
        padding: var(--padding-5) 0;
        margin: 0 var(--margin-1);
    }

    #contact .container {
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
        gap: 3rem;
    }

    #contact .container .wrapper-left {
        padding-right: unset;
    }

    #contact .container .wrapper-left .wrapper h5,
    #contact .container .wrapper-left .wrapper h3,
    #contact .container .wrapper-left .wrapper p {
        text-align: center;
    }

    #contact .container .wrapper-left .wrapper .desktop {
        display: none;
    }

    #contact .container .wrapper-left .wrapper .mobile {
        display: block;
    }

    #contact .container .wrapper-left .wrapper .special {
        margin-bottom: var(--margin-3);
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile {
        display: block;
        text-align: center;
    }

    @media (min-width: 650px) and (max-width: 800px) {

        #contact .container .wrapper-left .wrapper .contact-info-mobile {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
            gap: 2rem;
        } 
        
    }

    @media (min-width: 801px) and (max-width: 850px) {

        #contact .container .wrapper-left .wrapper .contact-info-mobile {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
            gap: 2rem;
        } 
        
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .contact-number,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .email,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .address,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .opening-hours {
        margin-bottom: var(--margin-2);
        padding: var(--padding-4);
        background-color: var(--colour-0);
        border-radius: .5rem;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    }

    @media screen and (min-width: 650px) {

        #contact .container .wrapper-left .wrapper .contact-info-mobile .contact-number,
        #contact .container .wrapper-left .wrapper .contact-info-mobile .email,
        #contact .container .wrapper-left .wrapper .contact-info-mobile .address,
        #contact .container .wrapper-left .wrapper .contact-info-mobile .opening-hours {
            margin-bottom: unset;
        }
        
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .opening-hours {
        margin-bottom: unset;
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .contact-number i,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .email i,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .address i,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .opening-hours i {
        display: block;
        font-size: 2rem;
        margin-bottom: var(--margin-1);
        color: var(--colour-5);
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .contact-number a ,
    #contact .container .wrapper-left .wrapper .contact-info-mobile .email a {
        display: inline-block;
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .email .full {
        display: block;
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .email .break {
        display: none;
    }

    @media (min-width: 650px) and (max-width: 715px) {

        #contact .container .wrapper-left .wrapper .contact-info-mobile .email .full {
            display: none;
        }

        #contact .container .wrapper-left .wrapper .contact-info-mobile .email .break {
            display: block;
        }
        
    }

    #contact .container .wrapper-left .wrapper .contact-info-mobile .opening-hours p {
        margin-bottom: unset;
    }


    /* /// footer /// */

    #footer .container {
        margin: 0 var(--margin-1);
    }

    #footer .container .wrapper-top  {
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
        gap: 4rem;
    }

    #footer .container .wrapper-top .wrapper-left {
        display: none;
    }

    #footer .container .wrapper-top .wrapper-right {
        justify-content: space-evenly;
        text-align: center;
    }

    #footer .container .wrapper-top .wrapper-right .wrapper-b {
        display: none;
    }

    #footer .container .wrapper-top .wrapper-right .wrapper-a ul li:last-child,
    #footer .container .wrapper-top .wrapper-right .wrapper-c ul li:last-child {
        margin-bottom: unset;
    }

    #footer .container .wrapper-top .wrapper-right .wrapper-a ul li p,
    #footer .container .wrapper-top .wrapper-right .wrapper-c ul li p {
        color: var(--colour-3);
    }

    #footer .container .wrapper-top .wrapper-social {
        display: block;
        text-align: center;
    }

    #footer .container .wrapper-top .wrapper-social h6 {
        display: none;
    }

    #footer .container .wrapper-top .wrapper-social ul {
        justify-content: center;
    }

    #footer .container .wrapper-bottom  {
        justify-content: center;
    }

    #footer .container .wrapper-bottom .desktop {
        display: none;
    }

    #footer .container .wrapper-bottom .mobile {
        display: block;
        text-align: center;
    }

    #footer .container .wrapper-bottom ul {
        display: none;
    }





    /* /// cookie pop-up /// */

    #cookie-pop-up {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
    }

    #cookie-pop-up .container {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    @media screen and (min-width: 800px) {

        #cookie-pop-up .container {
            display: grid;
            grid-template-columns: 2fr 3fr 3fr;
        }

    }

    #cookie-pop-up .container i {
        margin-bottom: var(--margin-1);
    }

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

        #cookie-pop-up .container p {
            margin-bottom: var(--margin-2);
            text-align: center;
        }

    }

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

        #cookie-pop-up .container .button-wrapper {
            flex-direction: column;
        }

    }

    @media screen and (min-width: 800px) {

        #cookie-pop-up .container .button-wrapper {
            display: flex;
            flex-direction: column;
        }

    }

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

        #cookie-pop-up .container .button-wrapper .consent {
            margin-bottom: var(--margin-1);
        }

    }

    @media screen and (min-width: 800px) {

        #cookie-pop-up .container .button-wrapper .consent {
            margin-right: unset;
            margin-bottom: var(--margin-0);
        }

    }

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

        #cookie-pop-up .container .button-wrapper .learn-more {
            margin-bottom: var(--margin-0);
        }

    }

    @media screen and (min-width: 800px) {

        #cookie-pop-up .container .button-wrapper .learn-more {
            margin-left: unset;
        }
        
    }

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

        #cookie-pop-up .container .button-wrapper .consent,
        #cookie-pop-up .container .button-wrapper .learn-more {
            margin-left: unset;
            margin-right: unset;
            width: 15rem;
        }
        
    }





    /* /// gallery page /// */

    /* /// hero  /// */

    #hero-gallery {
        padding: var(--padding-4) var(--padding-3);
    }

    #hero-gallery .container h1,
    #hero-gallery .container h5 {
        text-align: center;
    }

    #hero-gallery .container .special {
        width: 100%;
    }

    @media screen and (min-width: 580px) {

        #hero-gallery .container .special {
            width: 75%;
            margin: 0 auto;
        }
        
    }
    

    /* /// gallery /// */

    #gallery .container {
        margin: 0 var(--margin-1);
    }

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

        #gallery .container .wrapper-images {
            grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
        }

    }





    /* /// hero terms & conditions page /// */

    /* /// hero  /// */

    #hero-terms-conditions {
        padding: var(--padding-4) var(--padding-3);
    }

    #hero-terms-conditions .container h1,
    #hero-terms-conditions .container h5 {
        text-align: center;
    }

    #hero-terms-conditions .container .special {
        width: 100%;
    }

    @media screen and (min-width: 580px) {

        #hero-terms-conditions .container .special {
            width: 75%;
            margin: 0 auto;
        }
        
    }


    /* /// terms & conditions /// */

    #terms-conditions {
        padding: var(--padding-5) 0;
    }

    #terms-conditions .container {
        margin: 0 var(--margin-1);
    }

}





@media (min-width: 851px) and (max-width: 1000px) {


    /* /// navigation /// */

    .navigation-info {
        display: none;
    }

    nav {
        z-index: 3;
        height: 5rem;
        background-color: var(--colour-0);
        box-shadow:
        rgba(17, 17, 26, 0.05) 0px 4px 16px,
        rgba(17, 17, 26, 0.05) 0px 8px 32px;
    }

    nav .navigation-desktop {
        display: none;
    }

    nav .navigation-mobile {
        display: block;
        height: 100%;
        display: flex;
        margin: 0 var(--margin-2);
    }

    nav .navigation-mobile a img {
        width: 2.6rem;
    }

    nav .container ul li a p {
        padding: var(--padding-1);
    }

    nav .navigation-mobile ul li {
        padding-right: unset;
    }

    .burger {
        display: none;
    }


    /* /// hero /// */

    #hero {
        padding: var(--padding-4) var(--padding-3);
    }

    #hero .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #hero .container h1,
    #hero .container h5 {
        text-align: center;
    }

    #hero .special {
        width: 75%;
    }

    #hero .container .wrapper .services {
        display: none;
    }

    #hero .container .wrapper .gallery {
        display: grid;
    }


    /* /// about-banner /// */

    #about-banner {
        display: none;
    }


    /* /// about /// */

    #about {
        padding: var(--padding-5) 0 0 0;
    }

    #about .container {
        margin: 0 var(--margin-2);
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    #about .container .wrapper-left .align-wrapper .desktop {
        display: none;
    }

    #about .container .wrapper-left .align-wrapper .mobile {
        display: block;
    }

    #about .container .wrapper-left .align-wrapper .wrapper {
        grid-template-columns: 1fr;
    }

    #about .container .wrapper-left .align-wrapper .wrapper .about-info {
        margin-right: unset;
    }

    #about .container .wrapper-left .align-wrapper .wrapper .about-info-mini {
        display: none;
    }


    /* /// services /// */

    #services {
        padding: var(--padding-5) 0 0 0;
    }

    #services .container {
        margin: 0 var(--margin-2);
    }


    /* /// services-plus /// */

    #services-plus {
        padding: var(--padding-5) 0;
    }

    #services-plus .container {
        margin: 0 var(--margin-2);
    }


    /* /// why us /// */

    #why-us {
        padding: var(--padding-5) 0 0 0;
    }

    #why-us .container {
        margin: 0 var(--margin-2);
    }


    /* /// gallery /// */

    #gallery-home {
        padding: var(--padding-5) 0 0 0;
        margin: 0 var(--margin-2);
    }

    #gallery-home .container {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }


    /* /// contact /// */

    #contact {
        padding: var(--padding-5) 0;
        margin: 0 var(--margin-2);
    }

    #contact .container .wrapper-left {
        padding-right: unset;
    }

    #contact .container .wrapper-left .wrapper .desktop {
        display: none;
    }

    #contact .container .wrapper-left .wrapper .mobile {
        display: block;
    }


    /* /// footer /// */

    #footer .container {
        margin: 0 var(--margin-2);
    }





    /* /// cookie pop-up /// */

    #cookie-pop-up {
        bottom: 2rem;
        left: 2rem;
        right: 2rem;
    }

    #cookie-pop-up .container {
        grid-template-columns: 2fr 3fr 3fr;
        gap: unset;
    }

    #cookie-pop-up .container .button-wrapper {
        display: flex;
        flex-direction: column;
    }

    #cookie-pop-up .container .button-wrapper .consent {
        margin-right: unset;
        margin-bottom: var(--margin-0);
    }

    #cookie-pop-up .container .button-wrapper .learn-more {
        margin-left: unset;
    }





    /* /// gallery page /// */

    /* /// hero  /// */

    #hero-gallery {
        padding: var(--padding-4) var(--padding-3);
    }

    #hero-gallery .container h1,
    #hero-gallery .container h5 {
        text-align: center;
    }

    #hero-gallery .container .special {
        width: 75%;
        margin: 0 auto;
    }


    /* /// gallery /// */

    #gallery .container {
        margin: 0 var(--margin-2);
    }





    /* /// hero terms & conditions page /// */

    /* /// hero  /// */

    #hero-terms-conditions {
        padding: var(--padding-4) var(--padding-3);
    }

    #hero-terms-conditions .container h1,
    #hero-terms-conditions .container h5 {
        text-align: center;
    }

    #hero-terms-conditions .container .special {
        width: 75%;
        margin: 0 auto;
    }


    /* /// terms & conditions /// */

    #terms-conditions {
        padding: var(--padding-5) 0;
    }

    #terms-conditions .container {
        margin: 0 var(--margin-2);
    }
    
}





@media (min-width: 1001px) and (max-width: 1300px) {


    /* /// navigation /// */

    .navigation-info .container {
        margin: 0 var(--margin-2);
    }

    nav .container {
        margin: 0 var(--margin-2);
    }


    /* /// hero /// */

    #hero {
        padding: var(--padding-4) var(--padding-3);
    }

    #hero .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #hero .container h1,
    #hero .container h5 {
        text-align: center;
    }

    #hero .special {
        width: 75%;
    }


    /* /// about-banner /// */

    #about-banner .container {
        margin: 0 var(--margin-2);
    }

    #about-banner .container .wrapper-left {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        gap: 2rem;
    }


    /* /// about /// */

    #about {
        padding: var(--padding-5) 0 0 0;
    }

    #about .container {
        margin: 0 var(--margin-2);
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    #about .container .wrapper-left .align-wrapper .desktop {
        display: none;
    }

    #about .container .wrapper-left .align-wrapper .mobile {
        display: block;
    }

    #about .container .wrapper-left .align-wrapper .wrapper {
        grid-template-columns: 1fr;
    }

    #about .container .wrapper-left .align-wrapper .wrapper .about-info {
        margin-right: unset;
    }

    #about .container .wrapper-left .align-wrapper .wrapper .about-info-mini {
        display: none;
    }


    /* /// services /// */

    #services {
        padding: var(--padding-5) 0 0 0;
    }

    #services .container {
        margin: 0 var(--margin-2);
    }

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

        #services .container .wrapper {
            grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
        }

    }


    /* /// services-plus /// */

    #services-plus {
        padding: var(--padding-5) 0;
    }

    #services-plus .container {
        margin: 0 var(--margin-2);
    }


    /* /// why us /// */

    #why-us {
        padding: var(--padding-5) 0 0 0;
    }

    #why-us .container {
        margin: 0 var(--margin-2);
    }


    /* /// gallery /// */

    #gallery-home {
        padding: var(--padding-5) 0 0 0;
        margin: 0 var(--margin-2);
    }

    #gallery-home .container {
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    }


    /* /// contact /// */

    #contact {
        padding: var(--padding-5) 0;
        margin: 0 var(--margin-2);
    }

    #contact .container .wrapper-left {
        padding-right: unset;
    }

    #contact .container .wrapper-left .wrapper .desktop {
        display: none;
    }

    #contact .container .wrapper-left .wrapper .mobile {
        display: block;
    }


    /* /// footer /// */

    #footer .container {
        margin: 0 var(--margin-2);
    }





    /* /// cookie pop-up /// */

    #cookie-pop-up {
        bottom: 2rem;
        left: 2rem;
        right: 2rem;
    }





    /* /// gallery page /// */

    /* /// hero  /// */

    #hero-gallery {
        padding: var(--padding-4) var(--padding-3);
    }

    #hero-gallery .container h1,
    #hero-gallery .container h5 {
        text-align: center;
    }

    #hero-gallery .container .special {
        width: 75%;
        margin: 0 auto;
    }


    /* /// gallery /// */

    #gallery .container {
        margin: 0 var(--margin-2);
    }





    /* /// hero terms & conditions page /// */

    /* /// hero  /// */

    #hero-terms-conditions {
        padding: var(--padding-4) var(--padding-3);
    }

    #hero-terms-conditions .container h1,
    #hero-terms-conditions .container h5 {
        text-align: center;
    }

    #hero-terms-conditions .container .special {
        width: 75%;
        margin: 0 auto;
    }


    /* /// terms & conditions /// */

    #terms-conditions {
        padding: var(--padding-5) 0;
    }

    #terms-conditions .container {
        margin: 0 var(--margin-2);
    }
    

}






/* /// navigation animation /// */

.nav-active {
    transform: translatex(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toggle .line-1 {
    transform: rotate(-45deg) translate(-.5rem, .5rem);
}

.toggle .line-2 {
    opacity: 0;
}

.toggle .line-3 {
    transform: rotate(45deg) translate(-.5rem, -.5rem);
}