/* styles.css */
.my-custom-main {
    padding-top: 2rem; /* py-8 */
    padding-bottom: 2rem; /* pb-8 */
    margin-bottom: 1rem; /* space-y-4 */
    position: relative; /* relative */
}

.my-custom-main::before {
    content: "";
    background: linear-gradient(to top, #1D262B, transparent); /* before:bg-gradient-to-t before:from-[#1D262B] before:to-transparent */
    position: absolute; /* before:absolute */
    height: 20rem; /* before:h-20 */
    width: 100%; /* before:w-full */
    top: 0; /* before:inset-0 */
    margin-top: -20rem; /* before:-top-20 */
}

.my-custom-main[_p] {
    display: flex; /* [&_p]:flex */
    align-items: center; /* [&_p]:items-center */
    gap: 0.5rem; /* [&_p]:gap-2 */
    font-size: 0.875rem; /* [&_p]:text-sm */
}

.my-custom-main[_p] > span {
    font-size: 1.125rem; /* [&_p>span]:text-base */
}
/* styles.css */
.my-custom-section {
    padding-left: 1rem; /* pl-4 */
    margin-top: 9px;
    margin-left: 2rem; /* sm:pl-12 */
    margin-bottom: 0.5rem; /* space-y-2 */
    position: relative; /* relative */
}

.my-custom-section::after {
    content: "";
    background: linear-gradient(to left, #1D262B, transparent); /* after:bg-gradient-to-l after:from-[#1D262B] after:to-transparent */
    position: absolute; /* after:absolute */
    height: 100%; /* after:h-full */
    width: 6rem; /* after:w-24 */
    right: 0; /* after:right-0 */
    top: 0; /* after:top-0 */
    z-index: -10; /* after:z-10 */
}

@media (max-width: 500px) {
    .my-custom-section{
        margin-left: 0px;
    }
}
/* styles.css */
.my-custom-footer {
    
        display: flex;
        justify-content: center; /* Horizontal centering */
        align-items: center; /* Vertical centering */
        height: 6vh;
        width: 100%;
        background-image: linear-gradient(to top right, #1D262B, #1e282f);
        line-height: 1.3;
        font-size: 15px; 
        margin-top: 12px;
        transition: background-color 0.3s ease; /* Adding smooth transition */
      }
      .f:last-child {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }
      .my-custom-footer:hover {
        background-image: linear-gradient(to top right, #2d3234, #3c3d3d);
      }
      @media (max-width: 500px) {
        .my-custom-footer{
            margin-top: 40px;
            font-size: 10px; 
        }
       
    }