:root{
  /* Custom colours */
  --clr-light: #ffffff;
  --clr-dark: #000000;
  --clr-accent-10: #EB691F;
  --clr-accent-20: #F8F7F3;

  /* Custom font */
  --ff-main: "Inter", sans-serif;

  /* Custom font weights */
  --fw-reg: 400;
  --fw-bold: 700;

  /* Custom font sizes */

  --fs-mainheading: 4rem;
  --fs-subheading: 2.5rem;
  --fs-heading: 2.25rem;
  --fs-para: 1rem;


}

/* CSS Reset - Used Andy Bells */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin-block-end: 0;
margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}

/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}

/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
margin: 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
  scroll-behavior: auto;
}

*,
*::before,
*::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
}

/* End of CSS Reset */

/* Utility Classes */

body {
  font-family: var(--ff-main);
}

a{
  text-decoration: none;
  color: var(--clr-dark);
}

.main-head{
  font-size: var(--fs-mainheading);
  font-weight: var(--fw-bold);
  line-height: 70px;
}

.sub-head{
  font-size: var(--fs-subheading);
  font-weight: var(--fw-bold);
}

.heading{
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
}

.para-main{
  font-size: var(--fs-para);
  font-weight: var(--fw-reg);
}

.para-bold{
  font-size: var(--fs-para);
  font-weight: var(--fw-bold);
}

.bg-accent-10{
  background-color: var(--clr-accent-10);
}

.bg-accent-20{
  background-color: var(--clr-accent-20);
}

.fc-accent-20{
  color:var(--clr-accent-20);
}

.fc-accent-10{
  color:var(--clr-accent-10);
}

.btn{
  background-color: var(--clr-accent-10);
  border: none;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--clr-light);
  border-radius: 0.5rem;
  box-shadow: 0px 4px 4px #00000040;
}

.btn:hover{
  box-shadow: 0px 1px 4px #00000040;;
}

.highlight{
  color: var(--clr-accent-10);
  font-weight: var(--fw-bold);
}


/****************/
/* Main Styling */
/****************/

/* header */



header{
  --animationStartsAfter: 100px;
  --animationDistanceLength: 200px;
  --logoDisplay: block;

  /* position: sticky;
  z-index: 1000;
  top: -20rem; */
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 1300px;
  margin: 0 auto;
  /* Will get this working later */
  /* @supports (animation-timeline: view()){
    backdrop-filter: blur(0.15rem);
    animation: headerScroll linear forwards;
    animation-timeline: view();
    animation-range-start: calc(100vh + var(--animationStartsAfter));
    animation-range-end: calc(100vh + var(--animationStartsAfter) + var(--animationDistanceLength));
  } */

  ul{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    list-style: none;
    padding: 0px;
    li{
      padding:0px;
    }
  }
}

@keyframes headerScroll {
  0%, 100%{
    --logoDisplay: none;
    width: fit-content;
  }
  100%{
    background-color: #F8F7F350;
    top: 1rem;
    border-radius: 100vw;
    box-shadow: 0rem 0.5rem 0.75rem hsl(0 0% 0% / 0.3);
  }
  
}


.nav-links:hover{
  text-decoration: underline;
  color: var(--clr-accent-10);
}

.logo img{
  width: 300px;
}

.logo{
  display: var(--logoDisplay);
}

#navToggle{
  margin-top: 2rem;
  border: none;
  background: none;
  font-size: 0;
}

#navList{
  display: none;
}

@media(min-width: 750px){
  header{
    flex-direction: row;
    justify-content: space-evenly;
    ul{
      gap: 0.5rem;
      flex-direction: row;
      li{
        float:left;
        margin-right: 2rem;
      }
    }
  }

  #navList{
    display: flex;
  }

  #navToggle{
    display:none;
  }
}

/* sale box */

.sale{
  display: none;
  img{
    max-width: 500px;
  };
}

/* Main Section */

main{
  padding: 0.5rem;
  display: grid;
  gap: 1rem;
  max-width: 1300px;
  margin: 2rem auto;
}

.main-packages{
  padding: 0.5rem;
  display: grid;
  gap: 1rem;
  max-width: 1300px;
  margin: 2rem 0.5rem;
  background-image: url("images/jason-leung-Xaanw0s0pMk-unsplash.jpg");
  background-size: cover;
}



.left-column-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.left-column-main{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.right-column-main{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  img{
    border-radius: 1rem;
    /* animation: y-axis-animation 1s ease-in-out infinite; */
  }
}

@keyframes y-axis-animation {
  from {transform: rotateY(0deg)}
  to {transform: rotateY(90deg)}
}


@media(min-width: 750px){
  main{
    grid-template-columns: 1fr 1fr;
  }

  .main-packages{
    margin: 2rem auto;
  }

  .left-column-wrapper{
    padding: 5rem;
  }

  /* .right-column-main{
    padding: 5rem;
  } */
}

@media(min-width: 1200px){
  .right-column-main{
    padding: 5rem;
  }
}

/* animation for Main */

#main-head-anim-1{
  opacity: 0;
  animation: head-anim linear forwards;
  animation-duration: 2s;
}

#main-head-anim-2{
  opacity: 0;
  animation: head-anim linear forwards;
  animation-delay: 1s;
  animation-duration: 2s;
}

#main-head-anim-3{
  opacity: 0;
  animation: head-anim ease-in-out forwards;
  animation-delay: 2s;
  animation-duration: 2s;
}

@keyframes head-anim {
  0%{
    opacity: 0;
    transform: scale(95%);
  }
  100%{
    opacity: 1;
    transform: scale(100%);
  }
}

/* about section */

.about{
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  h2{
    text-align: center;
  }
}

.desktop-about-heading{
  display: none;
}

.oval-image{
  border-radius: 250px;
  overflow: hidden;
  img{
    width:300px;
  }
}

.about-text{
  padding: 0rem 2rem;
}

@media(min-width: 700px){
  .about{
    flex-direction: row;
  }
  .desktop-about-heading{
    display: block;
  }
  .mobile-about-heading{
    display: none;
  }

  .oval-image{
    img{
      width:auto;
    }
  }
  

  .about-text{
    padding: 2rem;
  }
}

/* animation for about */

#about{
  opacity: 0;
}

.animate-about{
  animation: about-anim 2s ease-in-out forwards;
}

@keyframes about-anim {
  from{
    opacity: 0;
  }to{
    opacity: 1;
  }
  
}




/* Portfolio Section */

.portfolio-section{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  justify-items: center;
  max-width: 1000px;
  margin: 4rem auto 0rem auto;
}

.portfolio-card{
  max-width: 330px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  img{
    width: 330px;
    height: 370px;
  }
  a{
    font-weight: var(--fw-bold);
  }
  a:hover{
    text-decoration: underline;
  }
}

.portfolio-title{
  text-align: center;
  margin-top: 4rem;
}

@media(min-width: 750px){
  .portfolio-section{
    grid-template-columns: 1fr 1fr;
  }
}

/* Article section */

article{
  margin: 4rem auto 0 auto;
}

.article-wrapper{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.article-title{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  img{
    width:300px;
  }
}

.article-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.article-card{
  max-width: 330px;
  background-color: var(--clr-accent-10);
  color: var(--clr-accent-20);
  border-radius: 16px;
  padding: 2.5rem 3rem;
  display:flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  box-shadow: 32px 32px 64px #00000040;
  img{
    width: 100px;
  }
  h3{
    text-align: center;
  }
}

@media(min-width: 750px){
  article{
    padding: 5rem 0rem;
  }
  .article-wrapper{
    grid-template-columns: 0.9fr 1.1fr;
  }

  .article-text{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4rem;
  }

  .article-title{
    img{
      width:auto;
    }
  }
}


/* Packages and Pricing Section */

.packages{
  margin-top: 2rem;
  padding: 0.5rem;
  display: grid;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.packages-title{
  text-align: center;
}

.pricing{
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.pricing-card{
  max-width: 470px;
  min-height: 750px;
  background-color: var(--clr-accent-20);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.price-heading{
  background-color: var(--clr-accent-10);
  border-radius: 180px;
  text-align: center;
  padding: 1rem;
  color: var(--clr-accent-20);
}

.package-list{
  list-style-image: url("images/checked.png");
}

.no-tick{
  list-style: none;
}


.addon-card{
  max-width: 470px;
  margin: 0 auto;
  background-color: var(--clr-accent-20);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  ul{
    list-style: none;
    li{
      margin-top: 1rem;
    }
    p{
      font-size: 0.8rem;
      font-weight: var(--fw-reg);
    }
  }
}


/* animation for article section */

.article-left-anim{
  animation: articleLeftAnimate ease-in-out 3s forwards;
}

@keyframes articleLeftAnimate {
  from{
    opacity: 0;
    transform: translateX(-100px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}

.article-right-anim{
  animation: articleRightAnimate ease-in-out 2s forwards;
}

@keyframes articleRightAnimate {
  from{
    opacity: 0;
    transform: translateX(100px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}



/* Contact Section */
.contact-section{
  margin-top: 5rem;
  padding: 2rem;
}

.contact-form{
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
}

.form-input-wrapper{
  display:flex;
  flex-wrap:wrap;
  gap: 2rem;
}

/* footer section */

footer{
  margin-top: 4rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.socials{
  img{
    display: inline;
    margin-right: 2rem;
    width: 64px
  }
}

.secondary-navigation{
  ul{
    list-style: none;
    padding:0px;
    li{
      float:left;
      margin-right: 1rem;
    }
  }
}

@media(min-width: 750px){
  footer{
    flex-direction: row;
    gap: auto;
    justify-content: space-evenly;
  }
  
}


/* Package Enquiry Page Style */


.form-package-input-wrapper{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}


.form-input{
  border: none;
  border-radius: 8px;
  height: 40px;
  width: 340px;
  padding: 1rem;
}

.form-radio{
  border: none;
  height: 32px;
  width: 32px;
  vertical-align: middle;
}

.form-input:active{
  border: 3px solid var(--clr-accent-10);
}

.form-input-section{
  border: none;
}

.form-message-section{
  margin-top: 2rem;
}

.form-input-message{
  border: none;
  border-radius: 8px;
  height: 200px;
  width: 100%;
  padding: 1rem;
}


/* Packages info overlay */

.pricing-card-packageEnquiry{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 470px;
  max-height: 750px;
  background-color: var(--clr-accent-20);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 3px solid var(--clr-accent-10);
}

.info-btn{
  background: none;
  border: none;
}

.info-btn:hover{
  font-weight: var(--fw-bold);
}


#subPriceCard, #otpPriceCard, #addonCard{
  display:none;
}




.addon-card-enquiry{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 470px;
  max-height: 550px;
  background-color: var(--clr-accent-20);
  border: 3px solid var(--clr-accent-10);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  ul{
    list-style: none;
    li{
      margin-top: 1rem;
    }
    p{
      font-size: 0.8rem;
      font-weight: var(--fw-reg);
    }
  }
}