* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    list-style: none;
    text-decoration: none;
}

body {
    background: linear-gradient(245.59deg, #4d6c95 0%, #385a70 28.53%, #132a39 75.52%);
    background-repeat: no-repeat;
}

header {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 33px 9%;
    background-color: transparent;
}

.header.scrolled {
    position: fixed;
    /* From https://css.glass */
    background: rgba(56, 90, 112, 1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(56, 90, 112, 0.3);
    padding-top: 0.5px;
    padding-bottom: 0px;
    transition: all .55s ease;
}

.header.scrolledabt {
    position: fixed;
    /* From https://css.glass */
    background: rgba(122, 181, 241, 0.851);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(122, 181, 241, 0.165);
    padding-top: 0.5px;
    padding-bottom: 0px;
    transition: all .55s ease;
}

.header.scrolledses {
    position: fixed;
    /* From https://css.glass */
    /* From https://css.glass */
    background: rgba(129, 178, 204, 0.88);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.6px);
    -webkit-backdrop-filter: blur(4.6px);
    border: 1px solid rgba(137, 201, 210, 0.3);
    padding-top: 0.5px;
    padding-bottom: 0px;
    transition: all .55s ease;
}

.header.scrollskill {
    position: fixed;
    /* From https://css.glass */
    background: rgba(53, 131, 170, 0.784);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.116);
    backdrop-filter: blur(4.6px);
    -webkit-backdrop-filter: blur(4.6px);
    border: 1px solid rgba(137, 202, 210, 0.426);
    padding-top: 0.5px;
    padding-bottom: 0px;
    transition: all .55s ease;
}

.header.scrollcont {
    position: fixed;
    /* From https://css.glass */
    background: rgba(34, 88, 121, 0.886);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.459);
    backdrop-filter: blur(4.6px);
    -webkit-backdrop-filter: blur(4.6px);
    border: 1px solid rgba(122, 204, 215, 0.644);
    padding-top: 0.5px;
    padding-bottom: 0px;
    transition: all .55s ease;
}

.logo {
    font-size: 30px;
    font-weight: 500;
    color: white;
}

.navlist {
    display: flex;
    background-color: transparent;
}

.navlist a {
    color: white;
    margin-left: 60px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 5px solid transparent;
    transition: all .55s ease;
}

.navlist a:hover {
    border-bottom: 2px solid white;
}

#menu-icon {
    opacity: 0;
    color: White;
    font-size: 35px;
    z-index: 10001;
    cursor: pointer;
    display: none;
}

.hero {
    height: 100%;
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 2em;
}

section {
    padding: 0 9%;
}

.hero-text h5 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 100;
    margin-bottom: 20;
}

.hero-text h1 {
    color: white;
    font-size: 45px;
    font-family: 'Permanent Marker', cursive;
}

.hero-text h4 {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin-bottom: 1px;
}

.text {
    display: none;
    animation: fade 3s ease-in-out infinite;
}

@keyframes fade {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.hero-img img {
    opacity: 0.95;
    height: 840px;

    /* Firefox */
    mask-image:
      linear-gradient(to top,    transparent, black 200px),
      linear-gradient(to right,  transparent, black 300px),
      linear-gradient(to bottom, transparent, black 200px),
      linear-gradient(to left,   transparent, black 300px);
    mask-composite: intersect;
    mask-repeat: no-repeat;
    mask-size: cover;
}

.hero-text a {
    display: inline-block;
    color: white;
    background: #4d5a95;
    border: 1px solid transparent;
    padding: 12px 30px;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 500;
    border-radius: 30px;
    text-transform: uppercase;
    transition: all .55s ease;
}

.hero-text a:hover {
    background: transparent;
    border: 1px solid white;
    transform: translate(8px);
}

.icons {
    position: absolute;
    top: 50%;
    padding: 0 9%;
    transform: translate(-50%);
}

.scroll-down {
    position: fixed;
    bottom: 6%;
    right: 9%;
    z-index: 1000;
}

.scroll-down i {
    display: block;
    padding: 12px;
    font-size: 25px;
    color: white;
    background: #4d8595;
    border-radius: 30px;
    transition: all .50s ease;
}

.scroll-down i:hover {
    transform: translateY(-5px);
}

.about {
    display: grid;
    grid-template-columns: 40% auto;
    padding: 10%;
    align-items: center;
    background-color: #f0f8ff;
    width: 100%;
    height: 100vh;
}

.abouttext {
    padding: 10px;
    text-align: center;
    font-size: 18px;
}

.about .abouttext p {
    text-align: justify;
}

.about .aboutframe {
    opacity: 0.9;
    border: transparent;
    height: 60vh;
    width: auto;
}

.container:hover .attribution {
    opacity: 0;
}

.expset {
    height: auto;
    width: 100%;
    padding: 5%;
    display: block;
    align-items: center;
    text-align: center;
    background: rgba(227, 238, 247, 0.813);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.273);
    backdrop-filter: blur(4.6px);
    -webkit-backdrop-filter: blur(4.6px);
    border: 1px solid rgba(227, 238, 247, 0.524);
}

.skillsec {
    padding: 10px;
    text-align: center;
    color: aliceblue;
    height: auto;
    width: 100%;
    display: block;
    align-items: center;
}

/* Project Section */
.projects {
  padding: 60px 0;
  background: #f5f6fa;
  text-align: center;
}

.projects h1 {
  margin-bottom: 20px;
}

/* 3D Carousel */
.carousel-3d {
  width: 100%;
  max-width: 1000px;
  height: 420px;
  margin: auto;
  perspective: 1200px;
  position: relative;
  overflow: hidden;
}

.carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s ease;
}

/* Project Card */
.project-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 360px;
  margin: -180px 0 0 -140px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backface-visibility: hidden;
}

/* Preview (Image or iframe) */
.project-preview {
  flex: 1.6;
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-preview img,
.project-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

/* Info Section */
.project-info {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.project-info h3 {
  margin: 4px 0;
  font-size: 1.2rem;
  color: #333;
}

.project-info p {
  margin: 0;
  font-size: 0.9rem;
  color: #555;
}

/* Carousel Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 10px 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 10;
}

.carousel-btn:hover {
  background: rgba(0,0,0,0.8);
}

.carousel-btn.prev {
  left: 20px;
}

.carousel-btn.next {
  right: 20px;
}

/* Responsive */
@media (max-width: 600px) {
  .project-card {
    width: 220px;
    height: 300px;
    margin: -150px 0 0 -110px;
  }
}


@media(max-width: 775px) {
    header {
        padding: 15px 3%;
        transition: .2s;
    }
    .icons {
        padding: 0 3%;
        transition: .2s;
    }
    .scroll-down {
        right: 3%;
        transition: .2s;
    }
}

@media(max-width: 770px) {
    section {
        padding: 0 12%;
        transition: .2s;
    }
}

@media(max-width: 760px) {
    .hero-text h1 {
        font-size: 35px;
        margin: 0 0 30px;
    }
    .hero-text h5 {
        margin-bottom: 5px;
    }
    .about .aboutframe {
        opacity: 0.6;
        height: 40vh;
    }
}

@media(max-width: 683px) {
    .hero {
        transition: .2s;
    }
    .hero-img {
        text-align: center;
    }
    .hero-img img {
        width: 320px;
        height: auto;
    }
    .abouttext {
        font-size: 12px;
    }
}

@media(max-width: 632px) {
    section {
        transition: .2s;
    }
    .hero-img {
        text-align: center;
    }
    .hero-img img {
        width: 290px;
        height: auto;
    }
}

@media(max-width: 598px) {
    header {
        position: fixed;
    }
    #menu-icon {
        display: block;
    }
    .navlist {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 400px;
        height: auto;
        background: #517098;
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column;
        padding: 50px 20px;
        transition: all .55s ease;
    }
    .navlist a {
        display: block;
        margin: 7px 0;
        margin-left: 0;
    }
    .navlist .open {
        display: block;
        right: 0;
    }
    .hero-text {
        padding-top: 30vh;
    }
    .hero-img {
        text-align: center;
    }
    .hero-img img {
        width: 100%;
        height: auto;
        mask-image:
        linear-gradient(to top,    transparent, black 90px),
        linear-gradient(to right,  transparent, black 120px),
        linear-gradient(to bottom, transparent, black 90px),
        linear-gradient(to left,   transparent, black 120px);
        mask-composite: intersect;
        mask-repeat: no-repeat;
        mask-size: cover;
    }
    .hero {
        height: 100%;
        gap: 1rem;
        grid-template-columns: 1fr;
    }
    .about .aboutframe {
        opacity: 0.4;
    }
}

@media(max-width: 410px) {
    .navlist {
        right: -200%;
    }
    .hero-img {
        text-align: center;
    }
    .hero-img img {
        width: 290px;
        height: auto;
    }
    .about {
        grid-template-columns: auto;
    }
}

@media(max-width: 343px) {
    .about {
        display: block;
    }
    section {
        transition: .2s;
    }
    .hero-img {
        text-align: center;
    }
    .hero-text h1 {
        font-size: 30px;
        margin: 0 0 20;
    }
    .hero-img img {
        width: 220px;
        height: auto;
    }
    .about .abouttext {
        font-size: 9px;
        width: 100%;
    }
    .about {
        height: 80vh;
    }
    .container {
        font-size: 9px
    }
}

@media(max-width: 334px) {
    .about .aboutframe {
        padding-top: 5vh;
        height: 25vh;
        width: 280px;
    }
}

@media(max-width: 316px) {
    .about .aboutframe {
        padding-top: 5vh;
        height: 20vh;
        width: 250px;
    }
}

@media(max-width: 305px) {
    .hero-text {
        padding-top: 40vh;
    }
}


/* The actual timeline (the vertical ruler) */

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}


/* The actual timeline (the vertical ruler) */

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}


/* Container around content */

.container {
    text-align: justify;
    font-size: 12px;
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

.container p {
    text-align: center;
}


/* The circles on the timeline */

.container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}


/* Place the container to the left */

.left {
    left: 0;
}


/* Place the container to the right */

.right {
    left: 50%;
}


/* Add arrows to the left container (pointing right) */

.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}


/* Add arrows to the right container (pointing left) */

.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}


/* Fix the circle for containers on the right side */

.right::after {
    left: -16px;
}


/* The actual content */

.content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}


/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }
    /* Full-width containers */
    .container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    /* Make sure that all arrows are pointing leftwards */
    .container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }
    /* Make sure all circles are at the same spot */
    .left::after,
    .right::after {
        left: 15px;
    }
    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }
}


/*Skill Section*/

@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:900');
.card {
    background: rgba(255, 255, 255, 0.661);
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    cursor: pointer;
    height: 300px;
    margin: 20px;
    padding: 7px 20px;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.025);
    text-align: center;
    transition: height 1000ms;
    width: 260px;
}

@media (max-width: 767px) {
    .card {
        left: calc(50% - 20px);
        transform: translateX(-50%);
    }
}

.card .body-text {
    /* display: none; */
    transform: scale(1);
    opacity: 1;
    transition: opacity 0.5s;
    transform: 0.5s;
}

.expanded .body-text {
    display: block !important;
    animation: showBodyText linear 0.5s forwards;
    opacity: 0.1;
}

.body-text {
    animation: hideBodyText 0.5s linear forwards;
    opacity: 1;
}

@keyframes hideBodyText {
    to {
        opacity: 0;
    }
}

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


.card.expanded {
    height: 520px;
}

.label {
    margin-top: 30px;
    transform: translateY(10px);
    transition: transform 1000ms;
}

.card.expanded .label {
    transform: translateY(0);
}

.text1 {
    clip-path: polygon(0% 100%, 0 -90%, 50% -5%, 100% -90%, 100% 100%);
    -webkit-clip-path: polygon(0% 100%, 0 -90%, 50% -5%, 100% -90%, 100% 100%);
    transition: clip-path 1000ms;
}

.card.expanded .text1 {
    clip-path: polygon(0% 100%, 0 -100%, 50% -15%, 100% -100%, 100% 100%);
    -webkit-clip-path: polygon(0% 100%, 0 -100%, 50% -15%, 100% -100%, 100% 100%);
}

.text2 {
    clip-path: polygon(0% 100%, 0% -80%, 15% -70%, 17.23% -53.59%, 23% -40%, 27.23% -28.94%, 35% -20%, 41.09% -13.59%, 50% -10%, 58.91% -13.23%, 65% -20%, 72.77% -28.23%, 77% -40%, 82.77% -54.65%, 85% -70%, 100% -80%, 100% 100%);
    -webkit-clip-path: polygon(0% 100%, 0% -80%, 15% -70%, 17.23% -53.59%, 23% -40%, 27.23% -28.94%, 35% -20%, 41.09% -13.59%, 50% -10%, 58.91% -13.23%, 65% -20%, 72.77% -28.23%, 77% -40%, 82.77% -54.65%, 85% -70%, 100% -80%, 100% 100%);
    transition: clip-path 1000ms;
}

.card.expanded .text2 {
    clip-path: polygon(0% 100%, 0% -90%, 15% -80%, 17.23% -63.59%, 23% -50%, 27.23% -38.94%, 35% -30%, 41.09% -23.59%, 50% -20%, 58.91% -23.23%, 65% -30%, 72.77% -38.23%, 77% -50%, 82.77% -64.65%, 85% -80%, 100% -90%, 100% 100%);
    -webkit-clip-path: polygon(0% 100%, 0% -90%, 15% -80%, 17.23% -63.59%, 23% -50%, 27.23% -38.94%, 35% -30%, 41.09% -23.59%, 50% -20%, 58.91% -23.23%, 65% -30%, 72.77% -38.23%, 77% -50%, 82.77% -64.65%, 85% -80%, 100% -90%, 100% 100%);
}

.text-content {
    transform: translateY(-200px);
    transition: transform 1000ms;
}

.card.expanded .text-content {
    transform: translateY(-15px);
}

.chevron {
    position: absolute;
    bottom: 20px;
    left: calc(50% - 15px);
    transform-origin: 50%;
    transform: rotate(180deg);
    transition: transform 1000ms;
}

.card.expanded .chevron {
    transform: rotate(0deg);
}

.title {
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 900;
    margin: 20px 0 12px;
}

.body-text {
    align-items: center;
    text-align: center;
    padding: 0 20px;
    padding-bottom: 3px;
}

.skillcardfram {
    border: none;
    pointer-events: none;
}

meter::-webkit-meter-optimum-value {
    background: rgb(0, 213, 255);
}

meter::-moz-meter-bar {
    /* Firefox Pseudo Class */
    background: rgb(0, 204, 255);
}

.skillcont {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}

@media( max-width: 870px) {
    .skillcont {
        grid-template-columns: auto auto;
    }
}

@media( max-width: 562px) {
    .skillcont {
        grid-template-columns: auto;
    }
}

.contactsec {
    background: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    height: 86vh;
}

.contacts {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button {
    background-color: #4CAF50;
    border-radius: 10%;
    color: white;
    padding: 16px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 26px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #ffffff;
}

.button1:hover {
    background-color: #4c86af;
    color: white;
}

.button2 {
    background-color: white;
    color: black;
    border: 2px solid #ffffff;
}

.button2:hover {
    background-color: #000000;
    color: white;
}

.button3 {
    background-color: white;
    color: rgb(62, 62, 62);
    border: 2px solid #ffffff;
}

.button3:hover {
    background-color: #474646;
    color: white;
}

.button4 {
    height: 80px;
    background-color: white;
    color: rgb(0, 0, 0);
    border: 2px solid #ffffff;
}

.button4:hover {
    background-color: rgb(237, 129, 75);
    color: white;
}

.contactsec .contfram {
    border: transparent;
    pointer-events: none;
}

@media(max-width:312px) {
    .button {
        font-size: 16px;
    }
    .contfram {
        width: 150px;
    }
}

#attribution_block {
    display: none !important;
}

.attribution {
    display: none !important;
}

.container:hover .attribution {
    opacity: 0;
}

iframe {
    pointer-events: none;
}

.project-card {
    cursor: pointer;
}