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

body {
    background-color: #f6f8f9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    min-height: 100%;
}

header {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #edf3f5;
}

.headerF {
    display: flex;
    flex-direction: row;
    height: 60px;
    background-color: #ffffff;
}

.header1 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 18px;
    width: 18%;
    border-right: 1px solid #edf3f5;
}

.linkedIn-icon {
    width: 25px;
    height: 25px;
}

.search-container {
    width: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #edf3f5;
    position: relative;
}

.search-input {
    width: 130px;
    height: 22px;
    border: 1px solid #edf3f5;
    border-radius: 10px;
    font-size: 12px;
    padding: 12px 40px 12px 12px;
    outline: none;
}

.search-container .searchB {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.h-word {
    width: 40%;
    border-right: 1px solid #edf3f5;
}

ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 29px;
    transition: transform 0.3s ease; 
}

li:hover {
    transform: translateY(-1.5px);
}

#nav-bar ul {
    padding-top: 21px;
}

a {
    text-decoration: none;
    color: #535760;
    transition: transform 0.3s ease; 
    font-size: 14px;
}

.colored {
    color: #f78c8e;
}

.icons {
    width: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #edf3f5;
    gap: 22px;
}

.size-6 {
    width: 20px;
    height: 20px;
}

.searchB {
    width: 16px;
    height: 16px;
}

.message {
    color: #92dba8;
    transition: transform 0.3s ease; 
}

.bell {
    color: #f1c40f;
    transition: transform 0.3s ease; 
}

.person {
    color: #9b58b6;
    transition: transform 0.3s ease; 
}

.message:hover, .bell:hover, .person:hover {
    transform: translateY(-1.5px);
}

.header2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 18px;
}

.avatar-icon, .avatar2-icon, .avatar3-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.headerS {
    display: flex;
    flex-direction: row;
    height: 30px;
    background-color: #ffffff;
    border-top: 1px solid #edf3f5;
    padding-left: 200px;
    padding-top: 6px;
    gap: 40px;
}

.headerS span {
    position: relative;
    display: inline-block; 
    cursor: pointer;
    font-size: 12px;
    color: #535760;
}

.headerS span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 1px; 
    width: 0%;
    height: 2px; 
    background: #5eb5e6;
    /* transition: width 0.3s ease; */
}

.headerS span:hover::after {
    width: 100%;
}

main {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.leftsidebar {
    width: 200px;
    height: 450px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #edf3f5;
}

.leftsidebar1 {
    width: 100%;
    height: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #edf3f5;
    gap: 6px;
}

.bill-gates {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
}

.leftsidebar1 span {
    color: black;
    font-size: 17px;
    font-weight: bold;
}

.fir {
    font-size: 12px;
    color: #535760;
}

.sec {
    font-size: 12px;
    color: #cacdce;
}

.follow-btn {
    padding: 10px 20px;
    background: #5eb5e6;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.2s ease;
    width: 100px;
    height: 30px;
}

.connect-btn {
    display: flex;
    flex-direction: row;
    padding: 10px 20px;
    background: #ffffff;
    color: #5eb5e6;
    border: 1px solid #5eb5e6;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.2s ease;
    width: 100px;
    height: 30px;
    gap: 4px;
}

 .follow-btn:hover { 
    background-color: #2d9dde;
}

.connect-btn:hover {
    background-color: #f1f8fb;
}

.arrow {
    width: 18px;
    height: 18px;
}

.leftsidebar2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 15%;
    border-bottom: 1px solid #edf3f5;
    padding: 0 10px;
}

.firs {
    border-right: 1px solid #edf3f5;
    padding: 15px;
}

.firs p {
    font-size: 12px;
    font-weight: bold;
    color: black;
}

.firs span {
    font-size: 10px;
    color: #cacdce;
}

.seco {
    padding: 10px;
}

.seco p {
    font-size: 12px;
    font-weight: bold;
    color: black;
}

.seco span {
    font-size: 10px;
    color: #cacdce;
}

.leftsidebar3 {
    width: 100%;
    height: 15%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-bottom: 1px solid #edf3f5;
    padding-left: 20px;
    padding-top: 10px;
}

.lsb3 {
    color: #cacdce;
    width: 12px;
    height: 12px;
    padding: auto;
}

.leftsidebar3 a {
    font-size: 10px;
    color: #cacdce;
}

.leftsidebar3 a:hover {
    text-decoration: underline;
}

.size-3 {
    width: 12px;
    height: 12px;
    color: #cacdce;
}

.leftsidebar4 {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 15%;
    color: #cacdce;
    padding-left: 20px;
}

.middlecontent {
    width: 600;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
}

.middlecontent1 {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #edf3f5;
}

.middlecontent1F {
    width: calc(100% + 20px);
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #edf3f5;
}

.middlecontent1F h2 {
    font-size: 16px;
    font-weight: 500;
}

.arowMC {
    width: 25px;
    height: 25px;
    padding: 7px;
    background-color: transparent;
    border-radius: 50%;
    color: black;
    border: 1px solid black;
    cursor: pointer;
    transition: 0.2s ease;
}

.arowMC:hover {
    animation: pulse 0.5s;
}

@keyframes pulse {
    50% { transform: scale(1.1); }
}

.article {
    width: 150px;
    height: 155px;
}

.middlecontent1S {
    display: flex;
    flex-direction: row;
    padding: 15px;
    gap: 12px;
}

.mc1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
}

.mc1 p {
    font-size: 11px;
    color: black;
    font-weight: 500;
}

.mc1 span {
    font-size: 10px;
    color: #cacdce;
}

.mc1:hover .mc1t p {
    text-decoration: underline;
}

.middlecontent2 {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    padding: 6px;
    border: 1px solid #edf3f5;
    margin-top: 20px;
    gap: 10px;
}

.middlecontent2F {
    width: calc(100% + 14px);
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    justify-content: space-between;
    border-bottom: 1px solid #edf3f5;
}

.middlecontent2F h2 {
    font-size: 16px;
    font-weight: 500;
}

.One {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0px 9px;
    gap: 8px;
}

.document, .briefcase, .bulb, .star, .building {
    width: 20px;
    height: 20px;
}

.one {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.one h3 {
    font-size: 17px;
    color: #535760;
    font-weight: 400;
}

.one p {
    font-size: 13px;
    color: #535760;
}

.middlecontent2T {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0px 9px;
}

.two {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.two h3 {
    font-size: 17px;
    color: #535760;
    font-weight: 400;
}

.ttwo {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.circle {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    border: 1px solid #dedede;
}
    
.line5 {
    background-color: #c9c8c8;
    height: 67px;
    width: 1px;
    position: relative;
    left: 3px;
}

.twoline {
    display: flex;
    flex-direction: row;
    gap: -3px;
}

.ttwo section {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 200px;
    padding-left: 10px;
}

.li1 a, .li2 a {
    color: #2656c6;
}

.li1 a:hover, .li2 a:hover {
    text-decoration: underline;
}

.spaan1 {
    font-size: 10px;
    color: #535760;
}

.spaan2 {
    font-size: 13px;
    color: black;
}

.li1, .li2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.microsoft-icon, .youtube-icon {
    width: 90px;
    height: 70px;
    object-fit: contain;
}

.building {
    width: 20px;
    height: 20px;
}

.middlecontent2Fo {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0px 9px;
}

.three {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.three h3, .four h3 {
    font-size: 17px;
    color: #535760;
    font-weight: 400;
}

.three section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.li3, .li4 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 10px;
}

.li3 a {
    color: #2656c6;
}

.li3 a:hover {
    text-decoration: underline;
}

.middlecontent2Fi {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 0px 9px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.four {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fouur {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 6px;
    padding-bottom: 5px;
}

.fourr {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 130px;
}

.fouur p {
    font-size: 14px;
    color: #2e3036;
    padding-top: 5px;
    padding-left: 9px;
}

.foouur {
    display: flex;         
    align-items: center; 
    gap: 8px;
}

.fouur1 {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 50%;
    border: 1px solid black;
    font-size: 11px;
}

.fouur2 {
    width: 35px;
    height: 35px;
    /* padding: 7px; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f1f1;
    border-radius: 50%;
    font-size: 8px;
    font-weight: bold;
}

.middlecontent2Si {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 20px;
    padding: 0px 9px; /* f1f1f1*/
}

.five {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.five h3 {
    font-size: 17px;
    color: #535760;
    font-weight: 400;
}

.fivee {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 13px;
}

.fivee span {
    font-size: 11px;
    background-color: #f1f1f1;
    padding: 5px;
}

.middlecontent3 {
    width: 100%;
    height: 340px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #edf3f5;
    margin-top: 20px;
}

.middlecontent3F {
    width: calc(100% + 20px);
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #edf3f5;
}

.middlecontent3F h2 {
    font-size: 16px;
    font-weight: 500;
    padding: 10px;
}

.arroow {
    width: 25px;
    height: 25px;
    padding: 7px;
    background-color: transparent;
    border-radius: 50%;
    color: black;
    border: 1px solid black;
    cursor: pointer;
    transition: 0.2s ease;
    margin-top: 7px;    
}

.arroow:hover {
    animation: pulse 0.5s;
}

@keyframes pulse {
    50% { transform: scale(1.1); }
}

.middlecontent3S {
    display: flex;
    flex-direction: row;
    gap: 17px;
    margin: 20px;
}

.mc3 {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.mc3 h5 {
  font-size: 13px;
  font-weight: 400;
  color: #000;
  background: #fff;
  border: 1px solid #dcdfe0;
  padding: 12px 16px;
  position: relative;   
  display: inline-block;
  margin-bottom: 18px;  
}

.mc3 h5::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -26px;
  border-style: solid;
  border-width: 26px 24px 0 0px;  
  border-color: #dcdfe0 transparent transparent transparent;
} 

.mc3 h5::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -25px;
  border-style: solid;
  border-width: 24px 22px 0 1px;
  border-color: #ffffff transparent transparent transparent;
}

.mc3t { 
    display: flex; 
    flex-direction: row; 
    gap: 10px; 
}

.mc3 p { 
    font-size: 13px; 
    color: black; 
    font-weight: 500; 
} 

.mc3 span { 
    font-size: 11px; 
    color: #cacdce; 
    display: flex; 
    align-items: center; 
}

.middlecontent4 {
    width: 100%;
    height: 275px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #edf3f5;
    margin-top: 20px;
    margin-bottom: 20px;
} 

.middlecontent4F {
    width: calc(100% + 20px);
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #edf3f5;
}

.middlecontent4F h2 {
    font-size: 16px;
    font-weight: 500;
    padding: 10px;
}

.middlecontent4S {
    display: flex;
    flex-direction: row;
    gap: 17px;
    margin: 20px 0px;
}

.mc4 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.icon4 {
    width: 100px;
    height: 70px;
    object-fit: contain;
    border: 1px solid #dcdfe0;
    padding: 10px 17px;
}

.icons4 {
    width: 120px;
    height: 70px;
    object-fit: contain;
    border: 1px solid #dcdfe0;
    padding: 10px 17px;
}

.mc4t p {
    font-size: 14px;
    color: black;
}

.mc4s {
    width: 20px;
    height: 20px;
    padding: 5px;
    background-color: transparent;
    border-radius: 50%;
    color: black;
    border: 1px solid black;
    position: relative;
    top:7px;
}

.mc4sa {
    color: #2656c6;
}

.mc4sa:hover {
    text-decoration: underline;
}

.buutton {
    margin-right: auto;
    padding-left: 25px;
    cursor: pointer;
}

.seeAll-btn {
    display: flex;
    flex-direction: row;
    padding: 10px 20px;
    background: #ffffff;
    color: #5eb5e6;
    border: 1px solid #5eb5e6;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.2s ease;
    width: 120px;
    height: 32px;
    gap: 4px;
}

.seeAll-btn:hover {
    background-color: #f1f8fb;
}

.rightsidebar {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
}

.rightsidebar h2 {
    font-size: 16px;
    color: #535760;
    font-weight: 400;
    padding-bottom: 12px;
}

.rightsidebar1{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 30px;
}

.rightsidebar11, .rightsidebar12, .rightsidebar13 {
    display: flex;
    flex-direction: row;
    gap: 9px;
}

.rightsidebar11 span, .rightsidebar12 span, .rightsidebar13 span {
    font-size: 13px;
    color: black;
    font-weight: 500;
}

.rightsidebar11 p, .rightsidebar12 p, .rightsidebar13 p {
    font-size: 12px;
    color: #cacdce;
}

.rightsidebar2 {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rightsidebar2 h3 {
    font-size: 14px;
    color: #535760;
    font-weight: 400;
    padding-bottom: 12px;
}

.avatar3-pic {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    object-fit: cover;
}

.rightsidebar21 span {
    position: relative;
    font-weight: bold;
    gap: 100px;
    top: -10px;
}

.rightsidebar22 {
    display: flex;
    align-items: center;
    position: relative;
    /* justify-content: center; */
    flex-direction: column;
    bottom: 10px;
    right: 20px;
}

.rightsidebar22 span {
    font-size: 16px;
    color: black;
    font-weight: 500;
    padding-bottom: 3px;
}

.rightsidebar22 p {
    font-size: 12px;
    color: #9399a7;
    font-weight: 400;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #dcdfe0;
}

footer p {
    padding: 20px;
}