@font-face {
  font-display: swap;
  font-family: poppins;
  font-style: normal;
  font-weight: 300;
  src: url(fonts/Poppins-Thin.woff2) format("woff2"),url(fonts/Poppins-Thin.woff) format("woff")
  }
  
  @font-face {
  font-display: swap;
  font-family: poppins;
  font-style: normal;
  font-weight: 400;
  src: url(fonts/Poppins-Regular.woff2) format("woff2"),url(fonts/Poppins-Regular.woff) format("woff")
  }
  
  @font-face {
  font-display: swap;
  font-family: poppins;
  font-style: normal;
  font-weight: 500;
  src: url(fonts/Poppins-Medium.woff2) format("woff2"),url(fonts/Poppins-Medium.woff) format("woff")
  }
  
  @font-face {
  font-display: swap;
  font-family: poppins;
  font-style: normal;
  font-weight: 600;
  src: url(fonts/Poppins-SemiBold.woff2) format("woff2"),url(fonts/Poppins-SemiBold.woff) format("woff")
  }
  
  @font-face {
  font-display: swap;
  font-family: poppins;
  font-style: normal;
  font-weight: 700;
  src: url(fonts/Poppins-Bold.woff2) format("woff2"),url(fonts/Poppins-Bold.woff) format("woff")
  }
  
  @font-face {
  font-display: swap;
  font-family: poppins;
  font-style: normal;
  font-weight: 800;
  src: url(fonts/Poppins-ExtraBold.woff2) format("woff2"),url(fonts/Poppins-ExtraBold.woff) format("woff")
  }
  :root{
  --font-family-primary: "Poppins",sans-serif;
  --font-size-default: 16px;
  --line-height-dafault: 1.4;
  --line-height-secondary: 1.6;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  
  --color-primary: #463f3a;  
  --color-secondary: #bee3db; 
  --color-accent: #555b6e; 
  --color-light: #FFFFFF;    
  --color-dark: #0F1B2D;  

  --border-radius-primary: 15px;
  --border-color: #dee2e6;
  
  --box-shadow-primary: 0 6px 15px rgba(0,0,0,.08); 
  }
  *,*::after,*::before{margin: 0;padding: 0;box-sizing: border-box;}
  html {scroll-behavior: smooth;font-family: var(--font-family-primary);}
  body{
    color: var(--color-primary);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-default-400);
    --h1-font-size: 38px;
    --h2-font-size: 34px;
    --h3-font-size: 30px;
    --h4-font-size: 26px;
    --h5-font-size: 22px;
    --h6-font-size: 18px;
    --h1-line-height: 46px;
    --h2-line-height: 38px;
    --h3-line-height: 34px;
    --h4-line-height: 26px;
    --h5-line-height: 22px;
    --h6-line-height: 18px;
    --container-width: 	100%;
}
@media(min-width: 576px) {
    body {
        --container-width:540px;
    }
}
@media(min-width: 768px) {
    body {
        --container-width:720px;
    }
}
@media(min-width:768px) and (max-width:1199.98px){
    body{
        --h1-font-size: 48px;
        --h2-font-size: 40px;
        --h3-font-size: 32px;
        --h4-font-size: 28px;
        --h5-font-size: 24px;
        --h6-font-size: 20px;
        --h1-line-height: 58px;
        --h2-line-height: 50px;
        --h3-line-height: 40px;
        --h4-line-height: 36px;
        --h5-line-height: 32px;
        --h6-line-height: 30px;
    }
}
@media(min-width: 992px) {
    body {
        --container-width:960px;
    }
}
@media(min-width:1200px){
    body{
        --h1-font-size: 60px;
        --h2-font-size: 48px;
        --h3-font-size: 40px;
        --h4-font-size: 32px;
        --h1-line-height: 72px;
        --h2-line-height: 58px;
        --h3-line-height: 50px;
        --h4-line-height: 40px;
        --h5-line-height: 32px;
        --h6-line-height: 30px;
        --container-width: 1140px;
    }
}
@media only screen and (min-width: 1280px) {
    body {
      --container-width:1200px
    }
    }

h1,.h1{font-size: var(--h1-font-size);line-height: var(--h1-line-height);letter-spacing: var(--h1-letter-spacing-600);}
h2,.h2{font-size: var(--h2-font-size);line-height: var(--h2-line-height);letter-spacing: var(--h2-letter-spacing-600);}
h3,.h3{font-size: var(--h3-font-size);line-height: var(--h3-line-height);letter-spacing: var(--h3-letter-spacing-600);}
h4,.h4{font-size: var(--h4-font-size);line-height: var(--h4-line-height);letter-spacing: var(--h4-letter-spacing-600);}
h5,.h5{font-size: var(--h5-font-size);line-height: var(--h5-line-height);letter-spacing: var(--h5-letter-spacing-600);}
h6,.h6{font-size: var(--h6-font-size);line-height: var(--h6-line-height);letter-spacing: var(--h6-letter-spacing-600);}
a{text-decoration: none;}
img{max-width: 100%;height: auto;}
li{list-style-type: none;}
button{border: none;outline: none;}
input{outline: none;}
p{line-height: var(--line-height-secondary);}
.container{max-width: var(--container-width);width: 100%;margin-left: auto;margin-right: auto;padding-left: 1rem;padding-right: 1rem;}
.primary-btn {font-size: 16px; font-weight: 600; text-align: center;padding: 8px 20px;background-color: transparent; border-radius: 10px; border: 1px solid #1B3A57; transition: 0.5s; position: relative; overflow: hidden; cursor: pointer; z-index: 1;color: var(--color-primary);display: inline-block;box-shadow: var(--box-shadow-primary);font-family: var(--font-family-primary); }
.primary-btn::after, .primary-btn::before { content: ""; display: block; height: 100%; width: 100%; transform: skew(90deg) translate(-50%, -50%); position: absolute; inset: 50%; left: 25%; z-index: -1; transition: 0.5s ease-out; background-color: var(--color-primary); }
.primary-btn::before { top: -50%; left: -25%; transform: skew(90deg) rotate(180deg) translate(-50%, -50%); }
.primary-btn:hover::before { transform: skew(45deg) rotate(180deg) translate(-50%, -50%); }
.primary-btn:hover::after { transform: skew(45deg) translate(-50%, -50%); }
.primary-btn:hover { color: #fff; }
.primary-btn:active { filter: brightness(0.7); transform: scale(0.98); }