@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700;900&display=swap');

*{ margin: 0; padding: 0; box-sizing: border-box;}

:root{
    /*======== colors ========*/
    --black: #000;
    --white: #fff;
    --theme: #8e1f06;
    --theme2: #FFA31A;
    --theme3: #203960;
    --header: #0F0D1D;
    --text: #445375;
    --border: #D4DCFF;
    --border-2: #D4DCED;
    --bg: #F3F7FB;
    --box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
    --body: #fff;

    /*======== font ========*/
    --text-font: 'Jost', sans-serif;
}
html {scroll-behavior: smooth;}

body {font-family: var(--text-font); font-size: 16px; font-weight: normal; line-height: 28px; color: var(--text); background-color: var(--white); padding: 0; margin: 0; overflow-x: hidden;}
ul {padding: 0; margin: 0; list-style: none;}
li { margin: 0; padding: 0; list-style: none;}
a {text-decoration: none; outline: none !important; cursor: pointer; color: var(--header); transition: all 0.4s ease-in-out;}
p {margin: 0px; transition: all 0.4s ease-in-out;}
span {margin: 0px; transition: all 0.4s ease-in-out;}
button {border: none; background-color: transparent; padding: 0;}
input:focus {color: var(--white); outline: none;}
input {color: var(--white);}
h1,
h2,
h3,
h4,
h5,
h6 {font-family: var(--text-font); margin: 0px; padding: 0; color: var(--header); text-transform: capitalize; transition: all 0.4s ease-in-out;}
h1 {font-size: 66px; font-weight: 700; line-height: 123%;}
h2 {font-size: 45px; line-height: 125%; font-weight: 700;}
h3 {font-size: 24px; font-weight: 700; line-height: 140%;}
h4 {font-size: 20px; font-weight: 700; line-height: 130%;}
h5 {font-size: 18px; font-weight: 700;}
h6 {font-size: 16px; font-weight: 600; line-height: 145%;}

img {max-width: 100%; height: auto;}

@media (max-width: 1199px) {
    h2 {
      font-size: 42px;
    }
  }
  @media (max-width: 1199px) {
    h2 {
      font-size: 42px;
    }
  }
  @media (max-width: 767px) {
    h2 {
      font-size: 36px;
    }
  }
  @media (max-width: 575px) {
    h2 {
      font-size: 28px;
    }
  }
  @media (max-width: 575px) {
    h3 {
      font-size: 20px;
    }
  }

/* responsive css stat hare */
@media (max-width: 1199px) {
    .header__top {padding: 8px 0;}
    .header__top .left a {font-size: 14px;}
    .header__top .right ul li a {font-size: 14px;}
    .header__top .left .language {font-size: 14px;}
    .header__bottom {padding: 10px 0;}
    .site-logo img {max-width: 150px;}
    .main-menu {padding: 15px 0;}
    .main-menu li a { padding: 8px 0; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
    .main-menu li+li {margin-left: 0;}
    .nav-right {margin-left: 0;}
    .hero .single__slide {padding-top: 275px; padding-bottom: 195px;}
    .hero__title {font-size: 45px;}
    .banner-slider {margin-top: -94px;}
}

@media (max-width: 991px) {
    .banner-slider {margin-top: -70px;}
    .category-card {margin: 0px 10px;}
}

@media (max-width: 767px) {
    .hero__title {font-size: 38px;}
    .banner-slider {margin-top: -75px;}
    .category-card__content .title {font-size: 18px;}
    .about-section .section-content h2 {font-size: 32px;}
}

@media (max-width: 575px) {
    .header__top .left {justify-content: center;}
    .header__top .right ul {justify-content: center;}
    .header__bottom {top: 100px;}
    .hero__title {font-size: 30px;}
    .banner-slider {margin-top: -85px;}
    .about-section .section-content h2 {font-size: 28px;}
}

@media (max-width: 480px) {
    .hero__title {font-size: 25px;}
}

@media (max-width: 320px) {

}