/*------- 1. google fonts start ----------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
/*------- 1. google fonts end ----------*/

/*------- 2. variables start ----------*/
:root {
  --orange: hsl(36, 80%, 50%);
  --white: hsl(0, 0%, 100%);
  --WHITE: hsl(0, 0%, 100%);
  --BLACK: hsl(0, 0%, 0%);
  --black-90: hsl(0, 0%, 10%);
  --black-70: hsl(0, 0%, 30%);
  --black-alpha-40: hsla(0, 0%, 0.4);
  --yellow-light: hsl(44, 95%, 83%);
  --green-light: #96b8d9;
  --red-light: #0a59a6;
  --orange-light: hsl(22, 85%, 0%);
  --select-box-bg-color: hsl(0, 0%, 100%);
  --border-color-1: hsl(0, 0%, 90%);
}
/*------- 2. variables end ----------*/

/*------- 3. base start ----------*/
body {
  background-color: #e6ebf1;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: var(--black-70);
  min-height: 100vh;
  overflow-x: hidden;
}
a {
  color: var(--black-90);
  text-decoration: none;
}
a:hover {
  color: var(--red-light);
}
img {
  max-width: 100%;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--black-90);
  line-height: 1.3;
}
h3 {
  font-size: 20px;
}
::selection {
  color: var(--WHITE);
  background-color: var(--main-color);
}
/*------- 3. base end ----------*/

/*------- 4. box start ----------*/
.box {
  background-color: var(--white);
  border-radius: 5px;
  box-shadow: var(--shadow);
  padding: 30px;
}
/*------- 4. box end ----------*/

/*------- 5. custom bootstrap classes start ----------*/
.container {
  --bs-gutter-x: 15px;
  max-width: 1140px;
}
.row {
  ---bs-gutter-x: 30px;
}
/*------- 5. custom bootstrap classes end ----------*/

/*------- 6. animation keyframes start ----------*/
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*------- 6. animation keyframes end ----------*/

/*------- 7. section, padding, title start----------*/
.section-padding {
  padding: 60px 0;
}
.section-title {
  margin-bottom: 40px;
}
.section-title .title {
  font-size: 20px;
  color: var(--red-light);
  text-transform: capitalize;
}
.section-title .sub-title {
  font-size: 35px;
  font-weight: 600;
  color: var(--black-90);
}
/*------- 7. section, padding, title end----------*/

/*------- 8. header start ----------*/
.header {
  background-color: #c5dcf5;
}
.header-logo a {
  font-size: 26px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--black-70);
}
.header-logo span {
  color: var(--red-light);
}
.header .menu-item {
  display: inline-block;
  margin-left: 40px;
  position: relative;
}
.header .menu-item > a {
  display: block;
  padding: 24px 0;
  font-weight: 400;
  color: var(--BLACK);
  text-transform: capitalize;
  transition: color 0.3s ease;
}
.header .sub-menu-item a:hover,
.header .menu-item:hover > a {
  color: var(--red-light);
}
.header .menu-item > a i {
  font-size: 13px;
  margin-left: 3px;
  pointer-events: none;
}
.header .sub-menu {
  position: absolute;
  top: 100%;
  background-color: var(--white);
  left: 0;
  width: 210px;
  padding: 10px 0;
  border-radius: 5px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
}
@media (min-width: 992px) {
  .header .menu-item:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: rotateY(0);
  }
}
.header .sub-menu-item a {
  display: block;
  padding: 10px;
  color: var(--black-90);
  text-transform: capitalize;
  font-weight: 400;
  transition: color 0.3s ease;
}
.header-backdrop,
.header-close-btn,
.header-hamburger-btn {
  display: none;
}
/*------- 8. heaader end ----------*/

/*------- 9. footer start ----------*/
.footer-top {
  padding: 50px 0 20px;
  border-top: 1px solid var(--border-color-2);
}

.footer-top p {
  font-size: 14px;
}
/*------- 9. footer end ----------*/

form {
  height: 10%;
}

.input-box {
  padding: 28px;
  margin: 20px 20px;
  box-shadow: 0 5px 10px #abb2b9;
  display: flex;
  flex-wrap: wrap;
}

.form-group {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
}
.control-label {
  width: 100%;
}