*{
    margin: 0;
    font-family: "kanit";
}

::-webkit-scrollbar {
  display: none;
}

/*----------HOME PAGE----------*/

#home-about{
    height: 100vh;
    width: 100%;
    color:white;
    background-color: #bbc0cc;/*#D8EbE2*/
}

.menu{
    list-style-type: none;
}

.head{
    font-family:"kanit","sans-seriff";
    position: fixed;
    width: 100%;
    /*background-color: red;TEMP*/
}

.head .scrolled{
    background-color: black;
}

#bar{
    display: flex;
    justify-content: space-between;
    padding-block: 24px;
    padding-bottom: 17px;
    padding-inline: 40px;
    margin: 0;
}

#bar .scrolled{
    background-color: black;
}

.logo{
    height:100%;
    width: 10vw;;
    background-image: url(Images/vexillum-logo1.png);
    background-size: 100%;
    border:none;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
}

.logo:hover{
    cursor:pointer;
}

.menu-right{
    display: flex;
}


#expansion-container{
    position: relative;
    display: flex;
}

#menu-selection{
    background-color: #36464f;
    border-radius:  20px;
    color:white;
    padding: 10px;
    padding-inline: 20px;
    border:none;
    z-index: 3;
    transform-origin:right;
}

/*Menu list of items (shown when expanded)*/
.menu-content {
    position: fixed;
    top:100%;
    right:0;
    top: 0;
    width:300px;
    height: 100vh;
    background-color: #36454f;
    border: none;
    transition: all 0.4s ease;
    overflow: hidden;
    z-index:-2;
    display: flex;
    align-items: center;
    justify-content: center;
    right:-300px;
    transition: 0.35s ease;

}

#menu-selection:hover{
    cursor: pointer;
}


.menu-content li{
    text-align: center;
    list-style: none;
}


.menu-content.expanded {
    right:0;
    transition: 0.35s ease;
}

.menu-content.expanded ul {
    opacity: 1;
}

.sidebarText{/*Text within the side bar buttons*/
    margin: 0;
    margin-left: 30px;
    color: white;
    display: inline-block;
    position: relative;

}

.sidebarText::after{/*Underline effect for the text within the side bar*/
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #7b0828;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.sidebarText:hover::after{/*Also part of the underline effect for the side bar*/
    transform: scaleX(1);
    transform-origin: bottom left;
}

.sidebar-container{
    width: 100%;
    padding:0;
}

.sidebar-links{
    width: 100%;
    display: flex;
    justify-content: baseline;
    align-items: center;
    text-decoration: none;
}

.item-icons{
    width: 15%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1/1;
    height: auto;
}


.sidebarItems{/*Text for contens of side bar*/
    color:white;
    background-color: transparent;
    font-size: 30px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    border:none;
    text-align: left;
    transition: ease 0.4s;
    display: flex;
    align-items: center;
}

.sidebarItems:hover{/*Hover over side bar button*/
    background-color: #393E3C;
    .sidebarText{
        color:#7b0828;
    }
}

#language-btn{
    position: relative;
    background-color: white;
    color:black;
    padding: 10px;
    border:none;
    border-radius: 20px;
    padding: 10px;
    padding-inline: 20px;
    margin-right: 10px;
    z-index: -3;
}

#first-half{
    height: 100vh;
    width: 100%;
}

#home-container{
    padding-top: 5%;
    height: 85%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "kanit", sans-serif;
}


#home-subcontainer{
    background: linear-gradient(135deg, #7B0828,#36454F,#596475,#D8DBE2);
    border-radius: 20px;
    height: 100%;
    width: 100%;
    background-size: 300%;
    margin: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}


.brand-title{
    font-size: 5em;
}

#examples{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1011%26quot%3b)' fill='none'%3e%3cpath d='M -37.70303622628694%2c140 C 10.3%2c191.6 106.3%2c385.2 202.29696377371306%2c398 C 298.3%2c410.8 346.3%2c195.6 442.29696377371306%2c204 C 538.3%2c212.4 586.3%2c434.4 682.2969637737131%2c440 C 778.3%2c445.6 826.3%2c255 922.2969637737131%2c232 C 1018.3%2c209 1066.3%2c345.6 1162.296963773713%2c325 C 1258.3%2c304.4 1306.3%2c97.4 1402.296963773713%2c129 C 1498.3%2c160.6 1634.76%2c492.6 1642.296963773713%2c483 C 1649.84%2c473.4 1480.46%2c161.4 1440%2c81' stroke='rgba(123%2c 8%2c 40%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -5.61619294770955%2c74 C 42.38%2c120.4 138.38%2c300.2 234.38380705229045%2c306 C 330.38%2c311.8 378.38%2c93.2 474.3838070522904%2c103 C 570.38%2c112.8 618.38%2c329.4 714.3838070522904%2c355 C 810.38%2c380.6 858.38%2c236.2 954.3838070522904%2c231 C 1050.38%2c225.8 1098.38%2c328.4 1194.3838070522904%2c329 C 1290.38%2c329.6 1338.38%2c213.6 1434.3838070522904%2c234 C 1530.38%2c254.4 1673.26%2c461.4 1674.3838070522904%2c431 C 1675.51%2c400.6 1486.88%2c151.8 1440%2c82' stroke='rgba(123%2c 8%2c 40%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -54.45122607532517%2c237 C -6.45%2c261.6 89.55%2c355.6 185.54877392467483%2c360 C 281.55%2c364.4 329.55%2c254.6 425.54877392467483%2c259 C 521.55%2c263.4 569.55%2c419.2 665.5487739246748%2c382 C 761.55%2c344.8 809.55%2c64.8 905.5487739246748%2c73 C 1001.55%2c81.2 1049.55%2c425.8 1145.5487739246748%2c423 C 1241.55%2c420.2 1289.55%2c47.8 1385.5487739246748%2c59 C 1481.55%2c70.2 1614.66%2c456.6 1625.5487739246748%2c479 C 1636.44%2c501.4 1477.11%2c232.6 1440%2c171' stroke='rgba(123%2c 8%2c 40%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -357.2196729074702%2c484 C -309.22%2c423.4 -213.22%2c221 -117.21967290747025%2c181 C -21.22%2c141 26.78%2c275.2 122.78032709252975%2c284 C 218.78%2c292.8 266.78%2c189.4 362.7803270925298%2c225 C 458.78%2c260.6 506.78%2c484.2 602.7803270925298%2c462 C 698.78%2c439.8 746.78%2c146 842.7803270925298%2c114 C 938.78%2c82 986.78%2c295.6 1082.7803270925297%2c302 C 1178.78%2c308.4 1251.34%2c136.8 1322.7803270925297%2c146 C 1394.22%2c155.2 1416.56%2c307.6 1440%2c348' stroke='rgba(123%2c 8%2c 40%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1011'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#info-container{
    width: 90%;
    height: fit-content;
    margin: 5%;
    display: flex;
    justify-content: center;
    background-color: none; /*TEMP*/
    gap:20px;
}



#about-me{
    width: 50%;
}

#side-container{
    border-radius: 12px;
    width: 50%;
    display: flex;
    flex-direction: column;
    gap:20px;
}

/*Cards at the bottom of the home page*/
.info-cards{
    background-color:#36454f;
    border-radius: 20px;
    padding: 2%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    /*overflow:hidden*/
}

.info-cards h3{
    font-size: 2em;
    letter-spacing: 0.05em;
}


#language-bars{
    width: 100%;
}

#BR-container{
    display: flex;
    height: 50%;
    gap:20px;

}

#skills{
    width: 50%;
}

#skill-list{
    text-align: left;
    font-size: 20px;
    margin-top: 10px;
}

#languages{
    width: 50%;
}

.mission-container{
    display: flex;
    margin-inline: 5%;
    gap:5%;
}

.mission-area{
    width: 50%;
}

#right-side{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mission-title{
    font-size:9em;
    line-height: 1;
    margin-bottom: 3%;
}

.talk-btn{
    border-radius: 12px;
    background-color: #36454F;
    color:white;
    border-radius: 20px;
    padding: 10px;
    padding-inline: 20px;
    margin-top: 5%;  
    transition: 0.3s ease;
    border: transparent solid 2px;
}

.talk-btn:hover{
    cursor: pointer;
    color:black;
    background-color:white;
}

.mission-text{
    
    font-size: 1.2em;
}

.mission-text-wrapper{
    margin-top: 10%;
    background-color: #36454F;
    padding: 3%;
    border-radius: 12px;
    width: fit-content;
}
.mission-eyes{
    border-radius: 12px;
    width: 100%;
    aspect-ratio: 2/1;
    height: auto;
    background-color: #7B0828;
    background-image: url(Images/eyes-img.webp);
    mix-blend-mode:  multiply; /* Or overlay, screen, etc. */
    opacity: 0.9;
    background-size: cover;
    background-position: center;
}

.eyes-color{
    width: 80%;
    background-color:#7B0828 ;
    border-radius: 12px;
    
}

/*---LANGUAGE BAR MODIFICATIONS---*/



.progress-wrapper {
    width: 100%;
    margin-block: 5px;
    background-color: #f0f0f0c4;
    border-radius: 999px;
    overflow: hidden;
    height: 25px;
    display: flex;

}

.progress-segment {
    flex: 1;
    border-right: 1px solid #f0f0f0;
    transition: background-color 0.3s;
}

.progress-segment:last-child {
    border-right: none;
}

.filled {
    background-color: rgb(88, 211, 252);
}

.language-name {
  min-width: 80px; /* Adjust as needed */
  font-size:20px;
  text-align: left;
}


.profile-picture{
    width: 35%;
    aspect-ratio: 1/1;
    height: auto;
    background-color: blue;
    border-radius: 100%;
}

.profile-text{
    text-align: left;
    width: 100%;
}

#wacim{
    background: url(Images/wacim.webp);
    background-size: cover;
    background-position: center
}

#adley{
    background: url(Images/adley.webp);
    background-size: cover;
    background-position: center
}

#max{
    background: url(Images/max.webp);
    background-size: cover;
    background-position: center
}


/*---ENDS HERE---*/

.tool-container{
    flex-shrink: 0;
}

.tool{
    height: 170px;
    aspect-ratio: 1/1;
    width: auto;
    /*padding-inline: 20px;THIS CHANGES THE LAYOUT OF THE PAGE SO BE CAREFUL*/
    background-color: none;/*TEMP*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.team-container{
    display: flex;
    justify-content: center;
}

.team-title{
    font-size: 5em;
}

#cover{/*DIV that pops up when side nav is open to focus on side bar*/
    position: fixed; /*fixed allows bar to follow screen with scrolling*/
    width:100%;
    background-color: black;
    height: 100vh;
    z-index: 5;
    top:0;
    transition: 0.35s ease;
    opacity: 80%;
    display: none;
    z-index: -5;
}

#cover.active{
    display: block;
    transition: 0.35s ease;
}




@media screen and (max-width:768px){
    .logo{
        background-image: url(Images/vexillum-v.png);
        background-size: 100%;
    }
    #info-container{
        flex-direction: column;
        width: 90%;
    }
    .mission-text-wrapper{
        margin-top: 5%;
    }
    #home-container{
        height: 100%;
    }
    #home-subcontainer{
        height: 80%;
    }
    .brand-title{
        font-size: 2em;
    }
    .team-title{
        font-size: 3rem;
    }
    #home-subcontainer p{
        text-align: center;
    }
    .profile-text{
        margin-left:0;
        width: 100%;
    }
    #right-side{
        width: fit-content;
    }
    #examples{
        height: fit-content;
    }
    .mission-text{
        margin:5%;
    }
    .name{
        margin-inline:5%;
        margin-top: 5%;
    }
    .mission-title{
        font-size: 6em;
    }
    .eyes-color{
        width: 100%;
    }
    .mission-area{
        width: 100%;
    }
    #about-text{
        margin: 15px;
    }
    .mission-eyes{
        width: 100%;
    }
    #about-me{
        width: fit-content;
        height: fit-content;
    }
    #side-container{
        width: 100%;
    }
    .info-cards{
        flex-direction: column-reverse;
    }
    #BR-container{
        flex-direction: column;
    }
    .profile-picture{
        margin-bottom: 5%;
    }
    .our-mission{
        margin-bottom: 5%;
    }
    #skills{
        width: 100%;
        padding-block: 20px;
    }
    #languages{
        width: 100%;
    }
    .mission-container{
        flex-direction: column;
    }
    .card::before,
    .card::after {
    animation: none; /*Gets rid of animation on mobile sinc eit seems a bit laggy*/
    }
    #lib-width{
        width: 100%
    }
    

}

/*----------END OF HOME PAGE----------*/

/*----------CONTACT PAGE----------*/

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --clr-1: #596475;
  --clr-2: #7B0828;
  --clr-3:  #ac0433;
  --clr-4: #61021d;
  --clr-5: #490116;
}

.contact-color{
    background-color: black;
}

#contact-title{
    color: white; 
    font-size: 50px;
    text-align: center;
    margin-bottom: 10%;
}

#contact-background{
    position: fixed;
    z-index: -999;
    background: url(Images/wave-line2.svg);
    mix-blend-mode:  multiply; /* Or overlay, screen, etc. */
    background-color: #bbc0cc;
    background-size: cover;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    align-items: center;
}

.card {
  height: 70vh;
  aspect-ratio: 1 / 1.5;
  background: var(--clr-1);
  border-radius: 0.5rem;
  position: relative;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
  z-index: -1;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-3),
    var(--clr-4),
    var(--clr-5),
    var(--clr-4),
    var(--clr-3)
  );
  border-radius: inherit;
  animation: none /* rotation 5s linear infinite*/;
}

.card::after {
  filter: blur(3.5rem);
}

@keyframes rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

.form-content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

form{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-text{
    padding:5px;
    padding-inline: 10px;
    border-radius: 5px;
    border:none;
}

.actual-form{
    width: 100%;
    height: 100%;
    margin: 10%;
}

.form-subtitle{
    color:white;
}

.text-area{
    resize: none;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 20px;
}

.submission-wrapper{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.submit-btn{
    border-radius: 20px;
    border: none;
    background-color: #36454F;
    color:white;
    font-size: 1rem;
    padding: 0.5rem;
    padding-inline: 1rem;
}

.submit-btn:hover{
    cursor: pointer;
}

@media screen and (max-width:768px){
    #contact-title{
        font-size: 2.3rem;
    }
    .card{
        height: 75vh;
    }
}



/*----------END OF CONTACT PAGE----------*/

/*----------PRODUCT PAGE----------*/

.home-product{
    width: 100%;
    background-color: #bbc0cc;  
    height: 100vh;
}

.product-title{
    height: 20%;
    font-size: 4.5em;
}

.product-bg{
    background: url(Images/Wave.svg);
    background-size: cover;
    background-position: bottom;
}

.product-types{
    width: 100%;
    display: flex;
    justify-content: center;
    gap:2%;
}

.product-option{
    background-color: #36454F;
    border-radius: 12px;
    width: 20%;
    color:white;
}

.product-title{
    color:white;
}

.making-text{
    width: 50%;
    text-align: center;
    margin-block: 3%;
}

.product-making{
    display: flex;
    justify-content: center;
    color:white;
    font-size: 1.5em;
}

.product-description{
    margin:5%;
}

.product-subtitle{
    font-size: 2em;
    margin-top: 5%;
    margin-inline: 5%;
    text-align: center;
}

.request-wrapper{
    display: flex;
    justify-content: center;
    margin-block: 2%;
}

.option-title{
    margin-left: 5%;
}

@media screen and (max-width:768px){
    .product-title{
        font-size: 3em;
    }
    .product-option{
        width: fit-content;
        margin: 5%;
    }
    .product-types{
        flex-direction: column;
    }
    .home-product{
    height: fit-content;
    }
    .making-text{
        text-align:left;
        width: 100%;
        margin: 5%;
    }
}