/*  import google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');

:root {
    --c1: #2E3532; /* Coolors | Gunmetal */
    --c2: #58A4B0; /* Main accent color (until 20260108) */
    --c3: #FFFFFF; /* Main text color (legacy 20260108) */
    --c4: #1A2824; /* Secondary accent color (until 20260108) */
    --c5: #7E9181; /* Coolors | Dusty Olive*/
    --c6: #8D99AE; /* Coolors | Lavender Grey */
    
    --c7: #63458A; /* Coolors | Dusty Grape */
    --c8: #715093; /* Coolors | Dusty Grape */
    --c9: #7E5A9B; /* Coolors | Deep Lilac */
    --c10: #9871AE; /* Coolors | Amethyst Smoke */
    --c11: #B288C0; /* Coolors | Amethyst Smoke */
    --c12: #CBA0D3; /* Coolors | Wisteria */
    --c13: #E4B7E5; /* Coolors | Pink Orchid */
        
    --c14: #FF8484; /* OG grid color 1 */
    --c15: #A2A77F; /* OG grid color 2 */
    --c16: #5D576B; /* OG grid color 3 */
    --c17: #177E89; /* OG grid color 4 */

    --c18: #1D3354; /* Coolors | Twilight Indigo */
    --c19: #467599; /* Coolors | Rich Cerulean */
    --c20: #9ED8DB; /* Coolors | Frosted Blue */
    --c21: #E9FFF9; /* Coolors | Frozen Water */
    --c22: #D64045; /* Coolors | Scarlet Rush */

    --c23: #EFC7C2; /* Coolors | Cotton Rose */
    --c24: #FFE5D4; /* Coolors | Powder Petal */
    --c25: #BFD3C1; /* Coolors | Ash Grey */
    --c26: #68A691; /* Coolors | Muted Teal */
    --c27: #694F5D; /* Coolors | Mauve Shadow */

    --c28: #395C6B; /* Coolors | Blue Slate */

    --c100: #111111; /* Secondary text color (legacy 20260108) */


    /*
    --c7: #8ACDEA;
    --c8: #8C4843;
    --c9: #9E643C;
    --c10: #EDE6F2;
    --c11: #746D75;
    */

    --bubble-incoming: #e5e5ea;
    --bubble-outgoing: #0b84ff;
    --text-incoming: #000;
    --text-outgoing: #fff;
    --time-color: #8e8e93;
    --font1: "Dancing Script", cursive;
    --font2: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html {
    scroll-behavior: smooth;
}


::selection {
  background: #f03a6d;
}


/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

a:link{
    color: var(--c26);
}

a:visited{
    color: #03120E;
/*  color: #0a546b; */
}
.projects ul a:hover,
.education ul a:hover {
    text-decoration: underline;
    
}

/* all similar content styling codes */
section {
    padding: 100px 0;
}
.max-width {
    max-width: 1100px;
    padding: 0 80px;
    margin: auto;
}
.projects .max-width,
.education .max-width {
    /*max-width: 1100px; */
    /* padding: 0px 80px; */
    justify-content: center;
    width: 90%;
    /* margin: auto; */
    
}

.about, .projects, .education, .skills, .teams, .contact, footer, grid-container {
    font-family: 'Poppins', sans-serif;
}

/* .about .about-content, */
.skills .skills-content,
/* .projects .project-content, */
.contact .contact-content {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
/*    align-items: center; */
    justify-content: space-between;
}


.about .about-content {
    display: flex;
    flex-wrap: wrap;
    /* align-items: start; */
    align-items: center;
    justify-content: center;
}

.projects .project-content,
.education .education-content {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
/*    align-items: center; */
    justify-content: space-between;
}

section .title {
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 25px;
    padding-bottom: 20px;
    font-family: 'Ubuntu', sans-serif;
}
.about .title::before,
.teams .title::before,
.contact .title::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #03120E;
    transform: translateX(-50%);
}
section .title::after {
    position: absolute;
    bottom: -8px;
    left: 50%;
    font-size: 16px;
    color: var(--c26);
    padding: 0 5px;
    background: var(--c3);
    transform: translateX(-50%);
}

/* navbar styling */
.navbar {
    position: fixed;
    width: 100%;
    z-index: 999;
    padding: 30px 0;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s ease;
}
.navbar.sticky {
    padding: 15px 0;
    background: var(--c26);
}
.navbar .max-width {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .logo a {
    color: var(--c3);
    font-size: 30px;
    font-weight: 600;
}
.navbar .logo a span {
    color: var(--c26);
    transition: all 0.3s ease;
}
.navbar.sticky .logo a span {
    color: var(--c3);
}
.navbar .menu li {
    list-style: none;
    display: inline-block;
}
.navbar .menu li a {
    display: block;
    color: var(--c3);
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    transition: color 0.3s ease;
}
.navbar .menu li a:hover {
    color: var(--c26);
}
.navbar.sticky .menu li a:hover {
    color: var(--c100);
}

/* menu btn styling */
.menu-btn {
    color: var(--c3);
    font-size: 20px;
    cursor: pointer;
    display: none;
}
.scroll-up-btn {
    position: fixed;
    height: 45px;
    width: 42px;
    background: var(--c26);
    right: 30px;
    bottom: 10px;
    text-align: center;
    line-height: 45px;
    color: var(--c3);
    z-index: 9999;
    font-size: 30px;
    border-radius: 6px;
    border-bottom-width: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.scroll-up-btn.show {
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
}
.scroll-up-btn:hover {
    filter: brightness(75%);
}
#project-key {
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    height: 25px;
    padding: 0 0 10px 0;
}
#project-key input:hover + label {
    cursor: pointer;
    background: var(--c3);
    color: var(--c100);
}
.grid-container {
    /* grid-template-columns: auto auto auto auto auto;
    grid-template-columns: repeat(auto-fill, 150px); 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
    display: grid;
    grid-template-columns: repeat(auto-fit, 150px);
    grid-auto-rows: 150px;
    grid-gap: 0;
    justify-content: center;
    margin-top: 20px;
}
.grid-container2 {
    /* grid-template-columns: auto auto auto auto auto;
    grid-template-columns: repeat(auto-fill, 150px); 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-columns: repeat(auto-fit, 250px); */
    grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
    display: grid;
    grid-auto-rows: 250px;
    grid-gap: 50px;
    justify-content: center;
    margin-top: 20px;
}
.grid-item {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    text-align: center;
    color: var(--c3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    /* border: 2px solid var(--c3); */
    aspect-ratio: 1;
    /* padding: 10px 10px 10px 10px; */
    /* height: 185px;
    width: 185px;
    margin: 0;
    outline: 1px white solid; */
}
.grid-item i {
    font-size: 40px;
    padding: 5px 0 5px 0;
}
.grid-item img {
    width: 100%;
    padding: 0 0 5px 0;
}
#projects .grid-item a {
    color: var(--c3);
    display: block;
    width: 80%;
}
#education .grid-item a {
    color: var(--c3);
    display: block;
    margin: 0 25px;
}

#education .grid-item {
    border-radius: 20%;
    background: var(--c3);
    color: var(--c1);
    width: 100%;
    height: 100%;
}

.research {
    background: var(--c7);
}
.writing {
    background: var(--c8);
}
.finance {
    background: var(--c9);
}
.multimedia {
    background: var(--c10);
}
.development {
    background: var(--c11);
}

/* #categoryAll:checked, #category1:checked, #category2:checked, #category3:checked, #category4:checked {
    border-radius: 50px;
}
*/

.radio-option {
    margin: 5px;
}
input[type="radio"] {
    display: none;
}
label {
    padding: 4px 8px;
    font-weight: bold;
    border-radius: 50px;
}
input[type="radio"]:checked + label {
    background-color: var(--c3);
}

#categoryAll + label {
    color: var(--c3);
}
#category1 + label {
    color: var(--c7);
}
#category2 + label {
    color: var(--c8);
}
#category3 + label {
    color: var(--c9);
}
#category4 + label {
    color: var(--c10);
}
#category5 + label {
    color: var(--c11);
}

#categoryAll:checked + label {
    color: var(--c100);
}

.grid-item.project:hover {
    background: var(--c100);
    cursor: pointer;
}



/* home section styling */
.home {
    display: flex;
    background: var(--c1); /* url("images/dark-geometric-background.png") no-repeat center; */
    height: 100vh;
    color: var(--c3);
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}
.home .max-width {
  width: 100%;
  display: flex;
}
.home .max-width .row {
  margin-right: 0;
}
.home .home-content .text-1{
    font-size: 20px;
}
.home .home-content .text-2 {
    font-size: 60px;
    font-weight: 600;
    margin-left: -3px;
}
.home .home-content .text-3{
    font-size: 25px;
    margin: 5px 0;
}
.home .home-content .text-3 span {
    color: var(--c26);
    font-weight: 500;
}
.home .home-content a {
    display: inline-block;
    background: var(--c26);
    color: var(--c3);
    font-size: 18px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid var(--c26);
    transition: all 0.3s ease;
}
.home .home-content a:hover {
    color: var(--c26);
    background: none;
}

/* about section styling */
.about .title::after {
    content: "who I am";
}
.about .about-content .left {
    width: 45%;
}
.about .about-content img {
    height: 400px;
    width: 400px;
    object-fit: cover;
    border-radius: 6px;
    float: left;
    margin-right: 20px;
}
.about .about-content .right {
    width: 100%;
}
.about .about-content .right .text {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.about .about-content .right .text span {
    color: var(--c26);
}
.about .about-content .right p{
    text-align: justify;
}
.about .about-content .right a {
    display: inline-block;
    background: var(--c26);
    color: var(--c3);
    font-size: 18px;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid var(--c26);
    transition: all 0.3s ease;
    
    /* width: 300px!important;
    margin-left: 10%;
    margin-right: 10%; */
}

.button-wrapper-resume {
    width: auto;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.about .about-content .right a:hover {
    color: var(--c26);
    background: none;
}





/* teams section styling attempt */
.teams{
    color: #03120E;
    background: var(--c3);
}





/* projects section styling */
.projects, .education {
    color: #03120E;
    background: var(--c1); /* url("images/ocean-sky.jpg") no-repeat center; */
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-content: center;
}
#education {
    background: var(--c28);
}

.projects .title,
.education .title {
    color: var(--c3);
}

.projects .title::before,
.education .title::before {
    background: var(--c3);
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    /* background: #03120E */;
    transform: translateX(-50%);
}

#projects .title::after {
    background: var(--c1) /* #03120E */;
    color: var(--c10);
    content: "what I do";
}
#education .title::after {
    background: var(--c28) /* #03120E */;
    color: var(--c3);
    content: "what I've learned";
}
.projects .project-content .card,
.education .education-content .card {
    /* width: calc(25% - 20px); */
    background: var(--c3);
    text-align: left;
    border-radius: 6px;
    padding: 35px 30px 25px 30px;
    /* cursor: pointer;
    transition: all 0.3s ease; */
}

/* .projects .project-content .card:hover {
    background: var(--c3); 
} */


/* .projects .project-content .card .box,
.education .education-content .card .box,
{
    transition: all 0.3s ease;
}
.projects .project-content .card:hover .box{
    transform: scale(1.05);
} */

.projects .project-content .card i,
.education .education-content .card i {
    font-size: 50px;
    color: var(--c26);
    /* transition: color 0.3s ease; */
}
.projects .project-content .card span:hover a,
.education .education-content .card span:hover a {
    color: #03120E;
}
.projects .project-content .card span,
.education .education-content .card span {
    display: block;
    text-align: center;
    margin-bottom: 20px;
    color: var(--c26);
}
.projects .project-content li,
.education .education-content li {
    font-size: 12px;
}

/* skills section styling */

.skills .title::after {
    content: "what I know";
}
.skills .skills-content .column {
    width: calc(50% - 30px);
}
.skills .skills-content .left .text {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.skills .skills-content .left p {
    text-align: justify;
}
.skills .skills-content .left a {
    display: inline-block;
    background: var(--c26);
    color: var(--c3);
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid var(--c26);
    transition: all 0.3s ease;
}
.skills .skills-content .left a:hover {
    color: var(--c26);
    background: none;
}
.skills .skills-content .right .bars {
    margin-bottom: 15px;
}
.skills .skills-content .right .info {
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}
.skills .skills-content .right span {
    font-weight: 500;
    font-size: 18px;
}
.skills .skills-content .right .line {
    height: 5px;
    width: 100%;
    background: lightgrey;
    position: relative;
}
.skills .skills-content .right .line::before {
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--c26);
}
.skills-content .right .html::before {
    width: 90%;
}
.skills-content .right .css::before {
    width: 60%;
}
.skills-content .right .js::before {
    width: 80%;
}
.skills-content .right .php::before {
    width: 50%;
}
.skills-content .right .mysql::before {
    width: 70%;
}




/* teams section styling */
/* TIMELINE SETTINGS */
.teams-timeline {
  --col-gap: 2rem;
  --row-gap: 2rem;
  --line-w: 0.25rem;
  display: grid;
  grid-template-columns: var(--line-w) 1fr;
  grid-auto-columns: max-content;
  column-gap: var(--col-gap);
  list-style: none;
  width: min(60rem, 90%);
  margin-inline: auto;
}

/* line */
.teams-timeline::before {
    margin-top: 25px;
    content: "";
    grid-column: 1;
    grid-row: 1 / span 20;
    background: rgb(225, 225, 225);
    border-radius: calc(var(--line-w) / 2);
}

/* columns*/

/* row gaps */
.teams-timeline .timeline-item:not(:last-child) {
  margin-bottom: var(--row-gap);
}

/* card */
.teams-timeline .timeline-item {
  grid-column: 2;
  --inlineP: 1.5rem;
  margin-inline: var(--inlineP);
  grid-row: span 2;
  display: grid;
  grid-template-rows: min-content min-content min-content;
}

/* date */
.teams-timeline .timeline-item .date {
  --dateH: 3rem;
  height: var(--dateH);
  margin-inline: calc(var(--inlineP) * -1);

  text-align: center;
  background-color: var(--accent-color);

  color: white;
  font-size: 1.25rem;
  font-weight: 700;

  display: grid;
  place-content: center;
  position: relative;

  border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}

/* date flap */
.teams-timeline .timeline-item .date::before {
  content: "";
  width: var(--inlineP);
  aspect-ratio: 1;
  background: var(--accent-color);
  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
  position: absolute;
  top: 100%;

  clip-path: polygon(0 0, 100% 0, 0 100%);
  right: 0;
}

/* circle */
.teams-timeline .timeline-item .date::after {
  content: "";
  position: absolute;
  width: 1rem;
  aspect-ratio: 1;
  background: var(--accent-color); /* var(--bgColor) */
  border: 0.3rem solid var(--accent-color);
  border-radius: 50%;
  top: 50%;

  transform: translate(50%, -50%);
  right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

/* title descr */
.teams-timeline .timeline-item .subtitle,
.teams-timeline .timeline-item .descr {
  background: var(--bgColor);
  position: relative;
  padding-inline: 0.75rem;
}
.teams-timeline .timeline-item .subtitle {
  overflow: hidden;
  padding-block-start: 1.5rem;
  padding-block-end: 1rem;
  font-weight: 300;
}
.teams-timeline .timeline-item .descr {
    padding-block-end: 0.5rem;
    font-size: 14px;
    font-weight: 300;
    margin-left: 20px;
}

/* shadows */
.teams-timeline .timeline-item .subtitle::before,
.teams-timeline .timeline-item .descr::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  left: 50%;
  border-radius: 50%;
  filter: blur(4px);
  transform: translate(-50%, 50%);
}
.teams-timeline .timeline-item .subtitle::before {
  bottom: calc(100% + 0.125rem);
}

.teams-timeline .timeline-item .descr::before {
  z-index: -1;
  bottom: 0.25rem;
}

@media (min-width: 40rem) {
  .teams ul {
    grid-template-columns: 1fr var(--line-w) 1fr;
  }
  .teams ul::before {
    grid-column: 2;
  }
  .teams-timeline .timeline-item:nth-child(odd) {
    grid-column: 1;
  }
  .teams-timeline .timeline-item:nth-child(even) {
    grid-column: 3;
  }

  /* start second card */
  .teams-timeline .timeline-item:nth-child(2) {
    grid-row: 2/4;
  }

  .teams-timeline .timeline-item:nth-child(odd) .date::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    left: 0;
  }

  .teams-timeline .timeline-item:nth-child(odd) .date::after {
    transform: translate(-50%, -50%);
    left: calc(100% + var(--col-gap) + var(--line-w) / 2);
  }
  .teams-timeline .timeline-item:nth-child(odd) .date {
    border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
  }
}
.teams .title::after {
    content: "who I support";
    color: var(--c7);
}






/* education section styling */

/* .education .carousel {
    justify-content: space-between;
}
.education .carousel .card:hover {
    background: var(--c26);
}
.education .carousel .card:hover .box{
    transform: scale(1.05); -->
} */

#education .max-width .carousel .card{
    color: var(--c3);
    /* background-image: url("blank-diploma-clean.png"); */ /* #FCF5E5 var(--c8) #222 */
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 5px;
    /* border: 3px solid var(--c8); */
    text-align: center;
    overflow: hidden;
    /* width: 300px; */
    /* padding: 30px 30px 30px 30px; */
    /* height: 300px; */
    padding: 10%;
    aspect-ratio: 4/3;
    /* padding-bottom: 75%; */
    /* max-width: 90vw;
    max-height: 67.5vw; */
    justify-content: center;
    
    /* transition: all 0.3s ease; */
}


#education .card .box{
    display: flex;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    padding-bottom: 75%;
    justify-content: center;
    /* transition: all 0.3s ease; */
    /* background: transparent;
    background-color: #FCF5E5; var(--c8) */
}
#education .carousel .card a {
    /* height: 50px;
    width: 50px;
    max-width: 25vw;
    max-height: 25vw; */
    width: 35%;
    object-fit: contain;
    border-radius: 100%;
    border: 2px solid var(--c8); /* #1A2824 */
    transition: all 0.3s ease;
    background: var(--c3);
    margin: 3px;
    padding: 10px;
}
#education .text {
    color: var(--c3);
    /* font-family: diploma; */
    font-size: 18px; /* 16px */
    font-weight: 500;
    margin: 5px 0 0 0;
}
#education .text2 {
    color: var(c3);
    font-size: 14px; /* 12px */
    font-weight: 200;
}
#education .text3 {
    color: var(c3);
    font-size: 12px; /* 12px */
    font-weight: 500;
}
#education .text4 {
    color: var(c3);
    font-size: 10px; /* 12px */
    font-weight: 200;
}
#education .text5 {
    color: var(c3);
    font-size: 12px;
    font-weight: 100;
}
/* .education .carousel .card:hover img {
    border-color: var(--c3);
} */
.owl-dots{
    text-align: center;
    margin-top: 20px;
}
.owl-dot {
    height: 13px;
    width: 13px;
    margin: 0 5px;
    outline: none!important;
    border-radius: 50%;
    border: 2px solid var(--c26)!important;
    transition: all 0.3s ease;
}
.owl-dot.active {
    width: 35px;
    border-radius: 14px;
}
.owl-dot.active,
.owl-dot:hover {
    background: var(--c26)!important;
}











/* contact section styling */
.contact .title::after {
    content: "get in touch";
}
.contact .contact-content .column {
    width: calc(50% - 30px);
}
.contact .contact-content .text {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.contact .contact-content .left p{
    text-align: justify;
}
.contact .contact-content .left .icons{
    margin: 10px 0;
}
.contact .contact-content .row {
    display: flex;
    height: 65px;
    align-items: center;
}
.contact .contact-content .row .info{
    margin-left: 30px;
}
.contact .contact-content .row i {
    font-size: 25px;
    color: var(--c26);
}
.contact .contact-content .info .head{
    font-weight: 500;
}
.contact .contact-content .info .sub-title {
    color: #333;
}
.contact .right form .fields{
    display: flex;
}
.contact .right form .field,
.contact .right form .fields .field{
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
}
.contact .right form .textarea {
    height: 80px;
    width: 100%;
}
.contact .right form .name {
    margin-right: 10px;
}
.contact .right form .field input,
.contact .right form .textarea textarea {
    height: 100%;
    width: 100%;
    border: 1px solid lightgrey;
    border-radius: 6px;
    outline: none;
    padding: 0 15px;
    font-size: 17px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus{
    border-color: #b3b3b3;
}
.contact .right form .textarea textarea {
  padding-top: 10px;
  resize: none;
}
.contact .right form .button-area {
  display: flex;
  align-items: center;
}
.right form .button-area button {
  color: var(--c3);
  display: block;
  width: 160px!important;
  height: 45px;
  outline: none;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  flex-wrap: nowrap;
  background: var(--c26);
  border: 2px solid var(--c26);
  transition: all 0.3s ease;
}
.right form .button-area button:hover {
  color: var(--c26);
  background: none;
}
/* footer section styling */
footer {
    background: var(--c1);
    padding: 15px 23px;
    color: var(--c3);
    text-align: center;
    text-decoration: none;
    font-size: 14px;
}

/* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--c1);
    min-width: 160px;
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    z-index: 1;
}

/* Dropdown Content (Hidden by Default) */
.navbar.sticky .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--c26);
    min-width: 160px;
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    z-index: 1;
    border-radius: 10px;
}

.navbar.sticky .dropdown-content:hover {
    border-radius: 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: var(--c3);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    /* background-color: var(--c26); */
    color: var(--c26);
}

/* Change color of dropdown links on hover */
.navbar.sticky .dropdown-content a:hover {
    /* background-color: var(--c26); */
    color: var(--c100);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}






    /* ===============================
      TEAMS
    ================================ */
    
    #pmi {
      accent-color: var(--c7);
    }
    #lo {
        accent-color: var(--c8);
    }
    #asu {
      accent-color: var(--c9);
    }
    #wpc {
        accent-color: var(--c10);
    }
    #ics {
      accent-color: var(--c11);
    }
    #sp {
        accent-color: var(--c12);
    }
    #bwp {
        accent-color: var(--c13);
    }










/* responsive media query start */
@media (max-width: 1104px) {
    .about .about-content .right img {
        height: 300px;
        width: 300px;
    }
}

@media (max-width: 1000px){
    .menu-btn {
        display: block;
        z-index: 999;
    }
    .menu-btn i.active:before {
        content: "\f00d";
    }
    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background: #03120E;
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
    }
    .navbar .menu.active {
        left: 0;
    }
    .navbar .menu li {
        display: block;
    }
    .navbar .menu li a {
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
    }
    .home .home-content .text-2 {
        font-size: 70px;
    }
    .home .home-content .text-3{
        font-size: 30px;
    }
    .home .home-content a {
        font-size: 23px;
        padding: 10px 30px;
    }
    .max-width {
        max-width: 930px;
        
    }
    .about .about-content .column {
        width: 100%;
    }
    .about .about-content .left {
        display: flex;
        justify-content: center;
        margin: 0 auto 60px;
    }
    .about .about-content .right {
        flex: 100%;
    }
    .projects .project-content .card,
    .education .education-content .card{
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, 150px);
        grid-auto-rows: 150px;
        grid-gap: 0;
        justify-content: center;
        margin-top: 20px;
        /* display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto; */
    }
    .grid-item {
        font-size: 12px;
        height: 150px;
        width: 150px;
    }
    .grid-item i {
        font-size: 40px;
    }
    .skills .skills-content .column,
    .contact .contact-content .column {
        width: 100%;
        margin-bottom: 35px;
    }
    .contact .contact-content .left .row, 
    .contact .contact-content .button-area, 
    .contact .contact-content .text,
    .contact .contact-content .left p{
        justify-content: center;
        text-align: center;
    }
    /*
    .button-area {
        justify-content: center;
    }
    */
}

@media (max-width: 900px) {
    .max-width {
        padding: 0 23px;
    }
    .home .home-content .text-2 {
        font-size: 60px;
    }
    .home .home-content .text-3{
        font-size: 25px;
    }
    .home .home-content a {
        font-size: 20px;
    }
    .projects .project-content .card{
        width: 100%;
    }
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto;
    }
    #project-key,
    #education-key {
        display: block;
        height: 235px;
    }
}

@media (max-width: 650px) {
    /*.navbar .logo {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    #home, #about {
        text-align: center;
        display: flex;
        justify-content: center;
    }
    */
    .home .home-content .text-2 {
        font-size: 50px;
    }
    .home .home-content .text-3{
        font-size: 20px;
    }
    .about .about-content .right .text,
    .skills .skills-content .left .text {
        font-size: 16px;
    }
    .contact .right form .fields{
        flex-direction: column;
    }
    .contact .right form .name,
    .contact .right form .email {
        margin: 0;
    }
    .right form .error-box{
       width: 150px;
    }
    .scroll-up-btn {
        right: 15px;
        bottom: 15px;
        height: 38px;
        width: 35px;
        font-size: 23px;
        line-height: 38px;
    }
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, 150px);
        grid-auto-rows: 150px;
        grid-gap: 0;
        justify-content: center;
        margin-top: 20px;
        /* display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto; */
    }
}