body {
        font-family: 'Montserrat', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #F4F4F4; 
      }
    /* Reset CSS */
    * {
    font-family: inherit; 
    }
    body {
    background-color: #f4f4f4;
    color: #000;
    }
    h1 {
    font-size: 40px;
    line-height: 120%;
    font-weight: normal;
    font-weight: 500;
    margin: 10px 0 5px;
    }
    h2 {
    font-size: 26px;
    line-height: 120%;
    font-weight: normal;
    font-weight: 500;
    }
   h3 {
      font-size: 28px;
      line-height: 1.3;
      font-weight: 600;
      font-family: 'Ivar';
    }
   h4 {
      font-size: 22px;
      line-height: 1.4;
      font-weight: 500;
      font-family: 'Ivar';
    }
   h5 {
      font-size: 18px;
      line-height: 1.4;
      font-weight: 500;
      font-family: 'ABCDiatype';
    }
   h6 {
      font-size: 16px;
      line-height: 1.4;
      font-weight: 500;
      font-family: 'ABCDiatype';
      
    }
    p {
      font-size: 16px;
      line-height: 1.6;
      font-weight: 400;
     font-family: 'ABCDiatype';
      
    }
      .header {
        background-color: rgba(121, 112, 158, 1);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
      }
      .header .logo {
        font-size: 24px;
        font-weight: bold;
      }
      .header .contact-support {
        background-color: rgba(243, 201, 72, 1);
        padding: 17px 17px;
        color: black;
        border-radius: 5px;
        text-decoration: none;
        border-radius: 11px;
      }
      .hero {
        text-align: center;
        background: url('https://40166028.fs1.hubspotusercontent-na1.net/hubfs/40166028/Build%201%20%282%29.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
        padding: 60px 0;
      }
      .section.section-explore h2 {
            margin-bottom: 10px;
        }
      .hero h1 {
        font-size: 28px;
      }
      .search-container h2 {
        font-size: 30px;
        font-weight: 500;
    }
      .progress-bar {
        width: 50%;
        height: 10px;
        background: #EAE1F7;
        border-radius: 5px;
        margin: 20px auto;
        overflow: hidden; 
      }
      .progress-bar div {
        width: 30%;
        height: 100%;
        background: #6F5BA7;
      }
      .section {
        padding: 40px 0 0;
        text-align: left;
        width: 80%;
        margin: 0 auto;
      }
      .grid-container {
        display: flex;
        justify-content: left;
        gap: 30px;
        flex-wrap: wrap;
      }
      .grid-item-explore {
        background: white;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid rgba(213, 213, 213, 1);
        text-align: center;
      }
      .grid-item img {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
      }
.grid-container {
  display: grid; 
  grid-template-columns: repeat(6, 1fr); 
  gap: 30px;     
  padding: 20px 0px 0;
}
.grid-item {
        background: white;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid rgba(213, 213, 213, 1);
        text-align: center;
      }
.grid-item img {
  width: 50px; 
  height: 50px;  
  margin-bottom: 10px;  
}
.grid-item-1 h4 {
    font-weight: 500;
    font-size: 20px;
    margin: 10px 0;
}
.section.section-help-desk h2 {
    margin: 0 0 10px;
}
@media (max-width: 1366px) {
    .grid-container {
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
    }
    .hero h1 {
    font-size: 28px; 
    margin-bottom: 20px; 
}
.hero {

    padding: 30px 0;  
}
}
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
  }
  .hero {
    background: #CEBFFF !important;  
}
.footer-nav div {
    width: 33% !important;
}
.footer-nav {
    padding-bottom: 30px;
}
.footer h1 {
    margin-bottom: 30px;
    text-align: left;
    color: #79709E;
    font-size: 26px;
    padding-top: 40px;
}

  
}
@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr; /* 1 column on very small screens */
  }
  .section {
    width: 92% !important;
}
.footer-nav div {
    width: 50% !important; 
}
}
.footer {
    background-color: #E9E6FF; 
    color: black;
    padding: 60px 0 60px;
    display: flex;
    align-items: center; 
    justify-content: center;      
}
.footer-links h4 {
    margin: 0 0 10px;       
}
      .footer-content {
        display: flex;           
        flex-direction: column;           
      }       
      .footer h1 {
        margin-bottom: 30px; 
        text-align: left; 
        color: #79709E; 
    }
    .footer h1 em{
        font-style: italic;
    }
      .footer-links {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 20px;
      }
    .footer-links a {
    background: #C9BFE9;
    padding: 30px 20px 15px;
    border-radius: 13px;
    text-decoration: none;
    font-size: 18px;
    color: #79709E;
    display: flex;
    width: 100%;
    }
.footer-links a::after {
    content: url(https://40166028.fs1.hubspotusercontent-na1.net/hubfs/40166028/Arrow4.png);
    font-size: 27px;
    margin-left: auto;
    background-color: #79709E;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    align-content: center; 
    justify-content: center; 
    align-items: center;
    margin-top: auto;
}
.box p {
    margin: 0px;
    font-size: 14px;
    color: #79709E;
    text-align: left;
    padding: 0;
}
      .footer-nav {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 20px;
        border-top: 1px solid #79709E;
        padding-top: 20px;
        text-align: center;
      }
      .footer-nav div {
        width: 15%;
      }
      .footer-nav h3 {
    font-size: 20px;
    margin-bottom: 17px;
    color: #7062AC;
    font-weight: 400;
}
      .footer-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .footer-nav ul li {
        margin-bottom: 5px;
      }
      .footer-bottom {
    text-align: center;
    background: #736A99;
    padding: 15px;
    color: #D9D5F7;
}
      .footer-bottom a {
        color: white;
        text-decoration: none;
        margin: 0 10px;
      }
      .conainer-w {
    width: 80% !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-link {
    color: #E5974D;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
}
.custom-link:hover {
    color: #E9E6FF;
}
.grid-container-explore {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 20px 0px;
}
@media (max-width: 1366px) {
    .grid-container-explore {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
    .footer-nav h3 {
    font-size: 16px;
}
.footer-nav h3 {
    font-size: 16px;
    margin-bottom: 17px;
    color: #7062AC;
    font-weight: 500;
}
.grid-container-explore a {
    text-decoration: none;
    color: #000000;
    display: inline-block;
    padding: 30px 8px;
}
.section.section-help-desk .grid-container-explore a h3 {
    margin: 10px 0 0;
}
}
@media (max-width: 768px) {
    .grid-container-explore {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
    .grid-container-explore {
    grid-template-columns: 1fr;
  }
}
.section-footer {
    /* padding: 40px; */
    /* text-align: left; */
    width: 80%;
    margin: 0 auto;
    display: flex
;
    justify-content: space-between;
    height: 80px;
    align-items: center;
}
.footer-w {
    width: 80%;
}
.footer-cookies a {
    color: #D9D5F7;
}
.grid-container a {
  text-decoration: none;
  color: #000000;
  display: inline-block; /* Ensures the entire text and image are clickable */
}
.grid-container a h3 {
  font-size: 18px;
  font-weight: 500; /* Regular weight */
  color: #000000;
  margin: 0;
}
.grid-container a:hover h3 {
  color: #F3C948;
}
.grid-container-explore a {
  text-decoration: none;
  color: #000000;
  display: inline-block; /* Ensures the entire text and image are clickable */
}
.section.section-help-desk .grid-container-explore a h3 {
  font-size: 24px;
  font-weight: 500; /* Regular weight */
  color: #000000;
}
.grid-container-explore a h3 {
  font-size: 18px;
  font-weight: 500; /* Regular weight */
  color: #000000;
}
.grid-container-explore a:hover h3 {
  color: #F3C948;
}
.hs-search-field__input {
    background-color: #FFFFFF;
    padding: 15px;
    border-radius: 7px;
    border: 1px solid #ccc;
    width: 34%;
}
#hs_cos_wrapper_hs_kb-search-input-module_ svg {
    height: 0px;
}
.hs-search-field__button {
    background-color: #79709E;
    padding: 15px;
    border-radius: 3px 7px 7px 3px;
    border: none;
    cursor: pointer;
    color: white;
    width: 16%;
    margin-left: -70px;
}
#hs_kb-search-input-module-input:focus {
    outline: none;
    box-shadow: none;
}
.hs-search-field__button:hover {
    background-color: #665F8A;
}
.section.resourcesSec h2 {
    margin: 0 0 10px;
}
.section.resourcesSec {
    padding: 20px;
}
@media (max-width: 1024px) {
    .footer-links {
    flex-wrap: wrap;
    }}
@media (max-width: 768px) {
    .footer-nav div {
    width: 100%;
}
    .conainer-w {
    width: 100% !important;
    display: flex
;
    justify-content: space-between;
    align-items: center;
}
.footer {
    background-color: #E9E6FF;
    color: black;
    padding: 0px;
    display: flex
;
    align-items: center;
    justify-content: center;
}
.hs-search-field__input {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    width: 70%;
}
}
.grid-item-Ref {
    background: white;
    padding: 32px;
    border-radius: 10px;
    border: 1px solid rgba(213, 213, 213, 1);
    text-align: center;
}
.footer-nav a {
  text-decoration: none; /* Removes underline */
  color: inherit; /* Uses the default text color */
}
.footer-nav a:hover {
  color: #E5974D; /* Changes color on hover */
}

    </style>
  </head>
  <body>