/*-------------------------------------------------------------------------------
      Shrawaan Thapa Portfolio Template
      This is a portfolio template created by Shrawaan Thapa
      You can use this template for your own portfolio website
      The template is responsive and works on all devices
        The template is built using HTML, CSS, and JavaScript
        The template is free to use and modify
        The template is designed to showcase your skills and projects
        The template is easy to customize and use
-------------------------------------------------------------------------------*/
/*--------------------
      General              
--------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    font-family: "Poppins", sans-serif;
}

/*------------------------------
      Variables color-group root             
  ------------------------------*/
:root color-group {
    --robin-egg-blue: #50c9ce;
    --black-olive: #2e382e;
    --ligt-yellow: #f8ffe5;
    --emerald: #06d6ad;
    --gray: #92bdab;
    --stell-gray: #1f1c2c;
    --bora: #eaecc6;
    --skyline: #2bc0e4;
}

/*------------------------------
      Variables color root           
------------------------------*/
:root {
    /*= Colores =*/
    --background: #1f242d;
    --second-background: #323946;
    --hover-effect: #0ef;
    --text: #f1f3f2;
    --paragraph: #bdbdbd;
    --span: #0ef;
    /*= Fuente y tipografia =*/
    --big-font-size: 3.5rem;
    --h2-font-size: 2rem;
    --normal-font-size: 1rem;
    --smaller-font-size: .875rem;
    /*= Margenes =*/
    --mb-2: 1rem;
    --mb-4: 2rem;
    --mb-5: 2.5rem;
    --mb-6: 3rem;
    /*= z index =*/
    --z-back: -10;
    --z-fixed: 100;
}

@media screen and (min-width: 968px) {
    :root {
        --big-font-size: 3.5rem;
        --h2-font-size: 2rem;
        --normal-font-size: 1rem;
        --smaller-font-size: .875rem;
    }
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    background: var(--background);
    color: var(--text);
}

/*--------------------
      ScrollingBar             
--------------------*/
::-webkit-scrollbar {
    width: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--text);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--hover-effect);
}

/*-----------------------------------
      Animation for background              
-----------------------------------*/
::animation-background {
    background: linear-gradient(90deg, #1f242d, #0ef, #323946);
    animation: bg 5s linear infinite;
}

section {
    min-height: 100vh;
    padding: 10rem 9% 2rem;
}

span {
    color: var(--span);
    text-shadow: 0 0 10px rgba(18, 247, 255, 0.3),
        0 0 20px rgba(18, 247, 255, 0.3),
        0 0 30px rgba(18, 247, 255, 0.3),
        0 0 40px rgba(18, 247, 255, 0.3),
        0 0 70px rgba(18, 247, 255, 0.3),
        0 0 80px rgba(18, 247, 255, 0.3),
        0 0 100px rgba(18, 247, 255, 0.3),
        0 0 150px rgba(18, 247, 255, 0.3);
    ;
}

mark {
    background: var(--hover-effect);
}

/*--------------------
      Header              
--------------------*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    background: var(--background);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: var(--z-fixed);
}

.header.sticky {
    border-bottom: 1rem solid rgba(0, 0, 0, 0.2);
}

/*--------------------
      Logo             
--------------------*/
.logo {
    font-size: 2.5rem;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;
}

.logo:hover {
    transform: scale(1.1);
}

/*--------------------
      Navbar            
--------------------*/
.navbar a {
    font-size: 1.7rem;
    color: var(--text);
    margin-left: 4rem;
    transition: .3s;
}

.navbar a:hover,
.navbar a.active {
    color: var(--hover-effect);
}

/*--------------------
      Menu Icon             
--------------------*/
#menu-icon {
    font-size: 3.6rem;
    color: var(--hover-effect);
    cursor: pointer;
    display: none;
}

/*--------------------
      Home             
--------------------*/
.home {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-content h3 {
    font-size: 3.2rem;
    font-weight: 500;
}

.home-content h3:nth-of-type(2) {
    margin-bottom: 2rem;
}

.home-content h3 span {
    font-size: 3.2rem;
    font-weight: 100;
    color: var(--span);
}

.home-content h1 {
    font-size: 5.6rem;
    font-weight: 500;
    line-height: 1.3;
}

.home-content p {
    font-size: 1.6rem;
    margin: 2rem 0 4rem;
    color: var(--paragraph);
}

.home-img img {
    width: 35vw;
    animation: floatImage 5s ease-in-out infinite;
}

/*--------------------
      Social Media             
--------------------*/
.social-media a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: transparent;
    border: .2rem solid var(--hover-effect);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--hover-effect);
    margin: 3rem 1.5rem 3rem 0;
    transition: .8s all linear;
}

.social-media a:hover {
    background: var(--hover-effect);
    color: var(--second-background);
    box-shadow: 0 0 1rem var(--hover-effect);
}

/*--------------------
      Button            
--------------------*/
.btn {
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--hover-effect);
    border-radius: 4rem;
    box-shadow: 0 0 1rem var(--hover-effect);
    font-size: 1.6rem;
    color: var(--second-background);
    letter-spacing: .1rem;
    font-weight: 600;
    transition: .5s ease;
}

.btn:hover {
    box-shadow: none;
    background: var(--hover-effect);
    color: var(--second-background);
}

/*--------------------
      About             
--------------------*/
.about {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    background: var(--second-background);
}

.about-img img {
    width: 35vw;
}

.heading {
    text-align: center;
    font-size: 4.5rem;
}

.about-content h2 {
    text-align: left;
    line-height: 1.2;
}

.about-content h3 {
    font-size: 2.6rem;
}

.about-content p {
    font-size: 1.6rem;
    margin: 2rem 0 3rem;
    color: var(--paragraph);
}

/*--------------------
      Services            
--------------------*/
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    /* ensures equal height cards */
    position: relative;
    /* needed for ::before hover effect */
    border-radius: 1rem;
    box-shadow: 0 0 1rem var(--background);
    background: var(--second-background);
    color: var(--text);
}

.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* pushes button down */
    text-align: center;
}

.card {
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
}

.card:hover {
    color: var(--background);
}

.card::before {
    content: "";
    position: absolute;
    left: -100%;
    top: 0%;
    background: var(--hover-effect);
    width: 100%;
    height: 100%;
    transition: 0.5s;
    z-index: -1;
}

.card:hover::before {
    left: 0%;
    color: var(--background);
}

.card-body .btn {
    margin-top: auto;
    /* pushes to bottom */
    align-self: center;
    /* centers horizontally */
    padding: 10px 20px;
    background: var(--hover-effect);
    color: var(--background);
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
}

.card-body .btn:hover {
    background: var(--background);
    color: var(--text);
}

.card-img-top {
    height: 200px;
    width: 100%;
    object-fit: cover;
    /* keeps image neat */
}

/*--------------------
      Projects            
--------------------*/
.project {
    background: var(--second-background);
}

.project h2 {
    margin-bottom: 4rem;
    color: var(--text);
    text-align: center;
}

.project-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 2.5rem;
}

.project-container .project-box {
    position: relative;
    border-radius: 2rem;
    box-shadow: 0 0 1rem var(--background);
    overflow: hidden;
    display: flex;
}

.project-box img {
    width: 100%;
    transition: .5s ease;

}

.project-box:hover img {
    transform: scale(1.1);

}

.project-box .project-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .1), var(--hover-effect));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 0 4rem;
    transform: translateY(100%);
    transition: .5s ease;
}

.project-box:hover .project-layer {
    transform: translateY(0);
}

.project-layer h4 {
    font-size: 3rem;
}

.project-layer p {
    font-size: 1.6rem;
    margin: .3rem 0 1rem;
    color: var(--paragraph);
}

.project-layer a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    background: var(--text);
    border-radius: 50%;
}

.project-layer a i {
    font-size: 2rem;
    color: var(--background);
}

.project-layer a i:hover {
    box-shadow: 0 0 3rem var(--hover-effect);
}

/*--------------------
      Contact            
--------------------*/
.contact h2 {
    margin-bottom: 3rem;
}

.contact form {
    max-width: 70rem;
    margin: 1rem auto;
    text-align: center;
    margin-bottom: 3rem;
}

.contact form .input-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact form .input-box input,
.contact form textarea {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--hover-effect);
    background: var(--background);
    border-radius: .8rem;
    border: 1px solid var(--hover-effect);
    margin: .7rem 0;
}

.contact form .input-box input {
    width: 49%;
}

.contact form textarea {
    resize: none;
}

.contact form .btn {
    margin-top: 2rem;
    cursor: pointer;
}

/*--------------------
      Footer            
--------------------*/
.footer {
    position: relative;
    bottom: 0;
    padding: 40px 20px;
    padding: 100px 0 30px;
    font-family: Arial, sans-serif;
    background: var(--second-background);
    color: var(--text);
    border-top: .2px solid var(--hover-effect);
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
    font-size: 1.3rem;
    line-height: 20px;
}

.footer .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 85%;
    margin: auto;
}

.footer .col {
    flex: 1 1 220px;
    margin: 15px;
    flex-basis: 25%;
    padding: 10px;
}

.col:nth-child(2),
.col:nth-child(3) {
    flex-basis: 15%;
}

.footer .logo-footer {
    width: 150px;
    margin-bottom: 15px;
}

.footer h3 {
    position: relative;
    width: fit-content;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: var(--hover-effect);
}

.underline {
    width: 100%;
    height: 5px;
    background: var(--text);
    border-radius: 3px;
    position: absolute;
    top: 25px;
    left: 0;
    overflow: hidden;
}

.footer .underline span {
    display: inline-block;
    background: var(--hover-effect);
    margin-left: 10px;
    width: 15px;
    height: 100%;
    background: var(--hover-effect);
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 10px;
    animation: moving 2s linear infinite;
}

.footer p {
    margin: 5px 0;
    font-size: 14px;
}

.footer .email-id {
    width: fit-content;
    margin: 20px 0;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid var(--hover-effect);
    color: var(--hover-effect);
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    list-style: none;
    margin: 8px 0;
    margin-bottom: 12px;
}

.footer ul li a {
    display: inline-block;
    text-decoration: none;
    transition: color 0.5s;
    color: var(--paragraph);
}

.footer ul li a:hover {
    border-bottom: 1px solid var(--hover-effect);
}

/* Newsletter form */
.footer form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    margin-bottom: 50px;
    border-radius: 5px;
    padding-bottom: 15px;
    background: var(--background);
    border-bottom: 1px solid var(--hover-effect);

}

form .bx {
    font-size: 18px;
    margin-right: 10px;
    color: var(--hover-effect);
}

.form button .bx {
    font-size: 16px;
    color: var(--hover-effect);
}

.footer form input {
    flex: 1;
    width: 100%;
    padding: 8px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--hover-effect);
}

.footer form button {
    background: transparent;
    border: none;
    outline: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.5s;
}

.footer form button:hover {
    border-bottom: 1px solid var(--hover-effect);
}

.footer hr {
    width: 75% auto;
    border: 0;
    margin: 20px auto;
    border-top: 1px solid var(--hover-effect);
    border-bottom: 1px solid var(--hover-effect);
}

.footer .copyright {
    text-align: center;
    font-size: 13px;
    color: var(--paragraph);
}

.footer .copyright a {
    color: var(--hover-effect);
    text-decoration: none;
}

a{
    text-decoration: none;
}
/*----------------------------------------
      Keyframes for animations           
----------------------------------------*/
/*----------------------------------------
      Animation for background  
                
----------------------------------------*/
@keyframes bg {
    100% {
        filter: hue-rotate(360deg);
    }
}

/*----------------------------------------
      Animation for floating image-home           
----------------------------------------*/
@keyframes floatImage {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2.4rem);
    }

    100% {
        transform: translateY(0);
    }
}

/*---------------------------------------------
      Animation for underline moving-footer            
---------------------------------------------*/
@keyframes moving {
    0% {
        left: -20px;
    }

    100% {
        left: 100%;
    }
}

/*------------------------------------------------------------------------------------
      Media queries
      Media queries are used to apply different styles for different screen sizes
      Responsive Screen Size Breakpoints
      Different screen sizes
------------------------------------------------------------------------------------*/
/*------------------------------------------------------------
      Large devices (laptops/desktops, 1200px and up)            
------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
    html {
        font-size: 55%;
    }
}

/*------------------------------------------------------------
      Medium devices (landscape tablets, 991px and up)            
------------------------------------------------------------*/
@media screen and (max-width:991px) {
    .header {
        padding: 2rem 3%;
    }

    section {
        padding: 10rem 3% 2rem;
    }

    .services {
        padding-bottom: 7rem;
    }

    .project {
        padding-bottom: 7rem;
    }

    .contact {
        min-height: auto;
    }

    .footer {
        padding: 2rem 3%;
    }
}

/*------------------------------------------------------------
      Small devices (landscape phones, 768px and up)            
------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    #menu-icon {
        display: block;
    }

    #menu-icon.bx-x {
        transform: rotateY(-180deg);
    }

    .header {
        background: var(--background);
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 3%;
        background: var(--background);
        border-top: .1rem solid rgba(0, 0, 0, 0.2);
        box-shadow: .5rem 1rem rgba(0, 0, 0, .2);
        display: none;
    }

    .navbar.active {
        display: block;
    }

    .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
    }

    .home {
        flex-direction: column;
    }

    .home-content h3 {
        font-size: 2.6rem;
    }

    .home-content h1 {
        font-size: 5rem;
    }

    .home-img img {
        width: 70vw;
        margin-top: 4rem;
    }

    .about {
        flex-direction: column-reverse;
    }

    .about img {
        width: 70vw;
        margin-top: 4rem;
    }

    .services h2 {
        margin-bottom: 3rem;
    }

    .services-container {
        flex-direction: column;
        align-items: center;
    }

    .services-box {
        width: 90%;
    }

    .project h2 {
        margin-bottom: 3rem;
    }

    .project-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer {
        bottom: unset;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .col {
        flex-basis: 100%;
    }

    .col:nth-child(2),
    .col:nth-child(3) {
        flex-basis: 100%;
    }
}

/*------------------------------------------------------------
      Small devices (portrait phones, 617px and up)            
------------------------------------------------------------*/
@media screen and (max-width: 617px) {
    .home {
        flex-direction: column;
        text-align: center;
    }

    .home-content h1 {
        display: flex;
        flex-direction: column;
    }

    .about {
        flex-direction: column-reverse;
        text-align: center;
    }

    .about-content {
        flex-direction: column;
        display: flex;
        align-items: center;
    }

    .project-container {
        grid-template-columns: 1fr;
    }
      
      .footer .col {
        text-align: center;
        flex-direction: column;
        display: flex;
        align-items: center;
    }
}

/*------------------------------------------------------------
      Small devices (portrait phones, 450px and up)            
------------------------------------------------------------*/
@media screen and (max-width: 450px) {
    html {
        font-size: 50%;
    }

    .contact form .input-box input {
        width: 100%;
    }
}

/*------------------------------------------------------------
      Small devices (portrait phones, 365px and up)            
------------------------------------------------------------*/
@media screen and (max-width: 365px) {
    .home-img img {
        width: 80vw;
    }

    .about-img img {
        width: 80vw;
    }

    .footer {
        flex-direction: column-reverse;
    }

}