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

html {
  line-height: 1.15; /* Improve readability */
  -webkit-text-size-adjust: 100%; /* Prevent text resizing in iOS */
}

/* Remove list styles on ul, ol elements */
ul,
ol {
  list-style: none;
}

/* Remove headings default margins */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

/* Set default table styles */
table {
  border-collapse: collapse; /* Collapse borders */
  border-spacing: 0; /* Remove space between cells */
}

/* Make sure images scale properly */
img {
  max-width: 100%; /* Responsive images */
  height: auto; /* Maintain aspect ratio */
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  font: inherit; /* Use the same font styles as body */
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Set default styles for input elements */
input,
textarea,
select {
  font: inherit; /* Use the same font styles as body */
  margin: 0; /* Remove margin */
}

/* Add focus styles for accessibility */
:focus {
  outline: 2px solid blue; /* Clear focus outline */
}
:root {
  --schemes-primary: #5f5791;
  --schemes-surface-tint: #5f5791;
  --schemes-on-primary: #ffffff;
  --schemes-primary-container: #e5deff;
  --schemes-on-primary-container: #1b1149;
  --schemes-secondary: #7a580c;
  --schemes-on-secondary: #ffffff;
  --schemes-secondary-container: #ffdea7;
  --schemes-on-secondary-container: #271900;
  --schemes-tertiary: #525a92;
  --schemes-on-tertiary: #ffffff;
  --schemes-tertiary-container: #dee0ff;
  --schemes-on-tertiary-container: #0c154b;
  --schemes-error: #ba1a1a;
  --schemes-on-error: #ffffff;
  --schemes-error-container: #ffdad6;
  --schemes-on-error-container: #410002;
  --schemes-background: #fdf8ff;
  --schemes-on-background: #1c1b20;
  --schemes-surface: #fdf8ff;
  --schemes-on-surface: #1c1b20;
  --schemes-surface-variant: #e5e0ec;
  --schemes-on-surface-variant: #48454e;
  --schemes-outline: #79767f;
  --schemes-outline-variant: #c9c5d0;
  --schemes-shadow: #000000;
  --schemes-scrim: #000000;
  --schemes-inverse-surface: #312f36;
  --schemes-inverse-on-surface: #f4eff7;
  --schemes-inverse-primary: #c8bfff;
  --schemes-primary-fixed: #e5deff;
  --schemes-on-primary-fixed: #1b1149;
  --schemes-primary-fixed-dim: #c8bfff;
  --schemes-on-primary-fixed-variant: #473f77;
  --schemes-secondary-fixed: #ffdea7;
  --schemes-on-secondary-fixed: #271900;
  --schemes-secondary-fixed-dim: #edc06c;
  --schemes-on-secondary-fixed-variant: #5e4200;
  --schemes-tertiary-fixed: #dee0ff;
  --schemes-on-tertiary-fixed: #0c154b;
  --schemes-tertiary-fixed-dim: #bbc3ff;
  --schemes-on-tertiary-fixed-variant: #3a4379;
  --schemes-surface-dim: #ddd8e0;
  --schemes-surface-bright: #fdf8ff;
  --schemes-surface-container-lowest: #ffffff;
  --schemes-surface-container-low: #f7f2fa;
  --schemes-surface-container: #f1ecf4;
  --schemes-surface-container-high: #ebe6ee;
  --schemes-surface-container-highest: #e5e1e9;
  --a-slate-gray: #4b4b4b;
  --color: #fff5ee;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

body {
  font-family: "Montserrat", sans-serif; /* Use a default sans-serif font */
}

/* secondary BTN STYLE */
.secondaryBTN {
  display: flex;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6.25rem;
  border: 2px solid var(--Schemes-Secondary, #7a580c);
  color: var(--Schemes-Secondary, #7a580c);

  /* material-theme/body/large */
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5rem; /* 150% */
  letter-spacing: 0.03125rem;
  justify-content: space-between;
  outline: none;
}
.secondaryBTN:hover {
  border: 2px solid var(--brand-Yellow-Shade-2, #f9d885);
  color: #f9d885;
}

/*primary Button style  */
.primaryBTN {
  display: flex;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 6.25rem;
  background: var(--brand-Brand-Purple, #8c62ff);

  color: #fff;

  /* material-theme/body/large */
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5rem; /* 150% */
  letter-spacing: 0.03125rem;
  text-decoration: none;
  border: none;
  outline: none;
  justify-content: space-between;
}

.primaryBTN:hover {
  background: var(--Schemes-Primary, #5f5791);
}

/* @media (max-width: 650px) {
  .primaryBTN {
    font-size: 14px;
  }
} */
/* header */
header {
  display: flex;
  padding: 1.5rem 4rem;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  background: #f0e5c8;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 999;
}
.header {
  display: flex;
  padding: 0.5rem 1rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 1.875rem;
  background: var(--brand-Brand-white, #f7f8fa);
}
.navLogo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.navLogo i {
  display: none;
}
.navItems {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.5rem;
}
.navItems p a {
  color: var(--brand-Black-Shade-1, #2c2c31);

  /* material-theme/body/large */
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5rem; /* 150% */
  letter-spacing: 0.03125rem;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.navItems p a:hover {
  color: var(--brand-black-shade-2, #7e8390);
}

@media (max-width: 1120px) {
  header {
    padding: 24px 32px;
    width: 100%;
  }
  .navItems {
    gap: 16px;
  }
}

@media (max-width: 650px) {
  .navLogo i {
    display: block;
  }
  .navItems p {
    display: none;
  }
  header {
    display: flex;
    padding: 16px;
  }
  .navLogo img {
    width: 66.087px;
    height: 40px;
  }
}

.mobile-sideBar {
  display: none;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  height: 100vh;
  z-index: 99999999;
  position: fixed;
}
.sideBar-container img {
  width: 66.087px;
  height: 40px;
}
.sideBar-container {
  display: flex;
  flex-direction: column;
  background: var(--brand-Brand-white, #f7f8fa);
  padding: 20px;
  gap: 20px;
  width: 50%;
}
.side-Bar-Items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}
.side-Bar-Items a {
  color: var(--brand-Black-Shade-1, #2c2c31);

  /* material-theme/body/large */
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5rem; /* 150% */
  letter-spacing: 0.03125rem;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;

  color: var(--brand-black-shade-2, #7e8390);
}

.sideBarLogo {
  display: flex;
  align-items: start;
  justify-content: start;
  gap: 8px;
  flex-direction: column;
}
.sideBarLogo i {
  color: var(--schemes-error, #ba1a1a);
}

/* footer */
footer {
  display: flex;
  padding: 50px 64px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  background: var(--brand-Brand-Purple, #8c62ff);
}
.footerNavItems {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.footerNavItems p a {
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 32px; /* 133.333% */
}
.social-media-footer {
  display: flex;
  align-items: center;
  gap: 16px;
}
.social-media-footer i {
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.copyright {
  color: #fff;

  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 32px; /* 133.333% */
}
@media (max-width: 1120px) {
  footer {
    display: flex;
    padding: 50px 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
}

@media (max-width: 480px) {
  footer {
    display: flex;
    padding: 50px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
  footer img {
    width: 100px;
    height: 60.13px;
  }
  .footerNavItems {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
  }
  .footerNavItems p a {
    font-size: 14px;
  }
  .social-media-footer i {
    font-size: 16px;
  }
  .copyright {
    font-size: 12px;
  }
}

/* landing sections */
.landingsection {
  display: flex;
  padding: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    url(./image/abt-landing.jpg) lightgray 1.413px -343.139px / 100% 360% no-repeat;
}
.landingsection h1 {
  color: #fff;
  align-self: stretch;
  font-size: 57px;
  font-style: normal;
  font-weight: 300;
  line-height: 64px; /* 112.281% */
  letter-spacing: -0.25px;
}
.landingsection p {
  color: #fff;
  max-width: 700px;
  align-self: stretch;

  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px;
}
@media (max-width: 1120px) {
  .landingsection {
    display: flex;
    padding: 64px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  .landingsection h1 {
    font-size: 45px;
    line-height: 52px; /* 115.556% */
  }
}
@media (max-width: 700px) {
  .landingsection {
    display: flex;
    padding: 32px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.5) 100%
      ),
      url(./image/abt-landing.jpg) lightgray 1.413px -343.139px / 100% 400% no-repeat;
      object-fit: contain;
  }

  .landingsection h1 {
    font-size: 36px;
    line-height: 44px;
  }
}
.status-message {
  margin-top: 4px;
  font-size: 12px;
  font-weight: bold;

}