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



/*#region ======================   Root    ============================ */

:root {

    --header-height: 3rem;


    /*                      Color                        */
    --hue-color: 250;
    /* purple:250, green:142, blue:230, pink:340 */


    /* HSL Color Mode */
    --first-color: hsl(var(--hue-color), 69%, 61%);
    --first-color-second: hsl(var(--hue-color), 69%, 61%);
    --first-color-alt: hsl(var(--hue-color), 57%, 53%);
    --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
    --title-color: hsl(var(--hue-color), 8%, 15%);
    --text-color: hsl(var(--hue-color), 8%, 45%);
    --text-color-light: hsl(var(--hue-color), 8%, 65%);
    --input-color: hsl(var(--hue-color), 70%, 96%);
    --body-color: hsl(var(--hue-color), 60%, 99%);
    --container-color: #fff;
    --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 80%);


    /* font and typography */
    --body-font: 'Poppins', sans-serif;


    /* 0.5rem = 8px, 1rem = 16px, 1.5rem = 24px..... */
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --normal-font-size: 0.938rem;
    --small-font-size: 0.813rem;
    --smaller-font-size: 0.75rem;


    /* font-Weight */
    --font-medium: 500;
    --font-semibold: 600;


    /* Margins bootom */
    /* 0.25rem = 4px, 0.5rem = 8px, 0.75rem = 12px.... */
    --mb-0-25: 0.25rem;
    --mb-0-5: 0.5rem;
    --mb-0-75: 0.75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;


    /* z-index */
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;

}


body.dark-theme {
    /* HSL Color Mode */
    --first-color-second: hsl(var(--hue-color), 30%, 8%);
    --title-color: hsl(var(--hue-color), 8%, 95%);
    --text-color: hsl(var(--hue-color), 8%, 75%);
    --input-color: hsl(var(--hue-color), 29%, 16%);
    --body-color: hsl(var(--hue-color), 28%, 12%);
    --container-color: hsl(var(--hue-color), 29%, 16%);
    --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
}

/*#endregion ===================   Root    ============================ */




/*#region ======================   Customizations    ============================ */

.sliderIndicator {
    display: none;
    z-index: -400;
}


/*#endregion ===================   Customizations    ============================ */




/*#region ======================   Dark Light Theme    ============================ */

.nav__btn {
    display: flex;
    align-items: center;
}


.change-theme {
    font-size: 1.25rem;
    color: var(--title-color);
    margin-right: var(--mb-1);
    cursor: pointer;
}

.change-theme:hover {
    color: var(--first-color);
}

/*#endregion ===================   Dark Light Theme    ============================ */




/*#region ======================   Base    ============================ */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}


.body {
    margin: 0 0 var(--header-height) 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

h1,
h2,
h3,
h4 {
    color: var(--title-color);
    font-weight: var(--font-semibold);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/*#endregion ===================   Base    ============================ */




/*#region ======================   Reusable Classes    ============================ */

.section {
    padding: 2rem 0 4rem;
}

.section__title {
    font-size: var(--h1-font-size);
}

.section__subtitle {
    display: block;
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-3);
}

.section__title,
.section__subtitle {
    text-align: center;
}

/*#endregion ===================   Reusable Classes    ============================ */




/*#region ======================   Layout    ============================ */

.container {
    max-width: 768px;
    margin-left: var(--mb-1-5);
    margin-right: var(--mb-1-5);
}

.grid {
    display: grid;
    gap: 1.5rem;
}

.header {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: var(--body-color);
}

/*#endregion ===================   Layout    ============================ */




/*#region ======================   Nav    ============================ */

.nav {
    max-width: 968px;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 13px;
}

.nav__toggle {
    color: var(--title-color);
    font-weight: var(--font-medium);
}

.nav__logo {
    width: 6rem;
}

.nav__logo img {
    transition: all 300ms ease;
}

.nav__logo:hover img {
    filter: drop-shadow(1px 1px 1px rgba(71, 144, 252, 0.5));
}

.nav__toggle {
    font-size: 1.1rem;
    cursor: pointer;
}

.nav__toggle:hover {
    color: var(--first-color);
}

.nav__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--small-font-size);
    color: var(--title-color);
    font-weight: var(--font-medium);
}

.nav__link:hover {
    text-decoration: none;
    color: var(--first-color);
}

.nav__icon {
    font-size: 1.2rem;
}

.nav__close {
    position: absolute;
    right: 1.3rem;
    bottom: 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--first-color);
}

.nav__close:hover {
    color: var(--first-color-alt);
}

/*#endregion ===================   Nav    ============================ */




/*#region ======================   Show Menu    ============================ */

.show-menu {
    bottom: 0 !important;
}

/*#endregion ===================   Show Menu    ============================ */




/*#region ======================   Active Link    ============================ */

.active-link {
    color: var(--first-color);
}

/*#endregion ===================   Active Link    ============================ */




/*#region ======================   Change Background - Header    ============================ */

.scroll-header {
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}

/*#endregion ===================   Change Background - Header    ============================ */




/*#region ======================   Home    ============================ */

.home__container {
    gap: 1rem;
}

.home__content {
    grid-template-columns: .5fr 3fr;
    padding-top: 3.5rem;
    align-items: center;
}

.home__social {
    display: grid;
    grid-template-columns: max-content;
    row-gap: 1rem;
}

.home__social-icon {
    font-size: 1.25rem;
    color: var(--first-color);
}

.home__social-icon:hover {
    color: var(--first-color-alt);
}

.home__blob {
    width: 200px;
    fill: var(--first-color);
}

.home__blob-img {
    width: 170px;
}

.home__data {
    grid-column: 1/3;
}

.home__title {
    font-size: var(--big-font-size);
}

.home__title strong {
    color: var(--first-color-alt);
}

.home__subtitle {
    font-size: var(--h3-font-size);
    color: var(--text-color);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-0-75);
}

.home__description {
    margin-bottom: var(--mb-2);
}

.home__scroll {
    display: none;
}

.home__scroll-button {
    color: var(--first-color);
    transition: 0.3s;
}

.home__scroll-button:hover {
    transform: translateY(0.25rem);
    color: var(--first-color-alt);
}

.home__scroll-button:hover .home__scroll-mouse{
    color: var(--first-color-alt);
}

.home__scroll-button:hover .home__scroll-arrow{
    color: var(--first-color-alt);
}

.home__scroll-mouse {
    font-size: 2rem;
}

.home__scroll-name {
    font-size: var(--small-font-size);
    color: var(--title-color);
    font-weight: var(--font-medium);
    margin-right: var(--mb-0-25);
}

.home__scroll-arrow {
    font-size: 1.25rem;
}

/*#endregion ===================   Home    ============================ */




/*#region ======================   Buttons    ============================ */

.button {
    display: inline-block;
    background-color: var(--first-color);
    color: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
    font-weight: var(--font-medium);
}


.button:hover {
    background-color: var(--first-color-alt);
    transition: 0.5s;
}


.button__icon {
    font-size: 1.25rem;
    margin-left: var(--mb-0-5);
    transition: 0.3s;
}

.button--white {
    background-color: #fff;
    color: var(--first-color);
}

.button--white:hover {
    background-color: #fff;
    text-decoration: none;
}

.button--flex {
    display: inline-flex;
    align-items: center;
}

.button--flex:hover {
    color: white;
    text-decoration: none;
}

.button--small {
    padding: 0.75rem 1rem;
}

.button--link {
    padding: 0;
    background-color: transparent;
    color: var(--first-color);
}

.button--link:hover {
    background-color: transparent;
    color: var(--first-color-alt);
}

.button--secondary {
    background-color: transparent;
    color: var(--first-color);
    border: 2px solid var(--first-color);
}

.button--secondary:hover {
    background-color: var(--first-color);
    color: #fff;
    text-decoration: none;
    transition: 0.5s;
}

/*#endregion ===================   Buttons    ============================ */




/*#region ======================   About    ============================ */

.about__img {
    width: 225px;
    border-radius: 0.5rem;
    justify-self: center;
    align-self: center;
}

.about__description {
    text-align: center;
    margin-bottom: var(--mb-2-5);
}

.about__info {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: var(--mb-2-5);
}

.about__info-title {
    font-size: var(--h2-font-size);
    font-weight: var(--font-semibold);
    color: var(--title-color);
}


.about__info-name {
    font-size: var(--small-font-size);
}

.about__info-title,
.about__info-name {
    display: block;
    text-align: center;
}

.about__buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/*#endregion ===================   About    ============================ */




/*#region ======================   Skills    ============================ */

.skills__container {
    row-gap: 0;

}

.skills__header {
    display: flex;
    align-items: center;
    margin-bottom: var(--mb-2-5);
    cursor: pointer;
}

.skills__icon,
.skills__arrow {
    font-size: 2rem;
    color: var(--first-color);
}

.skills__icon {
    margin-right: var(--mb-0-75);
}


.skills__title {
    font-size: var(--h3-font-size);
}

.skills__subtitle {
    font-size: var(--small-font-size);
    color: var(--text-color-light);
}

.skills__arrow {
    margin-left: auto;
    transition: 0.4s;
}

.skills__titles {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--mb-0-5);
}

.skills__name {
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
}

.skills__bar,
.skills__percentage {
    height: 5px;
    border-radius: 0.25rem;
}

.skills__bar {
    background-color: var(--first-color-lighter);
}

.skills__percentage {
    display: block;
    background-color: var(--first-color);
}

.skills__html {
    width: 90%;
}

.skills__css {
    width: 90%;
}

.skills__jsfront {
    width: 85%;
}

.skills__wordpress_frontend {
    width: 87%;
}

.skills__typescript{
    width: 80%;
}

.skills__python {
    width: 65%;
}

.skills__golang {
    width: 75%;
}

.skills__javascript_lang {
    width: 70%;
}

.skills__csharp {
    width: 30%;
}

.skills__cpp {
    width: 30%;
}

.skills__ruby {
    width: 45%;
}

.skills__java {
    width: 30%;
}

.skills__figma {
    width: 55%;
}

.skills__bootstrap {
    width: 75%;
}

.skills__reactfront {
    width: 65%;
}

.skills__next {
    width: 45%;
}

.skills__wordpress {
    width: 52%;
}

.skills__ror {
    width: 45%;
}

.skills__nodejs {
    width: 35%;
}

.skills__php {
    width: 40%;
}

.skills__django {
    width: 80%;
}

.skills__fastapi {
    width: 70%;
}

.skills__gin {
    width: 60%;
}

.skills__postgresql {
    width: 65%;
}

.skills__supabase {
    width: 75%;
}

.skills__firebase {
    width: 60%;
}

.skills__sqlite {
    width: 80%;
}

.skills__mssql {
    width: 60%;
}

.skills__mongodb {
    width: 40%;
}

.skills__dart {
    width: 31%;
}

.skills__flutter {
    width: 31%;
}

.skills__tailwind {
    width: 80%;
}

.skills__threejs {
    width: 25%;
}

.skills__pyqt5 {
    width: 40%;
}

.skills__typesense{
    width: 15%;
}

.skills__artificial__intelligence{
    width: 45%;
}

.skills__machine__learning{
    width: 25%;
}

.skills__natural__language__processing{
    width: 50%;
}

.skills__computer__vision{
    width: 40%;
}

.skills__git{
    width: 65%;
}

.skills__github{
    width: 85%;
}

.skills__replit{
    width: 40%;
}

.skills__gitlab{
    width: 25%;
}

.skills__canva{
    width: 50%;
}

.skills__openai{
    width: 65%;
}

.skills__langchain{
    width: 10%;
}

.skills__htmx{
    width: 55%;
}

.skills__graph__js{
    width: 65%;
}

.skills__geopy{
    width: 40%;
}

.skills__google__apps__script{
    width: 70%;
}

.skills__shell__scripting{
    width: 55%;
}

.skills__google__cloud__sql{
    width: 65%;
}

.skills__google__cloud__run{
    width: 45%;
}

.skills__google__drive__api{
    width: 60%;
}

.skills__vercel{
    width: 60%;
}

.skills__claude__code{
    width: 85%;
}

.skills__github__copilot{
    width: 90%;
}

.skills__close .skills__list {
    height: 0;
    overflow: hidden;
}

.skills__open .skills__list {
    height: max-content;
    margin-bottom: var(--mb-2-5);
}

.skills__open .skills__arrow {
    transform: rotate(-180deg);
}

/*#endregion ===================   Skills    ============================ */




/*#region ======================   Qualification    ============================ */

.qualification__tabs {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: var(--mb-2);
}


.qualification__button {
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
    cursor: pointer;
}

.qualification__button:hover {
    color: var(--first-color);
}

.qualification__icon {
    font-size: 1.8rem;
    margin-right: var(--mb-0-25);
}

.qualification__data {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    column-gap: 1.5rem;
}

.qualification__title {
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
}

.qualification__subtitle {
    display: inline-block;
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-1);
}


.qualification__calender {
    font-size: var(--small-font-size);
    color: var(--text-color-light);
}


.qualification__rounder {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: var(--first-color);
    border-radius: 50%;
}


.qualification__line {
    display: block;
    width: 1px;
    height: 100%;
    background-color: var(--first-color);
    transform: translate(6px, -7px);
}

.qualification [data-content] {
    display: none;
}

.qualification__active[data-content] {
    display: block;
}

.qualification__button.qualification__active {
    color: var(--first-color);
}

/*#endregion ===================   Qualification    ============================ */




/*#region ======================   Services    ============================ */

.services__container {
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}

.services__content {
    position: relative;
    background-color: var(--container-color);
    padding: 3.5rem 0.5rem 1.25rem 1.5rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: 0.3s;
}


.services__content:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.services__icon {
    display: block;
    font-size: 1.5rem;
    color: var(--first-color);
    margin-bottom: var(--mb-1);
}

.services__title {
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-1);
    font-weight: var(--font-medium);
}

.services__button {
    cursor: pointer;
    font-size: var(--small-font-size);
}

.services__button:hover .button__icon {
    transform: translateX(0.25rem);
}


/* This will make the background greyish when we want something to be displayed on the complete screen */
.services__modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.services__modal-content {
    position: relative;
    background-color: var(--container-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.services__modal-services {
    row-gap: 1rem;
}

.services__modal-service {
    display: flex;

}

.services__modal-title {
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-1-5);
}

.services__modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--first-color);
}

.services__modal-icon {
    color: var(--first-color);
    margin-right: var(--mb-0-25);
}


.active-modal {
    opacity: 1;
    visibility: visible;
}

/*#endregion ===================   Services    ============================ */




/*#region ======================   Portfollio    ============================ */

.portfolio__container {
    overflow: initial;
}


.swiper-wrapper {
    display: flex;
    flex-direction: column;
}

.portfolio__content {
    padding: 1rem 1.5rem;
    margin-bottom: var(--mb-3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}


.portfolio__content:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.portfolio__img {
    width: 265px;
    border-radius: 0.5rem;
    justify-self: center;
}

.portfolio__title {
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-0-5);
}

.portfolio__description {
    margin-bottom: var(--mb-0-75);
}

.portfolio__buton:hover .button__icon {
    transform: translateX(0.25rem);
}

/*#endregion ===================   Portfollio    ============================ */




/*#region ======================   Project In Mind    ============================ */

.project {
    text-align: center;
}


.project__bg {
    background-color: var(--first-color-second);
    padding-top: 3rem;
}

.project__title {
    font-size: var(--h2-font-size);
    margin-bottom: var(--mb-0-75);
}

.project__description {
    margin-bottom: var(--mb-1-5);
}


.project__title,
.project__description {
    color: #fff;
}


.project__img {
    width: 232px;
    justify-self: center;
}

/*#endregion ===================   Project In Mind    ============================ */




/*#region ======================   Contact    ============================ */

.container__information .contact__title a {
    text-decoration: none;
    color: initial;
}

.container__information .contact__title a:hover {
    color: #181718c2;
}

.dark-theme .container__information .contact__title a {
    color: #F2F1F3;
}

.dark-theme .container__information .contact__title a:hover {
    color: #f2f1f3ba;
}

.contact__container {
    row-gap: 3rem;
}

.container__information {
    display: flex;
    margin-bottom: var(--mb-2);
}


.contact__icon {
    font-size: 2rem;
    color: var(--first-color);
    margin-right: var(--mb-0-75);
}


.contact__title {
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
}

.contact__subtitle {
    font-size: var(--small-font-size);
    color: var(--text-color-light);
}

.contact__content {
    background-color: var(--input-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem 0.25rem;
}

.contact__label {
    font-size: var(--small-font-size);
    color: var(--title-color);
}

.contact__input {
    width: 100%;
    background-color: var(--input-color);
    color: var(--text-color);
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    border-radius: none;
    outline: none;
    border: none;
    padding: 0.25rem 0.5rem 0.5rem 0;
    resize: none;
}

#formButton {
    border: none;
}

/*#endregion ===================   Contact    ============================ */




/*#region ======================   Footer    ============================ */

.footer {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.footer__container {
    row-gap: 3.5rem;
}


.footer__bg {
    background-color: var(--first-color-second);
    padding: 2rem 0 3rem;
}

.footer__title {
    font-size: var(--h1-font-size);
    margin-bottom: var(--mb-0-25);
}

.footer__subtitle {
    font-size: var(--small-font-size);
}

.footer__links {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.footer__link:hover {
    color: var(--first-color-lighter);
    text-decoration: none;
}

.footer__social {
    font-size: 1.25rem;
    margin-right: var(--mb-1-5);
}

.footer__social:hover {
    color: var(--first-color-lighter);
}

.footer__copy {
    font-size: var(--small-font-size);
    text-align: center;
    color: var(--text-color-light);
    margin-top: var(--mb-3);
}


.footer__title,
.footer__subtitle,
.footer__link,
.footer__social {
    color: #fff;
}

/*#endregion ===================   Footer    ============================ */




/*#region ======================   Scroll Up    ============================ */

.scrollup {
    position: fixed;
    right: 1rem;
    bottom: -20%;
    background-color: var(--first-color);
    opacity: 0.8;
    padding: 0 0.3rem;
    border-radius: 0.4rem;
    z-index: var(--z-tooltip);
    transition: 0.4s;
}

.scrollup:hover {
    background-color: var(--first-color-alt);
}

.scrollup__icon {
    font-size: 1.5rem;
    color: #fff;
}


.show-scroll {
    bottom: 5rem;
}

::-webkit-scrollbar {
    width: 0.60rem;
    background-color: var(--scroll-bar-color);
    border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color);
    border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-color-light);
}

/*#endregion ===================   Scroll Up    ============================ */



/*#region ======================   Certifications    ============================ */

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

.carousel-wrapper {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16/9;
    overflow: hidden;
    margin: 0 2rem;
    position: relative;
}

.slide {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    position: absolute;
    transition: transform 300ms ease-out;
    border: 0.5rem solid var(--title-color);
    background-color: var(--title-color);
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: stretch;
    border-radius: inherit;
}

.carousel-wrapper .btn {
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.7);
    color: var(--container-color);
    padding: 3px 10px;
    border-radius: 50%;
    border: none;
    margin: 10px;
    position: absolute;
    transform: translateY(-50%);
    cursor: pointer;
}


.carousel-wrapper .btn:hover {
    color: var(--container-color);
    background: rgba(0, 0, 0, 1);
}

.btn.previous {
    top: 50%;
    left: 0;
}

.btn.next {
    top: 50%;
    right: 0;
}

/*#endregion ===================   Certifications    ============================ */



/*#region ======================   Name    ============================ */
/*#endregion ===================   Name    ============================ */