@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Open+Sans&family=Poppins&display=swap');

:root {
  /* Colors */
  --primary-color: #4a1463;
  --secondary-color: #941981;
  --overlay-text-color: #ffffff;
  --body-text-color: #000000;
  --button-text-color: var(--primary-color);
  --hover-button-text-color: #ffffff;
  --gradient-background-color: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  --content-background-color: #f8f5fc;
  --normal-background-color: #ffffff;
  --card-text-color: #555;
  --navbar-background-color:#fffff2;
  --icon-background-color: #ede1f3;

  /* Fonts */
  --main-heading-font: 'Poppins', sans-serif;
  --page-heading-font: 'Caveat Brush', cursive;
  --body-font: 'Open Sans', sans-serif;

  /* Spacing */
  --padding-xl:30px;
  --padding-l: 20px;
  --padding-m: 15px;
  --padding-ms: 10px;
  --padding-s: 5px;

  --margin-l: 30px;
  --margin-ml: 25px;
  --margin-m: 20px;
  --margin-ms: 15px;
  --margin-s: 10px;

  /* Font Sizes */
  --h1-font-size: 1.875rem;   
  --h2-font-size: 1.625rem;   
  --h3-font-size: 1.375rem;   
  --h4-font-size: 1.125rem;   
  --paragraph-font-size: 0.875rem; 

  /* Font Weights */
  --bolder-font-weight: 700;
  --bold-font-weight: 600;
  --medium-font-weight: 500;
  --small-font-weight: 400;

  /* Border Radius*/
  --card-border-radius:20px;
  --button-border-radius:30px;

  /**/
}

 html,body{
  width: 100%;
  margin: 0;
  padding: 0;
 }

h2 {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  font-family: var(--main-heading-font);
  font-size: var(--h1-font-size);
  color: var(--primary-color);
}

h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 5px;
  background:var(--gradient-background-color);
  border-radius: 5px;
}


.hero-btn {
  padding: 12px 25px;
  background: var(--gradient-background-color);
  color: var(--overlay-text-color);
  text-decoration: none;
  border-radius: var(--button-border-radius);
  transition: background-color 0.3s, transform 0.3s ease;
  display: inline-block;
  border: none;
  outline: none  !important;
}

.hero-btn:hover {
 transform: scale(1.02) ;
}

@media screen and (max-width: 768px){
  
  h2 {
    font-size: calc(1.1*var(--h4-font-size)); 
  }
}