* { margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;text-decoration: none;border: none;outline: none;scroll-behavior: smooth;}:root {--bg-color: #1f242d;--second-bg-color: #323946;--text-color: #fff;--main-color: #0ef;}html {font-size:62.5%;overflow-x: hidden;}body {width: 100%;overflow-x: hidden;background: var(--bg-color);color: var(--text-color);}.header {position: fixed;top: 0;left: 0;width: 100%;padding: 2rem 6%;background: var(--bg-color);display: flex;justify-content: space-between;align-items: center;z-index: 100;}.header.sticky {border-bottom: .1rem solid rgba(0, 0, 0, 0.1);}.logo {font-size: 2.5rem;color: var(--text-color);font-weight: 600;cursor: default;}.navbar a {font-size: 1.7rem;color: var(--text-color);margin-left: 4rem;transition: .3s;}section {min-height: 100vh;padding: 10rem 9% 2rem;}.btn {display: inline-block;padding: 1rem 2.8rem;background: var(--main-color);border-radius: 4rem;box-shadow: 0 0 1rem var(--main-color);font-size: 1.6rem;color: var(--second-bg-color);letter-spacing: .1rem;font-weight: 600;transition: .5s ease-out;}.btn :hover {box-shadow: none;}.navbar a:hover,.navbar a.active {color: var(--main-color);}#menu-icon {font-size: 3.6rem;color: var(--text-color);display: none;}.home {display: flex;justify-content: center;align-items: center;}.home-content h1 {font-size: 5.6rem;font-weight: 700;}.home-content h3 {font-size: 3.2rem;font-weight: 700;}.home-content h3:nth-of-type(2) {margin-bottom: 2rem;}.navbar {display: block;}span {color: var(--main-color);}.home-content p {font-size: 1.6rem;}.social-media a i {font-size: 1.7rem;}.social-media a {display: inline-flex;justify-content: center;align-items: center;width: 4rem;height: 4rem;border: .2rem solid var(--main-color);font: 2rem;background: transparent;color: var(--main-color);border-radius: 50%;margin: 3rem 1.5rem 3rem 0;}.social-media a:hover {background: var(--main-color);color: var(--second-bg-color);box-shadow: 0 0 1rem var(--main-color);}.home-img img {width: 12vw;transition: 1s;border-radius: 50%;}.home-img img:hover {transform: scale(1.1);}.about {display: flex;justify-content: center;align-items: center;gap: 2rem;background: var(--second-bg-color);}.about-img img {animation: floatImage 4s ease-in-out infinite;width: 50px;border-radius: 50px;}.new-content{display: flex;justify-content: center;}.contact-img img{display: block;margin: auto;border-radius: 50%;}.center{display: flex;flex-direction: row;justify-content: center;}@keyframes floatImage {0% {transform: translateY(0);}50% {transform: translateY(-2.4rem);}100% {transform: translateY();}}.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;}.about-img img {width: 16vw;border-radius: 50%;transition: 1s;}.about-img img:hover {transform: scale(1.1);}.services h2 {margin-bottom: 5rem;}.services-container {display: flex;justify-content: center;align-items: center;gap: 2rem;flex-wrap: wrap;}.services-container .services-box {flex: 1 1 30rem;background: var(--second-bg-color);padding: 3rem 2rem 4rem;border-radius: 2rem;text-align: center;border: .2rem solid var(--bg-color);}.services-container .services-box:hover {border-color: var(--main-color);transform: scale(1.02);}.services-box i {font-size: 6rem;color: var(--main-color);}.services-box h3 {font-size: 2.6rem;}.services-box p {font-size: 1.6rem;margin: 1rem 0 3rem;}.skills h2 {margin-bottom: 5rem;}.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(--text-color);background: var(--second-bg-color);border-radius: .8rem;margin: .7rem 0;}.contact form .input-box input {width: 49%;}.contact form textarea {resize: none;}.contact form .btn {margin-top: 2rem;cursor: pointer;}.footer {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;padding: 2rem 9%;background: var(--second-bg-color);}.footer-text p {font-size: 1.6rem;}.footer-iconTop a {display: inline-flex;align-items: center;padding: .8rem;background: var(--main-color);border-radius: .8rem;justify-content: center;transition: .5s ease;}.footer-iconTop a i {font-size: 2.4rem;color: var(--second-bg-color);}.footer-iconTop a:hover {box-shadow: 0 0 1rem var(--main-color);}.chatbot-toggler {position: fixed;bottom: 30px;right: 35px;outline: none;border: none;height: 50px;width: 50px;display: flex;cursor: pointer;align-items: center;justify-content: center;border-radius: 50%;background: #724ae8;transition: all 0.2s ease;}body.show-chatbot .chatbot-toggler {transform: rotate(90deg);}.chatbot-toggler span img {margin-top: 7px;border-radius: 50%;}.chatbot-toggler span {color: #fff;position: absolute;}.chatbot-toggler span:last-child,body.show-chatbot .chatbot-toggler span:first-child {opacity: 0;}body.show-chatbot .chatbot-toggler span:last-child {opacity: 1;}.chatbot {position: fixed;right: 35px;bottom: 90px;width: 420px;background: #fff;border-radius: 15px;overflow: hidden;opacity: 0;pointer-events: none;transform: scale(0.5);transform-origin: bottom right;box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1),    0 32px 64px -48px rgba(0, 0, 0, 0.5);transition: all 0.1s ease;}body.show-chatbot .chatbot {opacity: 1;pointer-events: auto;transform: scale(1);}.chatbot header {padding: 16px 0;position: relative;text-align: center;color: #fff;background: #1062e6;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.chatbot header span {position: absolute;right: 15px;top: 50%;display: none;cursor: pointer;transform: translateY(-50%);}header h2 {font-size: 1.4rem;}.chatbot .chatbox {overflow-y: auto;height: 510px;padding: 30px 20px 100px;}.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {width: 6px;}.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {background: #fff;border-radius: 25px;}.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {background: #ccc;border-radius: 25px;}.chatbox .chat {display: flex;list-style: none;}.chatbox .outgoing {margin: 20px 0;justify-content: flex-end;}.chatbox .incoming span {width: 32px;height: 32px;color: #fff;cursor: default;text-align: center;line-height: 32px;align-self: flex-end;background: #724ae8;border-radius: 4px;margin: 0 10px 7px 0;}.chatbox .chat p {white-space: pre-wrap;padding: 12px 16px;border-radius: 10px 10px 0 10px;max-width: 75%;color: #fff;font-size: 0.95rem;background: #724ae8;}.chatbox .incoming p {border-radius: 10px 10px 10px 0;}.chatbox .chat p.error {color: #721c24;background: #f8d7da;}.chatbox .incoming p {color: #000;background: #f2f2f2;}.chatbot .chat-input {display: flex;gap: 5px;position: absolute;bottom: 0;width: 100%;background: #fff;padding: 3px 20px;border-top: 1px solid #ddd;}.chat-input textarea {height: 55px;width: 100%;border: none;outline: none;resize: none;max-height: 180px;padding: 15px 15px 15px 0;font-size: 0.95rem;}.chat-input span {align-self: flex-end;color: #724ae8;cursor: pointer;height: 55px;display: flex;align-items: center;visibility: hidden;font-size: 1.35rem;}.chat-input textarea:valid~span {visibility: visible;}@media (max-width: 490px) {.chatbot-toggler { right: 20px;
        bottom: 20px;}.chatbot {
        right: 0;
        bottom: 0;
        border-radius: 0;
        width: 100%;}.chatbot .chatbox {
        padding: 25px 15px 100px;}.chatbot .chat-input {
        padding: 5px 15px;}.chatbot header span {
        display: block;}}/* BREAKPOINTS */@media(max-width: 1200px) {html {
        font-size: 55%;}}@media(max-width: 991px) {.header {
        padding: 2rem 3%; }section {
        padding: 10rem 3% 2rem;}.navbar.active {
        display: block;}.footer {
        padding: 2rem 3%;}.services {
        padding-bottom: 7rem;}.skills {
        padding-bottom: 7rem;}}@media (max-width: 768px) {#menu-icon {
        display: block;}.navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 3%;
        background: var(--bg-color);
        border-top: .1rem solid rgba(0, 0, 0, .2);
        box-shadow: 0 .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;}.about {
        flex-direction: column-reverse;}.about img {
        width: 25vw;
        margin-top: 4rem;}.services h2 {
        margin-bottom: 3rem;}.skills h2 {
        margin-bottom: 3rem;}}@media (max-width: 450px) {html {
        font-size: 50%;}.contact form .input-box input {width: 100%;}}@media (max-width: 450px) {.footer {
        flex-direction: column-reverse;}.footer p {
        text-align: center;
        margin-top: 2rem;}}

        /* MODAL */
        .overlay{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: hsla(0, 0%, 0%,0.5);
                opacity: 0;
                pointer-events: none;
                z-index: 15;
                transition: 0.3s ease;
        }
        .overlay.active{
                opacity: 1;
                pointer-events: all;
        }
        .modal{
                position: fixed;                
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: hsla(0, 0%, 0%, 0.5);
                display: flex;
                justify-content: center;
                z-index: 10;
                animation: popup 1s ease-in-out 2s forwards;
                align-items: center;
                pointer-events: none;
                opacity: 0;
                visibility: hidden;
                }
                @keyframes popup{
                        0%{
                             opacity: 0;   
                             visibility: hidden;
                             pointer-events: none;
                        }
                        100%{
                                opacity: 1;
                                visibility: visible;
                                pointer-events: all;
                        }
                }
                .modal.closed{
                        display: none;
                }  
                .modal-close-overlay{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                }
                .newsletter-img{
                        display: none;
                }
                .modal-content{
                        position: relative;
                        max-width: 350px;
                        margin: 20px;
                        background-color: #000000;
                        border-radius: 10px;
                        overflow: hidden;
                        z-index: 2;
                        color: white;
                        animation: scaleup 0.2s ease-in-out 2s forwards;
                }
                .modal-content p{
                        color: white;
                }
                @keyframes scaleup{
                        0%{
                                transform: scale(0.9);
                        }
                        100%{
                             transform: scale(1);   
                        }
                }
                .modal-close-btn{
                       position: absolute; 
                       top: 15px;
                       right: 15px;
                       font-size: 0px;
                       padding: 5px;
                       border-radius: 30px;
                       opacity: 0.9;
                } 

                .modal-close-btn box-icon{
                        --ionicon-stroke-width: 70px;
                        color: white;
                }
                .newsletter{
                        padding: 50px 30px;
                        text-align: center;
                }
                .newsletter h1{
                        font-size: 18px;
                }
                .newsletter-header{
                        margin-bottom: 20px;
                }
                .newsletter-desc{
                        color: var(--bg-color);
                        line-height: 1.6;
                        font-size: 12px;
                }
                .email-field{
                        font-size: 18px;
                        border-radius: 10px;
                        padding: 8px 16px;
                        margin-bottom: 16px;
                        background-color: #000000;;
                        border: 0.1px solid rgb(255, 255, 255);
                        color: white;
                        width: 300px;
                }
                .newsletter-title{
                        font-size: 24px;
                }
                .btn-newsletter{
                        margin: auto;
                        background-color: red;
                        color: var(--text-color);
                        text-transform: uppercase;
                        padding: 10px 15px;
                        border-radius: 10px;
                        transition: 0.3s ease-in-out;
                }
                .btn-newsletter:hover{
                        background-color: rgb(39, 135, 144);
                }