/* 1178 x 294.5
1178 x 645.89  x 411,39
128 x 218

*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');


body{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    font-family: "Noto Sans", sans-serif;
    background-color: #F2F3F5;
    overflow-x: hidden;
}
.cantainer{
    height: auto;
    width: 90%;
    max-width: 1178px;

}
.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    width: 100%;
    border-bottom: 1px solid rgb(14, 13, 13);
}
.navlink , a{
    display: flex;
    gap: 45px;
    text-decoration: none;
    color: black;
    text-transform: capitalize;
    
}
.common-button{
    display: flex;
    background-color: #5865f2;
    color: white;
    width: 150px; 
    height: 40px;
    display: grid;
    place-content: center;
    border-radius: 20px;

}
.server-box{
    width: 100%;
    overflow: hidden;
    height: 645.89px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    
    
}

.server-banner{
    width: 100%;
    height: 294.5px;
    overflow: hidden;
}
.serverbanner-img{
    width: 1178px;
}
.server-logo{
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 6px solid white;
    margin-top: -100px;
    border-radius: 30px;
}
.server-logo-img{
    width: 100%;

}
.server-info-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.server-name{
    text-transform: capitalize;
    font-size: 25px;
    animation: server-name 3s  infinite;
}
@keyframes server-name{
    0%{
        color: rgb(41, 41, 41);
    }
    50%{
        color: #1b1b1b;
    }
    100%{
        color: black;
    }   
}
.server-tags{
    display: flex;
    gap: 30px;
}
.t-con{
    background-color: #EBEDEF;
    padding: 2.5px 10px 2.5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 5px;

}

.Server-plans-user{
    display: flex;
    align-items: center;
    border-radius: 5px; 
    overflow: hidden; 
    
}
.server-plans-buyers{
    padding: 0 15px 0 15px;   
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #C5579D;
    font-size: 14px;
    line-height: 11;
    font-weight: 400;
    height: 25px;
    color: white;
    gap: 5px;
}

.alrody-purchansed {
    padding: 0 8px 0 8px;   
    background-color: #91326F;
    color: white;
    height: 25px;
    justify-content: center;
    font-size: 14px;
    align-items: center;
    display: flex;
}
/* color #23A559 */
.active-members{
    background-color: #23A559;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.total-members{
    background-color: #4E5058;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.tag{
    color: #272727;
    
}

.server-discription{
    text-align: center;
    font-size: 15px;
    width: 60%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 10px;
}
.bold{
    font-weight: 700;
}
.server-join-button{
    margin-top: 50px;
    background-color: #C5579D;
    width: 270px;
    height: 42px;
    border-radius: 10px;
}
.server-plans{
    margin-top: 100px;
    height: auto;
}
.server-plans-cont{
    margin-top: 100px;
    width: 100%;
    display: grid;
    gap: 40px;
    justify-content: center; /* Align items horizontally in the center */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}
.server-title{
    margin-bottom: -70px;
}
.tagline{
    font-size: 34px;
    font-weight: 600;
}
.small-tagline{
    font-size: 14px;
    margin-top: -10px   ;
    font-weight: 500;
    color: #5C5e66;
}
.server-plans{
    width: 100%;
    display: grid;
}
.plans-card{
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center ; */
    background-color: #ffffff;
    border-radius: 10px;
    padding-bottom: 20px;
    /* min-height: 700px;
    height: 70px; */
    overflow-y: hidden;
}
.plan-card-title{
    width: 80%;
    min-height: 73.98px;
    display: flex;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    margin-top: 35px;
}
.plan-img{
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 3px solid #5865f2 ;
    /* border: 1px solid black; */
}
.plan-card-title-h{
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
}
.price{
    font-size: 25px;
    font-weight: 600;
    color: #313338;
}
.month{
    font-size: 16px;
    color: #5C5E66;
}
.buy-button{
    width: 80%;
    min-height: 42px;
    border-radius: 10px;
    background-color: #C5579D;
    margin-bottom: 20px;

}

.plan-details {
    overflow: hidden;
    font-size: 14px;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Show only two lines */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    height: auto;
    transition: all 0.3s ease-in-out;
}

.plan-details.expanded {
    -webkit-line-clamp: unset; /* Remove line clamp */
    height: auto;
}
.details-of-plans{
    width: 80%;
}

.show-more {
    cursor: pointer;
    color: black;
    text-decoration: underline;
    font-weight: 500;
    font-size: 14px;
    /* font-weight: bold; */
}
.common-devider{
    background-color: hsl(210,calc(1*9.1%),87.1%);
    min-height: 1px;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 80%;
}
.plan-card-secc{
    width: 80%;
    height: 134px;

}
.ex{
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
    color: #4E5058;
}
.e{
    line-height: 16px;
    font-size: 12px;
    color: #4E5058;
    font-weight: 500;
    margin-top: -12px;
}
.channel-cardd{
    width: 100%;
    height: 80px;
    border-radius: 8px;
    background-color: #DCDDDE4D;
    display: grid;
    place-items: center;
    gap: 20px;
    margin-bottom: 152px;

    
}
.channel-premimum-emoj{
    width: 20px;
    aspect-ratio: 1/1;
    height: 20px;
}
.channel-name-of-the-plan{
    display: flex;
    gap: 10px;
    font-weight: 600;

}
.matrials-text{
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}
.channelIcon-31qsk9{
    scale: 0.8;
}
.small-text{
    font-size: 12px;
    margin-top: -2px;
    font-weight: 500;
    color: #5C5E66;
}
.plan-benifits{
    width: 80%;
    height: 200px;
    overflow: hidden;
}
.e-1{
    margin-top: 5px;
}
.planbenifits-card{
    width: 100%;
    border-radius: 8px;
    background-color: #dcdddc4d;
    display: grid;
    place-items: center;
    margin-top: 20px;
}
.bef-img{
    width: 20px;
    aspect-ratio: 1/1;
}
.bef-card-cont{
    width: 80%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
    
}
.beifit-h{
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 800;
}

.showmore-benifits{
    width: 80%;
    display: grid;
    place-items: center;
    text-transform: uppercase;
    /* margin-top: 80%; */
    font-size: 14px;
    font-weight: 700;
    color: #4e5058;
    cursor: pointer;
    font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Symbols";

}
.buller-div{
    width: 100%;
    height: 50px;
    margin-top: -50px;
    background: linear-gradient( 0deg, #ffffff , transparent  );
}

.arroww{
    transition: 0.2s;
}

.unlock-the-uder-theme{
    width: 100%;
    display: flex;
    max-height: 422px;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 10px;
    margin-top: 100px;
    padding-top: 10px;
}
.section-othe{
    width: 400px;
    /* margin-top: 20px; */
    padding: 20px;
    padding-right: -60px;
   
}
.title{
    font-size: 23px;
    color: #060607;
    font-weight: 600;
}
.small-sub{
    font-size: 16px;
    color: #4E5058;
    font-weight: 500;
    margin-bottom: 60%;
}
.note{
    margin-top: 35%;
    font-size: 14px;
    color: #5C5e66;
}
.content{
    width: 305px;
    display: flex;
    margin-top: 6px;
    gap:10px;
}
.premimum-content{
    overflow: hidden;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.content-img{
    filter: blur(25px);
    height: 100%;
}
.e1{
    width: 129px;
    height: 220px;
}
.e2{
    width: 129px;
    height: 152px;
    margin-top: 5px;
}
.secc2 ,.secc1{
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.e3{
    width: 152px;
    height: 92px;
}
.e4{
    width: 152px;
    height: 180px;
}
.e5{
    width: 152px;
    height: 92px;
}

.lock{
    width: 32px;
    height: 32px;
    position: absolute;
    align-items: center;
}

.server-activity-bar{
    background-color: #EFF0F0;
    width: 352px;
    height: 390px;
    border-radius: 8px;
    margin-top: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    padding-bottom: 0;
}
.activity-continer{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.textt{
    font-size: 17px;
    font-weight: 800;
    line-height: 18px;
    text-transform: capitalize;
}
.activity-list{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: -10px;
    margin-bottom: 15px;
}
.iso{
    margin-left: -22px;
}

.icon-of-chad{
    width:18px;
    height: auto;
    background-color: #E3E5E8;
    border-radius: 50%;
    padding: 7px;
}
.iopp{
    scale: 0.3;
}

.mid-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -13px;
}

.channel-name-list{
    font-size: 14px;
}

.messages{
    font-size: 12px;
    margin-top: -10px;
    font-weight: 500;
    color: #1b1b1b;
}
.pic-active{
    scale: 0.5;
}
.main-to-unlock{
    width: 320px;
    height: 158px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 8px;
    margin-top: 10px;
}
.click-to-unlock{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    padding: 10px;

    background-color: white;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}
.lock-{
    width: 20px;
}


.dont-want-special-pearks{
    width: 100%;
    height: 228px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15%;
    margin-top: 70px;
    margin-bottom: 30px;
    overflow: hidden;
}

.dont-want-special-pearks img{
    width: 198px;
    height: auto;
}

.soko-img1{
    margin-bottom: -8%;
}
.center-perks-dev{
    display: grid;
    place-items: center;
}
.emm{
    font-size: 24px;
    font-weight: 800;
}
.mes{
    font-size: 16px;
    margin-top: 5px;
    font-weight: 500;
    color: #313338;
}

.mes1{
    height: 50px;
    padding: 0 10px 0px 10px;
    margin-top: 20px;
}

















.details1, .details2, .details3, .details4 {
    overflow: hidden;
    max-height: 50px; /* Adjust this based on your needs */
    transition: max-height 0.3s ease;
}

.details1.expanded, .details2.expanded, .details3.expanded, .details4.expanded {
    max-height: 200px; /* Adjust this based on your needs */
}





























































.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}