/*---------------------------------------------"
// Template Name: Fixit
// Description:  Fixit 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 ==> Inter <==
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

// FONT ==> Work Sans <==
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/*-------------------------
    Variables
-------------------------*/
/* Fonts */
$font-primary: "Inter", sans-serif;
$font-sec: "Work Sans", sans-serif;
$font-awesome: "Font Awesome 6 Pro";

/* Colors */
$accent-1: #E64E3B;
$accent-2: #F1D11E;
$accent-3: #525250;
$black: #0C0C0D;
$medium-black: #1E1F20;
$light-black: #141516;
$dark-gray: #45474F;
$light-gray: #92949F;
$lightest-gray: #F2F1F1;
$light-white: #FAFAFA;
$white: #FFFF;

/* Box Shadow */
$box-shadow: 0px 0px 16px 0px rgba(181, 181, 181, 0.50);

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

/* 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) !important;
$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);
$br-48: clamp(28px, 2.5vw, 72px);
$br-56: clamp(24px, 2.917vw, 84px);
$br-64: clamp(40px, 3.333vw, 96px);


/* 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/dropdown";

@import "elements/video";

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

@import "layout/hero-banner";

@import "layout/services";

@import "layout/about";

@import "layout/brand";

@import "layout/testimonials";

@import "layout/articles";

@import "layout/booking";

@import "layout/footer";

@import "layout/title-banner";

@import "layout/benefits";

@import "layout/service-detail";

@import "layout/blog";

@import "layout/contact";
