* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
    }
    body {
        background-color: #f5f5f5;
        color: #222;
    }
    h1 {
        text-align: center;
        margin: 20px auto;
        font-size: 35px;
        font-weight: 600;
        text-decoration: underline;
        max-width: 90%;
    }
    .main-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px;
    }
    .common-box {
        display: flex;
        flex-direction: row;
        background-color: white;
        border: 2px solid #e9e6e6;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        width: 90%;
        max-width: 1200px;
        min-height: 600px;
    }
    .pdf-viewer {
        flex: 3;
        min-height: 100%;
        border: none;
    }
    .pdf-viewer iframe {
        width: 100%;
        height: 100%;
        border: none;
        box-shadow: none;
        outline: none;
    }
    .right-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 20px;
        min-width: 250px;
    }
    .right-panel h2 {
        margin-bottom: 20px;
        font-size: 22px;
        text-align: center;
        color: #050505;
    }
    .right-panel a, .right-panel button {
        margin-bottom: 20px;
        width: 90%;
        padding: 12px 10px;
        color: #020202;
        border: 1px solid #33a2e7;
        border-radius: 8px;
        background-color: white;
        text-decoration: none;
        font-size: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }
    .right-panel a:hover, .right-panel button:hover {
        background-color: #0e95e8;
        color: white;
        transform: scale(1.03);
    }

   @media (max-width: 900px) {
    /* Previous mobile styles remain unchanged */
    .common-box {
        flex-direction: column;
        height: auto; /* Changed from 50% to auto for better content fit */
        min-height: 50vh; /* Sets minimum height to 50% of viewport */
        width: 105%; /* Changed from 105% to 100% for proper fit */
        max-width: none; /* Removes any max-width restriction */
    }

    .pdf-viewer {
        width: 100%;
        margin-bottom: -5px;
    }

    /* New: Mobile-specific button arrangement */
    .right-panel > a:not(.linkedin-btn),
    .right-panel > button {
        display: none; /* Hide original buttons in mobile */
    }

    .button-group {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 28px; /* Space between buttons */
        margin: 10px 0;
        margin-left: 2px;
    }

    /* 2. Make buttons equal width */
    .button-group .download-btn,
    .button-group .share-btn {
        flex: 1; /* Equal width */
        max-width: 50%; /* Prevent stretching */
        font-size: 14px;
       padding: 15px 18px !important;
        font-weight: 550 !important;
        margin: 0;
        text-align: center;
        white-space: nowrap;
    }

    /* 3. LinkedIn button styling */
     .linkedin-btn {
        font-size: 14px !important; /* Force the font size */
        padding: 15px 18px !important;
        font-weight: 550 !important;
        width: auto !important;
        max-width: 50% !important;
        margin: 10px auto !important; /* Center the button */
        flex: 1 !important; /* Match flex behavior */
        text-align: center !important;
        white-space: nowrap !important;
        /* Reset any problematic properties */
        margin-left: -10px !important;
        margin-bottom: 5px !important;
        margin-top: 25px !important;
    }

    /* 4. Hide all icons in mobile */
    .right-panel img {
        display: none !important;
    }
    /* Show ONLY the share icon */
    .button-group .share-btn img {
        display: inline-block !important;
        width: 16px; /* Adjust size as needed */
        height: 16px;
        margin-right: 5px;
    }


    .right-panel h2 {
        margin-left: -50px;
    }
}
h1 {
        text-align: center;
        margin: 20px auto;
        font-size: 25px;
        font-weight: 600;
        text-decoration: underline;
        max-width: 80%;
    }
/* Desktop view protection */
@media (min-width: 901px) {
    .button-group {
        display: none; /* Hide mobile button group in desktop */
    }
    .right-panel > a,
    .right-panel > button {
        display: flex; /* Ensure desktop buttons show normally */
    }
}




}