@use '../root/variables' as *;
@use '../root/mixins' as *;

/* --------------------------------------------
    Template Default Fonts & Fonts Styles
 ---------------------------------------------- */ 
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

 $body-font:  "Roboto", sans-serif;
 $faq-font: "Archivo", sans-serif;
 
 
 
$fa: "Font Awesome 6 Pro";


body {
    font-family: $body-font;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    color: $black;
    background-color: $white;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

button {
    border: none;
    background-color: transparent;
    padding: 0;
}

input:focus {
    color: $title-color;
    outline: none;
}

input {
    &::placeholder {
        color: #767771;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    padding: 0;
    @include transition;
}

h1 {
    color: $white;
    font-family: $body-font;
    font-size: 90px;
    font-style: normal;
    font-weight: 600;
    line-height: 94px; /* 104.444% */
    @include breakpoint(max-xxl) {
        font-size: 60px;
    }
    @include breakpoint(max-md) {
        font-size: 50px; 
    }
}

h2 {
    color: $title-color;
    font-family: $body-font;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 66px; /* 110% */
    @include breakpoint(max-xxl) {
        font-size: 45px;
    }
    @include breakpoint(max-md) {
        font-size: 40px;
        line-height: 50px;
    }
}

h3 { 
    color: $title-color;
    font-family: $body-font;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px; /* 112% */

    @include breakpoint(max-xl) {
        font-size: 24px;
    }

    @include breakpoint (max-md) {
        font-size: 20px;
    } 
}

h4 {
    color: $title-color;
    font-family: $body-font;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 34px; /* 141.667% */
}

h5 {
    color: $title-color;
    font-family: $body-font;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
h5 {
    color: $title-color;
    font-family: $body-font;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 120% */
}

p {
    margin: 0px;
    @include transition;
    color: rgba(31, 31, 31, 0.70);
    font-feature-settings: 'case' on, 'cpsp' on;
    font-family: $body-font;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px; /* 275% */
}

a {
    text-decoration: none;
    outline: none !important;
    cursor: pointer;
    color: inherit;
    @include transition;
    &:hover {
        color: $theme-color;
    }
}


span {
    margin: 0px;
    @include transition;
}