@import url('https://fonts.googleapis.com/css2?family=DM+Sans: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&family=Inter:wght@100;200;300;400;500;600;700;800&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;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&family=Satisfy&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

*{
    font-family: "DM Sans", sans-serif, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

html{
    scroll-behavior: smooth;
}

.shadow-4{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.home-gray-bg{
    @apply bg-gray-50
}

h1{
    @apply text-4xl
}
h2{
    @apply text-[1.4rem] sm:text-2xl md:text-3xl font-[600]
}
h3{
    @apply text-xl sm:text-2xl font-[500]
}
.section-p{
    @apply text-ss ss:text-sm md:text-xs text-gray-700 font-semibold
}
.box-width{
    @apply 2xl:max-w-[1520px] w-full mx-auto
}
.box-width2{
    @apply xl:max-w-[1280px] w-full mx-auto
}
.auth-btn{
 @apply bg-green1 hover:bg-green2 text-white font-semibold ss:text-base ss:px-4 ss:py-2 text-sm px-3 py-1 rounded-md 
}

.page-section{
    @apply px-3 sm:px-14 sm:py-24 py-20
}
.blog-section{
    @apply px-3 py-[58px] ss:py-[70px] sm:px-8 md:px-14 sm:py-[85px] 

}
.course-outline-section{
    @apply px-3 xxss:px-6 ss:px-8 sm:px-14 sm:py-24 py-20
}
.section{
    @apply px-3 xsm:px-14 xsm:py-10 py-8
}
.flex-between{
    @apply flex items-center justify-between
}
.flex-center{
    @apply flex items-center justify-center
}
.section-flex-between{
    @apply flex items-center justify-between flex-col mmd:flex-row gap-6 mmd:gap-12
}
.section-flex-between-reverse{
    @apply flex items-center justify-between flex-col-reverse mmd:flex-row gap-6 mmd:gap-12
}
.form-error-message{
    @apply text-xss ss:text-ss text-red-600 text-left w-full
}
.notification-message{
    @apply text-ss ss:text-sm font-medium text-gray-900
}
.bar-style{
    @apply h-[3px] w-10 bg-green1
}
.bar-style2{
    @apply h-[2px] w-[90px] bg-green1
}
.gpa-btn{
    @apply text-sm px-3 py-[7px] xss:py-2.5  text-white font-semibold w-full rounded-lg
}
.heading-p{
    @apply text-gray-800 text-center text-sm xsm:text-xs font-[500]
}
.dashboard .active{
    @apply text-green1 bg-gray-100 rounded-md
}
.active{
    @apply text-green1 bg-gray-100 xsm:bg-transparent
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}