/*---------------------------------------------"
// Template Name: Powerex
// Description: Powerex 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 (-- Roboto --)
@import url('https://fonts.googleapis.com/css2?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;1,900&display=swap');

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

/// FONT (-- Poppins --)
@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&display=swap');


/*-------------------------
    Variables
-------------------------*/
/* Fonts */
$font-primary: "Roboto", sans-serif;
$font-sec: "Montserrat", sans-serif;
$font-ter: "Poppins", sans-serif;
$font-awesome: "Font Awesome 6 Pro";

/* Colors */

$accent-1: #0074D9;
$accent-2: #DD3842;
$accent-3: #FF7A00;
$accent-4: #FECAAB;
$accent-5: #BEE1F1;
$accent-6: #C9E0DB;
$accent-7: #369A4B;
$accent-8: #FDC9E4;
$black: #0C0C0D;
$medium-black: #1E1F20;
$light-black: #141516;
$dark-gray: #45474F;
$light-gray: #92949F;
$lightest-gray: #E6E9E8;
$white: #fafafa;


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

/* Gradients */
$box-shadow-1: 0px 4px 20px 0px rgba(0, 0, 0, 0.12);


/* Border-Radius */
$br-5: 5px;
$br-10: clamp(6px, 0.521vw, 20px);
$br-15: clamp(8px, 0.781vw, 30px);
$br-20: clamp(10px, 1.042vw, 32px);
$br-25: clamp(12px, 1.302vw, 40px);
$br-30: clamp(15px, 1.563vw, 50px);


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

@import "elements/modal-box";

@import "elements/video";

@import "elements/preloader";


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

@import "layout/hero-banner";

@import "layout/brand";

@import "layout/category";

@import "layout/offer";

@import "layout/product-card";

@import "layout/feature-products";

@import "layout/highlight-slider";

@import "layout/about";

@import "layout/newest-products";

@import "layout/sale-banner";

@import "layout/testimonials";

@import "layout/blogs";

@import "layout/benefits";

@import "layout/footer";

@import "layout/cart-sidebar";

@import "layout/title-banner";

@import "layout/team";

@import "layout/blog-detail";

@import "layout/sidebar";

@import "layout/product-detail";

@import "layout/contact";

@import "layout/cart";

@import "layout/checkout";