:root {


  --primary: #7c4dff;
  --primary-dark: #5b34d9;
  --primary-light: #efe9ff;

  --secondary: #ff6fa9;
  --secondary-light: #ffe5f0;

  --orange: #ffb347;
  --orange-light: #fff1de;

  --green: #2ecf89;
  --green-light: #dcfff0;

  --blue: #5da9ff;
  --blue-light: #e8f3ff;

  --yellow: #ffd54a;
  --yellow-light: #fff9db;

  --red: #ff5c5c;



  --text-dark: #1e1e2f;
  --text: #4f4f67;
  --text-light: #8d8da5;
  --text-white: #ffffff;



  --white: #ffffff;
  --black: #000000;

  --body-bg: #f8f9ff;
  --section-bg: #f5f7ff;
  --card-bg: #ffffff;



  --primary-gradient:
    linear-gradient(135deg, #7c4dff 0%, #b067ff 100%);

  --pink-gradient:
    linear-gradient(135deg, #ff6fa9 0%, #ff9671 100%);

  --orange-gradient:
    linear-gradient(135deg, #ffb347 0%, #ffcc33 100%);

  --hero-gradient:
    linear-gradient(135deg, #f4f0ff 0%, #fff6fb 100%);

  --card-gradient:
    linear-gradient(180deg, #ffffff 0%, #f9f8ff 100%);



  --shadow-sm:
    0 4px 10px rgba(0, 0, 0, 0.04);

  --shadow-md:
    0 10px 30px rgba(0, 0, 0, 0.08);

  --shadow-lg:
    0 20px 50px rgba(0, 0, 0, 0.12);

  --shadow-primary:
    0 10px 40px rgba(124, 77, 255, 0.18);

  --shadow-hover:
    0 18px 50px rgba(0, 0, 0, 0.14);


  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-full: 999px;



  --transition-fast: 0.2s ease;
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;



  --font-primary:"Baloo 2", sans-serif;
  --font-heading: "Comic Neue", cursive;



  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 42px;
  --fs-4xl: 56px;


  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;



  --container-width: 1280px;


  --section-padding: 100px;
  --section-padding-md: 80px;
  --section-padding-sm: 60px;



  --header-height: 90px;
  --header-bg: rgba(255,255,255,0.85);
  --header-blur: blur(12px);



  --z-header: 999;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-dropdown: 1200;

}


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

html{
  scroll-behavior: smooth;
}

body{
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  color: var(--text);
  /* background: var(--body-bg); */
      background:
    linear-gradient(
        180deg,
        #fffdf8 0%,
        #fff4fb 100%
    );
  overflow-x: hidden;
  line-height: 1.7;
}


.container{
  width: 100%;
  max-width: 1400px;
  margin: auto;
  padding-inline: 15px;
}



.section{
  position: relative;
  padding: var(--section-padding) 0;
}


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


a{
  text-decoration: none;
  transition: var(--transition);
}



ul{
  list-style: none;
}


.primary-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 16px 34px;

  border-radius: var(--radius-full);

  background: var(--primary-gradient);

  color: var(--text-white);

  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);

  box-shadow: var(--shadow-primary);

  transition: var(--transition);
}

.primary-btn:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}


.section-title{
  margin-bottom: 60px;
  text-align: center;
}

.section-badge{
  display: inline-block;

  padding: 8px 18px;

  border-radius: var(--radius-full);

  background: var(--primary-light);

  color: var(--primary);

  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);

  margin-bottom: 18px;
}

.section-title h2{
  font-family: var(--font-heading);

  font-size: clamp(32px, 5vw, 54px);

  line-height: 1.2;

 color: var(--heading);
  font-weight: var(--fw-extra-bold);
}
.section-title h2 span{
    color: var(--primary);
    position: relative;
}


.card{
  position: relative;

  background: var(--card-gradient);

  border-radius: var(--radius-xl);

  padding: 30px;

  box-shadow: var(--shadow-md);

  transition: var(--transition);
}

.card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}


@keyframes float {

  0%{
    transform: translateY(0px);
  }

  50%{
    transform: translateY(-12px);
  }

  100%{
    transform: translateY(0px);
  }

}


@media(max-width:992px){

  :root{

    --section-padding: 80px;

    --fs-4xl: 48px;
    --fs-3xl: 38px;
  }

}


@media(max-width:768px){

  :root{

    --section-padding: 60px;

    --fs-4xl: 40px;
    --fs-3xl: 32px;
    --fs-2xl: 28px;
  }

}


@media(max-width:576px){

  :root{

    --radius-xl: 24px;
    --radius-2xl: 30px;
  }

}