@media(max-width:575px) {

  .navbar-brand {
    color: var(--Primary_CL, #406550);
    font-family: "Libertinus Math";
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .profile-icon {
    width: 35px;
    height: 35px;
    position: relative;

  }

  .notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    border: 1px solid white;
  }


  /* Animations */
  @keyframes slideInLeft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-left {
    animation: slideInLeft 1s ease-out;
  }

  .animate-right {
    animation: slideInRight 1s ease-out;
  }

  .upload-box {

    padding: 20px;
    text-align: center;
    border-radius: 5px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0.7px solid var(--Primary_CL, #406550);
    background: var(--Neutral_FFF, #FFF);
  }

  .uploaded-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #E7E7E7;
    background: var(--bgColor-light, #FFF);
  }

  .uploaded-file img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
  }

  .form-control,
  .form-select {
    margin-bottom: 15px;
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 12.5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }

  .animate-right input {
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 12.5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }


  .form-container {
    background: #6B482C;
    box-shadow: 0 0 28.9px 0 rgba(206, 206, 206, 0.40);
    padding: 20px 30px;


    margin-top: 100px;
    margin-bottom: 50px;
  }

  .submit-btn {
    background: var(--Primary_CL, #406550);
    padding: 10px;
    border: none;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */

  }

  .time {
    background-color: #d5d2d2;
    border-radius: 50%;
  }

  .animate-right {
    margin-top: 20px;
  }

  .animate-left h4 {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--lineHeights-xxl, 26px);
    /* 81.25% */
    letter-spacing: var(--letterSpacing-xsm, -0.2px);
  }

  .animate-left p {
    color: var(--Heading_Text_CL, #101828);
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 100% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  strong {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--lineHeights-sm, 18px);
    /* 128.571% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  small {
    color: #6D6D6D;
    font-family: "Abhaya Libre";
    font-size: var(--fontSize-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 142.857% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  .navbar-title {
    color: var(--Heading_Text_CL, #101828);
    font-family: Parastoo;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 48px */
    margin-left: 50px;
    margin-right: 50px;
    margin: 0px auto;
  }
  .popover-menu {
    position: absolute;
    right: 0;
    top: 60px;
    width: 200px;
    background-color: white;
    border: 1px solid #e5e5e5;
    display: none;
    z-index: 999;
  }

  .popover-menu a {
    display: block;
    padding: 10px 15px;
    color: #8D8D8D;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 133.333% */
    text-decoration: none;
  }

  .popover-menu .badge {
    float: right;
  }

  .logout-btn {
    width: 100%;
    color: var(--Neutral_FFF, #FFF);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 133.333% */
    background: var(--Primary_CL, #406550);
    border: none;
    padding: 10px 0;
  }


  .footer {
    padding: 54px;
    background: var(--Primary_CL, #406550);
  }

  .footer h5 {
    color: var(--nutral-ffffff, #FFF);
    font-family: Parastoo;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    /* 39px */
  }

  .footer a {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    text-decoration: none;
    text-align: center;
  }

  .address {
    align-items: center;
    justify-content: center;
  }

  .footer p {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    background-color: transparent;
    border: none;
    text-align: center;
    padding: 0%;
  }

  .address {
    align-items: center;
    justify-content: center;
  }

  .p {
    align-items: center;
    justify-content: center;
  }

  .lists {
    text-align: center;
  }

  .footer h3 {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Libertinus Math";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
  }

  .footer-bottom {
    border-top: 1px solid #89A16D;
    margin-top: 30px;
    padding-top: 15px;
    font-size: 14px;

  }

  .footer-bottom p {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .footer-bottom a {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .btn-delete {
    background: #A1021B;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;

  }

  .btn-update {
    background: var(--Primary_CL, #406550);
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;
  }
}

@media (min-width:576px) and (max-width:766.99px) {

  .navbar-brand {
    color: var(--Primary_CL, #406550);
    font-family: "Libertinus Math";
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .profile-icon {
    width: 35px;
    height: 35px;
    position: relative;

  }

  .notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    border: 1px solid white;
  }


  /* Animations */
  @keyframes slideInLeft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-left {
    animation: slideInLeft 1s ease-out;
  }

  .animate-right {
    animation: slideInRight 1s ease-out;
  }

  .upload-box {

    padding: 20px;
    text-align: center;
    border-radius: 5px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0.7px solid var(--Primary_CL, #406550);
    background: var(--Neutral_FFF, #FFF);
  }

  .uploaded-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #E7E7E7;
    background: var(--bgColor-light, #FFF);
  }

  .uploaded-file img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
  }

  .form-control,
  .form-select {
    margin-bottom: 15px;
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 12.5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }

  .animate-right input {
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 12.5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }


  .form-container {
    background: #6B482C;
    box-shadow: 0 0 28.9px 0 rgba(206, 206, 206, 0.40);
    padding: 20px 30px;


    margin-top: 100px;
    margin-bottom: 50px;
  }

  .submit-btn {
    background: var(--Primary_CL, #406550);
    padding: 10px;
    border: none;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */

  }

  .time {
    background-color: #d5d2d2;
    border-radius: 50%;
  }

  .animate-right {
    margin-top: 20px;
  }

  .animate-left h4 {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--lineHeights-xxl, 26px);
    /* 81.25% */
    letter-spacing: var(--letterSpacing-xsm, -0.2px);
  }

  .animate-left p {
    color: var(--Heading_Text_CL, #101828);
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 100% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  strong {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--lineHeights-sm, 18px);
    /* 128.571% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  small {
    color: #6D6D6D;
    font-family: "Abhaya Libre";
    font-size: var(--fontSize-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 142.857% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  .navbar-title {
    color: var(--Heading_Text_CL, #101828);
    font-family: Parastoo;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 48px */
    margin-left: 100px;
    margin-right: 100px;
  }
  .popover-menu {
    position: absolute;
    right: 0;
    top: 60px;
    width: 200px;
    background-color: white;
    border: 1px solid #e5e5e5;
    display: none;
    z-index: 999;
  }

  .popover-menu a {
    display: block;
    padding: 10px 15px;
    color: #8D8D8D;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 133.333% */
    text-decoration: none;
  }

  .popover-menu .badge {
    float: right;
  }

  .logout-btn {
    width: 100%;
    color: var(--Neutral_FFF, #FFF);
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 133.333% */
    background: var(--Primary_CL, #406550);
    border: none;
    padding: 10px 0;
  }

  .footer {
    padding: 54px;
    background: var(--Primary_CL, #406550);
  }

  .p {
    align-items: center;
    justify-content: center;
  }

  .footer h5 {
    color: var(--nutral-ffffff, #FFF);
    font-family: Parastoo;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    /* 39px */
  }

  .footer a {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    text-decoration: none;
    text-align: center;
  }

  .address {
    align-items: center;
    justify-content: center;
  }

  .footer p {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    background-color: transparent;
    border: none;
    text-align: center;
    padding: 0%;
  }

  .lists {
    text-align: center;
  }

  .footer h3 {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Libertinus Math";
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
  }

  .footer-bottom {
    border-top: 1px solid #89A16D;
    margin-top: 30px;
    padding-top: 15px;
    font-size: 14px;

  }

  .footer-bottom p {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .footer-bottom a {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .btn-delete {
    background: #A1021B;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;

  }

  .btn-update {
    background: var(--Primary_CL, #406550);
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;
  }
}

@media (min-width: 767px) and (max-width: 991.99px) {

  .navbar-brand {
    color: var(--Primary_CL, #406550);
    font-family: "Libertinus Math";
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .profile-icon {
    width: 35px;
    height: 35px;
    position: relative;

  }

  .notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    border: 1px solid white;
  }


  /* Animations */
  @keyframes slideInLeft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-left {
    animation: slideInLeft 1s ease-out;
  }

  .animate-right {
    animation: slideInRight 1s ease-out;
  }

  .upload-box {

    padding: 20px;
    text-align: center;
    border-radius: 5px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0.7px solid var(--Primary_CL, #406550);
    background: var(--Neutral_FFF, #FFF);
  }

  .uploaded-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #E7E7E7;
    background: var(--bgColor-light, #FFF);
  }

  .uploaded-file img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
  }

  .form-control,
  .form-select {
    margin-bottom: 15px;
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 12.5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }

  .animate-right input {
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 12.5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }


  .form-container {
    background: #6B482C;
    box-shadow: 0 0 28.9px 0 rgba(206, 206, 206, 0.40);
    padding: 20px 30px;


    margin-top: 100px;
    margin-bottom: 50px;
  }

  .submit-btn {
    background: var(--Primary_CL, #406550);
    padding: 10px;
    border: none;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */

  }

  .time {
    background-color: #d5d2d2;
    border-radius: 50%;
  }

  .animate-right {
    margin-top: 20px;
  }

  .animate-left h4 {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--lineHeights-xxl, 26px);
    /* 81.25% */
    letter-spacing: var(--letterSpacing-xsm, -0.2px);
  }

  .animate-left p {
    color: var(--Heading_Text_CL, #101828);
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 100% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  strong {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--lineHeights-sm, 18px);
    /* 128.571% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  small {
    color: #6D6D6D;
    font-family: "Abhaya Libre";
    font-size: var(--fontSize-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 142.857% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  .navbar-title {
    color: var(--Heading_Text_CL, #101828);
    font-family: Parastoo;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 48px */
    margin-left: 180px;
    margin-right: 200px;
  }
  .popover-menu {
    position: absolute;
    right: 0;
    top: 60px;
    width: 200px;
    background-color: white;
    border: 1px solid #e5e5e5;
    display: none;
    z-index: 999;
  }

  .popover-menu a {
    display: block;
    padding: 10px 15px;
    color: #8D8D8D;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 133.333% */
    text-decoration: none;
  }

  .popover-menu .badge {
    float: right;
  }

  .logout-btn {
    width: 100%;
    color: var(--Neutral_FFF, #FFF);
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 133.333% */
    background: var(--Primary_CL, #406550);
    border: none;
    padding: 10px 0;
  }


  .footer {
    padding: 50px 100px 50px 100px;
    background: var(--Primary_CL, #406550);
  }

  .address {
    padding-left: 10px;
  }

  .links {
    padding-left: 40px;
  }

  .footer h5 {
    color: var(--nutral-ffffff, #FFF);
    font-family: Parastoo;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    /* 39px */
  }

  .footer a {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    text-decoration: none;
  }

  .footer p {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    background-color: transparent;
    border: none;
    text-align: left;
    padding: 0%;
  }

  .footer h3 {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Libertinus Math";
    font-size: 42px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
  }

  .footer-bottom {
    border-top: 1px solid #89A16D;
    margin-top: 30px;
    padding-top: 15px;
    font-size: 14px;

  }

  .footer-bottom p {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .footer-bottom a {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .btn-delete {
    background: #A1021B;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;

  }

  .btn-update {
    background: var(--Primary_CL, #406550);
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-brand {
    color: var(--Primary_CL, #406550);
    font-family: "Libertinus Math";
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .profile-icon {
    width: 35px;
    height: 35px;
    position: relative;

  }

  .notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    border: 1px solid white;
  }


  /* Animations */
  @keyframes slideInLeft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-left {
    animation: slideInLeft 1s ease-out;
  }

  .animate-right {
    animation: slideInRight 1s ease-out;
  }

  .upload-box {

    padding: 20px;
    text-align: center;
    border-radius: 5px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0.7px solid var(--Primary_CL, #406550);
    background: var(--Neutral_FFF, #FFF);
  }

  .uploaded-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #E7E7E7;
    background: var(--bgColor-light, #FFF);
  }

  .uploaded-file img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
  }

  .form-control,
  .form-select {
    margin-bottom: 15px;
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 12.5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }

  .animate-right input {
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 12.5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }


  .form-container {
    background: #6B482C;
    box-shadow: 0 0 28.9px 0 rgba(206, 206, 206, 0.40);
    padding: 20px 30px;


    margin-top: 100px;
    margin-bottom: 50px;
  }

  .submit-btn {
    background: var(--Primary_CL, #406550);
    padding: 10px;
    border: none;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */

  }

  .time {
    background-color: #d5d2d2;
    border-radius: 50%;
  }

  .animate-left h4 {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--lineHeights-xxl, 26px);
    /* 81.25% */
    letter-spacing: var(--letterSpacing-xsm, -0.2px);
  }

  .animate-left p {
    color: var(--Heading_Text_CL, #101828);
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 100% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  strong {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--lineHeights-sm, 18px);
    /* 128.571% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  small {
    color: #6D6D6D;
    font-family: "Abhaya Libre";
    font-size: var(--fontSize-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 142.857% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  .navbar-title {
    color: var(--Heading_Text_CL, #101828);
    font-family: Parastoo;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 48px */
    margin-left: 300px;
    margin-right: 300px;
  }
  .popover-menu {
    position: absolute;
    right: 0;
    top: 60px;
    width: 200px;
    background-color: white;
    border: 1px solid #e5e5e5;
    display: none;
    z-index: 999;
  }

  .popover-menu a {
    display: block;
    padding: 10px 15px;
    color: #8D8D8D;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 133.333% */
    text-decoration: none;
  }

  .popover-menu .badge {
    float: right;
  }

  .logout-btn {
    width: 100%;
    color: var(--Neutral_FFF, #FFF);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 133.333% */
    background: var(--Primary_CL, #406550);
    border: none;
    padding: 10px 0;
  }


  .footer {
    padding: 50px 150px 50px 150px;
    background: var(--Primary_CL, #406550);
  }

  .address {
    padding-left: 80px;
  }

  .links {
    padding-left: 150px;
  }

  .footer h5 {
    color: var(--nutral-ffffff, #FFF);
    font-family: Parastoo;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    /* 39px */
  }

  .footer a {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    text-decoration: none;
  }

  .footer p {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    background-color: transparent;
    border: none;
    text-align: left;
    padding: 0%;
  }

  .footer h3 {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Libertinus Math";
    font-size: 44px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
  }

  .footer-bottom {
    border-top: 1px solid #89A16D;
    margin-top: 30px;
    padding-top: 15px;
    font-size: 14px;

  }

  .footer-bottom p {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .footer-bottom a {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .btn-delete {
    background: #A1021B;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;

  }

  .btn-update {
    background: var(--Primary_CL, #406550);
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;
  }

}

@media (min-width: 1200px) and (max-width: 1399.98px) {

  .navbar-brand {
    color: var(--Primary_CL, #406550);
    font-family: "Libertinus Math";
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .profile-icon {
    width: 35px;
    height: 35px;
    position: relative;
  }

  .notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    border: 1px solid white;
  }


  /* Animations */
  @keyframes slideInLeft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-left {
    animation: slideInLeft 1s ease-out;
  }

  .animate-right {
    animation: slideInRight 1s ease-out;
  }

  .upload-box {

    padding: 20px;
    text-align: center;
    border-radius: 5px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0.7px solid var(--Primary_CL, #406550);
    background: var(--Neutral_FFF, #FFF);
  }

  .uploaded-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #E7E7E7;
    background: var(--bgColor-light, #FFF);
  }

  .uploaded-file img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
  }

  .form-control,
  .form-select {
    margin-bottom: 15px;
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }

  .animate-right input {
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }


  .form-container {
    background: #6B482C;
    box-shadow: 0 0 28.9px 0 rgba(206, 206, 206, 0.40);
    padding: 20px 30px;


    margin-top: 100px;
    margin-bottom: 50px;
  }

  .submit-btn {
    background: var(--Primary_CL, #406550);
    padding: 10px;
    border: none;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */

  }

  .time {
    background-color: #d5d2d2;
    border-radius: 50%;
  }

  .animate-left h4 {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: var(--lineHeights-xxl, 26px);
    /* 81.25% */
    letter-spacing: var(--letterSpacing-xsm, -0.2px);
  }

  .animate-left p {
    color: var(--Heading_Text_CL, #101828);
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 100% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  strong {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--lineHeights-sm, 18px);
    /* 128.571% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  small {
    color: #6D6D6D;
    font-family: "Abhaya Libre";
    font-size: var(--fontSize-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 142.857% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  .navbar-title {
    color: var(--Heading_Text_CL, #101828);
    font-family: Parastoo;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 48px */
    margin-left: 380px;
    margin-right: 400px;
  }
  .popover-menu {
    position: absolute;
    right: 0;
    top: 60px;
    width: 200px;
    background-color: white;
    border: 1px solid #e5e5e5;
    display: none;
    z-index: 999;
  }

  .popover-menu a {
    display: block;
    padding: 10px 15px;
    color: #8D8D8D;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 133.333% */
    text-decoration: none;
  }

  .popover-menu .badge {
    float: right;
  }

  .logout-btn {
    width: 100%;
    color: var(--Neutral_FFF, #FFF);
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 133.333% */
    background: var(--Primary_CL, #406550);
    border: none;
    padding: 10px 0;
  }


  .footer {
    padding: 50px 150px 50px 150px;
    background: var(--Primary_CL, #406550);
  }

  .address {
    padding-left: 110px;
  }

  .links {
    padding-left: 180px;
  }

  .footer h5 {
    color: var(--nutral-ffffff, #FFF);
    font-family: Parastoo;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    /* 39px */
  }

  .footer a {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    text-decoration: none;
  }

  .footer p {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    background-color: transparent;
    border: none;
    text-align: left;
    padding: 0%;
  }

  .footer h3 {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Libertinus Math";
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
  }

  .footer-bottom {
    border-top: 1px solid #89A16D;
    margin-top: 30px;
    padding-top: 15px;
    font-size: 14px;

  }

  .footer-bottom p {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .footer-bottom a {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .btn-delete {
    background: #A1021B;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;

  }

  .btn-update {
    background: var(--Primary_CL, #406550);
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;
  }
}


@media (min-width: 1400px) {
  .navbar-brand {
    color: var(--Primary_CL, #406550);
    font-family: "Libertinus Math";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .profile-icon {
    width: 35px;
    height: 35px;
    position: relative;
  }

  .notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    border: 1px solid white;
  }


  /* Animations */
  @keyframes slideInLeft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-left {
    animation: slideInLeft 1s ease-out;
  }

  .animate-right {
    animation: slideInRight 1s ease-out;
  }

  .upload-box {

    padding: 20px;
    text-align: center;
    border-radius: 5px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0.7px solid var(--Primary_CL, #406550);
    background: var(--Neutral_FFF, #FFF);
  }

  .uploaded-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #E7E7E7;
    background: var(--bgColor-light, #FFF);
  }

  .uploaded-file img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
  }

  .form-control,
  .form-select {
    margin-bottom: 15px;
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 17px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }

  .animate-right input {
    color: #667085;
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    /* 166.667% */
    border: 1px solid #EFEFEF;
    background: #FFF;
    display: flex;
    padding: 17px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
  }


  .form-container {
    background: #6B482C;
    box-shadow: 0 0 28.9px 0 rgba(206, 206, 206, 0.40);
    padding: 20px 30px;


    margin-top: 100px;
    margin-bottom: 50px;
  }

  .submit-btn {
    background: var(--Primary_CL, #406550);
    padding: 10px;
    border: none;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */

  }

  .time {
    background-color: #d5d2d2;
    border-radius: 50%;
  }

  .animate-left h4 {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: var(--lineHeights-xxl, 26px);
    /* 81.25% */
    letter-spacing: var(--letterSpacing-xsm, -0.2px);
  }

  .animate-left p {
    color: var(--Heading_Text_CL, #101828);
    font-family: "Abhaya Libre";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 100% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  strong {
    color: #0B0B0B;
    font-family: Parastoo;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--lineHeights-sm, 18px);
    /* 128.571% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  small {
    color: #6D6D6D;
    font-family: "Abhaya Libre";
    font-size: var(--fontSize-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--lineHeights-md, 20px);
    /* 142.857% */
    letter-spacing: var(--letterSpacing-md, 0);
  }

  .navbar-title {
    color: var(--Heading_Text_CL, #101828);
    font-family: Parastoo;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 48px */
    margin-left: 450px;
    margin-right: 400px;
  }

  .popover-menu {
    position: absolute;
    right: 0;
    top: 60px;
    width: 200px;
    background-color: white;
    border: 1px solid #e5e5e5;
    display: none;
    z-index: 999;
  }

  .popover-menu a {
    display: block;
    padding: 10px 15px;
    color: #8D8D8D;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 133.333% */
    text-decoration: none;
  }

  .popover-menu .badge {
    float: right;
  }

  .logout-btn {
    width: 100%;
    color: var(--Neutral_FFF, #FFF);
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    /* 133.333% */
    background: var(--Primary_CL, #406550);
    border: none;
    padding: 10px 0;
  }

  .footer {
    padding: 50px 150px 50px 150px;
    background: var(--Primary_CL, #406550);
  }

  .address {
    padding-left: 174px;
  }

  .links {
    padding-left: 280px;
  }

  .footer h5 {
    color: var(--nutral-ffffff, #FFF);
    font-family: Parastoo;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    /* 39px */
  }

  .footer a {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    text-decoration: none;
  }

  .footer p {
    color: var(--nutral-ffffff, #FFF);
    font-family: "Abhaya Libre";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 28px */
    background-color: transparent;
    border: none;
    text-align: left;
    padding: 0%;
  }

  .footer h3 {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Libertinus Math";
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
  }

  .footer-bottom {
    border-top: 1px solid #89A16D;
    margin-top: 30px;
    padding-top: 15px;
    font-size: 14px;

  }

  .footer-bottom p {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  .footer-bottom a {
    color: var(--Neutral_FFF, #FFF);
    font-family: "Abhaya Libre";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    /* 137.5% */
  }

  /* Custom style for select2 to match Bootstrap */
  .select2-container--default .select2-selection--single {
    height: 38px;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
  }

  .btn-delete {
    background: #A1021B;
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;

  }

  .btn-update {
    background: var(--Primary_CL, #406550);
    color: #FFF;
    font-family: "Abhaya Libre";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 166.667% */
    border: none;
    padding: 10px;
  }
}