/*
 Theme Name:   Weave GeneratePress Child Theme
 Theme URI:    https://weave.asia/
 Description:  Custom GeneratePress child theme created by Weave Asia.
 Author:       Weave Asia
 Author URI:   https://weave.asia/
 Template:     generatepress
 Version:      0.1
*/ 

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Staatliches&display=swap');


body {
    padding: 0;
    margin: 0;
    font-size: 16px; /* Set a base font size */
    overflow-x: hidden; /* Hide horizontal scrollbar */
	font-family: "Archivo", sans-serif;
	color:#222;
}


a{
	text-decoration:none;
	color:#222;
}

h1,h2,h3,h4,h5{
	font-family: "Staatliches", sans-serif;
}

p {
	margin-bottom: 0;
}

/* All menu links under #menu-primary-menu 
#menu-primary-menu li a {
font-family: "Archivo", sans-serif;
  color: var(--contrast-2);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 16px;
	font-weight:600;
}

#menu-primary-menu li a:hover {
  color: #9279f0;
} */

/* Menu */


/* Apply hover effects ONLY on screens wider than 768px */
@media (min-width: 768px) {

  /* Base menu styling */
  #menu-primary-menu li a {
    font-family: "Archivo", sans-serif;
    color: var(--contrast-2);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    transition: 
      color 0.3s ease,
      transform 0.35s ease;
  }

  /* Hover animation for all EXCEPT last child */
  #menu-primary-menu li:not(:last-child) > a:hover {
    color: #222;
    transform: translateY(-10px);
  }

  /* Underline for all EXCEPT last child */
  #menu-primary-menu li:not(:last-child) > a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 50%;
    height: 1px;
    background: #222;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.35s ease 0.1s;
  }

  /* Underline appears on hover */
  #menu-primary-menu li:not(:last-child) > a:hover::after {
    transform: translateX(-50%) scaleX(1);
  }

  /* Ensure last child has no underline */
  #menu-primary-menu li:last-child > a::after {
    content: none;
  }
}



/* Menu */


/* Specific styling for the last menu item (e.g., Buy Now button) */
#menu-primary-menu > li:last-child {
  background-color: #222;
  border-radius: 40px;
  height: 40px;
  transition: background-color 0.3s ease;
  margin-left: 10px;
}

#menu-primary-menu > li:last-child > a {
  color: white !important;
  margin-top: -10px;
  transition: color 0.3s ease;
}



/* Hover state */
#menu-primary-menu > li:last-child:hover {
  background-color: #fff2eb;
}

/* Fix: change text color on hover */
#menu-primary-menu > li:last-child:hover > a {
  color: #222 !important;
}



.subtitle-top {
  position: relative;
	color:#222;
  display: flex;
  align-items: center;
  gap: 5px;
	 font-family: "Archivo", sans-serif !important;
	font-size:18;
	font-weight:100 !important;
	text-transform:uppercase;
}

.subtitle-top::before {
  content: "";
  width: 20px;
  height: 1px;
  background: black;
  display: inline-block;
}

.subtitle-top-2 {
  position: relative;
	color:#222;
  display: flex;
	font-size:18;
	font-weight:100 !important;
	text-transform:uppercase;
}


.feature-tab p{
	font-family: "Archivo", sans-serif;
	font-size:16px;
	color:#000;
}



.feature-tab h3{
		font-family: "Archivo", sans-serif;
	font-weight:600
}

/* layout */
.feature-tabs { max-width: 100%; }
.feature-tabs .feature-tab {
  padding: 28px 28px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 18px;
  cursor: pointer;
  transition: background .25s, transform .12s;

}


.feature-tabs .feature-tab.active {
  background: linear-gradient(90deg, rgba(255,230,230,1) 0%, rgba(255,244,244,0) 100%);
}

.feature-tabs h3 { margin: 0 0 10px 0; font-size: 20px; }
.feature-tabs p { margin: 0; color: #333; line-height: 1.5; }

/* image */
.feature-image img {
  width: 100%;
  border-radius: 12px;
  display: block;
  transition: opacity .28s ease-in-out, transform .28s;
  opacity: 1;
}
.feature-image img.fading { opacity: 0; transform: scale(.995); }


/* Timeline */


.gp-timeline {
  display: flex;
  gap: 30px;
  margin-top: 100px;
  position: relative;
  align-items: flex-start;
  flex-direction: row-reverse;
  padding: 0 40px; 
}



.gp-step p{
	font-size:16px;
}

.gp-step {
  flex: 1;
  background: #fff;
	border:1px solid #f5f5f5;
  padding: 22px;
  border-radius: 10px;
  position: relative;
  transition: transform .18s ease;
}

.gp-step:hover {
  flex: 1;
  background: #ffecec;
  padding: 22px;
  border-radius: 10px;
  position: relative;
  transition: transform .18s ease;
}

.gp-step::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #111;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  z-index: 999;
}


.gp-step:nth-child(1)::before { content: "03"; } 
.gp-step:nth-child(2)::before { content: "02"; } 
.gp-step:nth-child(3)::before { content: "01"; }





.gp-timeline::before {
    content: "";
    position: absolute;
  top: -38px;
    right: 18%;
    width: 65%; 
    height: 4px;
    background: #e0e0e0;
    z-index: 0;
    border-radius: 2px;
    transform: translateY(-50%); 
}



.gp-step:nth-child(1):hover::before,
.gp-step:nth-child(1):hover ~ .gp-step::before {
  content: "✔";
  background: #ffcaca;
  color: #000;
  transform: translateX(-50%) scale(1.02);
}


.gp-step:nth-child(2):hover::before,
.gp-step:nth-child(2):hover ~ .gp-step::before {
  content: "✔";
  background: #ffcaca;
  color: #000;
  transform: translateX(-50%) scale(1.02);
}


.gp-step:nth-child(3):hover::before,
.gp-step:nth-child(3):hover ~ .gp-step::before {
  content: "✔";
  background: #ffcaca;
  color: #000;
  transform: translateX(-50%) scale(1.02);
}

/* Hover Step 3 (first in DOM) */
.gp-step:nth-child(1):hover,
.gp-step:nth-child(1):hover ~ .gp-step {
  background: #ffecec;
}

/* Hover Step 2 */
.gp-step:nth-child(2):hover,
.gp-step:nth-child(2):hover ~ .gp-step {
  background: #ffecec;
}

/* Hover Step 1 */
.gp-step:nth-child(3):hover,
.gp-step:nth-child(3):hover ~ .gp-step {
  background: #ffecec;
}


/* Timeline */

/* Contact Us */
.contact-us-form form{
	background-color:#F5F5F5;
	padding:20px;
}
/* Contact Us */


.tag-colour {
    display: inline-block;    
    background: #FFE8CD;      
    padding: 4px 20px;       
    border-radius: 20px;         
    text-align: left;
	margin-bottom:20px;
}

/* Footer */

.email-submit-wrapper {
    position: relative;
    max-width: 500px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    background-color: white;
	  height:60px;
	
}

.email-submit-wrapper > span {
    display: block;
}

.email-submit-wrapper input[type="email"] {
    width: 100% !important;
    padding: 10px 60px 10px 15px !important; 
    border: none !important;
    box-shadow: none !important;
    font-size: 16px;
    background: none !important;
}

.email-submit-wrapper input.submit-icon-button {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    
    /* Reduced button width slightly to compensate for smaller right padding */
    width: 60px !important; 
    height: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 5px 5px 0 !important;
    background-color: #333333 !important;
    color: transparent !important;
    cursor: pointer;
    transition: background-color 0.3s;
    background-image: url('https://weave-plugin.stewardjohn.com/wp-content/uploads/2025/12/paper-plane.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 50% !important;
    text-indent: -9999px !important;
}

.email-submit-wrapper input.submit-icon-button:hover {
    background-color: #000000 !important;
}

.wpcf7 input, .wpcf7 select, .wpcf7 textarea{
	margin-top:0px !important;
}

/* Footer */

.menu-content {
    width: 100%;
	padding:0px 20px
}

.menu-wrapper {
    width: 100%;  
    margin: 0 auto;   
    padding-left: 15px;   
    padding-right: 15px;
    box-sizing: border-box;
}

.menu-top{
	       justify-content: center;
    max-width: 1440px;
    padding-bottom: 20px;
    padding-top: 20px;
    margin: 0 auto;
    width: 100%;
}



/* Make header transparent by default */
.menu-top {

    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Content alignment fix (optional) */
.menu-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 0px;
    padding-right: 0px;
}

/* When scrolled – add solid color + shadow */
.menu-top.scrolled {
    /* Change to your brand color */

	    position: fixed;
	    max-width: 100%;
}

/* (Optional) change logo on scroll – if needed */
.menu-top.scrolled .custom-logo {
    filter: none; /* e.g. remove white logo effect */
}

.menu-top.scrolled .menu-content{
	
	margin-top:10px;
	background-color:#fff !important;
padding:20px;
	    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	border-radius:10px;
}

.weave-menu .wp-block-navigation__responsive-container.is-menu-open{
	padding:20px;
}



.black-button{
	    align-items: center;
    background-color: #222;
    color: #ffffff;
    justify-self: end;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s ease 0s;
    border-radius: 40px;
    padding: 1rem 4rem;
	
}

.black-button:hover{
	background-color:#fff2eb;
	cursor: pointer;
}


.pink-button{
	    align-items: center;
    background-color: #fff;
    color: #222;
    justify-self: end;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s ease 0s;
    border-radius: 40px;
    padding: 1rem 4rem;
}

.pink-button:hover{
	background-color:#fff2eb;
	cursor: pointer;
}


/* Ensure last child is always visible */
.wp-block-navigation__container > li:last-child {
    display: flex !important;
}

/* Apply hover effects ONLY on screens wider than 768px */
@media (min-width: 768px) {

  /* Base menu styling */
  .wp-block-navigation__container > li > a.wp-block-navigation-item__content {
    font-family: "Archivo", sans-serif;
    color: var(--contrast-2);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    transition:
      color 0.3s ease,
      transform 0.35s ease;
  }

  /* Hover animation for all EXCEPT last child */
  .wp-block-navigation__container > li:not(:last-child) > a.wp-block-navigation-item__content:hover {
    color: #222;
    transform: translateY(-10px);
  }

  /* Underline for all EXCEPT last child */
  .wp-block-navigation__container > li:not(:last-child) > a.wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 50%;
    height: 1px;
    background: #222;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.35s ease 0.1s;
  }

  /* Underline appears on hover */
  .wp-block-navigation__container > li:not(:last-child) > a.wp-block-navigation-item__content:hover::after {
    transform: translateX(-50%) scaleX(1);
  }

  /* Ensure last child has no underline */
  .wp-block-navigation__container > li:last-child > a.wp-block-navigation-item__content::after {
    content: none;
  }
}

/* STYLED BUTTON (Last menu item) */
.wp-block-navigation__container > li:last-child {
  background-color: #222;
  border-radius: 40px;
  height: 40px;
  transition: background-color 0.3s ease;
  margin-left: 10px;
  padding: 0 20px;
  align-items: center;
}

.wp-block-navigation__container > li:last-child > a.wp-block-navigation-item__content {
  color: white !important;
  transition: color 0.3s ease;
}

/* Hover state */
.wp-block-navigation__container > li:last-child:hover {
  background-color: #fff2eb;
}

/* Hover text color change */
.wp-block-navigation__container > li:last-child:hover > a.wp-block-navigation-item__content {
  color: #222 !important;
}


/* Desktop — hide last child */
.wp-block-navigation__container > li:last-child {
    display: none !important;
}

/* Mobile + Tablet (max 1024px) — show last child */
@media (max-width: 1024px) {
    .wp-block-navigation__container > li:last-child {
        display: block;
    }
}