@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Nunito Sans", sans-serif;
    text-decoration: none;
}

html{
    scroll-behavior: auto;
}

.header-section{
    width: 100%;
    height: auto;
    padding: 2rem 7rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    background-color:#1D2A33;
}

.header-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.nav{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #2E3C3F;
    padding: 0.5rem 1.5rem;
    border-radius: 1rem;
    column-gap: 2rem;
}

.logo{
    width: fit-content;
    height: auto;
}

.logo img{
    width: 32px;
    height: 32px;
    color: #e0f2ff;
    cursor: pointer;
}

.links{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    column-gap: 0.25rem;
}

.links a{
    text-decoration: none;
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.5rem;    
}

.links a h2{
    color: #8291A7;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    transition: color 0.3s ease;
}

.links a:hover h2{
    color: #e0f2ff;
}

.header-cta{
    width: fit-content;
    height: auto;
}

.header-cta button{
    color: #1D2A33;
    background-color: #8291A7;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: none;
    outline: none;
    cursor: pointer;
    transition: color 0.375s ease, background-color 0.375s ease, border-color 0.375s ease;
    font-weight: 700;
}

.header-cta:hover button{
    background-color: #DBE4E6;
}

.hero-section{
    width: 100%;
    height: auto;
    padding: 0rem 7rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    background-color:#1D2A33;
}

.hero-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;
    padding: 1rem 3rem;
}

.top-hero-content{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    column-gap: 0.5rem;
}

.hero-text-group{
    width: 70%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    row-gap: 2rem;
    padding: 7rem 0rem;
}

.hero-heading-block{
    width: fit-content;
    height: auto;
}

.hero-heading-block h1{
    width: 100%;
    background: linear-gradient(142deg, #8291A6 26%, #E0F2FF 60%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4.875rem;
    text-align: left;
    font-weight: 900;
    line-height: 5rem;
    letter-spacing: -0.1rem;
}

.hero-paragraph-block{
    width: fit-content;
    height: auto;
}

.hero-paragraph-block p{
    width: 90%;
    color: #8291A6;
    text-align: left;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
}

.hero-paragraph-block p span{
    color: #E0F2FF;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5rem;
}

.my-image {
    width: 30%;
    height: auto;
    border-radius: 16.5rem;
    background-color: #3E4855;
    background-image: url("./image/image.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 15rem;
}

.hero-scroll-down{
    width: fit-content;
    height: 4.5rem;
    display: flex;
    padding: 1.5rem 0.5rem 1rem 0.5rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.hero-scroll-down a{
    transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.hero-scroll-down a:hover {
    transform: translateY(-0.25rem);
}

.hero-scroll-down i{
    color: rgba(130, 145, 166, 0.53);
    font-family: "Font Awesome 6 Pro";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2rem;
    }

.career-section{
    width: 100%;
    height: auto;
    padding: 0rem 7rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    background-color:#1D2A33;
}

.career-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    row-gap: 4.5rem;
    padding: 0rem 2.5rem 2.5rem 2.5rem;
}

.career-info{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 1.5rem;
    border: none;
    outline: none;
    background: linear-gradient(180deg, rgba(130, 145, 167, 0.20) -18.94%, rgba(0, 0, 0, 0.00) 40.53%, rgba(65, 73, 84, 0.10) 100%);
    border: 1px solid #2F3D40;
    padding: 5.5rem;
}

.info{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.info h2{
    font-size: 3rem;
    font-weight: 700;
    line-height: 3.5rem;
    background: linear-gradient(180deg, #8291A6 0%, #E0F2FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.info p{
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: 0.0125rem;
    background: linear-gradient(180deg, #8291A6 0%, #E0F2FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.project-section{
    width: 100%;
    height: auto;
    padding: 0rem 7rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    background-color:#1D2A33;
}

.project-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 2.5rem;
    row-gap: 2rem;
    border-radius: 0.5rem;
}

.project-heading-block{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.project-heading-block h2{
    background: linear-gradient(158deg, #82A0A6 26%, #E0F2FF 60%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4rem;
    font-weight: 500;
    line-height: 4.5rem;
    text-transform: uppercase;
}

.project-list{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    row-gap: 7.5rem;
}

.project{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    row-gap: 1.5rem;
}

.project-heading{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-radius: 1.5rem;
    border: 1px solid #2F3D40;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(47, 54, 64, 0.39) 100%);
}

.count{
    width: fit-content;
    height: auto;
}

.count h2{
    color: #38494D;
    font-size: 4rem;
    font-weight: 400;
    line-height: 4.5rem;
    letter-spacing: -0.2rem;
}

.description{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    row-gap: 0.5rem;
}

.heading{
    width: 100%;
    height: auto;
}

.heading h2{
    color: #B2BDCD;
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.5rem;
    letter-spacing: -0.05419rem;
}

.paragraph{
    width: 100%;
    height: auto;
}

.paragraph p{
    color:#8291A7;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    max-width: 46.9rem;
}

.project-thumbnail{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    column-gap: 2rem;
}

.left-image-container{
    width: 36.5%;
    height: auto;
    border-radius: 1rem;
}

.left-image-container img{
    width: 100%;
    height: auto;
}

.right-image-container{
    width: 63.5%;
    height: auto;
    border-radius: 1rem;
}

.right-image-container img{
    width: 100%;
    height: auto;
}

.project-info{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 1.5rem;
    justify-content: space-between;
    align-items: start;
    border-radius: 1.35438rem;
    background-color: rgba(46, 53, 63, 0.49);
}

.project-info-heading{
    width: fit-content;
    height: auto;
}

.project-info-heading h2{
    font-size: 6rem;
    font-weight: 400;
    line-height: 6.5rem;
    letter-spacing: -0.2rem;
    background: linear-gradient(180deg, rgba(130, 145, 167, 0.43) 0%, rgba(130, 145, 167, 0.19) 74%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.right-project-info{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    row-gap: 1rem;
}

.project-more{
    width: fit-content;
    height: auto;
}

.project-more p{
    color: #8291A7;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    max-width: 48.12375rem;
}

.project-cta{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 1rem;
}

.case-cta{
    width: fit-content;
    height: auto;
}

.case-cta button{
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    color: #1D2A33;
    background: linear-gradient(228deg, #8291A7 9%, rgba(224, 242, 255, 0.01) 40%), #E0F2FF;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: color 0.375s ease, background-color 0.375s ease, border-color 0.375s ease;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    outline: none;
}

.case-cta:hover button{
    background: linear-gradient(228deg, #8291A7 33.85%, rgba(224, 242, 255, 0.01) 81.89%), #E0F2FF;
}

.lock-cta{
    width: fit-content;
    height: auto;
}

.lock-cta button{
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    color: #E0F2FF;
    background: linear-gradient(229deg, #3E4855 9%, rgba(46, 56, 63, 0.01) 40%), #2E353F;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    transition: transform 0.625s ease, color 0.625s ease, background-color 0.625s ease, border-color 0.625s ease;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    outline: none;
}

.publication-section{
    width: 100%;
    height: auto;
    padding: 0rem 7rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    background-color:#1D2A33;
}

.publilcation-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 4.5rem 0rem 2.5rem 0rem;
    row-gap: 2rem;
    border-radius: 0.5rem;
}

.publication-heading-block{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.publication-heading-block h2{
    background: linear-gradient(158deg, #82A0A6 26%, #E0F2FF 60%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4rem;
    font-weight: 500;
    line-height: 4.5rem;
    text-transform: uppercase;
}

.publication-list{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    row-gap: 7.5rem;
}

.publication{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    row-gap: 1.5rem;
}

.publication-heading{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: 1.5rem;
    border: 1px solid #2F3D40;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(47, 54, 64, 0.39) 100%);
}

.publication-heading h2{
    width: 65%;
    text-align: center;
    color: #B2BDCD;
    font-size: 2.125rem;
    font-weight: 500;
    line-height: 2.5rem;
}

.publication-thumbnail{
    width: 100%;
    height: auto;
    padding: 16rem;
    background-image: url(./image/publication.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 1rem;
}

.publication-info{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 1.5rem;
    justify-content: space-between;
    align-items: start;
    border-radius: 1.4rem;
    background-color: rgba(46, 53, 63, 0.49);
}

.publication-info-heading{
    width: fit-content;
    height: auto;
}

.publication-info-heading h2{
    font-size: 6rem;
    font-weight: 400;
    line-height: 6.5rem;
    letter-spacing: -0.2rem;
    background: linear-gradient(180deg, rgba(130, 145, 167, 0.43) 0%, rgba(130, 145, 167, 0.19) 74%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.right-publication-info{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    row-gap: 1rem;
}

.publication-more{
    width: fit-content;
    height: auto;
}

.publication-more p{
    color: var(--secondary, #8291A7);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    max-width: 48.12375rem;
}

.right-publication-info button{
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    color: #1D2A33;
    background: linear-gradient(228deg, #8291A7 9%, rgba(224, 242, 255, 0.01) 40%), #E0F2FF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    transition: color 0.375s ease, background-color 0.375s ease, border-color 0.375s ease;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    outline: none;
}

.right-publication-info:hover button{
    background: linear-gradient(228deg, #8291A7 33.85%, rgba(224, 242, 255, 0.01) 81.89%), #E0F2FF;
}

.offering-section{
    width: 100%;
    height: auto;
    padding: 0rem 7rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    background-color:#1D2A33;
}

.offering-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    padding: 4rem 0rem;
    row-gap: 2rem;
    border-radius: 0.5rem;
}

.skills{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    padding: 1.5rem;
    background-color:rgba(46, 53, 63, 0.49);
    border-radius: 0.5rem;
}

.skills .left-heading-block{
    width: 100%;
    height: auto;
}

.skills .left-heading-block h2{
    font-size: 4rem;
    font-weight: 400;
    line-height: 4.5rem;
    letter-spacing: -0.2rem;
    background: linear-gradient(87deg, #8291A7 0%, #333841 52.88%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.skills-list{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    row-gap: 1rem;
}

.skills-list .right-text-group{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    row-gap: 0.25rem;
}

.skills-list .right-text-group .right-heading-block{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.skills-list .right-text-group .right-heading-block h1{
    color: #E0F2FF;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: -0.055rem;
    text-transform: uppercase;
}

.skills-list .right-text-group .right-paragraph-block{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.skills-list .right-text-group .right-paragraph-block p{
    color: #E0F2FF;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
}

.services{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    padding: 1.5rem;
    background-color:#8291A7;
    border-radius: 0.5rem;
}

.service-quote{
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    row-gap: 1rem;
}

.services .left-heading-block{
    width: 100%;
    height: auto;
}

.services .left-heading-block h2{
    font-size: 4rem;
    font-weight: 400;
    line-height: 4.5rem;
    letter-spacing: -0.2rem;
    background: linear-gradient(73deg, #1D2A33 0%, #3B4554 42.1%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quote-cta{
    width: fit-content;
    height: auto;
}

.quote-cta button{
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    color: #E0F2FF;
    background: linear-gradient(229deg, #3E4855 9%, rgba(46, 56, 63, 0.01) 40%), #2E353F;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    transition: transform 0.625s ease, color 0.625s ease, background-color 0.625s ease, border-color 0.625s ease;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    outline: none;
}

.quote-cta:hover button{
    background: linear-gradient(229deg, #3E4855 33.7%, rgba(46, 56, 63, 0.01) 82.83%), #2E353F;
}


.services-list{
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    row-gap: 1rem;
}

.services-list .right-text-group{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    row-gap: 0.25rem;
}

.services-list .right-text-group .right-heading-block{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.services-list .right-text-group .right-heading-block h1{
    color: rgba(29, 42, 51, 0.92);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: -0.055rem;
    text-transform: uppercase;
}

.services-list .right-text-group .right-paragraph-block{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.services-list .right-text-group .right-paragraph-block p{
    color: #1D2A33;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
}

.testimonial{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    padding: 1.5rem;
    background-color:rgba(46, 53, 63, 0.49);
    border-radius: 0.5rem;
}

.testimonial .left-heading-block{
    width: 100%;
    height: auto;
}

.testimonial .left-heading-block h2{
    font-size: 4rem;
    font-weight: 400;
    line-height: 4.5rem;
    letter-spacing: -0.2rem;
    color: rgba(130, 145, 167, 1)
}

.testimonial-list{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    row-gap: 1rem;
}

.testimonial-list .right-text-group{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    row-gap: 0.25rem;
}

.testimonial-list .right-text-group .right-heading-block{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.testimonial-list .right-text-group .right-heading-block h1{
    color: rgba(204, 225, 240, 0.42);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: -0.055rem;
    text-transform: uppercase;
}

.testimonial-list .right-text-group .right-heading-block h1 span{
    color: rgba(209, 227, 239, 1);
}

.testimonial-list .right-text-group .right-paragraph-block{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.testimonial-list .right-text-group .right-paragraph-block p{
    color: #E0F2FF;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
}

.contact-section{
    width: 100%;
    height: auto;
    padding: 0rem 7rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    background-color:#1D2A33;
}

.contact-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    padding: 1.5rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid #303D41;
}

.contact-text-group{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    row-gap: 0.5rem;
}

.contact-title-block{
    width: fit-content;
    height: auto;
}

.contact-title-block i{
    width: 100%;
    height: auto;
    font-style: normal;
    font-size: 3rem;
    font-weight: 900;
    line-height: 3rem;
    color: #8291A7;
}

.contact-paragraph-block{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.contact-paragraph-block p{
    color: #8291A7;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
}

.contact-heading-block{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.contact-heading-block h2{
    background: linear-gradient(137deg, #8291A7 26%, #E0F2FF 60%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 6rem;
    font-weight: 500;
    line-height: 7rem;
}

.contact-cta{
    width: fit-content;
    height: auto;
}

.contact-cta button{
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    color: #1D2A33;
    background: linear-gradient(228deg, #8291A7 9%, rgba(224, 242, 255, 0.01) 40%), #E0F2FF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    transition: color 0.8s ease;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    outline: none;
}

.contact-cta:hover button{
    background: linear-gradient(228deg, #8291A7 33.85%, rgba(224, 242, 255, 0.01) 81.89%), #E0F2FF;
}

.footer-section{
    width: 100%;
    height: auto;
    padding: 3rem 7rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    background-color:#1D2A33;
}

.footer-container{
    width: 100%;
    height: auto;
    display: flex;
    padding: 1.5rem 3rem;
    justify-content: space-between;
    align-items: center;
    background-color: #2E3C3F;
    border-radius: 0.5rem;
    border: none;
    outline: none;
}

.socials{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 1rem;
}

.socials i{
    font-size: 1.375rem;
    font-weight: 400;
    color: #8291A7;
    transition: transform 0.5s ease;

}

.socials i:hover {
    transform: translateY(-0.5rem);
    color: #E0F2FF;
}

.copyright{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 0.5rem;
}

.copyright i{
    color: #8291A7;
    font-size: 1rem;
    font-weight: 400;
}

.copyright h6{
    color: #8291A7;
    font-size: 1rem;
    font-weight: 400;
}


@media screen and (max-width: 1200px){

}

@media screen and (max-width: 768px){
    .hero-section{
        width: 100%;
        height: auto;
        padding: 3rem 1rem;
        background-color: #180c15;
        color: aqua;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }

    .hero-description-container{
        width: 90%;
        height: auto;
    }

    .project-section{
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
        background-color: #180c15;
        color: aqua;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        row-gap: 1rem;
    }
    
    .publication-section{
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
        background-color: #180c15;
        color: aqua;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        row-gap: 1rem;
    }

    .project-card{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        row-gap: 0.5rem;
        border-radius: 1rem;
        background-color: #212020;
    }
    
    .publication-card{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        row-gap: 0.5rem;
        border-radius: 1rem;
        border: 1px solid white;
        padding: 1rem;
        background-color: #dfdfdf1c;
    }
    
}