@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html{
    scroll-behavior: smooth;
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: rgb(143, 142, 142);
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(126, 123, 123);
}
.body{
    background-color: rgb(255, 255, 255);
}
.header{
    display: grid;
    grid-template-columns: 4fr 6fr;
    background-color: rgb(181, 184, 228);
    width: 100%;
    z-index: 999;
    padding: 20px 0;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s ease;
}
.header .menu-btns{
    margin-left: 180px;
}
.header .menu-btns .menu li{
    list-style: none;
    margin-top: 10px;
    display: inline-block;
}

.header .menu-btns .menu li a{
    display: block;
    color: rgb(50, 54, 129);
    font-size: 20px;
    font-weight: 500;
    margin-left: 25px;
    transition: color 0.3s ease;
}
.header .max-width{
    max-width: 1300px;
    padding: 0 80px;
    margin: auto;
}

#Initial-intro{
    margin-top: 50px;
}
.introduction{
    display: grid;
    grid-template-columns: 3fr 5fr;
}
/* .introduction .circular-pic{
    width: 45%;
    display: inline-block;
} */
.introduction .circular-pic img{
    
    border-radius: 30%;
    
    height: 400px;
    width: 400px;
    object-fit: cover;
    margin-left: 60px ;
}

.introduction .intro-text{
    margin-top: 100px;
    font-size: 25px;
    font-weight: 100;
    margin-bottom: 10px;
    margin-right: 50px;
}