@font-face {
    font-family: Play;
    src: url('/public/lib/font/play/Play-Regular.ttf') format('truetype');
}

:root{
    --pine-green: #148679;
    --pine-greenish: #066664;
    --dark-green: #0a2f29ff;
    --white: #fefefeff;
    --white-smoke: #f3f3f3ff;
    --xanthous: #e6af2eff;
    --outline: rgba(45, 134, 118, 0.579);
}

::-webkit-scrollbar {
    width: 5px; 
}

::-webkit-scrollbar-track {
    background-color: var(--pine-green);
}

::-webkit-scrollbar-thumb {
    background-color: var(--white); 
    border-radius: 4px; 
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--white) var(--pine-green);
}



* {padding: 0; margin: 0; font-family: Play, sans-serif;}

body{
    cursor: url('/public/img/icons/arrow_cursor.png'), default;
    overflow: overlay;
    background-color: var(--white);
}

.content{
    font-size: 18px;
    font-family: Play, sans-serif;
    margin: 0;
    top: 0;
    left: 0;
    opacity: 0;
    animation: fadeInAnimation 1s ease forwards;
    z-index: 2;
    background-color: transparent;
}

.section{
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dark-green);
    overflow: hidden;
    z-index: 1;
    background-image: url('/public/img/noise.png');
    background-color: transparent;
}

.section:nth-child(even) {
    background-color: var(--white-smoke);
    background-image: url('/public/img/noise.png');
    /*color: rgb(4, 42, 36);
    background-color: rgb(45, 174, 150);*/
}

.section:nth-child(odd) {
    color: var(--white-smoke);
    background-color: var(--dark-green);
}

.section:first-child{
    padding-top: 100px;
}

.section::before {
    /*content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transform-origin: top;
    transform: skewX(-30deg);
    background-color: rgba(45, 174, 150, 0.5);
    z-index: -1;*/
}

.section:nth-child(even):before {
    /*background-color: rgba(4, 42, 36, 0.5);
    transform-origin: bottom;
    transform: skewX(30deg);
    left: 100%;*/
}

.section div {
    text-align: center;
}

.sectctr {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.desc {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    width: 80%;
    max-width: 800px;
    padding-top: 70px;
    padding-bottom: 70px;
    align-items: center;
}
  
.sectctr > div {
    flex: 1; 
}

.sectctr > div:last-child {
    margin-right: 0;
}

.tri{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.tri > div {
    width: 33.3%;
}

.tri > img {
    width: 33.3%;
}

h1{
    word-wrap: normal;
}

.headerimg{
    width: 100%;
    max-width: 400px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.footer{
    position: relative;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dark-green);
    background-color: var(--pine-green);
    overflow: hidden;
    z-index: 1;
    padding: 25px;
}

.foot-logo img{
    width: 50px;
    height: auto;
}

.copyright {
    color: var(--white);
}

a{
    text-decoration: none;
    color: rgb(97, 182, 180);
    transition: color 0.5s ease, border 0.5s ease;
}

a:hover{
    color: rgb(4, 42, 36);
    border-color: black;
}

.vr {
    min-height: 100%;
    width:0;
    margin: 0;
    border-left: 2px dashed rgb(36, 196, 167);
    box-shadow: 3px 3px 3px rgb(4, 42, 36);
    border-right: none;
    border-top: none; 
    border-right: none; 
}


.desc h1{
    margin-bottom: 25px;
}

.desc p {
    margin-bottom: 25px;
    /*text-align: justify;*/
    font-size: 22px;
}

.desc li {
    justify-content: left;
    /*text-align: justify;*/
    text-align: left;
    margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.desc-full {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

.desc-full > div {
    max-width: 1000px;
}

.desc-full hr {
    display: block;
    width: 20%;
    height: 5px;
    background-color: rgb(4, 42, 36);;
    border: none;
    margin-top: 10px;
    margin-bottom: 20px;
    opacity: 70%;
}

.duo {
    display: flex;
    width: 100%;
}

.duo img {
    flex: 1;
    max-width: 100%;
    object-fit: cover;
    min-height: 400px;
}

.duo .desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px;
}

.blueoutline {
    -webkit-filter: drop-shadow(1px 1px 0 var(--outline))
                drop-shadow(-1px 1px 0 var(--outline))
                drop-shadow(1px -1px 0 var(--outline))
                drop-shadow(-1px -1px 0 var(--outline));

    filter: drop-shadow(1px 1px 0 var(--outline))
        drop-shadow(-1px 1px 0 var(--outline))
        drop-shadow(1px -1px 0 var(--outline))
        drop-shadow(-1px -1px 0 var(--outline));
}

.featuredgallery .fg-container {
    position: relative;
    display: inline-block;
}

.featuredgallery img{
    width: 350px;
    height: 350px;
    margin: 40px;
    border-radius: 10px;
}

.featuredgallery .fg-title {
    position: absolute;
    bottom: 60px;
    left: 7%;
    opacity: 90%;
    letter-spacing: .1rem;
    font-size: 40px;
    font-weight: bold;
    max-width: 60%;
    word-wrap: break-word;
    height: auto;
    background-color: var(--white);
    border: 3px solid var(--outline);
    color: var(--outline);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 11;
    text-transform: capitalize;
    padding: 10px;
}

.sponsors {
    display: flex;
    width: 90%;
    margin: auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.sponsors img {
    margin: 2%;
    height: 100px;
    width: auto;
    position: relative;
    opacity: 80%;
}

.sponsors img:hover {
    opacity: 100%;
}

.sponsors ul {
    margin-top: 70px; 
    list-style-type: none;
}

.sponsors ul li {
    opacity: 80%;
    color: rgb(5, 59, 60);
}
.sponsors ul li:hover {
    opacity: 100%;
}

.socials a {
  /* sets the button size */
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  /* sets the button shape and shadow */
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  /* defines the gradient background */
  background: linear-gradient(
    to right,
    rgb(24, 136, 123),
    rgb(18, 54, 48)
  );
  /* for a smoother hover effect */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.socials a:hover {
  /* slight lift on hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}

.socials img {
  /* scales the icon within the button */
  height: 60%;
  width: auto;
  /* ensures the icon is white */
  filter: brightness(0) invert(1);
  /* you might not need this if you use svgs */
}

.socials {
  /* centers the buttons and adds space between them */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; /* optional, adds space between buttons */
  flex-wrap: wrap; /* optional, for responsiveness */
}

.membersect {
    flex-wrap: wrap;
}

.membersect > p{
    width: 50%;
    margin: 30px;
    margin-bottom: 10px;
}

.membersect h3{
    padding: .3em;
    letter-spacing: .2rem;
    font-weight: bold;
    font-size: 40px;
    margin: 15px;
}

.membersect hr {
    display: block;
    width: 20%;
    height: 1px;
    background-color: rgb(167, 224, 232);
    border: none;
    margin-top: 10px;
    margin-bottom: 20px;
}

.membersect .listing{
    padding-left: 60px;
    padding-right: 60px;
}

.listing {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.listing .member {
    margin: 10px;
}

.listing img{
    width: 250px;
    height: 250px;
    margin: 30px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.memberinfo {
    padding: 20px;
    max-width: 250px;
}

.memberinfo p{
    margin-top: 5px;
}

.member img{
    border-radius: 10px;
}

.listing .bordername {
    opacity: 90%;
    letter-spacing: .1rem;
    font-size: 30px;
    font-weight: bold;
    padding: 5px;
    word-wrap: break-word;
    border: 3px solid var(--outline);
    border-radius: 10px;
}

.btn {
    margin-bottom: 10px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    border: 3px solid var(--outline);
    color: var(--outline);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 11;
    text-transform: capitalize;
    padding: 10px;
    transition: color 0.5s ease, border 0.5s ease;
    box-shadow: 9px 4px 4px 1px var(--dark-green);
}

.btn h1{
    margin-bottom: 0;
}

.btn hover{
    border-color: black;
    
}

.btngroup {
    display: flex;
    flex-direction: column;
}

.map {
    width: 100%;
}

.location {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    margin-left: 8%;
    margin-right: 8%;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 3px solid var(--outline);
    box-shadow: 5px 6px 4px 1px var(--dark-green);
    border-radius: 10px;
}

.locinfo {
    color: var(--dark-green);
    padding: 20px;
    margin-left: 20px;
    max-width: 700px;
}

.locinfo p{
    margin-top: 5px;
    margin-bottom: 20px;
}

.contactinfo a {
    color: rgb(16, 103, 105);
}

input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    opacity: 85%;
    border-radius: 10px;
    background-color: var(--white-smoke);
}

form input, form textarea{
    font-size: large;
}

.phonecc {
    width: 10%;
    min-width: 80px;
}

.phone3 {
    width: 20%;
    min-width: 80px;
}

.phone4 {
    width: 20%;
    min-width: 93px;
}

textarea {
    width: 90%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    opacity: 85%;
    background-color: var(--white-smoke);
}

.support {
    padding: 40px;
    max-width: 700px;
}

.support > h1 {
    margin-bottom: 20px;
}

.support > p {
    margin-bottom: 20px;
}

.fade-in {
    opacity: 0;
    animation: fadeInAnimation 1s ease forwards;
}

.icondesc {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    margin: 10px;
    margin-bottom: 50px;
}

.icondesc img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.icondesc p {
    margin: 0;
    margin-bottom: 20px;
    margin-top: 40px;
    text-align: center;
}

.descblob {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 350px;
    margin: 20px;
}

.descblob p {
    margin: 0;
    text-align: center;
    min-width: 200px;
}

/* Styling for the profile section */
.profile {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    padding: 40px;
    width: 72%;
}

/* Styling for the left side of the profile */
.p-info {
    flex: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-right: 20px;
}

.name {
    font-size: 30px;
    margin-bottom: 10px;
}

.p-info img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 30px;
    margin-top: 30px;
    -webkit-filter: drop-shadow(1px 1px 0 var(--outline))
                drop-shadow(-1px 1px 0 var(--outline))
                drop-shadow(1px -1px 0 var(--outline))
                drop-shadow(-1px -1px 0 var(--outline));

    filter: drop-shadow(1px 1px 0 var(--outline))
        drop-shadow(-1px 1px 0 var(--outline))
        drop-shadow(1px -1px 0 var(--outline))
        drop-shadow(-1px -1px 0 var(--outline));
}

/* Styling for the right side of the profile */
.p-bio {
    flex: 70%;
    padding: 50px;
}

.memberbio {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: bold;
}

.memberrole {
    font-size: 22px;
    margin-bottom: 15px;
}

.memberinterests {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.p-projects {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow: auto;
    margin-top: 20px;
    padding-top: 20px;
    align-items: center;
    justify-content: center;
}

.p-projects a {
    display: inline-block;
    height: 50px;
    width: auto;
    padding: 5px;
    text-align: center;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-filter: drop-shadow(1px 1px 0 var(--outline))
                drop-shadow(-1px 1px 0 var(--outline))
                drop-shadow(1px -1px 0 var(--outline))
                drop-shadow(-1px -1px 0 var(--outline));

    filter: drop-shadow(1px 1px 0 var(--outline))
        drop-shadow(-1px 1px 0 var(--outline))
        drop-shadow(1px -1px 0 var(--outline))
        drop-shadow(-1px -1px 0 var(--outline));
}

.p-projects img {
    height: 50px;
    width: auto;
    border-radius: 10px;
}

.searchresults {
    width: 80%;
    color: rgb(97, 182, 180);
}

.searchresult {
    margin: 25px;
    padding: 25px;
    text-shadow: 1px 1px 2px rgb(5, 59, 60);
    background-color: rgb(27, 83, 75);
    opacity: 90%;
    transition: opacity 0.5s ease;
    transition: box-shadow 0.5s ease;
}

.searchresult:hover {
    opacity: 1;
    box-shadow: 4px 4px 8px rgb(19, 154, 147);
}

.searchresult h3 {
    margin-bottom: 15px;
}

.searchresult p {

}
  

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}

@media all and (max-width: 700px) {
    .section {
        min-height: 400px;
        width: 100%;
    }
}

@media all and (max-width: 800px) {
    .locinfo {
        margin-left: 0;
    }

    .location {
        flex-direction: column;
    }
}

@media all and (max-width: 900px) {
    .vr {
        display: none;
    }
    body {
        margin-top: 90px;
    }
    .sponsors img {
        height: 70px;
    }

    .socials img {
        height: 70px;
    }

    .membersect > p{
        width: 80%;
    }


    .duo {
        flex-direction: column; 
    }

    .duo .desc {
        padding: 50px; 
        width: auto;
    }

    .duo img {
        -webkit-filter: drop-shadow(2px 2px 0 var(--outline))
                drop-shadow(-2px 2px 0 var(--outline))
                drop-shadow(2px -2px 0 var(--outline))
                drop-shadow(-2px -2px 0 var(--outline));

        filter: drop-shadow(2px 2px 0 var(--outline))
            drop-shadow(-2px 2px 0 var(--outline))
            drop-shadow(2px -2px 0 var(--outline))
            drop-shadow(-2px -2px 0 var(--outline));
        margin: 2px;
    }

    .profile {
        flex-direction: column;
        width: 90%;
        align-items: center;
    }

    .p-info {
        padding: 20px;
    }

    .searchresults {
        width: 90%;
    }
}

@media all and (max-width: 1345px) {
    body {
        margin-top: 40px;
    }
    .section:first-child{
        padding-top: 50px;
    }
}