/*-----------------------------------------------------------------------------------------general styling----------------------------*/
:root {
  font-size: 14px;
  margin: 0px;
  padding: 0px;
  --cl-darkgreen: #2d3e02;
  --cl-green: #677a34;
  --cl-lightgreen: #677a34;

  --cl-darkpink: #7f576f;
  --cl-pink: #c497b1;
  --cl-lightpink: #c497b1;

  --cl-white: #fcffe0;
  --cl-black: #121310;

  --ff-decorative: "DM Serif Display", serif;
  --ff-plain: "Roboto", sans-serif;;
  overflow-x: hidden;
  background-color: var(--cl-white);
}

a{
  text-decoration: none;
}

*{
  box-sizing: border-box;
}

button{
  all: unset;
}

.dark-mode {
  background-color: var(--cl-black);
  color: var(--cl-white);
}


/*----------------------------------------------------------------------------------------------------------------grid----------------*/
.row{ /*class to display everything next to eachother*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.column{ /*class to display everything under eachother*/
  display: flex;
  flex-direction: column;
}

/*----------------------------------------------------------------------------------------------------alignment-----------------------*/

.push-left { /* Pushes everything to the left*/
  margin-right: auto;
}

.push-right { /* Pushes everything to the right*/
  margin-left: auto;
}
  
.push-center { /* Pushes everything to the centre*/
  margin-left: auto;
  margin-right: auto;
  display: block; /* This will work for block-level elements */
}

.middlehero{/*this is to get the hero content centred*/
  transform: translate(0%, 15%);
}

/*-------------------------------------------------------------------------------------------margin and padding and spacing-----------------------*/

.m-t-1{margin-top: 1rem;}
.m-t-2 {margin-top: 2rem;}
.m-t-7 {margin-top: 7rem;}

.m-b-7 {margin-bottom: 7rem;}
.m-b-1 {margin-bottom: 1rem;}
.pad-medium{padding: 1rem;}

.section-space {
  min-height: 80vh;
}

.hero-space {
  min-height: 100vh;
}
/* ---------------------------------------------------------------------------- colour----------------------------------------------*/

/*colour*/
.cl-darkgreen {color: var(--cl-darkgreen)}
.cl-green {color: var(--cl-green)}
.cl-lightgreen {color: var(--cl-lightgreen)}


.cl-darkpink {color: var(--cl-darkpink)}
.cl-pink {color: var(--cl-pink)}
.cl-lightpink {color: var(--cl-lightpink)}

.cl-white {color: var(--cl-white)}
.cl-black {color: var(--cl-black)}


/*darkmode plain colour*/
.primaryColour {
  color: var(--cl-darkgreen); 
}

/*lightmode plain colour*/
.dark-mode .primaryColour {
  color: var(--cl-lightgreen); 
} 

/*darkmode plain colour*/
.secondaryColour {
  color: var(--cl-darkpink); 
}

/*lightmode plain colour*/
.dark-mode .secondaryColour {
  color: var(--cl-lightpink); 
}


/* ---------------------------------------------------------------------------- Buttons---------------------------------------------*/

.BtnInline{ /*padding for buttons/links inline with text*/
  padding: 0.1rem 0.6rem;
  cursor: pointer;
}

.Btn { /*padding for buttons in general*/
  padding: 1.07rem 1.78rem;
  cursor: pointer;
}

/*----------------------------------------------------------------text button colour*/

/*---------------primary button text colour*/

/*lightmode*/
.primaryBtnColour {
  color: var(--cl-darkgreen);
}
.primaryBtnColour:hover {
  color: var(--cl-darkgreen);
}
.primaryBtnColour:active {
  color: var(--cl-white);
}

/*darkmode*/
.dark-mode .primaryBtnColour {
  color: var(--cl-lightgreen);
} 
.dark-mode .primaryBtnColour:hover {
  color: var(--cl-lightgreen);
} 
.dark-mode .primaryBtnColour:active {
  color: var(--cl-black);
} 

/*---------------secondary button text colour*/
/*lightmode*/
.secondaryBtnColour {
  color: var(--cl-darkpink);
}
.secondaryBtnColour:hover {
  color: var(--cl-darkpink);
}
.secondaryBtnColour:active {
  color: var(--cl-white);
}

/*darkmode*/
.dark-mode .secondaryBtnColour {
  color: var(--cl-lightpink);
} 
.dark-mode .secondaryBtnColour:hover {
  color: var(--cl-lightpink);
} 
.dark-mode .secondaryBtnColour:active {
  color: var(--cl-black);
} 

/*----------------------------------------------------------------border button colour*/

/*---------------primary button border colour*/

/*lightmode*/
.primaryBtn{
  border: 0.0rem solid  var(--cl-darkgreen);
  border-radius: 2.1rem;
  background-color: var(--cl-white);
  box-shadow:0.12rem 0.22rem  var(--cl-darkgreen);
}
.primaryBtn:hover{
  box-shadow: 0rem 0rem  var(--cl-darkgreen);
  transform: translateY(0.22rem) translateX(0.12rem);
}
.primaryBtn:active{
  border: 0.0rem solid  var(--cl-darkgreen);
  background-color:  var(--cl-darkgreen);
}

/*darkmode*/
  
.dark-mode .primaryBtn {
  border: 0.0rem solid  var(--cl-lightgreen);
  border-radius: 2.1rem;
  background-color: var(--cl-black);
  box-shadow:0.12rem 0.22rem  var(--cl-lightgreen);
}
.dark-mode .primaryBtn:hover{
  box-shadow: 0rem 0rem  var(--cl-lightgreen);
  transform: translateY(0.22rem) translateX(0.12rem);
}
.dark-mode .primaryBtn:active {
  border: 0.0rem solid  var(--cl-lightgreen);
  background-color:  var(--cl-lightgreen);
}


/*lightmode*/
.primaryBtnBorder{
  border: 0.115rem solid  var(--cl-darkgreen);
  border-radius: 2.1rem;
  background-color: var(--cl-white);
  box-shadow:0.12rem 0.22rem  var(--cl-darkgreen);
}
.primaryBtnBorder:hover{
  box-shadow: 0rem 0rem  var(--cl-darkgreen);
  transform: translateY(0.22rem) translateX(0.12rem);
}
.primaryBtnBorder:active{
  border: 0.115rem solid  var(--cl-darkgreen);
  background-color:  var(--cl-darkgreen);
}

/*darkmode*/
.dark-mode .primaryBtnBorder {
  border: 0.115rem solid  var(--cl-lightgreen);
  border-radius: 2.1rem;
  background-color: var(--cl-black);
  box-shadow:0.12rem 0.22rem  var(--cl-lightgreen);
}
.dark-mode .primaryBtnBorder:hover{
  box-shadow: 0rem 0rem  var(--cl-lightgreen);
  transform: translateY(0.22rem) translateX(0.12rem);
}
.dark-mode .primaryBorder:active {
  border: 0.115rem solid  var(--cl-lightgreen);
  background-color:  var(--cl-lightgreen);
}
/*---------------secondary button border colour*/
/*light mode*/
.secondaryBtn{
  border: 0.00rem solid  var(--cl-darkpink);
  border-radius: 2.1rem;
  background-color: var(--cl-white);
  box-shadow:0.12rem 0.22rem  var(--cl-darkpink);
}
.secondaryBtn:hover{
  box-shadow: 0rem 0rem  var(--cl-darkpink);
  transform: translateY(0.22rem) translateX(0.12rem);
}
.secondaryBtn:active{
  border: 0.00rem solid  var(--cl-darkpink);
  background-color:  var(--cl-darkpink);
}

/*darkmode*/
.dark-mode .secondaryBtn {
  border: 0.00rem solid  var(--cl-lightpink);
  border-radius: 2.1rem;
  background-color: var(--cl-black);
  box-shadow:0.12rem 0.22rem  var(--cl-lightpink);
}
.dark-mode .secondaryBtn:hover{
  box-shadow: 0rem 0rem  var(--cl-lightpink);
  transform: translateY(0.22rem) translateX(0.12rem);
}
.dark-mode .secondaryBtn:active {
  border: 0.00rem solid  var(--cl-lightpink);
  background-color:  var(--cl-lightpink);
}


/*light mode*/
.secondaryBtnBorder{
  border: 0.115rem solid  var(--cl-darkpink);
  border-radius: 2.1rem;
  background-color: var(--cl-white);
  box-shadow:0.12rem 0.22rem  var(--cl-darkpink);
}
.secondaryBtnBorder:hover{
  box-shadow: 0rem 0rem  var(--cl-darkpink);
  transform: translateY(0.22rem) translateX(0.12rem);
}
.secondaryBtnBorder:active{
  border: 0.115rem solid  var(--cl-darkpink);
  background-color:  var(--cl-darkpink);
}

/*darkmode*/
.dark-mode .secondaryBtnBorder {
  border: 0.115rem solid  var(--cl-lightpink);
  border-radius: 2.1rem;
  background-color: var(--cl-black);
  box-shadow:0.12rem 0.22rem  var(--cl-lightpink);
}
.dark-mode .secondaryBtnBorder:hover{
  box-shadow: 0rem 0rem  var(--cl-lightpink);
  transform: translateY(0.22rem) translateX(0.12rem);
}
.dark-mode .secondaryBtnBorder:active {
  border: 0.115rem solid  var(--cl-lightpink);
  background-color:  var(--cl-lightpink);
}

/*----------------------------------------------------------------miscellanous button*/
/*lightmode*/
.pressed{ /*this is just so the button looks active when in a particlar segement of nav*/
  border: 0.115rem solid  var(--cl-darkgreen);
  border-radius: 2.1rem;
  background-color: var(--cl-darkgreen);
  box-shadow: 0rem 0rem  var(--cl-darkgreen);
  transform: translateY(0.22rem) translateX(0.12rem);
}
/*darkmode*/
.dark-mode .pressed{
  border: 0.115rem solid  var(--cl-lightgreen);
  border-radius: 2.1rem;
  background-color: var(--cl-lightgreen);
  box-shadow: 0rem 0rem  var(--cl-lightgreen);
  transform: translateY(0.22rem) translateX(0.12rem);
}

/* ----------------------------------------------------------------------------images---------------------------------------------*/
.image-width-large{
  max-width: 32rem;
  min-width: 25rem;
  height: auto;
}

.image-width-medium{
  max-width: 28rem;
  min-width: 24rem;
  height: auto;
}

.image-width-small{
  max-width: 8rem;
  min-width: 5rem;
}

.portfolio-border { /*--rounds the border--*/
  border-radius: 1rem;
}

.portfolio-image { /*--acts like a mask so the change in width does not distort the image--*/
  width: 100%;
  height: 40rem;
  object-fit: cover;
}

.highlighted-work { /*--acts like a mask so the change in width does not distort the image--*/
  width: 85%;
  height: 30rem;
  object-fit: cover;
}

.right-plant{
  position: absolute;
  right: -6rem;
  bottom:  -8rem;
  transform: rotate(-20deg);
}
 
.left-plant{
  position: absolute;
  left: -6rem;
  bottom: -8rem;
  

}

.width{
  max-width: 20rem;
}

/*-------------------------------------------Highlighted Work----------------------------*/
.siren-song-background{
  background-image: url('../assets/siren_song/background-image.png');
  background-size: cover; /* Ensures the image covers the element */
  background-position: center; /* Centers the image */
  width: 100vw; /* Full width of the viewport */
  height: auto; /* Automatically adjusts the height */
}

.finalist{
  z-index: 50;
  width: 11rem;
  position: absolute;
  right: 5rem;
  bottom: 5rem;
}

/*sirensong button*/
.sirenSongBtnColour {
color: #E0AF83;
}
.sirenSongBtnColour:hover {
color:  #E0AF83;
}
.sirenSongBtnColour:active {
color: #232D37;
}

.sirenSongBtn{
border: 0.00rem solid  #E0AF83;
border-radius: 2.1rem;
background-color: #232D37;
box-shadow:0.12rem 0.22rem  #E0AF83;
}
.sirenSongBtn:hover{
box-shadow: 0rem 0rem  #E0AF83;
transform: translateY(0.22rem) translateX(0.12rem);
}
.sirenSongBtn:active{
border: 0.00rem solid  #E0AF83;
background-color:  #E0AF83;
}


/*-----------------------------------------------------------------Navigation Menu--------------------------------------------------*/
/*--------------------Nav Bar---------------------------------*/

.fixed-bottom-right{ /*--moves the button down to the right--*/
  position: fixed;
  bottom: 1.2rem;
  right: 1rem;
  z-index: 10; /*--i know 10 is crazy its just so its always on top so no matter how many index i use it stays that way--*/
}

.fixed-top-right{ /*--moves the button down to the right--*/
  position: fixed;
  top: 1.2rem;
  right: 1rem;
  z-index: 10; /*--i know 10 is crazy its just so its always on top so no matter how many index i use it stays that way--*/
}

.Btn-nav { /*--because the button is empty it needs specific padding to ensure its round and visible--*/
  padding: 0.714rem;
  position: relative;
  cursor: pointer;
}

/*--------------------foooter---------------------------------*/
/*--makes te social buttons round--*/
.round{
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex; 
  justify-content: center; 
  align-items: center;
}

/*--size of icons--*/
.icon-size{
  font-size: 3rem;
}

/*--positions bottom left--*/
.left-bottom{
  position: absolute;
  left: -2rem;
  bottom: -15rem;
}

/*--positions bottom right--*/
.right-bottom{
  position: absolute;
  right: -2rem;
  bottom: -15rem;
}

/*-----------------------------------------------------------------cards--------------------------------------------------*/
.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

/*--timing of transitions--*/
.transition-timing{
  transition: transform 0.7s ease;
}

/*--container for the card--*/
.card-container {
  position: relative;
  width: 14.3rem;
  height: 21.428rem;
}

/*--establsihes card size--*/
.card{
  width: 14.3rem;
  height: 21.428rem;
}

/*--top card - creates the default and hover rotation and translation--*/
.top-card {
  z-index: 3;
  transform: rotate(4deg); 
}

.card-container:hover .top-card {
  transform: rotate(15deg); /* Increased rotation on hover */
}

/*--bottom - creates the default and hover rotation and translation--*/
.bottom-card {
  z-index: 1; /* Below images and red card */
  transform: rotate(-2deg) translate(0.1rem); /* Default slight rotation to the left */
}

.card-container:hover .bottom-card {
  transform: rotate(-10deg) translate(-3rem, -1rem); /* Increased rotation on hover */
}

/*----------------------------------------------------------------------card decorations--*/
/*--making the card decor start behind the top card--*/
.card-decor{
  z-index: 2; 
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%); 
}

/*--moving to the left--*/
.flower-decor-portfolio {
  max-width: 5rem;
  height: auto;
  transform: rotate(90deg);
}

.card-container:hover .flower-decor-portfolio {
  transform: rotate(3deg) translate(-16rem, 1rem); /*--left down--*/
}

/*--moving to the right and upwards--*/
.leaf-1-portfolio {
  max-width: 3rem;
  height: auto;
  transform: rotate(90deg);
}

.card-container:hover .leaf-1-portfolio {
  transform: translate(5rem, -15rem); /*--right up--*/
}

/*--moving to the right and downward--*/
.leaf-2-portfolio {
  max-width: 2.5rem;
  height: auto;
  transform: rotate(90deg);
}

.card-container:hover .leaf-2-portfolio {
  transform: translate(7rem, 2rem); /*--right down--*/
}

/*----------------------------------------------------------------------catagory text--*/

/*--makes the text go behind the cards--*/
.category-text {
  z-index: 0; 
  transform: translate(0rem, 0rem);
}

/*--moves the text so its bellow the card--*/
.card-container:hover .category-text {
  transform: translate(-1rem, 23rem); 
}

/*--this makes the background images appear in the default state--*/
.Btn-image {
  position: absolute;
}

/*--this makes the background images disapear in the hover state (making the text visible)--*/
.Btn-image:hover {
  background-image: none;
}

/*--this makes the cards text in the frame be invisible in default state--*/
.image-text {
  opacity: 0%;
}

/*--this makes the cards text in the frame be visible in hover state--*/
.Btn-image:hover .image-text {
  opacity: 100%;
}

.Btn-image:active .image-text {
  opacity: 100%;
}

/*----------------------------------------------------------------------the background images for the differnt cards--*/
.colgate{
  background-image: url('../assets/fairytales-do-come-true/colgate-card-top.jpg');
  background-size: 30rem;
  background-position: -7rem;
}

.colgate2{
  background-image: url('../assets/fairytales-do-come-true/colgate-card-bottom.jpg');
  background-size: 30rem;
  background-position: -3rem;
}

.twoChefs{
  background-image: url('../assets/ui-ux/ui.png');
  background-size: 30rem;
  background-position: -7rem;
}

.twoChefs2{
  background-image: url('../assets/ui-ux/ux.jpg');
  background-size: 30rem;
  background-position: -10rem;
}

.icarus{
  background-image: url('../assets/the-icarus/icarus.png');
  background-size: 38rem;
  background-position: -7rem;
}

.icarus2{
  background-image: url('../assets/the-icarus/stand-front.png');
  background-size: 38rem;
  background-position: -15rem;
}



.standardBeauty{
  background-image: url('../assets/standard-beauty/standardBeauty-card-top.jpg');
  background-size: 25rem;
  background-position: -5rem;
}

.standardBeauty2{
  background-image: url('../assets/standard-beauty/frame-of-people-coming-together-tiktok.jpg');
  background-size: 30rem;
  background-position: -10rem;
}

.africology{
  background-image: url('../assets/africology/product-page-africology.png');
  background-size: 32rem;
  background-position: -15rem;
}

.africology2{
  background-image: url('../assets/africology/home-page-africology.png');
  background-size: 32rem;
  background-position: -7rem;
}


/*------------------------------------------------------------------------------------------------------------------ Desktop */
@media only screen and (min-width: 62rem){
  /* Moves downward */
  .container{ /* creates white space boarder */
    padding-left: 10rem;
    padding-right: 10rem;
  }

  /* grid */
  .col-12{width: 100%;}
  .col-9{width: 75%;}
  .col-8{width: 66%;}
  .col-7{width: 33.333%;}
  .col-6{width: 50%;}
  .col-5{width: 41,66666666596667%;}
  .col-4{width: 33.333%;}
  .col-3{width: 24,99999999966667%;}
  .col-2{width: 16,66666666666667%;}
  .col-1{width: 8.33333333333333%;}  

  /* margins and padding */
  .left-content-padding{ 
    padding-left: 4rem;
    padding-right: 2rem;
  }

  .right-content-padding{
    padding-right: 4rem;
    padding-left: 2rem;
  }

  /* typography */
  .headline{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 4.5rem;
    text-decoration: none;
    text-align: center;
  }
  .heading{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    text-decoration: none;
    text-align: center;
  }
  .subheading{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    text-align: center;
  }
  .body-text{
    font-size: 1rem;
    font-family: var(--ff-plain);
    font-weight: 700;
    line-height: 1.7rem;
    font-style: normal;
    text-align: left;
    text-decoration: none;
  }
  .button-text {
    font-size: 1rem;
    font-family: var(--ff-plain);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
  }


  /* nav */
  .parent{ /*the parent when hovered over activate two hover states so that when the button is hover the text also activates*/
    width: 12.857rem;
    margin: 1.785rem;
  }
  
  .parent .child, /*--makes text not visible--*/
  .child {
    opacity: 0;
    cursor: pointer;
  }
  
  .parent:hover .child, /*--makes text visible--*/
  .child:hover {
    opacity: 100%;
  }
  
  .parent:active .child, 
  .child:active {
    opacity: 100%;
  }

  /* footer */
  .plant{/*--controls the size and ensure that it can overflow (without damaging the viewport) of the background plant--*/
    overflow: hidden;
    width: 40vw;
    max-width: 30rem;
    min-width: 16rem;
    height: auto;
  }















  .card-grid {
    flex: 1 1 calc(33.333% - 3.05rem);
    padding: 3.3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .portfolio-title-spacing{
    margin-top: 6rem;
  }

  .project-page-top-spacing{
    margin-top: 4rem;
  }

  .giff{
    max-width: 33rem;
    min-width: 21rem;
    height: auto;
  }

  .dialogue-width{
    max-width: 28rem;
    min-width: 24rem;
    height: auto;
  }

  .siren-song-title{
    z-index: 50;
    position: relative;
    width: 25rem;
    bottom: -6rem;
    left: 5rem;
  }

  .siren-song-button{
    z-index: 50;
    position: relative;
    bottom: -6rem;
    left: 5rem;
  
  }

  .margin-below-responsive{
    margin-bottom: 0rem;
  }
  
}


/*------------------------------------------------------------------------------------------------------------------ Tablet */
@media only screen and (min-width: 48rem) and (max-width: 62rem){
  /* general */
  .container{ /* creates white space boarder */
    padding-left: 5rem;
    padding-right: 5rem;
  }

  /* grid */
  .col-12, .col-9, .col-8 { width: 100%; } /* adjusts the grid automatically for allowing for simple grid system*/
  .col-7 { width: 87.5%; }
  .col-6 { width: 75%; }
  .col-5 { width: 62.5%; }
  .col-4 { width: 50%; }
  .col-3 { width: 37.5%; }
  .col-2 { width: 25%; }
  .col-1 { width: 12.5%; }

  /* margins and padding */
  .left-content-padding{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .right-content-padding{
    padding-right: 2rem;
    padding-left: 2rem;
  }

  

  /* typography */
  .headline{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 4.5rem;
    text-decoration: none;
    text-align: center;
    line-height: -10rem;
  }
  .heading{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    text-decoration: none;
    text-align: center;
  }
  .subheading{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    text-align: center;
  }
  .body-text{
    font-size: 1rem;
    font-family: var(--ff-plain);
    font-weight: 700;
    line-height: 1.7rem;
    font-style: normal;
    text-align: left;
    text-decoration: none;
  }
  .button-text {
    font-size: 1rem;
    font-family: var(--ff-plain);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* nav */
  .parent{ /*the parent when hovered over activate two hover states so that when the button is hover the text also activates*/
    width: 12.857rem;
    margin: 1.785rem;
  }
  
  .parent .child, /*--makes text not visible--*/
  .child {
    opacity: 100;
    cursor: pointer;
  }
  
  .parent:hover .child, /*--makes text visible--*/
  .child:hover {
    opacity: 100%;
  }
  
  .parent:active .child, 
  .child:active {
    opacity: 100%;
  }

   /* footer */
   .plant{/*--controls the size and ensure that it can overflow (without damaging the viewport) of the background plant--*/
    overflow: hidden;
    width: 40vw;
    max-width: 30rem;
    min-width: 17rem;
    height: auto;
  }














  .card-grid {
    flex: 1 1 calc(50% - 3.05rem); 
    padding: 3.3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .portfolio-title-spacing{
    margin-top: 6rem;
  }

  .project-page-top-spacing{
    margin-top: 6rem;
  }

  .giff{
    max-width: 33rem;
    min-width: 21rem;
    height: auto;
  }

  .dialogue-width{
    max-width: 28rem;
    min-width: 24rem;
    height: auto;
  }

  .siren-song-title{
    z-index: 50;
    position: relative;
    width: 25rem;
    bottom: -6rem;
    left: 4rem;
  }
  .siren-song-button{
    z-index: 50;
    position: relative;
    bottom: -6rem;
    left: 4rem;
  
  }


  .margin-below-responsive{
    margin-bottom: 25rem;
  }
}


/*------------------------------------------------------------------------------------------------------------------ Mobile */
@media only screen and (min-width: 26rem) and (max-width: 48rem) {
 
  /* general */
  .container{ /*is decreasing the grid space since its mobile so less space needed on the sides*/
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* grid */
  .col-12, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4 { width: 100%; } /* adjusts the grid automatically for allowing for simple grid system*/
  .col-3 { width: 75%; }
  .col-2 { width: 50%; }
  .col-1 { width: 25%; }

  /* margins and padding */
  .left-content-padding{
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .right-content-padding{
    padding-right: 3rem;
    padding-left: 3rem;
  }

  /* typography */
  .headline{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 3.9rem;
    text-decoration: none;
    text-align: center;
    line-height: -10rem;
  }
  .heading{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 1.857142857142857rem;
    text-decoration: none;
    text-align: center;
  }
  .subheading{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 1.357142857142857rem;
    text-align: center;
    text-decoration: none;
    text-align: center;
  }
  .body-text{
    font-size: 0.9rem;
    font-family: var(--ff-plain);
    font-weight: 700;
    line-height: 1.7rem;
    font-style: normal;
    text-align: left;
    text-decoration: none;
  }
  .button-text {
    font-size: 0.8571428571428571 rem;
    font-family: var(--ff-plain);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
  }


  /* nav */
  .parent{ /*the parent when hovered over activate two hover states so that when the button is hover the text also activates*/
    width: 12.857rem;
    margin: 1.785rem;
  }
    
  .parent .child, /*--makes text not visible--*/
  .child {
    opacity: 100;
    cursor: pointer;
  }
    
  .parent:hover .child, /*--makes text visible--*/
  .child:hover {
    opacity: 100%;
  }
    
  .parent:active .child, 
  .child:active {
    opacity: 100%;
  }


  /* footer */
  .plant{/*--controls the size and ensure that it can overflow (without damaging the viewport) of the background plant--*/
    overflow: hidden;
    width: 40vw;
    max-width: 25rem;
    min-width: 10rem;
    height: auto;
  }











  .card-grid {
    flex: 100%; 
    padding: 3.3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .portfolio-title-spacing{
    margin-top: 10rem;
  }

  .project-page-top-spacing{
    margin-top: 7rem;
  }

  .giff{
    max-width: 27rem;
    min-width: 21rem;
    height: auto;
  }

  .dialogue-width{
    max-width: 23rem;
    min-width: 22rem;
    height: auto;
  }

  .siren-song-title{
    z-index: 30;
    position: relative;
    width: 20rem;
    bottom: -6rem;
    left: 3rem;
  }
  .siren-song-button{
    z-index: 50;
    position: relative;
    bottom: -6rem;
    left: 3rem;
  
  }

  .siren-song-button{
    z-index: 50;
    position: relative;
    bottom: -6rem;
    left: 3rem;
  
  }

  .margin-below-responsive{
    margin-bottom: 35rem;
  }
}


/* smaller mobile */
@media only screen and (max-width: 26rem) {

  

  .centralizaing{
    left: 0rem;  
    right: 0rem;
  }

  .image-width-large{
    max-width: 22rem;
    min-width: 15rem;
    height: auto;
  }
  
  .image-width-medium{
    max-width: 18rem;
    min-width: 14rem;
    height: auto;
  }

 /* general */
 .container{ /*is decreasing the grid space since its mobile so less space needed on the sides*/
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  }

  /* grid */
  .col-12, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4 { width: 100%; } /* adjusts the grid automatically for allowing for simple grid system*/
  .col-3 { width: 75%; }
  .col-2 { width: 50%; }
  .col-1 { width: 25%; }

  /* margins and padding */
  .left-content-padding{
    padding-left: 0rem;
    padding-right: 0rem;
  }

  .right-content-padding{
    padding-right: 0rem;
    padding-left: 0rem;
  }

  /* typography */
  .headline{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    text-decoration: none;
    text-align: center;
    line-height: -10rem;
  }
  .heading{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 1.857142857142857rem;
    text-decoration: none;
    text-align: center;
  }
  .subheading{
    font-family: var(--ff-decorative);
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 1.357142857142857rem;
    text-align: center;
    text-decoration: none;
    text-align: center;
  }
  .body-text{
    font-size: 0.9rem;
    font-family: var(--ff-plain);
    font-weight: 700;
    line-height: 1.7rem;
    font-style: normal;
    text-align: left;
    text-decoration: none;
  }
  .button-text {
    font-size: 0.8571428571428571 rem;
    font-family: var(--ff-plain);
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
  }


  


  /* footer */
  .plant{/*--controls the size and ensure that it can overflow (without damaging the viewport) of the background plant--*/
    overflow: hidden;
    max-width: 15rem;
    height: auto;
    
  }











  .card-grid {
    flex: 100%; 
    padding: 3.3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .portfolio-title-spacing{
    margin-top: 10rem;
  }

  .project-page-top-spacing{
    margin-top: 7rem;
  }















  /* ----------------------------------------------------------------------------images---------------------------------------------*/
  



  .image-width-small{
    max-width: 8rem;
    min-width: 5rem;
  }

  .portfolio-border { /*--rounds the border--*/
    border-radius: 5rem;
  }

  .portfolio-image { /*--acts like a mask so the change in width does not distort the image--*/
    width: 100%;
    height: 40rem;
    object-fit: cover;
  }

  .right-plant{
    position: absolute;
    right: 1rem;
    bottom: 0rem;
    
    transform: rotate(-20deg);
  }
  
  .left-plant{
    position: absolute;
    left: 1rem;
    bottom: 0rem;
  
    
  }


  .width{
    max-width: 20rem;
  }

  /*-----------------------------------------------------------------Navigation Menu--------------------------------------------------*/
  /*--------------------Nav Bar---------------------------------*/
 



  /*--------------------foooter---------------------------------*/

  /*--makes te social buttons round--*/
  .round{
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex; 
    justify-content: center; 
    align-items: center;
  }

  /*--size of icons--*/
  .icon-size{
    font-size: 2rem;
  }

  /*--positions bottom left--*/
  .left-bottom{
    position: absolute;
    left: 0rem;
    bottom: -15rem;
  }

  /*--positions bottom right--*/
  .right-bottom{
    position: absolute;
    right: 0rem;
    bottom: -15rem;
  }




  /*-----------------------------------------------------------------cards--------------------------------------------------*/

  .absolute{
    position: absolute;
  }

  .relative{
    position: relative;
  }

  /*--timing of transitions--*/
  .transition-timing{
    transition: transform 0.7s ease;
  }

  /*--container for the card--*/
  .card-container {
    position: relative;
    width: 14.3rem;
    height: 21.428rem;
  }

  /*--establsihes card size--*/
  .card{
    width: 14.3rem;
    height: 21.428rem;
  }

 





  /*----------------------------------------------------------------------catagory text--*/

  .right-plant{
    position: absolute;
    right: -4rem;
    bottom: 0rem;
    overflow: hidden;
    transform: rotate(-20deg);
  }
  
  .left-plant{
    position: relative;
    left: -4rem;
    bottom: 0rem;
    overflow: hidden;
  }


  .margin-below-responsive{
    margin-bottom: 30rem;
  }

}



/*------------------------------------------------------------------------------------------------------------------ plugin styles */

.scrollupBtn{
  background: none;
}

.colourmodeBtn{
  background: none;
}

.exit-button {
  position: absolute;
  top: 0.714rem;
  right: 0.714rem;
  font-size: 4rem;
  font-weight: 900;
  background-color: transparent;
  border: none;
  cursor: pointer;
}


.on-top{
  z-index: 1000;
}

.on-bottom{
  z-index: 0;
}

.seotitle{
  opacity: 0;
  font-size: 0rem;
}

/* Media Queries */
@media screen and (min-width: 992px){
  .hamburger-menu{
    display: none;
    margin-left: 1rem;
  }

  .nav-transition{
    display: block!important;
    overflow-y: hidden;
  }
}

.align-text-centre{
  text-align: center;
}

.centralizaing{
  left: 1.7rem;  
  right: 1rem;
}

/*-----------------------------------------------------------------------------------------carousel----------------------------*/

.slide-container {
  max-width: 100rem;
  padding-left: 5rem;
  padding-right: 5rem;
  height: 45rem;
  
}

.swiper-navBtn {
  color: #425A00;
  transition: color 0.3s ease;
}

.swiper-navBtn:hover {
  color: #425A00;
}

.swiper-navBtn::before,
.swiper-navBtn::after {
  font-size: 35px;
}

.swiper-button-next {
  right: 0;
}

.swiper-button-prev {
  left: 0;
}

.swiper-pagination-bullet {
  background-color: #425A00;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #425A00;
}

@media screen and (max-width: 768px) {
  .slide-content {
    margin: 0 10px;
    
  }

  .swiper-navBtn {
    display: none;
  }
}


/*----------------------------------------------------------------------------------------form----------------------------*/
.field {
  margin-bottom: 10px;
}

.field label {
  display: block;
}

.field input {
  display: block;
  min-width: 250px;
  line-height: 1.5;
  font-size: 14px;
}

input[type="submit"] {
  display: block;
}




/*lightmode*/
.nav-bar-logo-image {
  background-image: url('../assets/branding/dps.svg');
  width: 4rem;
  background-size: cover;
  background-position: center;
}

/*darkmode*/
.dark-mode .nav-bar-logo-image {
  background-image: url('../assets/branding/lps.svg')
} 


/*lightmode*/
.HeroAnimation-image {
  background-image: url('../assets/branding/gifs/dark-hero.gif');
  
  background-size: cover;
  background-position: center;
}

/*darkmode*/
.dark-mode .HeroAnimation-image {
  background-image: url('../assets/branding/gifs/light-hero.gif')
} 



/*lightmode*/
.sage-plant-leaning-image {
  background-image: url('../assets/branding/gifs/dark-sage-plant-leaning.gif');

  background-size: cover;
  background-position: center;
}

/*darkmode*/
.dark-mode .sage-plant-leaning-image {
  background-image: url('../assets/branding/gifs/sage-plant-leaning.gif')
} 


/*lightmode*/
.danielle-nakan-sage-designer-giff {
  background-image: url('../assets/branding/gifs/dark-me.gif');

  background-size: cover;
  background-position: center;
}

/*darkmode*/
.dark-mode .danielle-nakan-sage-designer-giff {
  background-image: url('../assets/branding/gifs/light-me.gif')
} 


/*lightmode*/
.sage-single-flower-decoration-image {
  background-image: url('../assets/branding/dflower.svg');

  background-size: cover;
  background-position: center;
}

/*darkmode*/
.dark-mode .sage-single-flower-decoration-image {
  background-image: url('../assets/branding/lflower.svg')
} 



/*lightmode*/
.sage-leaf-leaning-decoration-image {
  background-image: url('../assets/branding/dleafleaning.svg');

  background-size: cover;
  background-position: center;
}

/*darkmode*/
.dark-mode .sage-leaf-leaning-decoration-image {
  background-image: url('../assets/branding/lleafleaning.svg')
} 



/*lightmode*/
.sage-leaf-straight-decoration-image {
  background-image: url('../assets/branding/dleafstraight.svg');

  background-size: cover;
  background-position: center;
}

/*darkmode*/
.dark-mode .sage-leaf-straight-decoration-image {
  background-image: url('../assets/branding/lleafstraight.svg')
} 



/*lightmode*/
.flowerTop-image {
  background-image: url('../assets/branding/dseperator.svg');

  background-size: cover;
  background-position: center;
}

/*darkmode*/
.dark-mode .flowerTop-image{
  background-image: url('../assets/branding/lseperator.svg')
} 



/*lightmode*/
.flowerBottom-image {
  background-image: url('../assets/branding/');

  background-size: cover;
  background-position: center;
}

/*darkmode*/
.dark-mode .flowerBottom-image {
  background-image: url('../assets/branding/')
} 



/*lightmode*/
.palindromic-sage-brand-name-image {
  background-image: url('../assets/branding/dbrandname.svg');
  background-size: cover;
  background-position: center;
}

/*darkmode*/
.dark-mode .palindromic-sage-brand-name-image {
  background-image: url('../assets/branding/lbrandname.svg')
} 



.navbar {
  height: 6rem;
  padding: 1rem 0; /* Combines top and bottom padding */
  background: linear-gradient(to bottom, rgba(249, 255, 236, 1) 0%, rgba(249, 255, 236, 0) 100%);
  position: fixed;
  width: 100%;
  z-index: 100;
}

.dark-mode .navbar {
  background: linear-gradient(to bottom, rgba(18, 19, 16, 1) 0%, rgba(18, 19, 16, 0) 100%);
}

.logo {
 width: 50%;         /* or any specific width */
 margin: 0 auto;/* auto left and right margins */
 text-align: center;
  }

/* Logo styling */


/* Menu styling */
.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.links-container {
  display: flex;
  flex: 1; /* Allow links to take up available space */
  justify-content: space-between; /* Spread links */
}

/* Links styling */
.left-links, .right-links {
  display: flex;
  list-style: none;
}

.left-links li, .right-links li {
  margin-left: 0rem;
  margin-right: 0rem;
}

.left-links a, .right-links a {
  text-decoration: none;
  padding-left: 1rem;
  padding-right:1rem;
}

.left-links a:hover, .right-links a:hover {
  text-decoration:none;
  font-size: 1.1rem;
}

/* Hamburger menu */
.hamburger {
  display: none; /* Initially hidden on larger screens */
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 25px;
  height: 20px;
  color: #425A00;
  cursor: pointer;
}

.hamburger span {
  width: 100%;
  height: 0.25rem;
  border-radius: 0.25rem;
  background-color: #425A00;
}

/* Responsive styling */
@media (max-width: 70rem) {


  /* Hide links by default on small screens */
  .left-links, .right-links {
      display: none;
  }

  /* Show hamburger icon */
  .hamburger {
      display: flex;
      position: absolute;
      top: 2rem;
      right: 2rem; /* Align hamburger to the right */
  }

  /* Show the links when the menu is toggled */
  .menu.show .left-links {
      display: flex;                /* Enable flex display for left links */
      flex-direction: column;        /* Background color to match the navbar */
      padding: 1rem 0;            /* Add some padding */
      z-index: 101;                /* Ensure it appears above other elements */
      position: relative;          /* Keep in flow */
      
  }

  /* Show the right links when the menu is toggled */
  .menu.show .right-links {
      display: flex;                /* Enable flex display for right links */
      flex-direction: column;       /* Stack right links vertically */
           /* Background color to match the navbar */
      padding: 1rem 0;            /* Add some padding */
      z-index: 101;                /* Ensure it appears above other elements */
      position: relative;          /* Keep in flow */
  }

  /* Stack the links vertically */
  .left-links li, .right-links li {
      margin: 10px 0;
      width: 100%;
      text-align: left;
  }

  /* Move the logo to the left */
  .logo {
      position: absolute;
      top: 1rem;
      left: 2rem;
      transform: none;
      width: 50%;         /* or any specific width */
      margin: 0 auto;/* auto left and right margins */
      text-align: left;
  }
}