/* Dependencies */

@import url("LIB/Bootstrap.css");

@import url("LIB/Buttons.css");

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

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,500;10..48,600&display=swap');





@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');

@import url("LIB/advanced.nav.css");

/* Settings */

:root {

    /* fonts */

    --main-font:   'Bricolage Grotesque', sans-serif;

    --paragraph-font: 'Work Sans', sans-serif;



    /* colours */

    --primary: #8A7FFB;

    --white: #fff;

    --nav-link-color: #9094AA;

    --paragraph-color: #d1d6f3;

    --secondary: rgb(36, 36, 36);

    --navbar-color: #;



    /* extras */

    --border: 1px solid rgba(255, 255, 255, 0.03);

    

    /* global styling */

    --site-padding: 0;

    --site-margin: 0;

    --site-box-sizing: border-box;



    /* Timing */

    --cubic-bezier: all 350ms cubic-bezier(0.075, 0.82, 0.165, 1);

    --ease: all 350ms ease;



    /* Button values */

    --scale-hv: 1.03;

    --scale-ac: 0.95;

}



/* Global site settings */

* {

    padding: var(--site-padding);

    margin: var(--site-margin);

    box-sizing: var(--site-box-sizing);

    font-family: var(--main-font);

}

/* Body */

body {

    background-color: var(--secondary);



}





/* paragraph */

p {

    font-family: var(--paragraph-font);

}





/* hero */

.hero {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 60vh;

    flex-direction: column;

    background-image:  url("img/wavern.svg");

    background-repeat: no-repeat;

    background-size: cover;

    background-position:center;

}

.titleContent {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}

.titleContent .tag {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 25px;

    border-radius: 6px;

    margin-bottom: 25px;

    border: 6px;

    color: var(--primary);

    outline: 1px solid var(--primary);

}

.titleContent h2 {

    font-size: 55px;

    line-height: 75px;    

    backdrop-filter: blur(2px);

    text-align: center;

    margin-bottom: 25px;

    color: var(--white);

}

.titleContent p {

    backdrop-filter: blur(2px);

    font-size: 25px;

    line-height: 27px;

    margin-bottom: 25px;

    color: var(--paragraph-color);

    font-weight: 500;

    text-align: center;

}



@media only screen and (max-width:800px) {

    .titleContent h2 {

        font-size: 45px;

        line-height: 45px;

    }

}

/* Glass.css */



.glass {

    background: rgba(255, 255, 255, 0.25);

    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

    backdrop-filter: blur(9px);

    -webkit-backdrop-filter: blur(9px);

  

    border: 1px solid rgba(255, 255, 255, 0.18);

}



/* Buttons */



/*!

 

 * All buttons will be in Buttons.css folder



 */



 /* Splitter */



.splitter {

    width: 50%;

    background-color: rgba(255, 255, 255, 0.10);

    height: 1px;

    margin: 0 auto;

    display: block;

    margin-bottom: 55px;

    margin-top: 35px;

}





/* About Us */

.about-us {

   

    display: flex;

    align-items: center;

    justify-content: center;

    background-repeat: no-repeat;

    background-size: cover;

    background-position:center ;

    min-height: 45vh;

    margin-bottom: 35px;

}

.about-us .aboutusInfo {

    text-align: center;

    color: var(--white);

}

.about-us .aboutusInfo h2{

    font-size: 55px;

    line-height: 55px;

    margin-bottom: 35px;

}

.about-us .aboutusInfo p{

    backdrop-filter: blur(2px);

    font-size: 25px;

    line-height: 27px;

    margin-bottom: 25px;

    color: var(--paragraph-color);

    font-weight: 500;

    text-align: center;

}

.cardCont {

    display: grid;

    grid-template-columns: 1fr 1fr;

    place-items: center;

    gap: 10px;

    justify-content: center;

    align-items: center;

}

@media only screen and (max-width:720px) {

    .cardCont {

        display: flex;

        flex-direction: column;

    }

}

 

.card {

    

    backdrop-filter: blur(9px);

    -webkit-backdrop-filter: blur(9px);

    width: 350px;

    height: 300px;

    align-items: center;

    margin: 10px 0px;

    display: flex;

    flex-direction: column;

    padding: 10px;

}

.card .icon {



    width: 100%;

    display: grid;

    place-content: center;

    min-height: 100px;

}

.card .icon i {

    -webkit-backdrop-filter: blur(9px);

    font-size: 50px;

    display: grid;

    place-content: center;

    height: 1.5em;

    width: 1.5em;

    border-radius: 6px;

    background-color: #8A7FFB33;

    color: var(--primary);

}

.card .title{

    font-size: 30px;

    margin: 10px 0px;

    color: var(--white);

}

.card p {

    color: var(--white);

    text-align: center;

}





/* Features */

.featureTitles h1{

    font-size: 35px;

    line-height: 35px;

    margin-bottom: 25px;

    color: var(--white);

}

.featureTitles p {

    font-size: 20px;

    margin-bottom: 25px;

    line-height: 25px;

    color: var(--paragraph-color);

}



/* Footer */

.footerlinks {

   color: var(--nav-link-color);

   display: flex;

   align-items: center;

   border-top: 1px solid rgba(255, 255, 255, 0.10);

   flex-wrap: wrap; 

   gap: 35px;

   justify-content: center;

   list-style: none;

}

.text-header {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    color: var(--white);

    text-align: center;

    font-size: 27px;

}

.footerlinks li a {

    color: var(--nav-link-color);

    font-family: var(--paragraph-font);

    font-size: 15px;

    margin: 25px 0px;

    display: block;

    list-style: none;

}



/* server-cards */

.serverCard {

    display: grid;

    gap: 10px;

    align-items: center;

    justify-content: center;

    grid-template-columns: 350px 350px 350px;

}

@media only screen and (max-width:1072px) {

    .serverCard {

        flex-wrap: wrap;

        gap: 10px;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .serverCard .server {

        height: 100px;

        width: 100%;

        border-radius: 6px;

        display: flex;

        padding: 0px 10px;

        box-shadow: 0px 10px 10px rgba(138, 127, 251, .1);

        background-color: #8A7FFB33;

        gap: 10px;

        border: 1px solid #8A7FFB;

        align-items: center;

    }

    

}

.serverCard .server {

    height: 100px;

    border-radius: 6px;

    display: flex;

    padding: 0px 10px;

    box-shadow: 0px 10px 10px rgba(138, 127, 251, .1);

    background-color: #8A7FFB33;

    gap: 10px;

    border: 1px solid #8A7FFB;

    align-items: center;

}

.serverCard .server .serverLogo {

    width: 64px;

    border-radius: 6px;

    

}

.serverCard .server .stats {

    color: var(--white);

    display: flex;

    gap: 10px;

    align-items: center;

    flex-direction: column;

}



.statCounter {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

}

.statCounter .stat {

    background-color: #8A7FFB33;

    width: 300px;

    align-items: center;

    display: flex;

    justify-content: center;

    border-radius: 6px;

    color: #fff;

    font-size: 20px;

    height: 100px;

    background-image: linear-gradient(50deg, #8a7ffb33, #8a7ffb80);

    transition: var(--cubic-bezier);

    border: 1px solid rgba(255, 255, 255, 0.1);

}

.stat:hover {

    box-shadow: 0 8px 32px 0 rgba(255,255,255, 0.14);

    backdrop-filter: blur(9px);

    -webkit-backdrop-filter: blur(9px);

    border: 1px solid rgba(255, 255, 255, 0.1);

 

}



/* Profile container */



.bg-invite {

    background-image: url("img/wavern2.svg");

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 45vh;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}

.profile-container {

    display: grid;

    grid-template-columns: 450px 450px;

    gap: 4rem;

    margin: 50px 0px;

    align-items: center;

    justify-content: center;

}

@media only screen and (max-width:970px) {

    .profile-container {

        display: flex;

        flex-wrap: wrap;

        padding: .2rem;

        align-items: center;

        justify-content: center;

    }

    .profile-card {

        width: 100%;

    }

}

.profile-card {

    padding: 10px;



    

    display: flex;

    background: rgba(255, 255, 255, 0.1);

    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

    backdrop-filter: blur(9px);

    -webkit-backdrop-filter: blur(9px);

    border-radius: 6px;

    height: 200px;

    border: 1px solid var(--primary);

    

    flex-direction: column;

    justify-content: center;

}

.profile-card .profile-img {

    display: flex;

    position: relative;

    align-items: center;

    width: 100%;

    justify-content: start;

}

.profile-img img {

    width: 92px;

    border-radius: 6px;

    border: 2px solid var(--primary);

    transform: translateY(-70px);

    position: absolute;

}

.profile-stuff {

    display: grid;

    gap: 10px;

}

.profile-stuff h3 {

    color: var(--white);

    font-size: 35px;

}

.profile-stuff h4 {

    font: var(--paragraph-font);

    color: var(--paragraph-color)   ;

}



/*  */