/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');*/
@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');

/* Base Css */
* {
  margin: 0;
  padding: 0;
    box-sizing: border-box;

}

:root {
  --primary-color: #ff6600 ;
  --secondary-color: #fff;
  --blue-color: #000;
  --light-color: #fff;
  --dark-color: #000;
  --white-color: #fff;
  --black-color: #000;
  --text-color: #697987;
  --link-color: var(--primary-color);
  --light-text-color: var(--primary-color);
  --font-gilory:'poppins';
/*  --font-gilory:'Gilroy';*/
/*  --font-inter: 'Inter', sans-serif;*/
  --font-inter: 'poppins', sans-serif;
}
body{
    background-color: #f8fafb;
}
a,a:hover{
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}
a:focus,
button:focus,
button:active,
button.active{
    outline: #0000;
    border-color: #0000 !important;
    box-shadow: none;
}

figure,
table,
tbody,
td,
article,
li,
ul,
ol,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

p {
    margin: 0px;
    margin-bottom: 0px !important;
    padding: 0px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 10px;
}
/* Display */
.py-100{
    padding: calc(40px + (70 - 40) * ((100vw - 320px) / (1920 - 320))) 0;

}

/* Typography */
h1,
.h1{
    font-size: calc(32px + (48 - 32) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2em;
    font-weight: 600;
    font-family: var(--font-gilory);
}

h2,
.h2{
    font-size: calc(26px + (40 - 26) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2em;
    font-weight: 600;
    font-family: var(--font-gilory);
}

h3,
.h3{
    font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2em;
    font-weight: 600;
    font-family: var(--font-gilory);
}

h4,
.h4{
    font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2em;
    font-weight: 600;
    font-family: var(--font-gilory);
}

h5,
.h5{
    font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2em;
    font-weight: 600;
    font-family: var(--font-gilory);
}

h6,
.h6{
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.2em;
    font-weight: 600;
    font-family: var(--font-gilory);
}

p{
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5em;
}

/* Fonts */
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-MediumItalic.eot');
    src: url('../fonts/Gilroy-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-MediumItalic.woff2') format('woff2'),
        url('../fonts/Gilroy-MediumItalic.woff') format('woff'),
        url('../fonts/Gilroy-MediumItalic.ttf') format('truetype'),
        url('../fonts/Gilroy-MediumItalic.svg#Gilroy-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-SemiBold.eot');
    src: url('../fonts/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-SemiBold.woff2') format('woff2'),
        url('../fonts/Gilroy-SemiBold.woff') format('woff'),
        url('../fonts/Gilroy-SemiBold.ttf') format('truetype'),
        url('../fonts/Gilroy-SemiBold.svg#Gilroy-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-RegularItalic';
    src: url('../fonts/Gilroy-RegularItalic.eot');
    src: url('../fonts/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-RegularItalic.woff2') format('woff2'),
        url('../fonts/Gilroy-RegularItalic.woff') format('woff'),
        url('../fonts/Gilroy-RegularItalic.ttf') format('truetype'),
        url('../fonts/Gilroy-RegularItalic.svg#Gilroy-RegularItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.eot');
    src: url('../fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-Regular.woff2') format('woff2'),
        url('../fonts/Gilroy-Regular.woff') format('woff'),
        url('../fonts/Gilroy-Regular.ttf') format('truetype'),
        url('../fonts/Gilroy-Regular.svg#Gilroy-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-UltraLightItalic.eot');
    src: url('../fonts/Gilroy-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-UltraLightItalic.woff2') format('woff2'),
        url('../fonts/Gilroy-UltraLightItalic.woff') format('woff'),
        url('../fonts/Gilroy-UltraLightItalic.ttf') format('truetype'),
        url('../fonts/Gilroy-UltraLightItalic.svg#Gilroy-UltraLightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Thin.eot');
    src: url('../fonts/Gilroy-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-Thin.woff2') format('woff2'),
        url('../fonts/Gilroy-Thin.woff') format('woff'),
        url('../fonts/Gilroy-Thin.ttf') format('truetype'),
        url('../fonts/Gilroy-Thin.svg#Gilroy-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-SemiBoldItalic.eot');
    src: url('../fonts/Gilroy-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Gilroy-SemiBoldItalic.woff') format('woff'),
        url('../fonts/Gilroy-SemiBoldItalic.ttf') format('truetype'),
        url('../fonts/Gilroy-SemiBoldItalic.svg#Gilroy-SemiBoldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-UltraLight.eot');
    src: url('../fonts/Gilroy-UltraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-UltraLight.woff2') format('woff2'),
        url('../fonts/Gilroy-UltraLight.woff') format('woff'),
        url('../fonts/Gilroy-UltraLight.ttf') format('truetype'),
        url('../fonts/Gilroy-UltraLight.svg#Gilroy-UltraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ThinItalic.eot');
    src: url('../fonts/Gilroy-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-ThinItalic.woff2') format('woff2'),
        url('../fonts/Gilroy-ThinItalic.woff') format('woff'),
        url('../fonts/Gilroy-ThinItalic.ttf') format('truetype'),
        url('../fonts/Gilroy-ThinItalic.svg#Gilroy-ThinItalic') format('svg');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-BlackItalic.eot');
    src: url('../fonts/Gilroy-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-BlackItalic.woff2') format('woff2'),
        url('../fonts/Gilroy-BlackItalic.woff') format('woff'),
        url('../fonts/Gilroy-BlackItalic.ttf') format('truetype'),
        url('../fonts/Gilroy-BlackItalic.svg#Gilroy-BlackItalic') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ExtraBold.eot');
    src: url('../fonts/Gilroy-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-ExtraBold.woff2') format('woff2'),
        url('../fonts/Gilroy-ExtraBold.woff') format('woff'),
        url('../fonts/Gilroy-ExtraBold.ttf') format('truetype'),
        url('../fonts/Gilroy-ExtraBold.svg#Gilroy-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-BoldItalic.eot');
    src: url('../fonts/Gilroy-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-BoldItalic.woff2') format('woff2'),
        url('../fonts/Gilroy-BoldItalic.woff') format('woff'),
        url('../fonts/Gilroy-BoldItalic.ttf') format('truetype'),
        url('../fonts/Gilroy-BoldItalic.svg#Gilroy-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Black.eot');
    src: url('../fonts/Gilroy-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-Black.woff2') format('woff2'),
        url('../fonts/Gilroy-Black.woff') format('woff'),
        url('../fonts/Gilroy-Black.ttf') format('truetype'),
        url('../fonts/Gilroy-Black.svg#Gilroy-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ExtraBoldItalic.eot');
    src: url('../fonts/Gilroy-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Gilroy-ExtraBoldItalic.woff') format('woff'),
        url('../fonts/Gilroy-ExtraBoldItalic.ttf') format('truetype'),
        url('../fonts/Gilroy-ExtraBoldItalic.svg#Gilroy-ExtraBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Bold.eot');
    src: url('../fonts/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-Bold.woff2') format('woff2'),
        url('../fonts/Gilroy-Bold.woff') format('woff'),
        url('../fonts/Gilroy-Bold.ttf') format('truetype'),
        url('../fonts/Gilroy-Bold.svg#Gilroy-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-HeavyItalic.eot');
    src: url('../fonts/Gilroy-HeavyItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-HeavyItalic.woff2') format('woff2'),
        url('../fonts/Gilroy-HeavyItalic.woff') format('woff'),
        url('../fonts/Gilroy-HeavyItalic.ttf') format('truetype'),
        url('../fonts/Gilroy-HeavyItalic.svg#Gilroy-HeavyItalic') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Medium.eot');
    src: url('../fonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-Medium.woff2') format('woff2'),
        url('../fonts/Gilroy-Medium.woff') format('woff'),
        url('../fonts/Gilroy-Medium.ttf') format('truetype'),
        url('../fonts/Gilroy-Medium.svg#Gilroy-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Light.eot');
    src: url('../fonts/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-Light.woff2') format('woff2'),
        url('../fonts/Gilroy-Light.woff') format('woff'),
        url('../fonts/Gilroy-Light.ttf') format('truetype'),
        url('../fonts/Gilroy-Light.svg#Gilroy-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-LightItalic.eot');
    src: url('../fonts/Gilroy-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-LightItalic.woff2') format('woff2'),
        url('../fonts/Gilroy-LightItalic.woff') format('woff'),
        url('../fonts/Gilroy-LightItalic.ttf') format('truetype'),
        url('../fonts/Gilroy-LightItalic.svg#Gilroy-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Heavy.eot');
    src: url('../fonts/Gilroy-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gilroy-Heavy.woff2') format('woff2'),
        url('../fonts/Gilroy-Heavy.woff') format('woff'),
        url('../fonts/Gilroy-Heavy.ttf') format('truetype'),
        url('../fonts/Gilroy-Heavy.svg#Gilroy-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Btn design */
.btn {
    font-size: 16px;
    font-weight: 500;
}
.btn-design{
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    padding: 12px 12px;
    background-color: var(--primary-color);
    color: var(--white-color) !important;
    border-radius: 10px;
}
.btn-design:hover{
    border-color: var(--primary-color-dark);
    color: var(--primary-color-dark) !important;
}
.btn-primary:hover {
    background-color: #000;
    opacity: 1;
    border-color: #000;
}
.icon_btn {
    display: flex !important;
    gap: 10px !important;
    justify-content: left !important;
    background: #7f3131;
    border-color: #7f3131;
    font-weight: 700;
    padding: 12px;
    color: #a9a9ae !important;
    width: 100%;
}
.icon_btn:hover{
    background-color: #343641;
    border-color: #343641;
}

.icon_link {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    color: var(--text-xolor);
    line-height: 14px;
}

.icon_link:hover{
    color: var(--primary-color);
}
/* Text Shadow */
.text-shadow{
    text-shadow: 0 0 10px rgba(0 0 0/ 44%);
    color: var(--text-color); 
}

/* Colors */
.color_primary{
    color: var(--primary-color) !important;
}
.color_blue{
    color: var(--blue-color) !important;
}
/* max width */
.mx-545{
    max-width: 545px;
}

@media screen and (max-width: 768px) {
    .md-hide{
        display: none !important;
    }
    .md-block{
        display: block !important;
    }
    .animateSidebar{
        animation: slideIn 0.3s ease-in-out;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
    }

    
}