/* 
Author: DevSolns
Twitter: @DevSolns
*/

/*  =======
Table of Contents
    ======= */

/* 
! Root & Variables Styling
! Font Imports
! All Elements Styling
! HTML Styling
! Body Styling
! General Styling
! General Styling var()
! Responsive Styling Var() 
 */

/* Root & Variables Styling */

:root {

    /* Colors */

    /* Text Colors */
    --text: #e1e1e2;
    --text-alternate: #626262;
    --bg: ;
    --btn-primary: #fff;
    --btn-primary-box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.28);
    --btn-secondary: #fff;
    --btn-secondary-box-shadow: ;
    --btn-primary-alternate: white;
    --btn-primary-alternate-box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.28);
    --btn-secondary-alternate: #fff;
    --btn-secondary-alternate-box-shadow: ;
    --link: ;

    /* Hover Colors */
    --btn-primary-hover: #fff;
    --btn-secondary-hover: #fff;
    --btn-primary-alternate-hover: #fff;
    --btn-secondary-alternate-hover: #fff;

    /* Background Colors */
    --btn-primary-bg: #5D51F2;
    --btn-primary-hover-bg: #3b30d4;
    --btn-secondary-bg: transparent;
    --btn-secondary-hover-bg: #5D51F2;
    --btn-primary-alternate-bg: #5D51F2;
    --btn-primary-alternate-hover-bg: #4c41e3;
    --btn-secondary-alternate-bg: transparent;
    --btn-secondary-alternate-hover-bg: #5D51F2;

    /* Fonts */

    --heading-font: 'Dm Sans', sans-serif;
    --text-font: 'Dm Sans', sans-serif;

    /* Font Sizes */

    /* Desktop Font Sizes */
    --text-s-dt: 1.8rem;
    --btn-s-dt: 2rem;
    --h1-s-dt: 9rem;
    --h2-s-dt: 7rem;
    --h3-s-dt: 4rem;
    --h4-s-dt: 2.2rem;
    --h5-s-dt: ;
    --h6-s-dt: ;

    /* Laptop Font Sizes */
    --text-s-lt: 1.8rem;
    --btn-s-lt: 2rem;
    --h1-s-lt: 9rem;
    --h2-s-lt: 7rem;
    --h3-s-lt: 4rem;
    --h4-s-lt: 2.2rem;
    --h5-s-lt: ;
    --h6-s-lt: ;

    /* Landscape Font Sizes */
    --text-s-ls: 2rem;
    --btn-s-ls: 2rem;
    --h1-s-ls: 9rem;
    --h2-s-ls: 7rem;
    --h3-s-ls: 4rem;
    --h4-s-ls: 2.2rem;
    --h5-s-ls: ;
    --h6-s-ls: ;

    /* Tablet Font Sizes */
    --text-s-tb: 1.8rem;
    --btn-s-tb: 1.8rem;
    --h1-s-tb: 6.5rem;
    --h2-s-tb: 5rem;
    --h3-s-tb: 2.5rem;
    --h4-s-tb: 2rem;
    --h5-s-tb: ;
    --h6-s-tb: ;

    /* Mobile Font Sizes */
    --text-s-m: 1.5rem;
    --btn-s-m: 1.5rem;
    --h1-s-m: 3.5rem;
    --h2-s-m: 2.5rem;
    --h3-s-m: 2rem;
    --h4-s-m: 1.6rem;
    --h5-s-m: ;
    --h6-s-m: ;

    /* Letter Spacing */

    --text-spacing: normal;
    --btn-spacing: ;
    --h-spacing: .6px;

    /* Line Height */

    --text-line-height: 2.6rem;
    --btn-line-height: 2rem;


    /* Paddings & Margins */

    /* Paddings For Desktop */
    --btn-pd-dt: 1.8rem 4.8rem;
    --container-dt: ;

    /* Margins For Desktop */
    --box-dt-sm: ;
    --box-dt-md: ;
    --box-dt-lg: ;

    /* Paddings For Laptop */
    --btn-pd-lt: 1.8rem 4.8rem;
    --container-lt: 14rem;

    /* Margins For Laptop */
    --box-lt-sm: ;
    --box-lt-md: ;
    --box-lt-lg: ;

    /* Padding For Landscape */
    --btn-pd-ls: 1.5rem 3.2rem;
    --container-ls: ;

    /* Margins For Landscape */
    --box-ls-sm: ;
    --box-ls-md: ;
    --box-ls-lg: ;

    /* Padding For Tablet */
    --btn-pd-tb: 1.5rem 3.2rem;
    --container-tb: 0 7rem 0;

    /* Margins For Tablet */
    --box-tb-sm: ;
    --box-tb-md: ;
    --box-tb-lg: ;

    /* Padding For Mobile */
    --btn-pd-m: 1.3rem 3rem;
    --container-m: 0 3.5rem 0;

    /* Margins For Mobile */
    --box-m-sm: ;
    --box-m-md: ;
    --box-m-lg: ;

    /* Borders & Border Radius*/

    --btn-primary-bd: ;
    --btn-primary-hover-bd: ;
    --btn-secondary-bd: 2px solid #fff;
    --btn-secondary-hover-bd: 2px solid var(--btn-secondary-hover-bg);
    --btn-bdr: 55px;
    --img-bdr: ;

    /* Transitions */

    --btn-hover-trst: .2s;

    font-size: 10px;
}

/* Font Imports */

@font-face {
    font-family: 'Dm Sans';
    src: url('/fonts/DM_Sans/DMSans-Regular.ttf');
}

@font-face {
    font-family: 'Dm Sans Medium';
    src: url('/fonts/DM_Sans/DMSans-Medium.ttf');
}

@font-face {
    font-family: 'Dm Sans Bold';
    src: url('/fonts/DM_Sans/DMSans-Bold.ttf');
}

/* All Elements Styling */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    font-family: var(--text-font);
    border: none;
    user-select:'';
    letter-spacing: var(--text-spacing);
    line-height: var(--text-line-height);
      /* border: 1px solid red; */

}

::selection {
    background-color: rgb(210, 210, 210);
    color: var(--btn-primary-bg);
}

/* HTML Styling */

html {
    scroll-behavior: smooth;
}

/* Body Styling */

body {
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -mos-osx-font-smothing: grayscale;
}

/* General Styling */

a {
    white-space: nowrap;
}

span {
    font-size: inherit;
}

/* General Styling Var() */

img {
    border-radius: var(--img-bdr);
}

a.link {
    color: var(--link);
}

.btn-primary {
    color: var(--btn-primary);
    background-color: var(--btn-primary-bg);
    border: var(--btn-bd);
    border-radius: var(--btn-bdr);
    box-shadow: var(--btn-primary-box-shadow);
    display: inline-block;
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover);
    border: var(--btn-primary-hover-bd);
    transition: var(--btn-hover-trst);
}

.btn-secondary {
    color: var(--btn-secondary);
    background-color: var(--btn-secondary-bg);
    border: var(--btn-secondary-bd);
    border-radius: var(--btn-bdr);
    box-shadow: var(--btn-secondary-box-shadow);
    display: inline-block;
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover);
    border: var(--btn-secondary-hover-bd);
    transition: var(--btn-hover-trst);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    letter-spacing: var(--h-sp);
    line-height: normal;
}

/* Responsive Styling Var() */

/* For Mobile */

@media screen and (max-width:600px) {

    * {
        font-size: var(--text-s-m);
    }

    h1 {
        font-size: var(--h1-s-m);
    }

    h2 {
        font-size: var(--h2-s-m);
    }

    h3 {
        font-size: var(--h3-s-m);
    }

    h4 {
        font-size: var(--h4-s-m);
    }

    h5 {
        font-size: var(--h5-s-m);
    }

    h6 {
        font-size: var(--h6-s-m);
    }

    .btn-primary,
    .btn-secondary {
        font-size: var(--btn-s-m);
        padding: var(--btn-pd-m);
    }

    .container {
        padding: var(--container-m);
    }

    .box-sm {
        margin: var(--box-m-sm);
        padding: var(--container-m);
    }

    .box-md {
        margin: var(--box-m-md);
        padding: var(--container-m);
    }

    .box-lg {
        margin: var(--box-m-lg);
        padding: var(--container-m);
    }
}

/* For Tablet */

@media screen and (max-width:900px) and (min-width:600px) {

    * {
        font-size: var(--text-s-tb);
    }

    h1 {
        font-size: var(--h1-s-tb) !important;
    }

    h2 {
        font-size: var(--h2-s-tb) !important;
    }

    h3 {
        font-size: var(--h3-s-tb)!important;
    }

    h4 {
        font-size: var(--h4-s-tb) !important;
    }

    h5 {
        font-size: var(--h5-s-tb) !important;
    }

    h6 {
        font-size: var(--h6-s-tb);
    }

    .btn-primary,
    .btn-secondary {
        font-size: var(--btn-s-tb);
        padding: var(--btn-pd-tb);
    }

    .container {
        padding: var(--container-tb);
    }

    .box-sm {
        margin: var(--box-tb-sm);
        padding: var(--container-tb);
    }

    .box-md {
        margin: var(--box-tb-md);
        padding: var(--container-tb);
    }

    .box-lg {
        margin: var(--box-tb-lg);
        padding: var(--container-tb);
    }
}

/* For Landscape */

@media screen and (max-width:1200px) and (min-width:900px) {

    * {
        font-size: var(--text-s-ls);
    }

    h1 {
        font-size: var(--h1-s-ls);
    }

    h2 {
        font-size: var(--h2-s-ls);
    }

    h3 {
        font-size: var(--h3-s-ls);
    }

    h4 {
        font-size: var(--h4-s-ls);
    }

    h5 {
        font-size: var(--h5-s-ls);
    }

    h6 {
        font-size: var(--h6-s-ls);
    }

    .btn-primary,
    .btn-secondary {
        font-size: var(--btn-s-ls);
        padding: var(--btn-pd-ls);
    }

    .container {
        padding: var(--container-ls);
    }

    .box-sm {
        margin: var(--box-tb-sm);
        padding: var(--container-tb);
    }

    .box-md {
        margin: var(--box-tb-md);
        padding: var(--container-tb);
    }

    .box-lg {
        margin: var(--box-tb-lg);
        padding: var(--container-tb);
    }
}

/* For Laptop */

@media screen and (max-width:1440px) and (min-width:1200px) {

    * {
        font-size: var(--text-s-lt);
    }

    h1 {
        font-size: var(--h1-s-lt);
    }

    h2 {
        font-size: var(--h2-s-lt);
    }

    h3 {
        font-size: var(--h3-s-lt);
    }

    h4 {
        font-size: var(--h4-s-lt);
    }

    h5 {
        font-size: var(--h5-s-lt);
    }

    h6 {
        font-size: var(--h6-s-lt);
    }

    .btn-primary,
    .btn-secondary {
        font-size: var(--btn-s-lt);
        padding: var(--btn-pd-lt);
    }

    .container {
        padding: var(--container-lt);
    }

    .box-sm {
        margin: var(--box-lt-sm);
        padding: var(--container-lt);
    }

    .box-md {
        margin: var(--box-lt-md);
        padding: var(--container-lt);
    }

    .box-lg {
        margin: var(--box-lt-lg);
        padding: var(--container-lt);
    }
}

/* For Desktop */

@media screen and (min-width:1441px) {

    * {
        font-size: var(--text-s-dt);
    }

    h1 {
        font-size: var(--h1-s-dt);
    }

    h2 {
        font-size: var(--h2-s-dt);
    }

    h3 {
        font-size: var(--h3-s-dt);
    }

    h4 {
        font-size: var(--h4-s-dt);
    }

    h5 {
        font-size: var(--h5-s-dt);
    }

    h6 {
        font-size: var(--h6-s-dt);
    }

    .btn-primary,
    .btn-secondary {
        font-size: var(--btn-s-dt);
        padding: var(--btn-pd-dt);
    }

    .container {
        padding: var(--container-dt);
    }

    .box-sm {
        margin: var(--box-dt-sm);
        padding: var(--container-dt);
    }

    .box-md {
        margin: var(--box-dt-md);
        padding: var(--container-dt);
    }

    .box-lg {
        margin: var(--box-dt-lg);
        padding: var(--container-dt);
    }
}