@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&family=Inter:wght@300&display=swap');

:root {
    --font1: Inter, Inter-fallback, Helvetica, Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif;
    --font2 :Inconsolata, Inconsolata-fallback, Helvetica, Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif;

}

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


nav {
    box-sizing: border-box;
    background: #111111;
    z-index: 1;
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 10px;
    margin: 0;
}

body {
    color:  white;
    background-color: black;
    font-family: var(--font1);
}

a{
    text-decoration: none;
    color: white;
}

.logo ,.navlink li {
    align-items: center;
    padding: 5px 10px;
    margin-right: 5px;
    margin-left: 5px;
}

.navlink li a{
    display: block;
}

.logo{
    font-family: var(--font1);
    font-size: 22px;
    font-weight: bold;
    align-items: center;
    color: #f0f0f0;
    margin-top: 5px;
    cursor: pointer;
}

.note {
    font-family: var(--font2);
    background-color: #f0f0f0;
    border-radius: 20px;
    color: #111111;
}

.note a{color: #111111;}

.navlink li a:hover {
    cursor: pointer;
}

.crescent-moon {
    position: relative;
    display: block;
    width: 18px;
    border-right: none;
    border-top: none;
    height: 18px;
    border-radius: 50%;
    border: 2px solid lightgrey;
    background: inherit;
  }

  .item a:hover {
    color: gray;
  }

  .mode button {
    background-color: transparent;
    border: 0;
    display: block;
    cursor: pointer;
    width: 22px;
    height: 12px;
    margin-bottom: 8px;
  }
  button img {
    height: auto;
    width: 100%;
    display: block;
    object-fit: cover;
  }

  
  .crescent-moon::after{
    content: '';
    position: relative;
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid lightgrey;
    border-right: 0;
    border-top: none;
  }
  
  .crescent-moon::after {
    right: -4px;
    top: 0;
  }

  .main {
    box-sizing: border-box;
    width: 100%;
    height: 330px;
    position: relative;
    color: white;
    transform: translateY(55px);
}

.content {
    box-sizing: border-box;
    position: relative;
    margin-left: 25px;
}

.topimg{
    width: 100vw;
    height:50%;
    object-fit: contain;
} 

.logoimg {
    border-radius: 50%;
    width :17vh;
    transform: translate(15%,-50%);
    object-fit: contain;
}

.content img , .subs img {
    height :25px;
    width: 25px;
    object-fit: cover;
    transform: translateY(5px);
    margin-right: 3px;
}



/*mobile view */

.navlink {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    color: white;
    list-style-type: none;
    justify-content: flex-end;
    align-items: center;
}

.item {
    margin-top: 0px;
    border-radius: 25%;
    font-family: var(--font2);
    width: 70%;
    background: transparent;
    text-align:start ;
    display: none;
}

.item.active {
    transition: all 2s;
    display: block;
}

.note {
    order: 1;
}

.mode {order: 2;background: #716e6e;border-radius: 25%;cursor: pointer;padding: 0;} 

.mode:hover {
    border-color: #f9f5f5;
    border: 0.3px solid;
}

.toggle {
    order: 3;
    cursor: pointer;
}

.item {order: 4;}

.bars {
    background: #999;
    display: inline-block;
    height: 2px;
    width: 18px;
    position: relative;
    transform: translateY(12px);
}

.bars::before,.bars::after {
    background: #999;
    content: "";
    display: inline-block;
    position: relative;
    height: 2px;
    width: 18px;
}

.bars::before {
    top: -7px;
}

.bars::after {
    top: -19px;
}

.content {
    position: relative;
    margin-left: 25px;
}

.topimg{
    width: 100%;
    height:50%;
    object-fit: cover;
} 

.logoimg {
    border-radius: 50%;
    width :15vh;
    transform: translate(10vw,-50%);
    object-fit: contain;
}

.mainname{
    font-size: 40px;
    font-weight: bold;
    padding-bottom: 20px;
    padding-left: 10vw;
    transform: translateY(-35px);
}

.intro {
    position: relative;
    margin: 0 15px 10px 15px;
    padding: 10px 10px 20px 15px;
    font-family: var(--font2);
    border: 0.3px solid #424040b5;
    border-radius: 15px;
}

.intro1 {
    font-family: var(--font1);
    margin :25px 15px;
    padding: 10px 35px;
    border: 2px solid white;
    font-size: 18.56px;
    border-width: 0 0 0 3px;
}
 
.prohead {
    border-width: 0 0 0.5px 0;
    border-color: #424040b5;
    border-style:solid;
    margin: 20px 15px; 
    padding: 0 5px 5px 0; 
    font-weight: bold; 
    font-size: 20px;
    font-family: var(--font1);
}

.pro img:hover {
    cursor: pointer;
}

.pro {
    border-radius: 40px;
    margin: 20px 15px;
    padding: 0 0 15px 0;
    height: 40vh;
    width :80vw ;
    background: rgba(46, 44, 44, 0.693);
}


.pro img{
    transform: translateY(0);
    padding:0;
    width:100%;
    height: 20vh;
    margin: 0;
    border-radius: 40px 40px 0 0 ;
    object-fit: cover;
}


.pro a {
    color: #999;
    width: 100%;
    text-decoration: underline;
    display: block;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

.pro span {
    color:#999;
    background: #111111;
    font-size: 14px;
    padding: 0px 10px;
    border-radius: 5px;
}

.protext {
    font-family: var(--font2);
    height: 18vh;
    line-height: 130%;
    font-size: 16px;
    padding: 10px 15px ;
    overflow: hidden;
    text-overflow: hidden;
}

.prosubtext {
    font-size: 12px;
}

.extras {
    font-family: var(--font2);
    display: block;
    width: auto;
    margin-left: 45px;
    margin-bottom: 2px;
    padding : 2px 10px;
    text-decoration: underline;
}

.extras:hover {
    cursor: pointer;
    background: #9999995d;
}

.contact {
    border-radius: 15px;
    border: 0.3px solid #424040b5;
    font-family: var(--font2);
    margin: 10px 45px 10px 45px;
    padding: 20px 20px;
}

.contact a {
    color: #999;
    text-decoration: underline;
}



/* desktop view*/

@media screen and (min-width : 769px)
{
    .item  {
        order :1;
        display: block;
        width:auto;
    }

    .nav {
        position: fixed;
        margin-right: 20px;
    }

    .toggle {
        display: none;
    }

    .logo {flex-grow: 1;}

    .note , .mode {
        width: auto;
        order : 2 ;
        display: block;
        margin-bottom: 5px;
    }

    .navlink li  {
        margin-top: 5px ;
        margin-right: 15px;
        padding: 10px 16px;
    }

    .botbody {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0 9vw;
        justify-content: center;
        transform: translateY(35px);
    }

    .content{
        width : 70% ;
        margin-left: 0;
    }

    .subs {
        width : 30%;
    }

    .pro
    {
        width : 46%;
        margin :10px 5px;
        padding: 0;
        height :35vh;
    }


    .protext
    {
        width:100% ;
        overflow: hidden;

    }

    .pro img {
        height :20vh;
    }

    .contact {
        transform: translateY(40px);
        margin: 10px 15px;
        padding: 10px 15px;
    }

    .contact img 
    {
        transform: translateY(50%)
    }

    .extras {
        padding-left: 5px;
        margin-left: 20px;
    }

    .promain 
    {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        align-content: space-between;
        margin: 0;
        padding: 0;
    }

    .main {
        height : 50vh;
    }

    .mainname{
        transform: translateY(15px);
    }

    .topimg {
        height: 60%;
    }






}