* {
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 255, 0.471);
    border-radius:10px;
}
::-webkit-scrollbar-track{
    background-color: rgb(255, 255, 255);
}
html,
body {
    width: 100%;
    height: 100%;
   /* color: white; */
}

body {
    font-family: Arial, sans-serif;
}

header {
    background-color: rgba(241, 241, 241, 0.627);
    color: #00000071;
    padding: 10px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    height: 70px;
}

.flag-gradient-text {
    font-size: 38px;
    font-weight: bold;
    background: linear-gradient(to right, #ff5e00, #514bba, #138808);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
}

header h1 {
    margin: 0;
}

#introduction {
    width: 98%;
    height: 70%;
    margin-left: 1%;
    margin-right: 1%;
    padding: 5px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:30px ;
    margin-bottom: 30px;
    /* overflow-y: auto; */
}



#right {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    padding-right: 100px;
}

#right img:hover {
    height: 105%;
    
}


#right img {
    height: 99%;
    object-fit: cover;
    object-position: top;
    box-shadow: 0px 4px 32px 0.64567px black;
    border: radius 10px; ;
    transition: all 0.2s ease-in-out;
    border-left:10px solid rgb(255, 140, 0)  ;
    border-right: 10px solid green ;
    /* margin-right: 30px; */
}

#left {
    height: 80%;
    background-color: rgba(241, 241, 241, 0.888);
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: justify;
    padding: 8px;
    gap: 20px;
    color: rgb(0, 0, 0);
    transition: all 0.2s ease-in-out;
    box-shadow: 0px 8px 32px 0.66789px rgba(0, 0, 0, 0.573);
    overflow:hidden ;
    margin-left: 50px;
}

#left:hover {
    padding: 12px;
    
}

#left h2 {
    font-size: 35px;
    color: rgb(0, 0, 0);
}

.container {
    /* max-width: 1200px; */
    width: 100%;
    height: 100%;
    /* margin: auto; */
}

h2 {
    color: #333;
}

#early-life {
    width: 98%;
    height: 70%;
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#left1 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 40%;
    height: 80%;
}

#left1 img {
    height: 100%;
    object-fit: contain;
    object-position: top;
    transition: all 0.2s ease-in-out;
    border-radius: 50%;
    box-shadow: 0px 4px 32px 0.6789px rgb(41, 174, 4);
}
#left1 img:hover{
    /* height: 100%;
    border: 0.3px solid grey; */
    box-shadow: 0px 4px 32px 0.6789px rgb(255, 145, 0);
}

#right1 {
    width: 35%;
    margin-right: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    text-align: justify;
    background-color: rgba(241, 241, 241, 0.888);
    padding: 35px;
    gap: 20px;
    /* border-radius: 10px; */
    
    box-shadow: 0px 8px 32px 0.66789px rgba(0, 0, 0, 0.573);
    transition: all 0.2s ease-in-out;
}
#right1:hover{
    padding: 40px;
}
#right1 p{
    /* margin-top : px ; */
    width: 88%;
    line-height: 1.2;
}
#presidency{
    width: 98%;
    height: 70%;
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#left2{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    background-color: rgba(241, 241, 241, 0.888);
    padding: 35px;
    gap: 20px;
    width: 35%;
    height: 70%;
    box-shadow: 0px 8px 32px 0.66789px rgba(0, 0, 0, 0.573);
    transition: all 0.2s ease-in-out;
    margin-left: 50px;
}

#left2:hover{
    padding: 40px;
}

#right2 {
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    height: 98%;
    width: 50%;
    /* background-color: black ; */
    /* padding-right: 100px; */
}

#right2 img:hover {
    height: 62%;
}


#right2 img {
    height: 60%;
    object-fit: cover;
    object-position: top;
    box-shadow: 0px 4px 32px 0.64567px black;
    border-radius: 10px; ;
    transition: all 0.2s ease-in-out;
    border-left:10px solid rgb(255, 140, 0)  ;
    border-right: 10px solid green ;
}
#right2 p{
    padding-top: 50px;
}
#awards{
    width: 98%;
    height: 70%;
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#right3{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    background-color: rgba(241, 241, 241, 0.888);
    padding: 35px;
    gap: 20px;
    width: 35%;
    height: 70%;
    box-shadow: 0px 8px 32px 0.66789px rgba(0, 0, 0, 0.573);
    transition: all 0.2s ease-in-out;
    margin-right: 50px;
}
#right3:hover{
    padding: 40px;
}
#left3{
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    height: 98%;
    width: 50%;
}
#left3 img{
    height: 50%;
    object-fit: cover;
    object-position: top;
    box-shadow: 0px 4px 32px 0.64567px black;
    border-radius: 10px; ;
    transition: all 0.2s ease-in-out;
    border-left:10px solid rgb(255, 140, 0)  ;
    border-right: 10px solid green ;
}

#left3 img:hover {
    height: 52%;
}
#legacy{    
    width: 98%;
    height: 70%;
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#left4{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    background-color: rgba(241, 241, 241, 0.888);
    padding: 35px;
    gap: 20px;
    width: 35%;
    height: 70%;
    box-shadow: 0px 8px 32px 0.66789px rgba(0, 0, 0, 0.573);
    transition: all 0.2s ease-in-out;
    margin-left: 50px;
}
#left4:hover{
    padding: 40px;
}
#right4{
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    height: 98%;
    width: 50%;
}
#right4 img{
    height: 60%;
    object-fit: cover;
    object-position: top;
    box-shadow: 0px 4px 32px 0.64567px black;
    border-radius: 10px; ;
    transition: all 0.2s ease-in-out;
    border-left:10px solid rgb(255, 140, 0)  ;
    border-right: 10px solid green ;
}
#right4 img:hover{
    height: 62%;
}
.tribute-section {
    padding: 40px;
    background-color: #fffbf2;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    width: 80%;
    margin: 20px auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.tribute-section h2 {
    text-align: center;
    font-size: 2em;
    color: #2c3e50;
    margin-bottom: 20px;
}
.tribute-section p {
    font-size: 1.2em;
    color: #34495e;
    line-height: 1.6;
}
.tribute-section em {
    font-style: italic;
    font-weight: bold;
}

footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}
footer a {
    color: #f39c12;
    text-decoration: none;
    margin: 0 10px;
}
footer a:hover {
    text-decoration: underline;
}
.quote {
    font-style: italic;
    margin: 15px 0;
}
.social-icons img {
    width: 30px;
    margin: 0 5px;
}
@media screen and (max-width: 850px) {
    header {
        flex-direction: column;
        height: auto;
        padding: 10px 0;
    }

    .flag-gradient-text {
        font-size: 20px; /* Smaller text for the gradient header */
    }

    header h1 {
        font-size: 14px; /* Reduced font size for the header */
    }

    #introduction,
    #early-life,
    #presidency,
    #awards,
    #legacy {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        margin-bottom: 20px;
        margin-left: 0;  /* Remove left margin */
        margin-right: 0; /* Remove right margin */
        height: auto; /* Allow sections to expand naturally */
    }

    #right,
    #left1,
    #right2,
    #left3,
    #right4 {
        width: 100%;
        margin: 10px 0;
        padding: 0;
    }

    #right img,
    #left1 img,
    #right2 img,
    #left3 img,
    #right4 img {
        width: 85%; /* Reduce image width */
        height: auto;
        margin: 0 auto; /* Center images */
    }

    #left,
    #right1,
    #left2,
    #right3,
    #left4 {
        width: 100%; /* Make divs take full width */
        padding: 10px;
        margin: 15px 0;
        box-shadow: none; /* Remove box shadow for a cleaner look */
    }

    #left h2,
    #right1 h2,
    #left2 h2,
    #right3 h2,
    #left4 h2 {
        font-size: 18px; /* Reduced font size for section headers */
    }

    #left p,
    #right1 p,
    #left2 p,
    #right3 p,
    #left4 p {
        font-size: 12px; /* Smaller font size for paragraph text */
        line-height: 1.4;
    }

    .tribute-section {
        width: 100%; /* Take full width */
        padding: 20px;
        margin-bottom: 20px;
        margin-left: 0;  /* Remove left margin */
        margin-right: 0; /* Remove right margin */
    }

    .tribute-section h2 {
        font-size: 20px; /* Reduced font size for the tribute section title */
    }

    .tribute-section p {
        font-size: 12px; /* Smaller font size for tribute section paragraphs */
    }

    footer {
        padding: 15px;
    }

    footer a {
        font-size: 12px; /* Smaller font size for footer links */
    }

    .social-icons img {
        width: 20px;
    }

    /* Remove hover effects */
    #right img,
    #left1 img,
    #right2 img,
    #left3 img,
    #right4 img {
        transition: none;
    }

    #left,
    #right1,
    #left2,
    #right3,
    #left4 {
        transition: none;
        padding: 10px;  /* Consistent padding for divs */
        margin: 15px 0; /* Consistent margins */
        background-color: rgba(241, 241, 241, 0.888); /* Maintain background color */
        box-shadow: none; /* Remove hover-related shadow */
    }

    /* Remove hover effects on information divs */
    #left:hover,
    #right1:hover,
    #left2:hover,
    #right3:hover,
    #left4:hover {
        padding: 10px; /* Maintain consistent padding */
    }
}
* {
    box-sizing: border-box;
}
#introduction, #early-life, #presidency, #awards, #legacy {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

@media screen and (max-width: 850px) {
    #introduction,
    #early-life,
    #presidency,
    #awards,
    #legacy {
        flex-direction: column;
        padding: 0;
    }
}