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

/* General Reset */

/* https://piccalil.li/blog/a-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

/* Set core body defaults */
body {
  --webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
   line-height: 1;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* End General Reset */

:root {
  /* Primary Colors */
  --primary: rgba(34, 191, 246, 1);
  --secondary: rgba(45, 95, 247, 1);
  --tertiary: rgba(40, 101, 170, 1);
  --fourthiary: rgba(253, 197, 0, 1);
  --search-section-bg: rgba(41, 62, 135, 1);
  --carousel-pagination: rgba(45, 95, 247, 1);

  /* Neutral Colors */
  --neutral-1: hsl(0, 0%, 100%);
  --neutral-2: hsl(0, 0%, 0%);

  /* Other Colors */
  --color-1: rgba(240, 248, 251, 1);
  --color-2: rgba(229, 248, 252, 1);
  --color-3: rgba(254, 240, 195, 1);
  --color-4: rgba(223, 247, 234, 1);
  --color-5: rgba(238, 247, 250, 1);
  --color-6: rgba(120, 119, 124, 1);
  --color-7: rgba(241, 242, 243, 1);
  --color-8: rgba(159, 170, 171, 1);
  --color-9: rgba(248, 113, 82, 1);
  --color-10: rgba(166, 115, 244, 1);
  --color-11: rgba(232, 250, 245, 1);
  --color-12: rgba(16, 153, 119, 1);
  --color-13: rgba(24, 22, 22, 1);
  --color-14: rgba(159, 170, 172, 1);
  --color-15: rgba(242, 243, 244, 1);
  --color-16: rgba(0, 206, 156, 1);
  --color-17: rgba(24, 119, 242, 1);
  --search-form-bg: rgba(241, 242, 243, 1);
  --footer-bg: rgba(23, 22, 22, 1);
  --footer-divisor: rgba(121, 121, 124, 1);

  /* Gradients Colors */
  --gradient-gray-1: rgba(190,190,190,0.75);
  --gradient-gray-2: rgba(238,238,238,0.75);

  --gradient-black-1: rgb(25,25,25);
  --gradient-black-2: rgb(63,63,63);


  /* Fonts Family */
  --ff-body: 'Poppins', sans-serif;
  --ff-special: 'Inter', sans-serif;

  /* Fonts Weight */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;

  /* Font Size */
  --fs-header: 2rem;
  --fs-body: 1rem;

  /* Sections Heights */
  --sh-general: 600px;
  --sh-small: 400px;

  /* Gap */
  --flex-gap: 2rem;
  --p-gap: 1rem;
  --list-gap: 0.5rem;

  /* Border Radius */
  --br-container: 20px;
  --br-review-container: 30px;
  --br-input: 5px;
  --br-btn: 60px;

  /* Special Padding Section */
  --padding-tb: 2.5rem;
  --bar-height: 1rem;
}

body {
  height: fit-content !important;
  background: var(--neutral-1) !important;
  color: var(--neutral-2) !important;
  font-family: var(--ff-body) !important;
  font-weight: var(--fw-regular) !important;
  
  overflow-inline: hidden !important;
}

/* General */
.container-padding {
  padding: 75px 0;
}

@media (max-width: 650px) {
  .container-padding {
    padding: 50px 0;
  }
}

.container {
  width: 100% !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding-inline: 2rem !important;

  overflow: hidden !important;
}

.height {
  height: 100%;
}

@media screen and (max-width: 450px) {
  .container {
    padding-inline: 1rem !important;
  }
}

.h1 {
  font-size: clamp(1.75rem, 1.2658rem + 2.0657vw, 3.125rem) !important;
  font-weight: var(--fw-extra-bold) !important;
}

.h2 {
  font-weight: var(--fw-semibold) !important;
}

.h3 {
  font-weight: var(--fw-medium) !important;
}

.flex {
  display: flex !important;
  flex-wrap: wrap !important;
}

a {
  text-decoration: none !important;
}

ul, ol {
  list-style: none !important;
}

.btn-default {
  cursor: pointer !important;
  border: none;
  border-radius: var(--br-btn);
  padding: 8px 12px;
  font-weight: var(--fw-semibold);
}

.btn-style-1 {
  background: var(--neutral-1);
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-style-2 {
  border: 2px solid var(--primary);
  background: var(--primary);
  color: var(--neutral-1);
}

.link-style-1 {
  color: var(--secondary);
}

@media (hover: hover) {
  .btn-style-1:hover {
    background: var(--primary);
    color: var(--neutral-1);
    transition: 0.20s ease-in-out;
  }

  .btn-style-2:hover {
    background: var(--neutral-1);
    color: var(--primary);
    transition: 0.20s ease-in-out;
  }

  .link-style-1:hover {
    color: var(--primary);
  }
}

@media screen and (max-width: 500px) {
  .h1, .h2 {
    
  }
}
/* End General */