/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    https://example.com/twenty-seventeen-child
 Description:  Child theme for the Twenty Seventeen theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentyseventeen
 Version:      1.0.0
*/

/* Import parent theme styles */
@import url("../twentyseventeen/style.css");

/* You can add your custom CSS below this line */


h1,h2,h3 {
	font-family : 'Manrope', Helvetica, Arial, Lucida, sans-serif;
}
p {
	font-family :'Manrope', Helvetica, Arial, Lucida, sans-serif;
}
span {
  font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif;
}

/* =====================================
   Simple Theme Tokens
   ===================================== */
:root {
  --teal: #00C9AA;
  --teal-600: #12876f;
  --text: #3A4446;
  --muted: #6e7781;
  --dark: #3b3f45;
  --text-on-teal: #ffffff;
  --maxw: 1280px;
 
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif;
	a {
		color: var(--teal);
	}
}

/* =====================================
   Buttons (Shared)
   ===================================== */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background-color: var(--teal);
    font-weight: 500;
    text-transform: uppercase;
    color: #ffffff !important;
    font-size: 18px !important;
    letter-spacing: 2px !important;
    border-radius : 7px ;
    border-width: 2px;
    border-color: var(--teal);
    border-style: solid;
/*     transition-property: background-color, border-color;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms; */
     padding: 12px 24px !important ;
     text-decoration: none;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.btn--primary:hover { 
background: #12876f; !important; 
border:2px solid  #12876f !important;
}

.btn--secondary {
  background: #fff;
  color: var(--teal) !important;
  border-color: var(--teal);
}

.btn--secondary:hover {
  background: var(--teal);
  border-color: var(--teal);
color : #fff !important;
}

.btn--dark {
  background: var(--text);
  color: #fff;
  border-color: var(--dark);
}

.btn--outline {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn--outline:hover {
 background: #fff;
 color : var(--teal) !important; 
 }




/* ===== Tablet (767px – 1024px) ===== */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
  .btn {
    font-size: 16px !important;
    padding: 14px 20px;
  }
}

/* ===== Mobile (≤767px) ===== */
@media only screen and (max-width: 767px) {
  .btn {
    width: 100%;                 /* Full width on mobile */
    font-size: 15px !important;  /* Smaller font */
    padding: 12px 16px;          /* Tighter padding */
    letter-spacing: 1px !important;
  }
}
@media (max-width: 560px) {
    .btn {
        width: auto !important;
        padding: 12px 16px;
    }
}