/* ========================================
   SKYLINE TREE CARE — MAIN CSS
======================================== */

/* ========= GOOGLE FONTS ========= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');


/* ========= ROOT COLORS ========= */

:root{

  /* Backgrounds */
  --header-bg:#5E0006;
  --section-bg:#EED9B9;
  --card-bg:#FFF8F1;

  /* Buttons */
  --accent-btn:#D53E0F;
  --primary-btn:#2C1A1D;

  /* Text */
  --heading-color:#2C1A1D;
  --text-color:#4A2B2B;
  --light-text:#FFF8F4;

  /* Border */
  --border-color:rgba(44,26,29,0.12);

  /* Hover */
  --accent-hover:#B52E08;
  --primary-hover:#140B0C;

  /* Shadow */
  --shadow:0 14px 40px rgba(44,26,29,0.10);

  /* Radius */
  --radius:22px;

  /* Container */
  --container:1200px;
}


/* ========= RESET ========= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  width:100%;
  overflow-x:hidden;
  background:var(--section-bg);
  color:var(--text-color);
  font-family:'Inter',sans-serif;
  line-height:1.7;
}


/* ========= CONTAINER ========= */

.sky-container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}


/* ========= HEADINGS ========= */

h1,
h2,
h3,
h4,
h5,
h6{
  color:var(--heading-color);
  font-family:'Cormorant Garamond',serif;
  line-height:1.05;
  font-weight:700;
  letter-spacing:-0.5px;
}

h1{
  font-size:78px;
}

h2{
  font-size:58px;
}

h3{
  font-size:34px;
}

p{
  font-size:16px;
  color:var(--text-color);
  font-family:'Inter',sans-serif;
}


/* ========= LINKS ========= */

a{
  text-decoration:none;
  color:inherit;
}


/* ========= IMAGES ========= */

img{
  width:100%;
  display:block;
}


/* ========= BUTTONS ========= */

.sky-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 32px;
  background:var(--primary-btn);
  color:var(--light-text);
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  font-family:'Inter',sans-serif;
  transition:0.3s ease;
}

.sky-btn-primary:hover{
  background:var(--primary-hover);
  transform:translateY(-2px);
}


.sky-btn-accent{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 32px;
  background:var(--accent-btn);
  color:#fff;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  font-family:'Inter',sans-serif;
  transition:0.3s ease;
}

.sky-btn-accent:hover{
  background:var(--accent-hover);
  transform:translateY(-2px);
}


/* ========= SECTION ========= */

section{
  width:100%;
  padding:110px 20px;
  position:relative;
}


/* ========= BADGE ========= */

.sky-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--border-color);
  color:var(--heading-color);
  font-size:13px;
  font-weight:700;
  font-family:'Inter',sans-serif;
  margin-bottom:20px;
}


/* ========= CARD ========= */

.sky-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow);
}


/* ========= RESPONSIVE ========= */

@media(max-width:992px){

  h1{
    font-size:58px;
  }

  h2{
    font-size:46px;
  }

}

@media(max-width:768px){

  section{
    padding:85px 20px;
  }

  h1{
    font-size:46px;
  }

  h2{
    font-size:38px;
  }

  h3{
    font-size:28px;
  }

  p{
    font-size:15px;
  }

}

@media(max-width:480px){

  h1{
    font-size:38px;
  }

  h2{
    font-size:32px;
  }

}