/* ++++++++++++++++++++++++++++++++++++++++

  Mobile-first responsive design by WebSofa 
  URL: creating-precious-moments.com

  Version with iphone stacking issue

  +++++++++++++++++++++++++++++++++++++++++ */


/* --- Headings Font --- */

@font-face {
    font-family: 'HeadingFont';
    src: url('../fonts/InterTight.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Prevents invisible text while loading */
}

/* --- Body Font --- */

@font-face {
    font-family: 'BodyFont';
    src: url('../fonts/Montserrat.woff2') format('woff2');
    font-weight: 400; /* Regular weight */
    font-style: normal;
    font-display: swap;
}

/* ---- variables for colour palette and font selections ---- */

:root {
	--accent-clr: #11111d;
   --secondary-clr: rgb(13, 117, 187);
	--contrast-clr: rgb(70, 180, 81);
	--light-clr: rgb(245, 245, 245);
   --body-bgd-clr: #eee;
	--body-FF: 'BodyFont', 'Century Gothic', system-ui, sans-serif;
   --body-text-clr: rgb(17, 17, 29);
	--heading-FF: 'HeadingFont', 'Tahoma', 'Verdana', sans-serif;
}

/* ---- Simple css reset ---- */

*,
::after,
::before {
	margin: 0;
	padding: 0;
}
* {
	box-sizing: border-box;
}
img, figure {
   margin: 0;
}


/* ---- html and body ---- */

html {
	font-size: 62.5%;
   overflow-x: hidden;
}
body {
   margin: 0;
	font-family: var(--body-FF);
	color: var(--body-text-clr);
	max-width: 100%;
	overflow-x: hidden;
   height: 100%;
   background: var(--body-bgd-clr);
}

/* ---- Utility styles ---- */

.section-divider {
   text-align: center;
   width: 40%;
   margin: 8rem auto;
   border-bottom: 1px dotted var(--accent-clr);
}
.padding-top {
   padding-top: 2rem;
}
.padding-block {
   padding-block: 4rem;
}
.margin-block {
   margin-block: 5rem;
}
.margin-block-small {
   margin-block: 2rem;
}
.margin-right {
   margin-right: 2rem;
}
.dark-background {
   background: linear-gradient(130deg, var(--secondary-clr), var(--accent-clr));
   color: var(--light-clr);
}
.hidden {
   display: none;
}
.indent {
   padding-inline: clamp(2rem, 5vw, 5rem);
}
.center {
   margin: 0 auto;
   text-align: center;
}
em {
   color: var(--contrast-clr);
   font-weight: bold;
}
.nav-link .active, .footer .active {
   color: var(--contrast-clr);
   text-decoration: none;
   pointer-events: none;
}
.shadow {
   border-radius: 5px;
   border: 1px solid #d3d3d3;
   box-shadow: 5px 5px 8px #888888;
}
.fa-facebook, .fa-linkedin, .fa-envelope, .fa-phone {
   margin-right: 10px;
   font-size: 1.8rem;
}
.mobile {
   display: block;
}
.desktop {
   display: none;
}
figcaption {
	color: var(--light-clr);
	background-color: var(--accent-clr);
	text-align: center;
	position: relative;
	bottom: 60px;
	height: 60px;
   font-size: 1.2rem;
	border-radius: 0 0 10px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	gap: 80px;
	width: 100%;
}


/* Section Divider */

.divider {
  height: 1px;
  width: 50%;
  background: blue;
  background: linear-gradient(90deg, hsl(0, 0%, 20%), hsl(0, 0%, 70%), hsl(0, 0%, 20%));
}


/* Wrappers */

.outer-wrapper {
	padding-inline: 1rem;
   padding-block: 0.5rem;
   margin: 0 auto;
	max-width: 1164px;
   height: 100%;
   background: #f5f5f5;
   box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.1);
}
.inner-wrapper {
   background: #11111D;
   border: none;
   border-radius: 15px;
}

/* Margins */

.margin-top-small {
   margin-top: 2rem;
}
.margin-top {
   margin-top: 5rem;
}
.margin-bottom {
   margin-bottom: 5rem;
}
.margin-block-5 {
   margin-block: 5rem;
}
.margin-block-3{
   margin-block: 3rem;
}
.margin-block-small {
   margin-block: 2rem;
}

/* Padding */


/* Images */

img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	margin-bottom: 2em;
}
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
	transition: 0.7s ease-in-out;
}
@keyframes fade {
	from {
		opacity: 0.4;
	}
	to {
		opacity: 1;
	}
}

/* Buttons */

.btn {
   display: block;
   width: fit-content;
   padding: 1em 0.75em;
   border-radius: 5px;
   text-align: center;
   transition: 0.5s ease-in-out;
}
.btn-icon {
      transition: 0.5s ease-in-out;
}
.btn-cta {
   background-color: var(--contrast-clr);
   color: var(--light-clr);
}
.btn-cta:focus, .btn-cta:hover {
   background-color: var(--secondary-clr);
}
.btn-enquire {
   color: var(--contrast-clr);
   font-weight: bold;
   background: transparent;
   border: 2px solid var(--contrast-clr);
}
 .btn-enquire:focus, .btn-enquire:hover {
   color: var(--secondary-clr);
   border: 2px solid var(--secondary-clr);
 }

  .btn-enquire:focus .btn-icon, .btn-enquire:hover .btn-icon {
   color: var(--secondary-clr);

  }

 .btn-icon {
  margin-left: 8px;
  color: var(--contrast-clr);
  font-size: 14px;
 }
.btn-icon:focus, .btn-icon:hover {
   color: var(--secondary-clr);
}
.enquiry-button i:hover {
   color: var(--secondary-clr);
}

/* Grids */

.grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
   grid-template-rows: auto;
   gap: 2rem;
   margin-block: 3rem;
   justify-items: center;
   align-items: center;
}
/* Vertical item alignment */
   .grid-item-start { align-self: start; }
   .grid-item-center { align-self: center; }
   .grid-item-end { align-self: end; }

/* Horizontal item alignment */
   .grid-item-left { justify-self: start; }
   .grid-item-middle { justify-self: center; }
   .grid-item-right { justify-self: end; }

/* List items */

.standard-marker,
.coloured-marker {
	margin-left: 2em;
	list-style: square;
}
.coloured-marker li::marker {
	color: var(--secondary-clr);
}
.standard-marker li,
.coloured-marker li 
 {
	padding-left: 1em;
   line-height: 1.6;
}
.coloured-marker li a:hover, .coloured-marker li a:focus {
   color:var(--secondary-clr);
   pointer-events: cursor;
}
.standard-marker li:last-child,
.coloured-marker li:last-child {
	margin-bottom: 1em;
}

/* Base container styling */
.custom-marker {
  margin: 1.5rem 0;
  padding: 0;
}

/* Individual item block */
.custom-marker .custom-list-item {
  display: grid;
  grid-template-columns: auto 1fr;
  /* gap: 0.5rem 1rem; */
  /* gap: 1rem; */
  margin-bottom: 1.5rem;
}

/* Custom Bullet Placement */
.custom-marker .custom-list-item::before {
  content: "\279C";
  color: var(--secondary-clr);
  font-size: 1.8rem;
  font-weight: bold;
  /* line-height: 1; */
  grid-row: 1 / span 6; /* Ensures bullet stays aligned with the top line  */
}

/* Term / Heading Styling */
.custom-marker dt {
  grid-column: 2;
  font-weight: bold;
  margin: 0 0 0 0.5em;
}

/* Details / Metadata Styling */
.custom-marker dd {
  grid-column: 2;
  margin: 0 0 0 0.5em;
  line-height: 1.5;
}


/* ------Typography ------*/

h1,
h2,
h3,
h4 {
	font-family: var(--heading-FF);
	color: var(--heading-color);
   letter-spacing: -1px;
}
h1 {
	font-size: clamp(2.4rem, 5.1vw, 4rem);
	line-height: 1.3;
	font-weight: 600;
   margin: 3rem 0 1rem 0;
}
h2 {
	font-size: clamp(2.1rem, 3.9vw, 3.2rem);
	font-weight: 500;
	line-height: 1.4em;
   margin-block: 0.5em;
}
h3 {
	font-size: clamp(1.8rem, 2.8vw, 2.6rem);
	font-weight: 400;
	margin: 1.5em 0 0.5em;
	letter-spacing: 0.5px;
	text-decoration: var(--heading-color) 1px;
}
h4 {
	font-size: clamp(1.8rem, 2.9vw, 2.5rem);
	font-weight: 400;
	margin: 1.5em 0 0.5em;
	letter-spacing: 0.5px;
}
a {
	text-decoration: none;
	color: inherit;
}
a,
li,
p,
q,
span,
blockquote,
dt, dd {
   font-family: var(--body-FF);
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
}
p {
   margin-bottom: 1em;
   line-height: 1.6;
}
dt {
   font-weight: bold;
   padding-bottom: 0.5em;
}
blockquote, q {
   line-height: 1.7;
}

/* Larger text for introductory paragraph */

.larger-text {
	font-size: clamp(1.8rem, 2.1vw, 2.2rem);
	line-height: 1.6;
}

/* Bold text */

strong, .bold-text {
  font-weight: 700;
}

/* ++++ Main styling ++++ */

/* .main-content {
   margin-top: -30dvh;
} */

/* Hero section  */

.hero {
   color: var(--light-clr);
   background: #11111D;
   border-radius: 15px;
   margin-bottom: 3em;
}
.hero-grid {
   display: flex;
   flex-direction: column;
}
.hero-text {
   font-size: clamp(2.4rem, 5.1vw, 3rem);
   margin-bottom: 0.5em;
}
.hero-subtext {
   margin-block: 2em;
}

.bg-banner-index {
   width: auto;
   min-height: 400px;
   height: 100%;
   /* max-height: 400px; */
   background: url('../img/header_image_v7.webp?=v2') center top / contain no-repeat;

   /* position: relative;
   z-index:2; */
   margin-top: -20px;
}

.bg-banner-about {
   width: 100%;
   height: 200px;
   margin-top: -100px;

background: url('../img/about_gradient_banner.webp?v=0.2') center / contain no-repeat;
}

.bg-banner-services {
   width: 100%;
   height: 200px;
   margin-top: -100px;

background: url('../img/services_gradient_banner.webp?v=0.2') center / contain no-repeat;
}


/* Our Promise section */

.helena {
   margin: 3em auto;
   max-width: 100%;
   padding-inline: 5%;
   padding-block: 5rem;
   background: linear-gradient(130deg, var(--accent-clr), var(--secondary-clr));

   /* metallic silver background */
   /* background: linear-gradient(135deg, #787878 0%, #b5b5b5 25%, #e3e3e3 50%, #b5b5b5 75%, #787878 100%); */
 
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
   gap: 2em;
   margin-bottom: 3em;
   justify-content: center;
   align-items: center;
   }

.helena-text q {
	font-size: clamp(1.7rem, 2.5vw, 2.2rem);
   font-style: italic;
   line-height: 1.4;
   margin-bottom: 1em;
   display: block;
   }

@keyframes gradient { 
   0% {background-position:0% 5%;
   }
   50% {background-position:30% 33%;
   }
   100% {background-position:0% 5%;
   }
}

/* Our Promise Section */

.helena img {
   place-self: center;

   width: auto;
   height: 100%;
   max-height: 400px;
   margin-bottom: 0;
   border-radius: 5px;
   object-fit: cover; 
   display: block;
}

/* Why Choose Us Section */

.highlights * {
   margin-block: 0;
   margin-bottom: 0.5rem;
   line-height: 1;
}
.highlights .custom-marker {
   margin-top: 3em;
}
.highlights .custom-marker li {
   margin-bottom: 3rem;
}
.icons {
   margin: 3em auto;
   padding-inline: 4em;
   
   display: flex;
   flex-wrap: wrap;
   row-gap: 3em;
   justify-content: space-around;
}
.icons img {
   display: inline;
   margin-bottom: 0;
}
.icons-item {
   display: flex;
   align-items: center;
   justify-content: center;
   column-gap: 10px;
   flex-grow: 1;
}

/* Testimonials Section - Index Page */

.testimonial-cards {
   display: grid;
   grid-column-gap: 2rem;
   grid-row-gap: 2rem;
   grid-template-columns: 1fr 1fr 1fr;

   background: linear-gradient(130deg, var(--secondary-clr), var(--accent-clr));
   color: var(--light-clr);
   animation: gradient 16s ease infinite;
}

.a {
   grid-column: 1 / 3;
   grid-row: 1 / 2;
}
.b {
   grid-column: 2 / 4;
   grid-row: 2 / 3;
}
.c {
   grid-column: 1 / 3;
   grid-row: 3 / 4;
}

blockquote {
   position: relative;
   font-style: italic;
   max-width: 100%;
   margin: 0 auto;
   padding: 0 35px;
}

blockquote:before {
   display: block;
   content: "\201C";
   font-size: 15rem;
   opacity: 0.2;

   position: absolute;
   left: 20px;
   top: -80px;
}
blockquote cite {
   display: block;
   text-align: center;
   width: auto;
   margin: 10px auto;
}
blockquote cite:before {
   content: "\2014 \2009";
}

/* Services section */

.services-grid {
   margin-top: 3em;
}
.services-grid figure {
   max-height: 450px;
}

.services-grid img {
   width: 100%;
   height: auto;
   max-height: 500px;
   object-fit: cover;
}


/* ===== About Page =====  */


.banner {
   margin-top: -2em;
}
.about  {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
   grid-template-rows: auto;
   gap: 5em;
   margin-bottom: 3em;
   justify-content: center;
   align-items: start;
}
.about p {
   margin-top: 0;
}

   /* Testimonials Section (About Page) */


.testimonialcards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
      grid-template-rows: auto;
      gap: 2em;
   }

   .testimonialcards blockquote::before {
      color: var(--secondary-clr);
      font-weight: bold;
   }
   .testimonial {
      padding: 30px;
      flex: 0.9;
      border-radius: 10px;
      box-shadow: 5px 5px 12px 0px rgba(134, 134, 134, 0.37);
      background-color: #fff;
   }



/* ===== Tablet styles =====  */

@media only screen and (min-width: 768px) and (max-width: 1023px) {

/* Typography */


}


/* ===== Tablet (landscape mode) and desktop styles =====  */

@media (min-width: 768px) {

.highlights .custom-marker {
   display: grid;
   grid-auto-flow: row;
   grid-template-columns: 1fr 1fr;
   column-gap: 2em;
}
.icons {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 2em;
   padding-inline: 2%;
}
.icons-item {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   column-gap: 10px;
   flex-grow: 1;
}





}

/* ===== Desktop styles =====  */

@media (min-width: 1024px) {

   /* Utility styles  */

.mobile {
   display: none;
}
.desktop {
   display: block;
}
.outer-wrapper {
   padding: 5rem;
	margin: 5rem auto;
   border-radius: 15px;
}
.hero-text {
   margin-bottom: 2em;
}
/* .hero-subtext {
   display: none;
} */

.nav-link .active {
   color: var(--contrast-clr);
   text-decoration: underline;
   text-underline-offset: 0.5em;
   pointer-events: none;
}



.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
   grid-template-rows: minmax(200px, 380px);
   column-gap: 3rem;

   margin-top: 3rem;
}




/* Typography */


   /* Testimonials Section */


   /* Animations */

   .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
   }

   @-webkit-keyframes fade {
      from {
         opacity: 0.4;
      }
      to {
         opacity: 1;
      }
   }

   @keyframes fade {
      from {
         opacity: 0.4;
      }
      to {
         opacity: 1;
      }
   }





}