/*---------------------------------------------"
// Template Name: Teach Me
// Description:  Teach Me Html Template
// Version: 1.0.0

===============================================   
STYLE SHEET INDEXING
|
|___ Fonts
|___ Variables
|___ Responsive
|___ Reset Styles
|___ Spacing
|___ Helper Classes
|___ Buttons
|___ Headings
|___ Layout Styles
|___ END STYLE SHEET INDEXING

--------------------------------------------*/

/*-------------------------
    Fonts
-------------------------*/

// FONT ==> Space Grotesk <==
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

// FONT ==> Inter <==
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

// FONT ==> Inter <==
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/*-------------------------
    Variables
-------------------------*/
/* Fonts */
$font-primary: "Inter", sans-serif;
$font-sec: "Space Grotesk", sans-serif;
$font-ter: "Oswald", sans-serif;
$font-awesome: "Font Awesome 6 Pro";

/* Colors */
$accent-1: #004439;
$accent-2: #D5D52C;
$accent-3: #004137;
$black: #0C0C0D;
$medium-black: #1E1F20;
$light-black: #141516;
$dark-gray: #45474F;
$light-gray: #92949F;
$lightest-gray: #EAEAEC;
$light-white: #FAFAFA;
$white: #FFFFFF;


/* Transitions */
$transition: all 0.3s ease-in-out;
$duration: 6.8s;

/* Border-Radius */
$br-4: clamp(2px, 0.208vw, 8px);
$br-8: clamp(4px, 0.417vw, 16px);
$br-10: clamp(5px, 0.521vw, 20px);
$br-12: clamp(8px, 0.625vw, 24px);
$br-14: clamp(10px, 0.729vw, 28px);
$br-16: clamp(12px, 0.833vw, 32px);
$br-18: clamp(14px, 0.938vw, 36px);
$br-20: clamp(16px, 1.042vw, 40px);
$br-24: clamp(18px, 1.25vw, 48px);
$br-32: clamp(24px, 1.667vw, 64px);



/* Gap */
$gap-4: clamp(2px, 0.208vw, 8px);
$gap-8: clamp(4px, 0.417vw, 16px);
$gap-10: clamp(5px, 0.521vw, 20px);
$gap-12: clamp(8px, 0.625vw, 24px);
$gap-14: clamp(10px, 0.729vw, 28px);
$gap-16: clamp(12px, 0.833vw, 32px);
$gap-18: clamp(14px, 0.938vw, 36px)!important;
$gap-20: clamp(16px, 1.042vw, 40px)!important;
$gap-24: clamp(18px, 1.25vw, 48px)!important;
$gap-32: clamp(24px, 1.667vw, 64px);
$gap-38: clamp(28px, 1.979vw, 76px);
$gap-48: clamp(40px, 2.5vw, 28px);
$gap-64: clamp(48px, 3.333vw, 128px);


/*-------------------------
    Responsive Styles
-------------------------*/
@import "helpers/mixin";

/*-------------------------
    Reset Styles
-------------------------*/
@import "basic/basic";

/*-------------------------
Helpers
-------------------------*/
@import "helpers/classes";


@import "helpers/spacing";

/*-------------------------
Elements
-------------------------*/

@import "elements/buttons";

@import "elements/form";

@import "elements/preloader";

@import "elements/video";

/*-------------------------
  layouts
-------------------------*/
@import "layout/header";

@import "layout/hero-banner";

@import "layout/why-choose";

@import "layout/course";

@import "layout/teacher";

@import "layout/brand";

@import "layout/testimonials";

@import "layout/blogs";

@import "layout/footer";

@import "layout/title-banner";

@import "layout/about";

@import "layout/sidebar";

@import "layout/blog-detail";

@import "layout/course-detail";

@import "layout/register";

@import "layout/contact";

@import "layout/cart";

@import "layout/checkout";

@import "layout/error";

@import "layout/coming-soon";













