/* 

#F8D3A9

#12263A

#dfdfdf

box-shadow: 0 5px 10px rgba(0,0,0,0.1);
*/


:root {
    --color--primary: #12263A;
    --color--secondary: #F8D3A9;

    --shadow: 0 5px 10px rgba(0,0,0,0.1);
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
}

body {
   font-family: sans-serif;

   font-weight: 400;
   font-size: 1.8rem;
   line-height: 1.5;
}

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

.container {
    max-width: 120rem;
    margin: 0 auto;
    padding: 1.5rem;

}

.heading-primary {
    font-size: 4.5rem;
}

.heading-secondary {
    font-size: 2rem;
}

.md-defaut {
    padding: 0 2rem;
}

.mg-b--sr {
    margin-bottom: 1rem;
}

.mg-b--s {
    margin-bottom: 2rem;
}


.mg-b--m {
    margin-bottom: 4rem;
}

.mg-b--l {
    margin-bottom: 8.6rem;
}

.mg-b--lx {
    margin-bottom: 12rem;
}

.btn-aside {
    color: #000;
    font-size: 1.8rem;
    text-decoration: none;
    border: 1px solid #BFBFBF;
    padding: 1rem 2rem;
}


/* sticky navigation  */ 
/* important */



.sticky .head-stick {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #fff;
  z-index: 9;

  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.06);

}

/* .sticky .cover {
  margin-top: 8.6rem;
} */






/* ---------------------------------- */
/*              Nav bar            */
/* ---------------------------------- */
header {
    /* background-color: #F8D3A9; */
}

.fixed {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 8rem;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #fff;
    z-index: 9;

    box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.06);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 8rem;

    
    
}

.hero__content {
    align-self: center;
}

.header__logo {
    text-decoration: none;
    font-weight: bold;

    z-index: 5;
}

.main-nav__lists {
    list-style: none;
    text-decoration: none;

    display: flex;


}

.main-nav__lists li:not(:last-child) {
    margin-right: 3.5rem;
    
}



.main-nav__link:link,
.main-nav__link:visited {
    text-decoration: none;
    color: var(--color--primary);
    font-size: 1.8rem;
    
}








/* ************************************* */
/* ************************************* */
/* ---------------------------------- */
/*     Hamburger Menu  for Js          */
/* ---------------------------------- */

/* Hamburger Menu */

.btn-mobile-nav {
    display: flex;

    align-items: center;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    position: relative;
    cursor: pointer;

    z-index: 10;

    display: none;
}

/* .hamburger {
    width: 40px;
    height: 4px;
    background-color: #eee;
    border-radius: 5px;
    transition: all 0.3s;
} */

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 2.5px;
    background-color: var(--color--primary);
    border-radius: 5px;
    transition: all 0.2s cubic-bezier(.14,.45,0,.95);
    
}

.hamburger::before {
    transform: translateY(-5.5px);
}

.hamburger::after {
    transform: translateY(5.5px);
}

/* javascript part */
/* nav-open */

.nav-open .hamburger::before {
    transform: rotate(45deg);
}

.nav-open .hamburger::after {
    transform: rotate(-45deg);
}

/* ---------------------------------- */
/*           Cover Section            */
/* ---------------------------------- */

/* cover */
.cover__img {
    min-height: 80rem;
    height: auto;
    width: 100%;
    object-fit: cover;
    object-position: 60% 50%;

    display: block;
    margin-top: 8rem;
}



.cover__headline {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
}

.cover__text {
    position: absolute;
    color: #fff;
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
}




/* ---------------------------------- */
/*            Hero Section            */
/* ---------------------------------- */



.section-hero {
    background-color: #F8D3A9;

    padding: 5rem 0;
}


.hero__group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
}



.hero__wrapper {
    width: 100%;
    justify-self: flex-end;
}




/* ********************************** */
/* ---------------------------------- */
/*       Best wedding location        */
/* ---------------------------------- */
/* ********************************** */

.location__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
}

.location__img {
    width: 100%;
    height: auto;
}

.location__aside {
    display: flex;
    justify-content: center;
}

.location__link {
    color: #000;
    font-size: 1.8rem;
    text-decoration: none;
    border: 1px solid #BFBFBF;
    padding: 1rem 2rem;
}


    /* ///////////////////////// */
    /* 1. Parliament house */

    .parliament__wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.3rem;
    }

    .parliament__img {
        width: 100%;
        height: auto;
    }

    .parliament__aside {
        display: flex;
        justify-content: center;
    }


    /* ||||||||||||||||||||||||| */
    /* Gorden reserve */

    .location__gorden-container {
        background-color: #FDF2E5;

        padding: 5rem 0;
    }

    .location__gorden {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        gap: 2rem;
    }

    .gorden__img {
        width: 100%;
        height: auto;


    }



    /* ||||||||||||||||||||||||| */
    /* ACCA */

    .location__acca__container {
        background-color: #FDF2E5;

        padding: 5rem 0;
    }


    .acca__content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        gap: 2rem;
    }

    .acca__img {
        width: 100%;
        height: auto;

    }


    /* ///////////////////////// */
    /* 2. Fitzroy Gardens */



    .fitzroy__wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.3rem;
    }

    .fitzroy__img {
        width: 100%;
        height: auto;
    }

    .fitzroy__aside {
        display: flex;
        justify-content: center;
    }


    /* ||||||||||||||||||||||||| */
    /* Wisor Hotel */

    .location__wisor-container {
        background-color: #FDF2E5;

        padding: 5rem 0;
    }

    .location__wisor--contain {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        gap: 2rem;
    }

    .wisor__img {
        width: 100%;
        height: auto;
    }



    /* ///////////////////////// */
    /* 3. Barrack Meseum */


    .barrack__wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.3rem;
    }

    .barrack__img {
        width: 100%;
        height: auto;
    }

    .barrack__aside {
        display: flex;
        justify-content: center;
    }


    /* ||||||||||||||||||||||||| */
    /* Black Rock */

    .location__blackrock__container {
        background-color: #FDF2E5;

        padding: 5rem 0;
    }

    .location__blackrock {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        gap: 2rem;
        
    }

    .blackrock__img {
        width: 100%;
        height: auto;
    }






    /* ///////////////////////// */
    /* 4. Royal Exhibiton building*/

    .ex-building__wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.3rem;

    }

    .ex-building__img {
        width: 100%;
        height: auto;
    }

    .ex-building__aside {
        display: flex;
        justify-content: center;
    }

    /* ||||||||||||||||||||||||| */
    /* South Bank */

    .south-bank__container {
        background-color: #FDF2E5;

        padding: 5rem 0;
    }

    .south-bank {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        gap: 2rem;
    }

    .south-bank__img {
        width: 100%;
        height: auto;
    }














/* ---------------------------------- */
/*           Feature section          */
/* ---------------------------------- */
.section-feature {
    
}

.feature__1,
.feature__2,
.feature__3 {
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);

    
    max-width: 30rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    
}


.feature__heading {
    text-align: center;
}

.feature__group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}

.feature__1 {
    justify-self: flex-end;
}


.feature__2 {
    justify-self: center;
}


.feature__wrapper {
    width: 100%;


    overflow: hidden;
}

.feature__img {
    
    transition: all 0.4s;

}

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

.feature__link {
    display: inline-block;
    padding-top: 2rem;
    padding-bottom: 2rem;

    
}


/* ---------------------------------- */
/*           Service section          */
/* ---------------------------------- */

.section-service {
    background-color: var(--color--primary);
    background-color: var(--color--secondary);

    /* margin-bottom: 12rem; */
}

.service__heading {
    text-align: center;
    color: #595959;
    padding: 3rem 0;
}



.service__content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;

}

.service__info {
    margin-bottom: 6rem;
}

.service__info--heading {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #595959;
}

.service__info--content {
    font-size: 1.6rem;
    line-height: 1.5;
    color: #595959;
}


/* ---------------------------------- */
/*     Best wedding photographer      */
/* ---------------------------------- */

.section-photographer {
    background-color: #F2F2F2;
}

.photographer__group {
    display: grid;

    
    grid-template-columns: repeat(2, 1fr);
    align-items: center;

    
}

.photographer__heading {
    margin-bottom: 2rem;
}

.photographer__para {
    font-size: 1.6rem;
    line-height: 1.5;

    margin-bottom: 4rem;

}

.photographer__lists {
    list-style: none;

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 2rem;
}


/* .photographer__lists li:not(:last-child) {
    margin-bottom: 1.3rem;
} */

.photographer__link {
    text-decoration: none;
    font-size: 1.6rem;
    color: #595959;
}

.photographer__img {
    width: 100%;


    
}


/* ---------------------------------- */
/*           cover image  2            */
/* ---------------------------------- */



.cover__img--2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}



/* ---------------------------------- */
/*              Price                 */
/* ---------------------------------- */

.section-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.price {
    background-color: #FDF2E5;
    
    padding: 3rem 5rem;
    margin-bottom: 3rem;
    
}

.price_table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.price__heading {
    font-size: 3rem;
}

.price__para {
    margin-bottom: 2.5rem;
}

.price__price {

    font-size: 3rem;
    margin-bottom: 2rem;
}

.price__lists {
    list-style: none;
}

.price__lists :not(:last-child) {
    margin-bottom: 2rem;
}


/* ---------------------------------- */
/*             About me               */
/* ---------------------------------- */

.section__about {
    background-color: #175676;
}

.about {
    padding-top: 4rem;
}

.about__heading {
    font-size: 1.8rem;
    color: #F2F2F2;
    margin-bottom: 3rem;
}

.about__group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}



.about__para {
    font-size: 1.6rem;
    color: #F5F5F5;
}

.about__img {
    
    width: 120px;
}


/* ---------------------------------- */
/*           Testimonial              */
/* ---------------------------------- */

.testimonial__heading {
    text-align: center;
    margin-bottom: 8rem;
    color: var(--color--primary);
}

.testimonial__group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;

    color: var(--color--primary);
}

.testimonial__persona {
    display: flex;
    flex-direction: column;

    background-color: #f3f5fa;
    

    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

.testimonial__img {

    width: 12rem;

    margin-bottom: 2rem;
    margin-top: 7rem;

    align-self: center;
    
}
.testimonial__name {
    align-self: center;
    margin-bottom: 2rem;
}

.testimonial__quote {
    padding: 0 2rem;
    margin-bottom: 5rem;
    font-size: 1.6rem;
    line-height: 1.6;
}


/* ---------------------------------- */
/*           Test Gallery             */
/* ---------------------------------- */

.section-gallery {
    background-color: #12263A;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
}

.gallery-img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery__aside {
    display: flex;
    justify-content: center;
}

.gallery__aside--link {

    color: #fff;
    font-size: 1.8rem;
    text-decoration: none;
    border: 1px solid #BFBFBF;
    padding: 1rem 2rem;
}




/* ************************************* */
/* ************************************* */
/* ---------------------------------- */
/*     Main nav trail         */
/* ---------------------------------- */
/* ************************************* */
/* ************************************* */

/* .main-nav {
    position: relative;
} */
/* body {
    position: relative;
} */




    /* .main-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--color--secondary);
    position: absolute;

    width: 100vw;
    height: 75vh;
    left: 0;
    top: 0;
    z-index: 1;

    transform: translateY(-100%);
    transition: all 0.25s cubic-bezier(.14,.45,0,.95);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    

}

.main-nav__lists {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.nav-open .main-nav {
    transform: translateY(0);
    
    visibility: visible;
    opacity: 1;
    pointer-events: auto;

}  */


/* backdrop */

.backdrop {
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
}

.nav-open.backdrop {
    display: block;
} 


/* ---------------------------------- */
/*          CAll to Action            */
/* ---------------------------------- */

.cta__heading {
    margin-bottom: 4rem;
}

.section-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: #12263A;
    color: #fff;

    padding: 4rem 0;
}

.cta__phone,
.cta__email {
    color: #fff;
    text-decoration: none;
    display: block;
}

.cta__phone {
    margin-bottom: 1.5rem;
}


/* ---------------------------------- */
/*          Return top            */
/* ---------------------------------- */

.return-top {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 5rem 0;
}

.return-top__link {
    text-decoration: none;
    color: #000;
}