@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Base Variables */
  :root {
    /* Typography */
    font-size: 16px;
    
    /* Color Palette */
    --primary-blue: #1057F1CC;
    --light-blue: #68ADEE26;
    --white: #FFFFFF;
    --white-50: #FEFEFE;
    --gray-100: #e9ecef;
    --gray-200: #E5E7EB;
    --gray-250: #F1F1F1;
    --gray-400: #888888;
    --gray-500: #7B7B7B;
    --gray-600: #666666;
    --gray-550: #616161;
    --gray-700: #484848;
    --gray-750: #484848;
    --gray-800: #333333;
    --gray-850: #2D353E;
    --gray-900: #212121;
    --gray-950: #111827;
    --gray-background: #F8F7FF;
    --gray-border: #eeeeee;
    --yellow: #FFD700;
    
    
    /* Purple Palette */
    --purple-50: #F3F0FF;
    --purple-100: #E3DFFB;
    --purple-200: #E5E0FF;
    --purple-300: #DBDDFF;
    --purple-400: #B2B6FF;
    --purple-500: #9A8BF3;
    --purple-600: #7C66FF;
    --purple-700: #7B68EE;
    --purple-800: #6c5ce7;
    --purple-900: #7433E0;
    --purple-950: #8A3FFC;
    
    /* Gradients */
    --purple-gradient-start: #F3F1FE;
    --purple-gradient-end: #E5E0FF;
    
    /* Other Colors */
    --pink-50: #EE686A26;
    --pink-light: #EE68B226;
    
    /* Shadows */
    --shadow-sm: 0 0.0625rem 0.1875rem rgba(3, 8, 24, 0.1);
    --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
}

body{
    font-family: 'Plus Jakarta Sans';
}

/* Typography Classes */
.font-60, .font-48, .font-40, .font-36, .font-28, 
.font-24, .font-20, .font-18, .font-16 {
    font-weight: 500;
}

/* font-weight */
.light { font-weight: 200; }
.normal{ font-weight: 400; }
.strong{font-weight: 500;} 
.extra-strong{font-weight: 600;}
.bold{font-weight: 700;}
.extra-bold { font-weight: 800; }
.bolder{font-weight:900;}


/* Responsive Typography */
@media (min-width: 1400px) {
    .font-60 { font-size: 3.75rem; }
    .font-48 { font-size: 3rem; }
    .font-40 { font-size: 2.5rem; }
    .font-36 { font-size: 2.25rem; }
    .font-28 { font-size: 1.75rem; }
    .font-24 { font-size: 1.5rem; }
    .font-20 { font-size: 1.25rem; }
    .font-18 { font-size: 1.125rem; }
    .font-16 { font-size: 1rem; }
}

@media (max-width: 1399px) {
    .font-60 { font-size: 3.375rem; }
    .font-48 { font-size: 2.75rem; }
    .font-40 { font-size: 2.25rem; }
    .font-36 { font-size: 2rem; }
    .font-28 { font-size: 1.625rem; }
    .font-24 { font-size: 1.5rem; }
    .font-20 { font-size: 1.188rem; }
    .font-18 { font-size: 1.063rem; }
    .font-16 { font-size: 0.938rem; }
}

@media (max-width: 1199px) {
    .font-60 { font-size: 3rem; }
    .font-48 { font-size: 2.5rem; }
    .font-40 { font-size: 2.125rem; }
    .font-36 { font-size: 1.875rem; }
    .font-28 { font-size: 1.5rem; }
    .font-24 { font-size: 1.5rem; }
    .font-20 { font-size: 1.125rem; }
    .font-18 { font-size: 1rem; }
    .font-16 { font-size: 0.875rem; }
}

@media (max-width: 991px) {
    .font-60 { font-size: 2.625rem; }
    .font-48 { font-size: 2.25rem; }
    .font-40 { font-size: 1.875rem; }
    .font-36 { font-size: 1.75rem; }
    .font-28 { font-size: 1.375rem; }
    .font-24 { font-size: 1.25rem; }
    .font-20 { font-size: 1.063rem; }
    .font-18 { font-size: 0.938rem; }
    .font-16 { font-size: 0.813rem; }
}

@media (max-width: 767px) {
    .font-60 { font-size: 2.25rem; }
    .font-48 { font-size: 2rem; }
    .font-40 { font-size: 1.75rem; }
    .font-36 { font-size: 1.625rem; }
    .font-28 { font-size: 1.25rem; }
    .font-24 { font-size: 1.125rem; }
    .font-20 { font-size: 1rem; }
    .font-18 { font-size: 0.875rem; }
    .font-16 { font-size: 0.75rem; }
}

@media (max-width: 575px) {
    .font-60 { font-size: 1.75rem; }
    .font-48 { font-size: 1.75rem; }
    .font-40 { font-size: 1.5rem; }
    .font-36 { font-size: 1.375rem; }
    .font-28 { font-size: 1.125rem; }
    .font-24 { font-size: 0.938rem; }
    .font-20 { font-size: 0.875rem; }
    .font-18 { font-size: 0.813rem; }
    .font-16 { font-size: 0.75rem; }
}

/* Layout Utilities */
.mt-20 { margin-top: 1.25rem; }
.mt-md-100 { margin-top: 5rem; }
.mb-60 { margin-bottom: 3.75rem; }