:root {
            --midnight-blue: #263258;
            --off-white-beige: #F2F1EF;
            --sand-brown: #D0C5B4;
            --pistachio-cream: #8F7E2D;
            --dusty-black: #242422;
        }

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

        body {
            background-color: var(--off-white-beige);
            color: var(--midnight-blue);
            font-family: 'Roboto', sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Main Content */
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: start;
            padding-top: 60px;
            align-items: center;
            text-align: center;
            gap: 70px;
        }

        .logo-container {
            max-width: 500px;
            width: 100%;
            animation: fadeIn 1.5s ease-out;
        }

        .logo-container img {
            width: 100%;
            height: auto;
        }

        .content {
            letter-spacing: 0.1rem;
            /* text-transform: uppercase; */
            color: var(--midnight-blue);
            font-weight: 700;
            margin-bottom: 1rem;
            animation: slideUp 1s ease-out;
            display: grid;
            justify-items: center;
            gap: 70px;
        }

        h1 {
            font-size: 2rem;
            font-weight: 300;
            color: var(--midnight-blue);
        }

        .pdf-section h4 {
            font-size: 1rem;
            font-weight: normal;
            /* color: var(--midnight-blue); */
        }

        .pdf-section p{}

        .pdf-section .company-our-pr-link a {
            font-size: 1.1rem;
            font-weight: 400;
            color: var(--midnight-blue);
            text-decoration: none;
        }

.pdf-section .company-our-pr-link a:hover {
    color: red;
    color: var(--pistachio-cream);
}






        .content > div.main-text {
            position: relative;
            height: auto;
        }

        .main-message {
            padding-top: 70px;
            /* padding-bottom: 20px; */
        }

        .pdf-section {
            /* padding-top: 70px;
            padding-bottom: 20px; */
            /*display: none;*/
        }


        .content > div.main-text img {
            width: 50px;
            position: absolute;
        }

        img.left-shape {
            top: -15px;
            left: -50px;
        }

        .content > div.main-text .parag-div {
            display: grid;
            justify-items: end;
        }

        img.right-shape {
            bottom: -50px;
            right: -50px;
        }


        .description {
            color: var(--midnight-blue);
        }

        .description-title {
            max-width: 600px;
            padding-bottom: 15px;
        }


        .description-expert {
            font-size: 21px;
            font-weight: 300;
            max-width: 600px;
            letter-spacing: 0rem;
        }


        /* Footer with Company Details */
        footer {
            background-color: white;
            padding: 2.5rem 1rem;
            border-top: 1px solid var(--sand-brown);
            font-family: 'IBM Plex Sans', sans-serif;
        }

        .footer-content {
            max-width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            text-align: center;
        }

        .company-name {
            font-weight: 600;
            color: var(--midnight-blue);
            font-size: 0.95rem;
            margin-bottom: 0.5rem;
        }

        .details-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem 2rem;
            font-size: 0.85rem;
            color: var(--midnight-blue);
        }

        .detail-item span {
            font-weight: 600;
            color: var(--pistachio-cream);
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }


/* Track */
::-webkit-scrollbar {
    width: 6px;
    /* Width of the scrollbar */
    padding-right: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #263258;
    /* Color of the scrollbar thumb */
    border-radius: 5px;
    /* Rounded corners for the thumb */
}

/* Track on hover */
::-webkit-scrollbar-thumb:hover {
    background: #1f2847;
    /* Change color on hover */
}


@media screen and (max-width: 768px) {



    ::-webkit-scrollbar {
        width: unset;
        padding-right: unset;
    }

    ::-webkit-scrollbar-thumb {
        background: unset;
        border-radius: unset;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: unset;
    }


}




        /* Responsive */


        @media screen and (max-width: 768px) {

            main{
                gap: 60px;
            }

            .logo-container {
                max-width: 400px;
            }
            
            h1 {
                font-size: 1.5rem;
            }

            .description-title {
                font-size: 20px;
            }



    ::-webkit-scrollbar {
        width: unset;
        padding-right: unset;
    }

    ::-webkit-scrollbar-thumb {
        background: unset;
        border-radius: unset;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: unset;
    }




        }

        @media screen and (max-width: 560px) {

            .logo-container {
                max-width: 300px;
                width: 100%;
                animation: fadeIn 1.5s ease-out;
            }
            h1 {
                font-size: 1rem;
            }

            .description-expert {
                font-size: 18px
            }

            .content > div.main-text img {
                width: 35px;
            }

            img.right-shape {
                right: -35px;
                bottom: -30px;
            }

            img.left-shape {
                left: -35px;
                top: -15px;
            }

            .main-message {
                padding-top: 120px;
            }

            .pdf-section {
                padding-top: 120px;
            }
            
        }


        @media screen and (max-width: 425px) {
            h1 {
                font-size: 1rem;
                padding: 0px 5px 15px 5px;
            }

            .description-expert {
                font-size: 13px;
            }

            .content > div.main-text img {
                width: 31px;
            }

            img.right-shape {
                right: -31px;
                bottom: -30px;
            }

            img.left-shape {
                left: -31px;
                top: -15px;
            }

        }