body {
    background-color: whitesmoke;
    font-family: 'Segoe UI';
    margin: 0;
    padding: 0;

    .writing-title {
        padding: 1px;
        color: whitesmoke;
        background-color: rgba(116,89,144,255);
        text-indent: 2%;
    }
    .indent {
        p {
            text-indent: 50px;
            line-height: 1.5;
        }  
    } 
    .doc {
        text-align: center;
        padding: 5%;
    }
}

.navbar {
    background-color: rgb(82, 33, 103);
    padding: 5px;
    a {
        display: inline-block;
        text-decoration: none;
        margin: 5px;
        padding: 15px;
        color: aliceblue;
        transition: 0.5s;
    }
    a:hover {
        background-color: rgb(50, 7, 67);
    }
    .active {
        background-color: #7304aa;
      }    
}

.sidenav {
    background-color: rgb(141, 102, 158);
    padding: 0.5px;
    width: 180px; /* Set the width of the sidebar */
    position:absolute; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 100; /* Stay at the top */
    right: 0;
    background-color: #111; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    a {
        display: inline-block;
        text-decoration: none;
        margin: 1px;
        padding: 15px;
        color: aliceblue;
        transition: 0.5s;
    }
    a:hover {
        background-color: rgb(110, 70, 128);
    }
    .active {
        color: #c95dff;
      }    
}


.banner {
    .banner-img {
        filter: brightness(50%);
        width: 100%;
        height: auto;
        position: relative;
        text-align: center;
        
    }
    .Myname {
        color: white;
        font-size: 65px;
        font-weight: bold;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
        'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        position:absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    p{
        color: white;
        font-size: 20px;
        font-weight: bold;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 
        'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        position: absolute;
        text-align: center;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }  
}

  
a {
    text-align: center;
    color: rgb(117, 32, 154);
    text-decoration: none;
}


.content1 {
    .profile-img {
        margin: 2%;
        float: left;
        width: 200px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .profile-card {
        padding: 5%;
    }
}

.content2 {
    margin-left: 30px;
    margin-right: 30px;
    line-height: 1.6;
    
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 40px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
}

.content3 {
   padding: 3%;
}

.content4 {
    padding: 3%;
}

.content5 {
    .writing-title {
        padding: 1px;
        margin: auto;
        color: whitesmoke;
        background-color: rgba(116,89,144,255);
        text-indent: 5%;
    }
    
    .content_p {
        .per_1 {
            width: 1050px;
            height: 300px;
            display: inline-block;  
        }
    }
    
    .content_i {
        .intell_1 {
            width: 1050px;
            height: 300px;
            display: inline-block;  
        }
    }

    .content_s {
        .soc_1 {
            width: 1050px;
            height: 280px;
            display: inline-block;
        }
    }

    .content_f {
        .fin_1 {
            width: 1050px;
            height: 300px;
            display: inline-block;  
        }
    }    
}

.content6 {
    padding: 5%;

    .card6-1 {
        margin: 40px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border: solid 2px black;
        display: inline-block;
        text-align: left;
        .img6-1 {
            border-bottom: solid 2px black;
            width: 450px;
            height: 280px;
            display: inline-block;           
        }  
        .text6-1 {
            text-align: center;
        }
    }

    .card6-2 {
        margin: 40px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border: solid 2px black;
        display: inline-block;
        text-align: right;
        .img6-2 {
            border-bottom: solid 2px black;
            width: 450px;
            display: inline-block;           
        } 
        .text6-2 {
            text-align: center;
        }
    }

    .card6-3 {
        margin: 40px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border: solid 2px black;
        display: inline-block;
        text-align: center;
        .img6-3 {
            border-bottom: solid 2px black;
            width: 450px;
            height: 270px;
            display: inline-block;         
        } 
        .text6-3 {
            text-align: center;
        }
    } 

    .card6-4 {
        margin: 40px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border: solid 2px black;
        display: inline-block;
        text-align: center;
        .img6-4 {
            border-bottom: solid 2px black;
            width: 450px;
            height: 280px;
            display: inline-block;         
        } 
        .text6-4 {
            text-align: center;
        }
    } 

    .card6-5 {
        margin: 40px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border: solid 2px black;
        display: inline-block;

        .img6-5 {
            border-bottom: solid 2px black;
            width: 450px;
            display: inline-block;           
        } 
        
        .text6-5 {
            text-align: center;
        }
    } 

    .card6-6 {
        margin: 40px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border: solid 2px black;
        display: inline-block;

        .img6-6 {
            border-bottom: solid 2px black;
            width: 450px;
            display: inline-block;           
        } 
        
        .text6-6 {
            text-align: center;
        }
    } 

    .card6-7 {
        margin: 40px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border: solid 2px black;
        display: inline-block;

        .img6-7 {
            border-bottom: solid 2px black;
            width: 450px;
            height: 280px;
            display: inline-block;           
        } 
        
        .text6-7 {
            text-align: center;
        }
    }

    .card6-8 {
        margin: 40px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border: solid 2px black;
        display: inline-block;

        .img6-8 {
            border-bottom: solid 2px black;
            width: 450px;
            height: 280px;
            display: inline-block;           
        } 
        
        .text6-8 {
            text-align: center;
        }
    }
}

.content7 {
    padding: 3%;
    .img7-1 {
        float: right;
        margin: 2%;
        width: 400px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
            0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
}