@layer components {
  .cover-container {
    position: relative;
    height: 165px;
    z-index: 299;
    @apply transition-transform duration-300 ease-linear;
  }

  .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cover-container .cover-image,
  .cover-container .fixed-cover-tint {
    @apply rounded-t-lg;
  }

  .fixed-cover {

    @apply h-[140px] lg:h-[80px] top-[60px] sticky z-[299] shadow-md;

    .cover-image,
    .fixed-cover-tint {
      @apply rounded-none block ;
    }

    .profile-container {
      @apply fixed-profile;
    }

    #profile-image {
      @apply border-2 h-[56px] w-[56px];
    }

    #upload-profile i{
      @apply hidden;
    }
    .fixed-cover-tint {
      @apply absolute h-full w-full bg-black opacity-45 z-[1100];
    }
    .profile-name {
      @apply font-bold text-[20px] leading-[30px] text-base-white;
    }
    .profile-designation {
      @apply fixed-profile-designation;
    }
  }

  .full-cover {

      @apply w-full md:mb-[180px] lg:mb-[130px];

      .fixed-cover-tint {
        @apply hidden;
      }
      #profile-image {
        @apply border-4 h-[160px] w-[160px];
      }
      .profile-name {
        @apply font-semibold text-[30px] leading-[38px] text-base-black;
      }
      .profile-designation {
        @apply profile-designation-full;
      }
    }


  /* fixed navigation */

  .fixed-nav {
    position: sticky;
    z-index: 100;
    @apply top-[182px] md:top-[80px];
  }

  /* fixed navigation */


  .profile-container {
    position: absolute;
    top: 133px;
    /* height: auto; */
    width: 100%;
    z-index: 1500;
    @apply flex flex-wrap gap-3 px-[24px] justify-between w-full;
  }

  .profile-image {
    /* height: 100%;
  width: 100%; */
    border-radius: 50%;
    object-fit: cover;
    @apply border-solid border-white animation;
    /* box-shadow: 0 6px 8px -2px rgba(16, 24, 40, 0.08); */
  }

  .profile-designation {
    @apply font-normal;
  }

  .profile-designation-full {
    @apply text-[18px] leading-[28px] text-custom-grey-600;
  }

  .fixed-profile-designation {
    @apply mt-[-5px] text-[16px] leading-[24px] text-custom-grey-300;
  }

  .fixed-profile {
    position: absolute;
    top: 12px;
    width: 100%;
    z-index: 1500;
  }

  .animation {
    transition: all linear .5s
  }
}