*,
                    *::before,
                    *::after {
                        padding: 0px;
                        margin: 0px;
                    }
                    
                    #map {
                        margin-top: 3%;
                        width: 88%;
                        height: 300px;
                    }
                    /* srollBar width */
                    
                     ::-webkit-scrollbar {
                        width: 10px;
                        background: black;
                    }
                    /* Track */
                    
                     ::-webkit-scrollbar-track {
                        box-shadow: inset 0 0 2px grey;
                        border-radius: 10px;
                    }
                    /* Handle */
                    
                     ::-webkit-scrollbar-thumb {
                        background: linear-gradient(180deg, #222 11.46%, rgba(168, 70, 226, 0.507547) 50.52%, #222 94.27%);
                        border-radius: 25px;
                    }
                    /* Handle on hover */
                    
                     ::-webkit-scrollbar-thumb:hover {
                        background: linear-gradient(180deg, #222 11.46%, rgba(168, 70, 226, 1) 50.52%, #222 94.27%);
                    }
                    /* Firefox srollBar width */
                    
                     ::-moz-scrollbar {
                        width: 16px;
                        background: black !important;
                    }
                    /* Firefox Track */
                    
                     ::-moz-scrollbar-track {
                        box-shadow: inset 0 0 2px grey !important;
                        border-radius: 10px;
                    }
                    /* Firefox Handle */
                    
                     ::-moz-scrollbar-thumb {
                        background: linear-gradient(180deg, #222 11.46%, rgba(168, 70, 226, 0.507547) 50.52%, #222 94.27%) !important;
                        border-radius: 25px;
                    }
                    /* Firefox Handle on hover */
                    
                     ::-moz-scrollbar-thumb:hover {
                        background: linear-gradient(180deg, #222 11.46%, rgba(168, 70, 226, 1) 50.52%, #222 94.27%) !important;
                    }
                    
                    html {
                        scroll-behavior: smooth;
                        padding: 0px;
                        margin: 0px;
                    }
                    
                    @font-face {
                        font-family: PopLight;
                        src: url("/fonts/Poppins-Light.ttf");
                    }
                    
                    @font-face {
                        font-family: Futura XB;
                        src: url("/fonts/Futura\ XBlk\ BT.ttf");
                    }
                    
                    @font-face {
                        font-family: American Captain1;
                        src: url("/fonts/American-Captain.otf");
                    }
                    
                    @font-face {
                        font-family: American Captain2;
                        src: url("/fonts/American-Captain.ttf");
                    }
                    
                    @font-face {
                        font-family: Futura EB;
                        src: url("/fonts/Futura\ Extra\ Black\ font.ttf");
                    }
                    
                    body {
                        color: white;
                        font-family: PopLight;
                        height: auto;
                        width: 100%;
                        overflow-x: hidden;
                        margin: 0px;
                        padding: 0px;
                        /* transform-style: preserve-3d;*/
                        background-color: black;
                    }
                    
                    p {
                        line-height: 1.8rem;
                        font-size: 1rem;
                    }
                    
                    nav {
                        background: black;
                        text-transform: uppercase;
                        min-height: 66.3px;
                        width: 90%;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        padding: 20px, 0px;
                        justify-content: space-between;
                        z-index: 6;
                    }
                    
                    .burger {
                        display: none;
                        cursor: pointer;
                    }
                    
                    .burger div {
                        width: 25px;
                        height: 2px;
                        background-color: #C651CD;
                        margin: 5px;
                        transition: all 0.5s ease;
                    }
                    
                    .burger .line1 {
                        width: 12px;
                    }
                    
                    .burger .line3 {
                        width: 12px;
                        margin-left: 46%;
                    }
                    
                    .nav-links li {
                        display: none;
                    }
                    
                    .nav-links {
                        display: flex;
                        width: 100%;
                        align-items: center;
                        justify-content: space-around;
                        list-style: none;
                    }
                    
                    .nav-links a {
                        text-decoration: none;
                        font-size: 0.8rem;
                        color: white;
                        letter-spacing: 1px;
                        padding-left: 1.2em;
                        font-family: PopLight;
                    }
                    
                    .logo-icon {
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        margin-right: auto;
                        cursor: pointer;
                    }
                    
                    .nav-bar {
                        color: white;
                        background: #000000;
                    }
                    
                    #home-section {
                        height: 100vh;
                        background: url(/img/background1.png);
                        background-repeat: no-repeat;
                        background-size: cover;
                        display: inline-block;
                        background-attachment: fixed;
                        width: 100%;
                        z-index: -1;
                    }
                    
                    .intro-front {
                        background: -webkit-linear-gradient(#C651CD, #8739f9);
                        -webkit-background-clip: text;
                        background-clip: inset 0 0 6px rgba(0, 0, 0, 0.1);
                        -webkit-text-fill-color: transparent;
                    }
                    
                    .developer {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        transform: translateY(120%);
                        -moz-transform: translate(-1%, 120%);
                        justify-content: center;
                        display: flex;
                        flex-direction: row;
                        color: white;
                        font-size: 7em;
                        letter-spacing: 1px;
                        font-family: fantasy, American Captain2, 'Itim', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                        font-weight: bolder;
                    }
                    
                    h4 {
                        font-size: 1.1rem;
                        padding-top: 0px;
                        text-align: center;
                    }
                    
                    .home-text p {
                        font-size: 25px;
                        -moz-text-size: 60%;
                        color: white;
                        position: absolute;
                        margin-top: 13.5%;
                        left: 32%;
                        letter-spacing: 1px;
                        font-weight: bold;
                    }
                    
                    .home-img {
                        top: 0%;
                        left: 10%;
                        width: 50%;
                        height: auto;
                        position: relative;
                    }
                    
                    .sub:after {
                        content: '';
                        margin-top: 5px;
                        display: inline-block;
                        width: 30px;
                        height: 10px;
                        margin-left: 3px;
                        top: 240px;
                        background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                    }
                    
                    .sub-head:after {
                        content: '';
                        margin-top: 5px;
                        display: inline-block;
                        width: 30px;
                        height: 10px;
                        margin-left: 3px;
                        top: 240px;
                        background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                    }
                    
                    .sub-head-1:after {
                        content: '';
                        margin-top: 5px;
                        display: inline-block;
                        width: 30px;
                        height: 10px;
                        margin-left: 3px;
                        top: 240px;
                        background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                    }
                    
                    .sidenav {
                        right: 0.5%;
                        top: 50%;
                        padding: 30px;
                        transform: translateY(-50%);
                        position: fixed;
                        z-index: 1;
                        -moz-right: 0.5%;
                        -moz-top: -50%;
                        -moz-padding: 30px;
                        -moz-transform: translateY(-50%);
                        -moz-position: fixed;
                        -moz-z-index: 1;
                    }
                    
                    .sidenav p {
                        display: flex;
                        top: 75%;
                        right: 90%;
                        display: flex;
                        font-size: 14px;
                        padding: 20px;
                        color: white;
                    }
                    
                    .sidenav>div {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                    
                    .sidenav svg {
                        cursor: pointer;
                        opacity: 0.5;
                        transform: scale(1);
                    }
                    
                    .sidenav svg:hover {
                        animation: dot 0.5s ease-in-out infinite alternate;
                    }
                    
                    .sidenav svg.active {
                        opacity: 1;
                    }
                    
                    .slide {
                        opacity: 0.5;
                    }
                    /*****For side-nav-bar dots****/
                    
                    @keyframes dot {
                        0% {
                            transform: scale(1);
                        }
                        100% {
                            transform: scale(2);
                        }
                    }
                    
                    @keyframes bounceAlpha {
                        0% {
                            opacity: 0;
                            transform: translateX(0px) scale(0.9);
                        }
                        25% {
                            opacity: 0;
                            transform: translateX(0px) scale(0.9);
                        }
                        26% {
                            opacity: 0;
                            transform: translateX(10px) scale(0.9);
                        }
                        55% {
                            opacity: 1;
                            transform: translateX(0px) scale(0.9);
                        }
                    }
                    
                    .bounceAlpha {
                        animation-name: bounceAlpha;
                        animation-duration: 2s;
                        animation-iteration-count: 5s;
                        animation-timing-function: linear;
                    }
                    /***************Mouse animate icon**************/
                    
                    .mouse {
                        top: 1%;
                        margin-left: 8.8rem;
                        margin-bottom: 100px;
                    }
                    
                    .mouse-icon {
                        border: 2px solid white;
                        border-radius: 16px;
                        height: 40px;
                        width: 24px;
                        display: block;
                        z-index: 10;
                        opacity: 0.7;
                        margin-top: 7rem;
                        margin-left: 9rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    
                    .mouse-icon .wheel {
                        -webkit-animation-name: drop;
                        -webkit-animation-duration: 1s;
                        -webkit-animation-timing-function: linear;
                        -webkit-animation-delay: 0s;
                        -webkit-animation-iteration-count: infinite;
                        -webkit-animation-play-state: running;
                        -webkit-animation-name: drop;
                        animation-name: drop;
                        -webkit-animation-duration: 1s;
                        animation-duration: 1s;
                        -webkit-animation-timing-function: linear;
                        animation-timing-function: linear;
                        -webkit-animation-delay: 0s;
                        animation-delay: 0s;
                        -webkit-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                        -webkit-animation-play-state: running;
                        animation-play-state: running;
                    }
                    
                    .mouse-icon .wheel {
                        position: relative;
                        border-radius: 10px;
                        background: white;
                        width: 2px;
                        height: 6px;
                        top: 4px;
                        margin-left: auto;
                        margin-right: auto;
                    }
                    
                    @-webkit-keyframes drop {
                        0% {
                            top: 2px;
                            opacity: 0;
                        }
                        30% {
                            top: 10px;
                            opacity: 1;
                        }
                        100% {
                            top: 18px;
                            opacity: 0;
                        }
                    }
                    
                    @keyframes drop {
                        0% {
                            top: 1px;
                            opacity: 0;
                        }
                        30% {
                            top: 10px;
                            opacity: 1;
                        }
                        100% {
                            top: 18px;
                            opacity: 0;
                        }
                    }
                    
                    ul li {
                        margin: 0 0 24px;
                        list-style: none;
                    }
                    /*******About Section*********/
                    
                    #about-section {
                        height: auto;
                        background-color: black;
                        width: 100%;
                        position: relative;
                    }
                    
                    .column {
                        float: left;
                        width: 50%;
                        margin: 0px, 50px;
                    }
                    
                    .about-h4 {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .about-h4-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .sub {
                        font-size: 12px;
                        text-align: center;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .sub-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .line {
                        margin-bottom: 20px;
                        margin-left: 48%;
                        width: 78%;
                        top: 50%;
                        right: 38.5%;
                        transform: translate(-50%, -50%);
                    }
                    
                    .line-hr {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .line-hr-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .about-me-img {
                        margin: auto;
                        align-items: center;
                        margin-top: 11%;
                        margin-left: 18%;
                        display: flex;
                        align-self: center;
                    }
                    
                    .about-img {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 2s all ease-in-out;
                    }
                    
                    .about-img-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .about-me-img img {
                        height: 100%;
                        width: 100%;
                    }
                    
                    .about-holder {
                        margin-top: 2.5%;
                        margin-left: 10%;
                        padding-bottom: 5%;
                        max-width: 100rem;
                    }
                    
                    .column p {
                        max-width: 52ch;
                    }
                    /* Clear floats after the columns */
                    
                    .row:after {
                        content: "";
                        display: table;
                        clear: both;
                    }
                    
                    .about-info {
                        display: block;
                    }
                    
                    .skill {
                        margin-top: 50px;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .skill-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .skill-info {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .skill-info-1 {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .skill-info-2 {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .skill-info-3 {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .skill-info-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .mini-heading {
                        color: #C651CD;
                        margin-top: 10px;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .mini-heading-1 {
                        color: #C651CD;
                        margin-top: 10px;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .mini-heading-2 {
                        color: #C651CD;
                        margin-top: 10px;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .mini-heading-3 {
                        color: #C651CD;
                        margin-top: 10px;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .mini-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .designer {
                        margin-top: 4%;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .designer-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .coder {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .coder-appear {
                        opacity: 1;
                        margin-top: 4%;
                        height: 80%;
                        position: relative;
                        left: 20%;
                        transform: translateY(-15px);
                        vertical-align: -0.2875em;
                    }
                    
                    .about-text {
                        width: auto;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .about-text-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .about-para-container {
                        width: 80%;
                    }
                    /**********Project Section*********/
                    
                    #project-section {
                        height: 100%;
                        padding-top: 48.9px;
                        background-color: black;
                        display: inline-block;
                        width: 100%;
                    }
                    
                    .project-holder {
                        margin-left: 10%;
                    }
                    
                    .grid-container {
                        display: grid;
                        grid-template-columns: auto auto auto;
                        padding: 10px;
                    }
                    
                    .grid-container img {
                        height: 60%;
                        width: 100%;
                        border-top-right-radius: 5%;
                        border-top-left-radius: 5%;
                    }
                    
                    .portfolio-img {
                        cursor: pointer;
                    }
                    
                    .portfolio-h4 {
                        width: auto;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .portfolio-h4-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .sub-head {
                        font-size: 12px;
                        text-align: center;
                        margin-bottom: 20px;
                        width: auto;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .sub-head-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .card {
                        width: 20vw;
                        padding-bottom: 30px;
                        background: #0e0d0dd0;
                        border-radius: 5%;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .card-1 {
                        width: 20vw;
                        padding-bottom: 30px;
                        background: #0e0d0dd0;
                        border-radius: 5%;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .card-2 {
                        width: 20vw;
                        padding-bottom: 30px;
                        background: #0e0d0dd0;
                        border-radius: 5%;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .card-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .card p {
                        margin: 8px 10px;
                    }
                    
                    .card strong {
                        margin: 0px 0px;
                        font-size: 15.5px;
                    }
                    
                    .card-1 p {
                        margin: 8px 10px;
                    }
                    
                    .card-1 strong {
                        margin: 0px 0px;
                        font-size: 15.5px;
                    }
                    
                    .card-2 p {
                        margin: 8px 10px;
                    }
                    
                    .card-2 strong {
                        margin: 0px 0px;
                        font-size: 15.5px;
                    }
                    /***LIGHTBOX**/
                    /* The Modal (background) */
                    
                    .modal {
                        display: none;
                        position: fixed;
                        z-index: 1;
                        padding-top: 100px;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 83%;
                        overflow: auto;
                        overflow-x: hidden;
                        background-color: black;
                    }
                    /* Modal Content */
                    
                    .modal-content {
                        position: relative;
                        background-color: #833ab479;
                        margin: auto;
                        padding: 0;
                        width: 90%;
                        max-width: 1200px;
                    }
                    /* The Close Button */
                    
                    .close {
                        color: white;
                        position: absolute;
                        top: 50px;
                        right: 75px;
                        font-size: 35px;
                        font-weight: bold;
                    }
                    
                    .close:hover,
                    .close:focus {
                        color: #999;
                        text-decoration: none;
                        cursor: pointer;
                    }
                    /* Number text (1/3 etc) */
                    
                    .numbertext {
                        color: #f2f2f2;
                        font-size: 12px;
                        padding: 8px 12px;
                        position: relative;
                        top: 0;
                        font-weight: bold;
                        width: 100%;
                    }
                    
                    .project-link {
                        color: #fff;
                        text-decoration: none;
                        font-weight: normal;
                    }
                    
                    .project-link:hover {
                        color: palevioletred;
                    }
                    /*********Contact Section*****/
                    
                    #contact-section {
                        height: 100%;
                        background-color: black;
                        display: inline-block;
                        width: 100%;
                        padding-bottom: 5%;
                    }
                    
                    #contact-section h4 {
                        margin-top: 2%;
                    }
                    
                    .hello-h4 {
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .hello-h4-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .sub-head-1 {
                        font-size: 12px;
                        text-align: center;
                        margin-bottom: 20px;
                        width: auto;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .sub-head-1-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .contact-holder {
                        margin-left: 10%;
                    }
                    
                    .contact-para-container {
                        width: 80%;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .contact-para-container-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .get-in-touch {
                        margin-top: 1%;
                        margin-left: 24%;
                        align-items: center;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .get-in-touch-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .alert {
                        text-align: center;
                        justify-content: center;
                        padding: 5px;
                        background: #79c879;
                        color: #fff;
                        width: 45%;
                        margin-left: 12%;
                        display: none;
                    }
                    
                    .form {
                        margin-left: 6%;
                        align-items: center;
                        margin-bottom: 2%;
                        opacity: 0;
                        transform: translateY(40px);
                        transition: 1.7s all ease-in-out;
                    }
                    
                    .form-appear {
                        opacity: 1;
                        transform: translateY(0px);
                    }
                    
                    .form label {
                        font-size: 14px;
                        font-family: PopLight;
                        top: 10%;
                    }
                    
                    .form ::placeholder {
                        color: white;
                    }
                    
                    .form:hover {
                        border: none;
                    }
                    
                    .form input {
                        color: white;
                        background-color: transparent;
                        text-decoration: none;
                        border-top: none;
                        border-left: none;
                        border-right: none;
                        resize: none;
                        font-size: 14px;
                        width: 74%;
                        margin-top: 30px;
                        font-family: PopLight;
                        outline: none;
                    }
                    
                    .form .view a {
                        top: 50%;
                        left: 25%;
                        margin-left: -50%;
                    }
                    
                    textarea {
                        color: white;
                        width: 74%;
                        height: 7rem;
                        margin-right: 90%;
                        padding: 5px 20px;
                        margin-top: 10px;
                        box-sizing: border-box;
                        border-radius: 5px;
                        background-color: #1b1b1b;
                        font-size: 14px;
                        resize: none;
                        font-family: PopLight;
                        outline: none;
                    }
                    /*******View Button*******/
                    
                    button {
                        border: none;
                    }
                    
                    button:hover {
                        cursor: pointer;
                    }
                    
                    .view {
                        width: 160px;
                        height: 48px;
                        -webkit-perspective: 500px;
                        -moz-perspective: 500px;
                        -ms-perspective: 500px;
                        perspective: 500px;
                        top: 50%;
                        left: 50%;
                        margin-left: 33.3%;
                        margin-top: 10px;
                    }
                    
                    .view a {
                        font-weight: 400;
                        font-size: 14px;
                        text-transform: uppercase;
                        margin: 0;
                        padding: 0;
                        width: 50%;
                        height: 100%;
                        position: absolute;
                        -webkit-transform-style: preserve-3d;
                        -moz-transform-style: preserve-3d;
                        -o-transform-style: preserve-3d;
                        -ms-transform-style: preserve-3d;
                        transform-style: preserve-3d;
                        -webkit-transform: translateZ(-25px);
                        -moz-transform: translateZ(-25px);
                        -o-transform: translateZ(-25px);
                        -ms-transform: translateZ(-25px);
                        transform: translateZ(-25px);
                        -webkit-transition: -webkit-transform 0.3s;
                        -moz-transition: -moz-transform 0.3s;
                        -o-transition: -o-transform 0.3s;
                        -ms-transition: -ms-transform 0.3s;
                        transition: transform 0.3s;
                        cursor: pointer;
                    }
                    
                    .view a .front,
                    .view a .back {
                        margin: 0;
                        width: 90px;
                        height: 38px;
                        line-height: 38px;
                        position: absolute;
                        text-align: center;
                        letter-spacing: 0.4em;
                    }
                    
                    .view a .front {
                        background-color: #8739f9;
                        color: #fff;
                        border-radius: 90px;
                        -webkit-transform: rotateY(0) translateZ(24px);
                        -moz-transform: rotateY(0) translateZ(24px);
                        -o-transform: rotateY(0) translateZ(24px);
                        -ms-transform: rotateY(0) translateZ(24px);
                        transform: rotateY(0) translateZ(24px);
                    }
                    
                    .view a .back {
                        background-color: rgba(255, 255, 255, 0);
                        color: rgba(34, 34, 34, 0);
                        border-radius: 90px;
                        -webkit-transform: rotateX(90deg) translateZ(24px);
                        -moz-transform: rotateX(90deg) translateZ(24px);
                        -o-transform: rotateX(90deg) translateZ(24px);
                        -ms-transform: rotateX(90deg) translateZ(24px);
                        transform: rotateX(90deg) translateZ(24px);
                        overflow: hidden;
                    }
                    
                    .view a .back:after {
                        content: '';
                        position: absolute;
                        top: -32%;
                        left: -10%;
                        width: 100%;
                        height: 50%;
                        background: #222;
                        -webkit-transform: rotate(8deg);
                        -moz-transform: rotate(8deg);
                        -o-transform: rotate(8deg);
                        -ms-transform: rotate(8deg);
                        transform: rotate(8deg);
                        -webkit-transition: all 0.5s ease;
                        -moz-transition: all 0.5s ease;
                        -o-transition: all 0.5s ease;
                        -ms-transition: all 0.5s ease;
                        transition: all 0.5s ease;
                        -webkit-transition-delay: 0.15s;
                        -moz-transition-delay: 0.15s;
                        -o-transition-delay: 0.15s;
                        -ms-transition-delay: 0.15s;
                        transition-delay: 0.15s;
                    }
                    
                    .view a:hover {
                        -webkit-transform: translateZ(-24px) rotateX(-90deg);
                        -moz-transform: translateZ(-24px) rotateX(-90deg);
                        -o-transform: translateZ(-24px) rotateX(-90deg);
                        -ms-transform: translateZ(-24px) rotateX(-90deg);
                        transform: translateZ(-24px) rotateX(-90deg);
                    }
                    
                    .view a:hover .front {
                        background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                        -webkit-transition: all 0.8s ease;
                        -moz-transition: all 0.8s ease;
                        -o-transition: all 0.8s ease;
                        -ms-transition: all 0.8s ease;
                        transition: all 0.8s ease;
                    }
                    
                    .view a:hover .back {
                        color: white;
                        -webkit-transition: color 0.4s linear;
                        -moz-transition: color 0.4s linear;
                        -o-transition: color 0.4s linear;
                        -ms-transition: color 0.4s linear;
                        transition: color 0.4s linear;
                        background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                    }
                    
                    .view a:hover .back:after {
                        -webkit-transform: rotate(6deg) translate(90px, -18px);
                        -moz-transform: rotate(6deg) translate(100px, -18px);
                        -o-transform: rotate(6deg) translate(100px, -18px);
                        -ms-transform: rotate(6deg) translate(100px, -18px);
                        transform: rotate(6deg) translate(100px, -18px);
                    }
                    /*******Footer*******/
                    
                    .fnav {
                        color: white;
                        background: #100f10;
                        text-transform: uppercase;
                        min-height: 50px;
                        width: 100%;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        padding: 0px, 0px;
                        justify-content: space-between;
                    }
                    
                    .fnav span {
                        margin: auto;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                    
                    .fnav a {
                        text-decoration: none;
                    }
                    
                    .social-links {
                        color: white;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                    }
                    
                    .social-links a {
                        text-decoration: none;
                        color: white;
                        justify-content: space-between;
                        padding: 5px;
                        margin: auto;
                    }
                    
                    .fnav-logo {
                        color: #C651CD;
                        margin: auto;
                        display: flex;
                        align-items: center;
                        text-decoration: none;
                        cursor: pointer;
                    }
                    
                    .fa-twitter {
                        color: #55acee
                    }
                    
                    .fa-linkedin {
                        margin: auto;
                        text-align: center;
                        color: #ffffff;
                        background-color: #0e76a8;
                        border-radius: 10%;
                        height: 16px;
                        width: 18px;
                        padding-bottom: 1px;
                    }
                    
                    .contact-socials a {
                        text-decoration: none;
                        color: white;
                        justify-content: space-between;
                        padding: 5px;
                        margin: auto;
                    }
                    
                    .contact-socials img {
                        margin-top: 20px;
                    }
                    
                    .fa-instagram {
                        border-radius: 21%;
                        background: linear-gradient(#405de6, #5851d6, #833ab4, #c13584, #e1306c, #fd1d1d);
                    }
                    /*********Smartphone portrait*********/
                    
                    @media only screen and (max-width:767px) {
                        html {
                            width: 100%;
                            overflow-x: hidden;
                            scroll-behavior: smooth;
                            -webkit-overflow-scrolling: touch;
                        }
                        p {
                            max-width: 42ch;
                            font-size: 1rem;
                        }
                        .column {
                            float: left;
                            width: 100%;
                        }
                        .sub-head {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 0.8rem;
                        }
                        .sub {
                            text-align: center;
                            font-size: 0.9rem;
                        }
                        h4 {
                            text-align: center;
                        }
                        .container {
                            width: 100%;
                            margin-left: 1rem;
                            padding-bottom: 0px;
                            padding: 0px, 0px, 0px, 0px;
                        }
                        .sidenav {
                            display: none;
                        }
                        nav {
                            min-height: 55.3px;
                            width: 100%;
                            position: fixed;
                            z-index: 3;
                        }
                        .logo-icon {
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            margin-left: 5%;
                            cursor: pointer;
                        }
                        .nav-links {
                            position: absolute;
                            position: fixed;
                            right: 0px;
                            height: 100vh;
                            top: 6vh;
                            background-color: #000;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            width: 35%;
                            transform: translateX(100%);
                            transition: transform 0.5s ease-in;
                            z-index: 6;
                        }
                        .nav-links li {
                            opacity: 0;
                            display: block;
                        }
                        .nav-links li a {
                            text-decoration: none;
                        }
                        .nav-links li a:hover {
                            color: #8739f9;
                            font-size: 0.9rem;
                            font-weight: bolder;
                        }
                        .nav-active {
                            transform: translateX(0%);
                        }
                        .burger {
                            margin-right: 5%;
                            display: block;
                            cursor: pointer;
                        }
                        @keyframes navLinkFade {
                            from {
                                opacity: 0;
                                transform: translateX(50px);
                            }
                            to {
                                opacity: 1;
                                transform: translateX(0px);
                            }
                        }
                        .toggle .line1 {
                            transform: rotate(42deg) translate(3px, 1px);
                        }
                        .toggle .line2 {
                            transform: rotate(-42deg);
                        }
                        .toggle .line3 {
                            transform: rotate(41deg) translate(-1.5px, -2.4px);
                        }
                        /***********Intro Section**************/
                        /**************Home Section********/
                        #home-section {
                            height: 100vh;
                            background: url(/img/XL.png);
                            background-repeat: no-repeat;
                            width: 100%;
                            background-attachment: fixed;
                            z-index: -1;
                        }
                        .developer {
                            list-style: none;
                            top: 22vh;
                            padding: 0;
                            margin: 0;
                            transform: translateY(80%);
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            color: white;
                            font-size: 19vw;
                            font-family: American Captain1;
                            font-weight: bold;
                            position: relative;
                        }
                        .mouse {
                            display: none;
                        }
                        .mouse-icon {
                            border: 2px solid white;
                            border-radius: 16px;
                            height: 35px;
                            width: 24px;
                            display: block;
                            z-index: 10;
                            top: 47%;
                            transform: translateY(-1%, -30%);
                            margin-left: 47%;
                            margin-bottom: 2%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            position: relative;
                        }
                        .home-text p {
                            width: 100%;
                            color: white;
                            position: absolute;
                            top: 24vh;
                            align-items: center;
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            transform: translate(-33.3%, -45%);
                            letter-spacing: 1px;
                            font-weight: bolder;
                            font-size: 3.5vw;
                        }
                        .home-text p span {
                            letter-spacing: 1px;
                        }
                        .home-img {
                            top: 48%;
                            left: 50%;
                            height: auto;
                            transform: translate(-44%, 16%);
                            position: absolute;
                        }
                        .home-img img {
                            height: 85%;
                            width: 85%;
                        }
                        /************* about section***************/
                        #about-heading {
                            width: 10rem;
                        }
                        .about-h4 {
                            margin-top: 8%;
                        }
                        .about-holder {
                            margin-top: 2.5%;
                            margin-left: 6%;
                            margin-right: -5%;
                            padding-bottom: 3%;
                            max-width: 100rem;
                        }
                        .about-para-container {
                            width: 90%;
                        }
                        .line {
                            margin-right: 8%;
                        }
                        .designer {
                            margin-top: 2%;
                            height: 10%;
                            max-width: 40%;
                        }
                        .coder {
                            position: relative;
                            top: 50%;
                            left: 23%;
                            transform: translate(-50%, -50%);
                            height: 5%;
                            max-width: 40%;
                        }
                        .skill {
                            width: 80px;
                            height: 30px;
                            display: flex;
                        }
                        .about-me-img {
                            width: 60%;
                            top: 50%;
                            margin-left: 14%;
                            height: 60%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        /****Project Section****/
                        .grid-container {
                            display: flex;
                            flex-direction: column;
                            margin-left: -8%;
                        }
                        .grid-container img {
                            height: auto;
                            width: 100%;
                            border-top-right-radius: 5%;
                            border-top-left-radius: 5%;
                        }
                        .card {
                            width: 97%;
                            padding-bottom: 0px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-bottom: 8%;
                        }
                        .card-1 {
                            width: 97%;
                            padding-bottom: 0px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-bottom: 8%;
                        }
                        .card-2 {
                            width: 97%;
                            padding-bottom: 0px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-bottom: 8%;
                        }
                        .card p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        .card-1 p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card-1 strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        .card-2 p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card-2 strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        /*******View Button*******/
                        .view {
                            width: 3vw;
                            height: 24px;
                            -webkit-perspective: 500px;
                            -moz-perspective: 500px;
                            -ms-perspective: 500px;
                            perspective: 500px;
                            top: 50%;
                            position: relative;
                            left: 15%;
                            margin-top: 1rem;
                            margin-bottom: 2rem;
                        }
                        .view a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding-bottom: 8rem;
                            font-weight: 400;
                            font-size: 14px;
                            text-transform: uppercase;
                            margin: 0;
                            padding: 0;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            -webkit-transform-style: preserve-3d;
                            -moz-transform-style: preserve-3d;
                            -o-transform-style: preserve-3d;
                            -ms-transform-style: preserve-3d;
                            transform-style: preserve-3d;
                            -webkit-transform: translateZ(-25px);
                            -moz-transform: translateZ(-25px);
                            -o-transform: translateZ(-25px);
                            -ms-transform: translateZ(-25px);
                            transform: translateZ(-25px);
                            -webkit-transition: -webkit-transform 0.3s;
                            -moz-transition: -moz-transform 0.3s;
                            -o-transition: -o-transform 0.3s;
                            -ms-transition: -ms-transform 0.3s;
                            transition: transform 0.3s;
                            cursor: pointer;
                        }
                        .view a .front,
                        .view a .back {
                            margin: 0;
                            width: 90px;
                            height: 38px;
                            line-height: 38px;
                            position: absolute;
                            text-align: center;
                            letter-spacing: 0.4em;
                        }
                        .view a .front {
                            background-color: #8739f9;
                            color: #fff;
                            border-radius: 90px;
                            -webkit-transform: rotateY(0) translateZ(24px);
                            -moz-transform: rotateY(0) translateZ(24px);
                            -o-transform: rotateY(0) translateZ(24px);
                            -ms-transform: rotateY(0) translateZ(24px);
                            transform: rotateY(0) translateZ(24px);
                        }
                        .view a .back {
                            background-color: rgba(255, 255, 255, 0);
                            color: rgba(34, 34, 34, 0);
                            border-radius: 90px;
                            -webkit-transform: rotateX(90deg) translateZ(24px);
                            -moz-transform: rotateX(90deg) translateZ(24px);
                            -o-transform: rotateX(90deg) translateZ(24px);
                            -ms-transform: rotateX(90deg) translateZ(24px);
                            transform: rotateX(90deg) translateZ(24px);
                            overflow: hidden;
                        }
                        .view a .back:after {
                            content: '';
                            position: absolute;
                            top: -32%;
                            left: -10%;
                            width: 100%;
                            height: 50%;
                            background: #222;
                            -webkit-transform: rotate(8deg);
                            -moz-transform: rotate(8deg);
                            -o-transform: rotate(8deg);
                            -ms-transform: rotate(8deg);
                            transform: rotate(8deg);
                            -webkit-transition: all 0.5s ease;
                            -moz-transition: all 0.5s ease;
                            -o-transition: all 0.5s ease;
                            -ms-transition: all 0.5s ease;
                            transition: all 0.5s ease;
                            -webkit-transition-delay: 0.15s;
                            -moz-transition-delay: 0.15s;
                            -o-transition-delay: 0.15s;
                            -ms-transition-delay: 0.15s;
                            transition-delay: 0.15s;
                        }
                        .view a:hover {
                            -webkit-transform: translateZ(-24px) rotateX(-90deg);
                            -moz-transform: translateZ(-24px) rotateX(-90deg);
                            -o-transform: translateZ(-24px) rotateX(-90deg);
                            -ms-transform: translateZ(-24px) rotateX(-90deg);
                            transform: translateZ(-24px) rotateX(-90deg);
                        }
                        .view a:hover .front {
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                            -webkit-transition: all 0.8s ease;
                            -moz-transition: all 0.8s ease;
                            -o-transition: all 0.8s ease;
                            -ms-transition: all 0.8s ease;
                            transition: all 0.8s ease;
                        }
                        .view a:hover .back {
                            color: white;
                            -webkit-transition: color 0.4s linear;
                            -moz-transition: color 0.4s linear;
                            -o-transition: color 0.4s linear;
                            -ms-transition: color 0.4s linear;
                            transition: color 0.4s linear;
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                        }
                        .view a:hover .back:after {
                            -webkit-transform: rotate(6deg) translate(90px, -18px);
                            -moz-transform: rotate(6deg) translate(100px, -18px);
                            -o-transform: rotate(6deg) translate(100px, -18px);
                            -ms-transform: rotate(6deg) translate(100px, -18px);
                            transform: rotate(6deg) translate(100px, -18px);
                        }
                        /* The Close Button for lightbox*/
                        .close {
                            color: white;
                            position: absolute;
                            top: 50px;
                            right: 25px;
                            font-size: 35px;
                            font-weight: bold;
                        }
                        .mySlides .numbertext {
                            font-size: 2vw;
                        }
                        /**********Contact section**********/
                        .contact-para-container {
                            width: 90%;
                        }
                        .contact-holder {
                            margin-left: 6%;
                            margin-right: -4.7%;
                            max-width: 100rem;
                        }
                        .get-in-touch {
                            position: relative;
                            margin-top: 10%;
                            top: 50%;
                            left: 3%;
                            width: 30vw;
                        }
                        .form {
                            margin-left: 0;
                            align-items: center;
                            margin-bottom: 15%;
                        }
                        .form input {
                            color: white;
                            background-color: transparent;
                            text-decoration: none;
                            border-top: none;
                            border-left: none;
                            border-right: none;
                            resize: none;
                            font-size: 16px;
                            width: 89%;
                            margin-top: 30px;
                            font-family: PopLight;
                            outline: none;
                        }
                        .form label {
                            color: white;
                            top: 10%;
                            font-size: 16px;
                        }
                        textarea {
                            color: white;
                            width: 89%;
                            height: 8rem;
                            margin-right: 98%;
                            padding: 0px 0px;
                            margin-top: 0%;
                            box-sizing: border-box;
                            border-radius: 5px;
                            background-color: #0e0d0dd0;
                            font-size: 16px;
                            resize: none;
                            font-family: PopLight;
                            outline: none;
                        }
                        .contact-email {
                            font-size: 14px;
                        }
                        .form a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            left: 50%;
                            top: 50%;
                            transform: translate(25%, -50%);
                        }
                        #map {
                            width: 89%;
                        }
                        /*******submit Button*******/
                        .submit {
                            width: 100vw;
                            height: 24px;
                            -webkit-perspective: 500px;
                            -moz-perspective: 500px;
                            -ms-perspective: 500px;
                            perspective: 500px;
                            top: 50%;
                            position: relative;
                            left: -14%;
                            margin-top: 2rem;
                            margin-bottom: 2rem;
                        }
                        .submit a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding-bottom: 8rem;
                            font-weight: 400;
                            font-size: 14px;
                            text-transform: uppercase;
                            margin: 0;
                            padding: 0;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            -webkit-transform-style: preserve-3d;
                            -moz-transform-style: preserve-3d;
                            -o-transform-style: preserve-3d;
                            -ms-transform-style: preserve-3d;
                            transform-style: preserve-3d;
                            -webkit-transform: translateZ(-25px);
                            -moz-transform: translateZ(-25px);
                            -o-transform: translateZ(-25px);
                            -ms-transform: translateZ(-25px);
                            transform: translateZ(-25px);
                            -webkit-transition: -webkit-transform 0.3s;
                            -moz-transition: -moz-transform 0.3s;
                            -o-transition: -o-transform 0.3s;
                            -ms-transition: -ms-transform 0.3s;
                            transition: transform 0.3s;
                            cursor: pointer;
                        }
                        .submit a .front,
                        .submit a .back {
                            margin: 0;
                            width: 90px;
                            height: 38px;
                            line-height: 38px;
                            position: absolute;
                            text-align: center;
                            letter-spacing: 0.4em;
                        }
                        .submit a .front {
                            background-color: #8739f9;
                            color: #fff;
                            border-radius: 90px;
                            -webkit-transform: rotateY(0) translateZ(24px);
                            -moz-transform: rotateY(0) translateZ(24px);
                            -o-transform: rotateY(0) translateZ(24px);
                            -ms-transform: rotateY(0) translateZ(24px);
                            transform: rotateY(0) translateZ(24px);
                        }
                        .submit a .back {
                            background-color: rgba(255, 255, 255, 0);
                            color: rgba(34, 34, 34, 0);
                            border-radius: 90px;
                            -webkit-transform: rotateX(90deg) translateZ(24px);
                            -moz-transform: rotateX(90deg) translateZ(24px);
                            -o-transform: rotateX(90deg) translateZ(24px);
                            -ms-transform: rotateX(90deg) translateZ(24px);
                            transform: rotateX(90deg) translateZ(24px);
                            overflow: hidden;
                        }
                        .submit a .back:after {
                            content: '';
                            position: absolute;
                            top: -32%;
                            left: -10%;
                            width: 100%;
                            height: 50%;
                            background: #222;
                            -webkit-transform: rotate(8deg);
                            -moz-transform: rotate(8deg);
                            -o-transform: rotate(8deg);
                            -ms-transform: rotate(8deg);
                            transform: rotate(8deg);
                            -webkit-transition: all 0.5s ease;
                            -moz-transition: all 0.5s ease;
                            -o-transition: all 0.5s ease;
                            -ms-transition: all 0.5s ease;
                            transition: all 0.5s ease;
                            -webkit-transition-delay: 0.15s;
                            -moz-transition-delay: 0.15s;
                            -o-transition-delay: 0.15s;
                            -ms-transition-delay: 0.15s;
                            transition-delay: 0.15s;
                        }
                        .submit a:hover {
                            -webkit-transform: translateZ(-24px) rotateX(-90deg);
                            -moz-transform: translateZ(-24px) rotateX(-90deg);
                            -o-transform: translateZ(-24px) rotateX(-90deg);
                            -ms-transform: translateZ(-24px) rotateX(-90deg);
                            transform: translateZ(-24px) rotateX(-90deg);
                        }
                        .submit a:hover .front {
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                            -webkit-transition: all 0.8s ease;
                            -moz-transition: all 0.8s ease;
                            -o-transition: all 0.8s ease;
                            -ms-transition: all 0.8s ease;
                            transition: all 0.8s ease;
                        }
                        .submit a:hover .back {
                            color: white;
                            -webkit-transition: color 0.4s linear;
                            -moz-transition: color 0.4s linear;
                            -o-transition: color 0.4s linear;
                            -ms-transition: color 0.4s linear;
                            transition: color 0.4s linear;
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                        }
                        .submit a:hover .back:after {
                            -webkit-transform: rotate(6deg) translate(90px, -18px);
                            -moz-transform: rotate(6deg) translate(100px, -18px);
                            -o-transform: rotate(6deg) translate(100px, -18px);
                            -ms-transform: rotate(6deg) translate(100px, -18px);
                            transform: rotate(6deg) translate(100px, -18px);
                        }
                        .alert {
                            text-align: center;
                            justify-content: center;
                            padding: 5px;
                            background: #79c879;
                            color: #fff;
                            width: 80%;
                            margin-left: 0%;
                            display: none;
                        }
                        /*******Footer*******/
                        .fnav {
                            color: white;
                            background: #100f10;
                            text-transform: uppercase;
                            min-height: 50px;
                            width: 100%;
                            margin: auto;
                            display: flex;
                            align-items: center;
                            padding: 0px, 0px;
                            flex-direction: column;
                        }
                    }
                    /* iPads (portrait) ----------- */
                    
                    @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
                        html {
                            width: 100%;
                            overflow-x: hidden;
                            scroll-behavior: smooth;
                            -webkit-overflow-scrolling: touch;
                        }
                        p {
                            max-width: 32ch;
                            font-size: 1rem;
                        }
                        .column {
                            float: left;
                            width: 100%;
                        }
                        .sub-head {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 0.8rem;
                        }
                        .sub {
                            text-align: center;
                            font-size: 0.9rem;
                        }
                        h4 {
                            text-align: center;
                        }
                        .container {
                            width: 100%;
                            margin-left: 1rem;
                            padding-bottom: 0px;
                            padding: 0px, 0px, 0px, 0px;
                        }
                        .sidenav {
                            display: none;
                        }
                        nav {
                            min-height: 55.3px;
                            width: 100%;
                            position: fixed;
                            z-index: 3;
                        }
                        .logo-icon {
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            margin-left: 5%;
                            cursor: pointer;
                        }
                        .nav-links {
                            position: absolute;
                            position: fixed;
                            right: 0px;
                            height: 97vh;
                            top: 5vh;
                            background-color: #000;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            width: 25%;
                            transform: translateX(100%);
                            transition: transform 0.5s ease-in;
                            z-index: 6;
                        }
                        .nav-links li {
                            opacity: 0;
                            display: block;
                        }
                        .nav-links li a {
                            text-decoration: none;
                        }
                        .nav-links li a:hover {
                            color: #8739f9;
                            font-size: 0.9rem;
                            font-weight: bolder;
                        }
                        .nav-active {
                            transform: translateX(0%);
                        }
                        .burger {
                            margin-right: 5%;
                            display: block;
                            cursor: pointer;
                        }
                        @keyframes navLinkFade {
                            from {
                                opacity: 0;
                                transform: translateX(50px);
                            }
                            to {
                                opacity: 1;
                                transform: translateX(0px);
                            }
                        }
                        .toggle .line1 {
                            transform: rotate(42deg) translate(3px, 1px);
                        }
                        .toggle .line2 {
                            transform: rotate(-42deg);
                        }
                        .toggle .line3 {
                            transform: rotate(41deg) translate(-1.5px, -2.4px);
                        }
                        /***********Intro Section**************/
                        /**************Home Section********/
                        #home-section {
                            height: 100vh;
                            background: url(/img/iPadPro.png);
                            background-repeat: no-repeat;
                            width: 100%;
                            background-attachment: fixed;
                            z-index: -1;
                        }
                        .developer {
                            list-style: none;
                            top: 22vh;
                            padding: 0;
                            margin: 0;
                            transform: translateY(80%);
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            color: white;
                            font-size: 19vw;
                            font-family: American Captain1;
                            font-weight: bold;
                            position: relative;
                        }
                        .mouse {
                            display: none;
                        }
                        .mouse-icon {
                            border: 2px solid white;
                            border-radius: 16px;
                            height: 35px;
                            width: 24px;
                            display: block;
                            z-index: 10;
                            top: 52%;
                            transform: translateY(-1%, -30%);
                            margin-left: 47%;
                            margin-bottom: 2%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            position: relative;
                        }
                        .home-text p {
                            width: 100%;
                            color: white;
                            position: absolute;
                            top: 22vh;
                            align-items: center;
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            transform: translate(-28%, -45%);
                            letter-spacing: 1px;
                            font-weight: bolder;
                            font-size: 3.5vw;
                        }
                        .home-text p span {
                            letter-spacing: 1px;
                        }
                        .home-img {
                            top: 52%;
                            left: 50%;
                            height: auto;
                            transform: translate(-30%, 16%);
                            position: absolute;
                        }
                        .home-img img {
                            height: 55%;
                            width: 55%;
                        }
                        /************* about section***************/
                        #about-heading {
                            width: 10rem;
                        }
                        .about-h4 {
                            margin-top: 8%;
                        }
                        .about-holder {
                            margin-top: 2.5%;
                            margin-left: 10%;
                            padding-bottom: 3%;
                            max-width: 100rem;
                        }
                        .line {
                            margin-right: 8%;
                        }
                        .designer {
                            margin-top: 2%;
                            height: 10%;
                            max-width: 40%;
                        }
                        .coder {
                            position: relative;
                            top: 50%;
                            left: 23%;
                            transform: translate(-50%, -50%);
                            height: 5%;
                            max-width: 40%;
                        }
                        .skill {
                            width: 80px;
                            height: 30px;
                            display: flex;
                        }
                        .about-me-img {
                            width: 60%;
                            top: 50%;
                            margin-left: 14%;
                            height: 60%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        /****Project Section****/
                        .grid-container {
                            display: flex;
                            flex-direction: column;
                            grid-template-rows: auto;
                        }
                        .grid-container img {
                            height: auto;
                            width: 100%;
                            border-top-right-radius: 5%;
                            border-top-left-radius: 5%;
                        }
                        .card {
                            width: 88%;
                            padding-bottom: 5px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-bottom: 8%;
                        }
                        .card-1 {
                            width: 88%;
                            padding-bottom: 5px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-bottom: 8%;
                        }
                        .card-2 {
                            width: 88%;
                            padding-bottom: 5px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-bottom: 8%;
                        }
                        .card p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        .card-1 p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card-1 strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        .card-2 p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card-2 strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        /*******View Button*******/
                        .view {
                            width: 3vw;
                            height: 24px;
                            -webkit-perspective: 500px;
                            -moz-perspective: 500px;
                            -ms-perspective: 500px;
                            perspective: 500px;
                            top: 50%;
                            position: relative;
                            left: 15%;
                            margin-top: 1rem;
                            margin-bottom: 2rem;
                        }
                        .view a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding-bottom: 8rem;
                            font-weight: 400;
                            font-size: 14px;
                            text-transform: uppercase;
                            margin: 0;
                            padding: 0;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            -webkit-transform-style: preserve-3d;
                            -moz-transform-style: preserve-3d;
                            -o-transform-style: preserve-3d;
                            -ms-transform-style: preserve-3d;
                            transform-style: preserve-3d;
                            -webkit-transform: translateZ(-25px);
                            -moz-transform: translateZ(-25px);
                            -o-transform: translateZ(-25px);
                            -ms-transform: translateZ(-25px);
                            transform: translateZ(-25px);
                            -webkit-transition: -webkit-transform 0.3s;
                            -moz-transition: -moz-transform 0.3s;
                            -o-transition: -o-transform 0.3s;
                            -ms-transition: -ms-transform 0.3s;
                            transition: transform 0.3s;
                            cursor: pointer;
                        }
                        .view a .front,
                        .view a .back {
                            margin: 0;
                            width: 90px;
                            height: 38px;
                            line-height: 38px;
                            position: absolute;
                            text-align: center;
                            letter-spacing: 0.4em;
                        }
                        .view a .front {
                            background-color: #8739f9;
                            color: #fff;
                            border-radius: 90px;
                            -webkit-transform: rotateY(0) translateZ(24px);
                            -moz-transform: rotateY(0) translateZ(24px);
                            -o-transform: rotateY(0) translateZ(24px);
                            -ms-transform: rotateY(0) translateZ(24px);
                            transform: rotateY(0) translateZ(24px);
                        }
                        .view a .back {
                            background-color: rgba(255, 255, 255, 0);
                            color: rgba(34, 34, 34, 0);
                            border-radius: 90px;
                            -webkit-transform: rotateX(90deg) translateZ(24px);
                            -moz-transform: rotateX(90deg) translateZ(24px);
                            -o-transform: rotateX(90deg) translateZ(24px);
                            -ms-transform: rotateX(90deg) translateZ(24px);
                            transform: rotateX(90deg) translateZ(24px);
                            overflow: hidden;
                        }
                        .view a .back:after {
                            content: '';
                            position: absolute;
                            top: -32%;
                            left: -10%;
                            width: 100%;
                            height: 50%;
                            background: #222;
                            -webkit-transform: rotate(8deg);
                            -moz-transform: rotate(8deg);
                            -o-transform: rotate(8deg);
                            -ms-transform: rotate(8deg);
                            transform: rotate(8deg);
                            -webkit-transition: all 0.5s ease;
                            -moz-transition: all 0.5s ease;
                            -o-transition: all 0.5s ease;
                            -ms-transition: all 0.5s ease;
                            transition: all 0.5s ease;
                            -webkit-transition-delay: 0.15s;
                            -moz-transition-delay: 0.15s;
                            -o-transition-delay: 0.15s;
                            -ms-transition-delay: 0.15s;
                            transition-delay: 0.15s;
                        }
                        .view a:hover {
                            -webkit-transform: translateZ(-24px) rotateX(-90deg);
                            -moz-transform: translateZ(-24px) rotateX(-90deg);
                            -o-transform: translateZ(-24px) rotateX(-90deg);
                            -ms-transform: translateZ(-24px) rotateX(-90deg);
                            transform: translateZ(-24px) rotateX(-90deg);
                        }
                        .view a:hover .front {
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                            -webkit-transition: all 0.8s ease;
                            -moz-transition: all 0.8s ease;
                            -o-transition: all 0.8s ease;
                            -ms-transition: all 0.8s ease;
                            transition: all 0.8s ease;
                        }
                        .view a:hover .back {
                            color: white;
                            -webkit-transition: color 0.4s linear;
                            -moz-transition: color 0.4s linear;
                            -o-transition: color 0.4s linear;
                            -ms-transition: color 0.4s linear;
                            transition: color 0.4s linear;
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                        }
                        .view a:hover .back:after {
                            -webkit-transform: rotate(6deg) translate(90px, -18px);
                            -moz-transform: rotate(6deg) translate(100px, -18px);
                            -o-transform: rotate(6deg) translate(100px, -18px);
                            -ms-transform: rotate(6deg) translate(100px, -18px);
                            transform: rotate(6deg) translate(100px, -18px);
                        }
                        /* The Close Button for lightbox*/
                        .close {
                            color: white;
                            position: absolute;
                            top: 50px;
                            right: 25px;
                            font-size: 35px;
                            font-weight: bold;
                        }
                        .mySlides .numbertext {
                            font-size: 2vw;
                        }
                        /**********Contact section**********/
                        .contact-para-container {
                            width: 150%;
                            margin-left: 2%;
                        }
                        .get-in-touch {
                            position: relative;
                            margin-top: 10%;
                            top: 50%;
                            left: 2%;
                            width: 30vw;
                        }
                        .form {
                            margin-left: 2%;
                            align-items: center;
                            margin-bottom: 15%;
                        }
                        .form input {
                            color: white;
                            background-color: transparent;
                            text-decoration: none;
                            border-top: none;
                            border-left: none;
                            border-right: none;
                            resize: none;
                            font-size: 16px;
                            width: 85%;
                            margin-top: 30px;
                            font-family: PopLight;
                            outline: none;
                        }
                        .form label {
                            color: white;
                            top: 10%;
                            font-size: 16px;
                        }
                        textarea {
                            color: white;
                            width: 85%;
                            height: 8rem;
                            margin-right: 98%;
                            padding: 0px 0px;
                            margin-top: 0%;
                            box-sizing: border-box;
                            border-radius: 5px;
                            background-color: #0e0d0dd0;
                            font-size: 16px;
                            resize: none;
                            font-family: PopLight;
                            outline: none;
                        }
                        .contact-email {
                            font-size: 14px;
                        }
                        .form a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            left: 50%;
                            top: 50%;
                            transform: translate(25%, -50%);
                        }
                        /*******submit Button*******/
                        .submit {
                            width: 100vw;
                            height: 24px;
                            -webkit-perspective: 500px;
                            -moz-perspective: 500px;
                            -ms-perspective: 500px;
                            perspective: 500px;
                            top: 50%;
                            position: relative;
                            left: -18%;
                            margin-top: 2rem;
                            margin-bottom: 2rem;
                        }
                        .submit a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding-bottom: 8rem;
                            font-weight: 400;
                            font-size: 14px;
                            text-transform: uppercase;
                            margin: 0;
                            padding: 0;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            -webkit-transform-style: preserve-3d;
                            -moz-transform-style: preserve-3d;
                            -o-transform-style: preserve-3d;
                            -ms-transform-style: preserve-3d;
                            transform-style: preserve-3d;
                            -webkit-transform: translateZ(-25px);
                            -moz-transform: translateZ(-25px);
                            -o-transform: translateZ(-25px);
                            -ms-transform: translateZ(-25px);
                            transform: translateZ(-25px);
                            -webkit-transition: -webkit-transform 0.3s;
                            -moz-transition: -moz-transform 0.3s;
                            -o-transition: -o-transform 0.3s;
                            -ms-transition: -ms-transform 0.3s;
                            transition: transform 0.3s;
                            cursor: pointer;
                        }
                        .submit a .front,
                        .submit a .back {
                            margin: 0;
                            width: 90px;
                            height: 38px;
                            line-height: 38px;
                            position: absolute;
                            text-align: center;
                            letter-spacing: 0.4em;
                        }
                        .submit a .front {
                            background-color: #8739f9;
                            color: #fff;
                            border-radius: 90px;
                            -webkit-transform: rotateY(0) translateZ(24px);
                            -moz-transform: rotateY(0) translateZ(24px);
                            -o-transform: rotateY(0) translateZ(24px);
                            -ms-transform: rotateY(0) translateZ(24px);
                            transform: rotateY(0) translateZ(24px);
                        }
                        .submit a .back {
                            background-color: rgba(255, 255, 255, 0);
                            color: rgba(34, 34, 34, 0);
                            border-radius: 90px;
                            -webkit-transform: rotateX(90deg) translateZ(24px);
                            -moz-transform: rotateX(90deg) translateZ(24px);
                            -o-transform: rotateX(90deg) translateZ(24px);
                            -ms-transform: rotateX(90deg) translateZ(24px);
                            transform: rotateX(90deg) translateZ(24px);
                            overflow: hidden;
                        }
                        .submit a .back:after {
                            content: '';
                            position: absolute;
                            top: -32%;
                            left: -10%;
                            width: 100%;
                            height: 50%;
                            background: #222;
                            -webkit-transform: rotate(8deg);
                            -moz-transform: rotate(8deg);
                            -o-transform: rotate(8deg);
                            -ms-transform: rotate(8deg);
                            transform: rotate(8deg);
                            -webkit-transition: all 0.5s ease;
                            -moz-transition: all 0.5s ease;
                            -o-transition: all 0.5s ease;
                            -ms-transition: all 0.5s ease;
                            transition: all 0.5s ease;
                            -webkit-transition-delay: 0.15s;
                            -moz-transition-delay: 0.15s;
                            -o-transition-delay: 0.15s;
                            -ms-transition-delay: 0.15s;
                            transition-delay: 0.15s;
                        }
                        .submit a:hover {
                            -webkit-transform: translateZ(-24px) rotateX(-90deg);
                            -moz-transform: translateZ(-24px) rotateX(-90deg);
                            -o-transform: translateZ(-24px) rotateX(-90deg);
                            -ms-transform: translateZ(-24px) rotateX(-90deg);
                            transform: translateZ(-24px) rotateX(-90deg);
                        }
                        .submit a:hover .front {
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                            -webkit-transition: all 0.8s ease;
                            -moz-transition: all 0.8s ease;
                            -o-transition: all 0.8s ease;
                            -ms-transition: all 0.8s ease;
                            transition: all 0.8s ease;
                        }
                        .submit a:hover .back {
                            color: white;
                            -webkit-transition: color 0.4s linear;
                            -moz-transition: color 0.4s linear;
                            -o-transition: color 0.4s linear;
                            -ms-transition: color 0.4s linear;
                            transition: color 0.4s linear;
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                        }
                        .submit a:hover .back:after {
                            -webkit-transform: rotate(6deg) translate(90px, -18px);
                            -moz-transform: rotate(6deg) translate(100px, -18px);
                            -o-transform: rotate(6deg) translate(100px, -18px);
                            -ms-transform: rotate(6deg) translate(100px, -18px);
                            transform: rotate(6deg) translate(100px, -18px);
                        }
                        .alert {
                            text-align: center;
                            justify-content: center;
                            padding: 5px;
                            background: #79c879;
                            color: #fff;
                            width: 80%;
                            margin-left: 0%;
                            display: none;
                        }
                        /*******Footer*******/
                        .fnav {
                            color: white;
                            background: #100f10;
                            text-transform: uppercase;
                            min-height: 50px;
                            width: 100%;
                            margin: auto;
                            display: flex;
                            align-items: center;
                            padding: 0px, 0px;
                            flex-direction: column;
                        }
                    }
                    /***********Smartphone Landscape**************/
                    
                    @media only screen and (max-width: 967px) and (orientation: landscape) {
                        html {
                            width: 100%;
                            overflow-x: hidden;
                            scroll-behavior: smooth;
                            -webkit-overflow-scrolling: touch;
                        }
                        p {
                            max-width: 42ch;
                            font-size: 1rem;
                        }
                        .sub-head {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 0.8rem;
                        }
                        .sub {
                            text-align: center;
                            font-size: 0.9rem;
                        }
                        h4 {
                            text-align: center;
                        }
                        .container {
                            width: 100%;
                            margin-left: 1rem;
                            padding-bottom: 0px;
                            padding: 0px, 0px, 0px, 0px;
                        }
                        .sidenav {
                            display: none;
                        }
                        nav {
                            min-height: 55.3px;
                            width: 100%;
                            position: fixed;
                            z-index: 3;
                        }
                        .logo-icon {
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            margin-left: 5%;
                            cursor: pointer;
                        }
                        .nav-links {
                            position: absolute;
                            position: fixed;
                            right: 0px;
                            height: 90vh;
                            top: 13vh;
                            background-color: #000;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            width: 20%;
                            transform: translateX(100%);
                            transition: transform 0.5s ease-in;
                            z-index: 6;
                        }
                        .nav-links li {
                            opacity: 0;
                            display: block;
                        }
                        .nav-links li a {
                            text-decoration: none;
                        }
                        .nav-links li a:hover {
                            color: #8739f9;
                            font-size: 0.9rem;
                            font-weight: bolder;
                        }
                        .nav-active {
                            transform: translateX(0%);
                        }
                        .burger {
                            margin-right: 5%;
                            display: block;
                            cursor: pointer;
                        }
                        @keyframes navLinkFade {
                            from {
                                opacity: 0;
                                transform: translateX(50px);
                            }
                            to {
                                opacity: 1;
                                transform: translateX(0px);
                            }
                        }
                        .toggle .line1 {
                            transform: rotate(42deg) translate(3px, 1px);
                        }
                        .toggle .line2 {
                            transform: rotate(-42deg);
                        }
                        .toggle .line3 {
                            transform: rotate(41deg) translate(-1.5px, -2.4px);
                        }
                        /***********Intro Section**************/
                        /**************Home Section********/
                        #home-section {
                            height: 100vh;
                            background: url(/img/background.png);
                            background-repeat: no-repeat;
                            width: 100%;
                            background-attachment: fixed;
                            z-index: -1;
                        }
                        .developer {
                            list-style: none;
                            top: 8vh;
                            padding: 0;
                            margin: 0;
                            transform: translateY(80%);
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            color: white;
                            font-size: 14vw;
                            font-family: American Captain1;
                            font-weight: bold;
                            position: relative;
                        }
                        .mouse {
                            display: none;
                        }
                        .mouse-icon {
                            border: 2px solid white;
                            border-radius: 16px;
                            height: 30px;
                            width: 22px;
                            display: block;
                            z-index: 1;
                            top: 46.8%;
                            transform: translateY(-1%, -30%);
                            margin-left: 47%;
                            margin-bottom: 2%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            position: absolute;
                        }
                        .home-text p {
                            width: 100%;
                            color: white;
                            position: absolute;
                            top: 3vh;
                            align-items: center;
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            transform: translate(-29%, -46.5%);
                            letter-spacing: 1px;
                            font-weight: bolder;
                            font-size: 2.5vw;
                        }
                        .home-text p span {
                            letter-spacing: 1px;
                        }
                        .home-img {
                            top: 10%;
                            left: 50%;
                            height: auto;
                            transform: translate(-95%, -45%);
                            position: relative;
                        }
                        .home-img img {
                            height: 38%;
                            width: 38%;
                        }
                        /************* about section***************/
                        #about-heading {
                            width: 10rem;
                        }
                        .about-h4 {
                            margin-top: 8%;
                        }
                        .line {
                            margin-left: 50%;
                            width: 88%;
                        }
                        .about-holder {
                            margin-top: 2.5%;
                            margin-left: 6%;
                            margin-right: -5%;
                            padding-bottom: 3%;
                            max-width: 100rem;
                        }
                        .about-para-container {
                            width: 90%;
                        }
                        .line {
                            margin-right: 8%;
                        }
                        .designer {
                            margin-top: 2%;
                            height: 10%;
                            max-width: 40%;
                        }
                        .coder {
                            position: relative;
                            top: 50%;
                            left: 23%;
                            transform: translate(-50%, -50%);
                            height: 5%;
                            max-width: 40%;
                        }
                        .skill {
                            width: 80px;
                            height: 30px;
                            display: flex;
                        }
                        .about-me-img {
                            width: 35%;
                            top: 50%;
                            margin-left: 26.5%;
                            height: 35%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        /****Project Section****/
                        .column {
                            float: left;
                            width: 100%;
                        }
                        .grid-container {
                            display: flex;
                            flex-direction: column;
                            margin-left: 10%;
                        }
                        .grid-container img {
                            height: auto;
                            width: 100%;
                            border-top-right-radius: 5%;
                            border-top-left-radius: 5%;
                        }
                        .card {
                            width: 75%;
                            padding-bottom: 5px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-right: 10%;
                            margin-bottom: 8%;
                        }
                        .card-1 {
                            width: 75%;
                            padding-bottom: 5px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-right: 10%;
                            margin-bottom: 8%;
                        }
                        .card-2 {
                            width: 75%;
                            padding-bottom: 5px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-right: 10%;
                            margin-bottom: 8%;
                        }
                        .card p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        .card-1 p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card-1 strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        .card-2 p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card-2 strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        /*******View Button*******/
                        .view {
                            width: 3vw;
                            height: 24px;
                            -webkit-perspective: 500px;
                            -moz-perspective: 500px;
                            -ms-perspective: 500px;
                            perspective: 500px;
                            top: 50%;
                            position: relative;
                            left: 15%;
                            margin-top: 1rem;
                            margin-bottom: 2rem;
                        }
                        .view a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding-bottom: 8rem;
                            font-weight: 400;
                            font-size: 14px;
                            text-transform: uppercase;
                            margin: 0;
                            padding: 0;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            -webkit-transform-style: preserve-3d;
                            -moz-transform-style: preserve-3d;
                            -o-transform-style: preserve-3d;
                            -ms-transform-style: preserve-3d;
                            transform-style: preserve-3d;
                            -webkit-transform: translateZ(-25px);
                            -moz-transform: translateZ(-25px);
                            -o-transform: translateZ(-25px);
                            -ms-transform: translateZ(-25px);
                            transform: translateZ(-25px);
                            -webkit-transition: -webkit-transform 0.3s;
                            -moz-transition: -moz-transform 0.3s;
                            -o-transition: -o-transform 0.3s;
                            -ms-transition: -ms-transform 0.3s;
                            transition: transform 0.3s;
                            cursor: pointer;
                        }
                        .view a .front,
                        .view a .back {
                            margin: 0;
                            width: 90px;
                            height: 38px;
                            line-height: 38px;
                            position: absolute;
                            text-align: center;
                            letter-spacing: 0.4em;
                        }
                        .view a .front {
                            background-color: #8739f9;
                            color: #fff;
                            border-radius: 90px;
                            -webkit-transform: rotateY(0) translateZ(24px);
                            -moz-transform: rotateY(0) translateZ(24px);
                            -o-transform: rotateY(0) translateZ(24px);
                            -ms-transform: rotateY(0) translateZ(24px);
                            transform: rotateY(0) translateZ(24px);
                        }
                        .view a .back {
                            background-color: rgba(255, 255, 255, 0);
                            color: rgba(34, 34, 34, 0);
                            border-radius: 90px;
                            -webkit-transform: rotateX(90deg) translateZ(24px);
                            -moz-transform: rotateX(90deg) translateZ(24px);
                            -o-transform: rotateX(90deg) translateZ(24px);
                            -ms-transform: rotateX(90deg) translateZ(24px);
                            transform: rotateX(90deg) translateZ(24px);
                            overflow: hidden;
                        }
                        .view a .back:after {
                            content: '';
                            position: absolute;
                            top: -32%;
                            left: -10%;
                            width: 100%;
                            height: 50%;
                            background: #222;
                            -webkit-transform: rotate(8deg);
                            -moz-transform: rotate(8deg);
                            -o-transform: rotate(8deg);
                            -ms-transform: rotate(8deg);
                            transform: rotate(8deg);
                            -webkit-transition: all 0.5s ease;
                            -moz-transition: all 0.5s ease;
                            -o-transition: all 0.5s ease;
                            -ms-transition: all 0.5s ease;
                            transition: all 0.5s ease;
                            -webkit-transition-delay: 0.15s;
                            -moz-transition-delay: 0.15s;
                            -o-transition-delay: 0.15s;
                            -ms-transition-delay: 0.15s;
                            transition-delay: 0.15s;
                        }
                        .view a:hover {
                            -webkit-transform: translateZ(-24px) rotateX(-90deg);
                            -moz-transform: translateZ(-24px) rotateX(-90deg);
                            -o-transform: translateZ(-24px) rotateX(-90deg);
                            -ms-transform: translateZ(-24px) rotateX(-90deg);
                            transform: translateZ(-24px) rotateX(-90deg);
                        }
                        .view a:hover .front {
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                            -webkit-transition: all 0.8s ease;
                            -moz-transition: all 0.8s ease;
                            -o-transition: all 0.8s ease;
                            -ms-transition: all 0.8s ease;
                            transition: all 0.8s ease;
                        }
                        .view a:hover .back {
                            color: white;
                            -webkit-transition: color 0.4s linear;
                            -moz-transition: color 0.4s linear;
                            -o-transition: color 0.4s linear;
                            -ms-transition: color 0.4s linear;
                            transition: color 0.4s linear;
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                        }
                        .view a:hover .back:after {
                            -webkit-transform: rotate(6deg) translate(90px, -18px);
                            -moz-transform: rotate(6deg) translate(100px, -18px);
                            -o-transform: rotate(6deg) translate(100px, -18px);
                            -ms-transform: rotate(6deg) translate(100px, -18px);
                            transform: rotate(6deg) translate(100px, -18px);
                        }
                        /* The Close Button for lightbox*/
                        .close {
                            color: white;
                            position: absolute;
                            top: 50px;
                            right: 25px;
                            font-size: 35px;
                            font-weight: bold;
                        }
                        .mySlides .numbertext {
                            font-size: 2vw;
                        }
                        /**********Contact section**********/
                        .contact-para-container {
                            width: 90%;
                        }
                        .get-in-touch {
                            position: relative;
                            margin-top: 10%;
                            top: 50%;
                            left: 5%;
                            width: 30vw;
                        }
                        .form {
                            margin-left: 0%;
                            align-items: center;
                            margin-bottom: 15%;
                        }
                        .form input {
                            color: white;
                            background-color: transparent;
                            text-decoration: none;
                            border-top: none;
                            border-left: none;
                            border-right: none;
                            resize: none;
                            font-size: 16px;
                            width: 88%;
                            margin-top: 30px;
                            font-family: PopLight;
                            outline: none;
                        }
                        .form label {
                            color: white;
                            top: 10%;
                            font-size: 16px;
                        }
                        textarea {
                            color: white;
                            width: 88%;
                            height: 8rem;
                            margin-right: 98%;
                            padding: 0px 0px;
                            margin-top: 0%;
                            box-sizing: border-box;
                            border-radius: 5px;
                            background-color: #0e0d0dd0;
                            font-size: 16px;
                            resize: none;
                            font-family: PopLight;
                            outline: none;
                        }
                        .contact-email {
                            font-size: 14px;
                        }
                        .form a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            left: 50%;
                            top: 50%;
                            transform: translate(25%, -50%);
                        }
                        /*******submit Button*******/
                        .submit {
                            width: 100vw;
                            height: 24px;
                            -webkit-perspective: 500px;
                            -moz-perspective: 500px;
                            -ms-perspective: 500px;
                            perspective: 500px;
                            top: 50%;
                            position: relative;
                            left: -15%;
                            margin-top: 2rem;
                            margin-bottom: 2rem;
                        }
                        .submit a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding-bottom: 8rem;
                            font-weight: 400;
                            font-size: 14px;
                            text-transform: uppercase;
                            margin: 0;
                            padding: 0;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            -webkit-transform-style: preserve-3d;
                            -moz-transform-style: preserve-3d;
                            -o-transform-style: preserve-3d;
                            -ms-transform-style: preserve-3d;
                            transform-style: preserve-3d;
                            -webkit-transform: translateZ(-25px);
                            -moz-transform: translateZ(-25px);
                            -o-transform: translateZ(-25px);
                            -ms-transform: translateZ(-25px);
                            transform: translateZ(-25px);
                            -webkit-transition: -webkit-transform 0.3s;
                            -moz-transition: -moz-transform 0.3s;
                            -o-transition: -o-transform 0.3s;
                            -ms-transition: -ms-transform 0.3s;
                            transition: transform 0.3s;
                            cursor: pointer;
                        }
                        .submit a .front,
                        .submit a .back {
                            margin: 0;
                            width: 90px;
                            height: 38px;
                            line-height: 38px;
                            position: absolute;
                            text-align: center;
                            letter-spacing: 0.4em;
                        }
                        .submit a .front {
                            background-color: #8739f9;
                            color: #fff;
                            border-radius: 90px;
                            -webkit-transform: rotateY(0) translateZ(24px);
                            -moz-transform: rotateY(0) translateZ(24px);
                            -o-transform: rotateY(0) translateZ(24px);
                            -ms-transform: rotateY(0) translateZ(24px);
                            transform: rotateY(0) translateZ(24px);
                        }
                        .submit a .back {
                            background-color: rgba(255, 255, 255, 0);
                            color: rgba(34, 34, 34, 0);
                            border-radius: 90px;
                            -webkit-transform: rotateX(90deg) translateZ(24px);
                            -moz-transform: rotateX(90deg) translateZ(24px);
                            -o-transform: rotateX(90deg) translateZ(24px);
                            -ms-transform: rotateX(90deg) translateZ(24px);
                            transform: rotateX(90deg) translateZ(24px);
                            overflow: hidden;
                        }
                        .submit a .back:after {
                            content: '';
                            position: absolute;
                            top: -32%;
                            left: -10%;
                            width: 100%;
                            height: 50%;
                            background: #222;
                            -webkit-transform: rotate(8deg);
                            -moz-transform: rotate(8deg);
                            -o-transform: rotate(8deg);
                            -ms-transform: rotate(8deg);
                            transform: rotate(8deg);
                            -webkit-transition: all 0.5s ease;
                            -moz-transition: all 0.5s ease;
                            -o-transition: all 0.5s ease;
                            -ms-transition: all 0.5s ease;
                            transition: all 0.5s ease;
                            -webkit-transition-delay: 0.15s;
                            -moz-transition-delay: 0.15s;
                            -o-transition-delay: 0.15s;
                            -ms-transition-delay: 0.15s;
                            transition-delay: 0.15s;
                        }
                        .submit a:hover {
                            -webkit-transform: translateZ(-24px) rotateX(-90deg);
                            -moz-transform: translateZ(-24px) rotateX(-90deg);
                            -o-transform: translateZ(-24px) rotateX(-90deg);
                            -ms-transform: translateZ(-24px) rotateX(-90deg);
                            transform: translateZ(-24px) rotateX(-90deg);
                        }
                        .submit a:hover .front {
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                            -webkit-transition: all 0.8s ease;
                            -moz-transition: all 0.8s ease;
                            -o-transition: all 0.8s ease;
                            -ms-transition: all 0.8s ease;
                            transition: all 0.8s ease;
                        }
                        .submit a:hover .back {
                            color: white;
                            -webkit-transition: color 0.4s linear;
                            -moz-transition: color 0.4s linear;
                            -o-transition: color 0.4s linear;
                            -ms-transition: color 0.4s linear;
                            transition: color 0.4s linear;
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                        }
                        .submit a:hover .back:after {
                            -webkit-transform: rotate(6deg) translate(90px, -18px);
                            -moz-transform: rotate(6deg) translate(100px, -18px);
                            -o-transform: rotate(6deg) translate(100px, -18px);
                            -ms-transform: rotate(6deg) translate(100px, -18px);
                            transform: rotate(6deg) translate(100px, -18px);
                        }
                        .alert {
                            text-align: center;
                            justify-content: center;
                            padding: 5px;
                            background: #79c879;
                            color: #fff;
                            width: 80%;
                            margin-left: 0%;
                            display: none;
                        }
                        /*******Footer*******/
                        .fnav {
                            color: white;
                            background: #100f10;
                            text-transform: uppercase;
                            min-height: 50px;
                            width: 100%;
                            margin: auto;
                            display: flex;
                            align-items: center;
                            padding: 0px, 0px;
                            flex-direction: column;
                        }
                    }
                    /* iPads (landscape) ----------- */
                    
                    @media only screen and (min-width: 968px) and (max-width: 1194px) and (orientation: landscape) {
                        html {
                            width: 100%;
                            overflow-x: hidden;
                            scroll-behavior: smooth;
                            -webkit-overflow-scrolling: touch;
                        }
                        p {
                            max-width: 32ch;
                            font-size: 1rem;
                        }
                        .sub-head {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 0.8rem;
                        }
                        .sub {
                            text-align: center;
                            font-size: 0.9rem;
                        }
                        h4 {
                            text-align: center;
                        }
                        .container {
                            width: 100%;
                            margin-left: 1rem;
                            padding-bottom: 0px;
                            padding: 0px, 0px, 0px, 0px;
                        }
                        .sidenav {
                            display: none;
                        }
                        nav {
                            min-height: 55.3px;
                            width: 100%;
                            position: fixed;
                            z-index: 3;
                        }
                        .logo-icon {
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            margin-left: 5%;
                            cursor: pointer;
                        }
                        .nav-links {
                            position: absolute;
                            position: fixed;
                            right: 0px;
                            height: 95vh;
                            top: 7vh;
                            background-color: #000;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            width: 20%;
                            transform: translateX(100%);
                            transition: transform 0.5s ease-in;
                            z-index: 6;
                        }
                        .nav-links li {
                            opacity: 0;
                            display: block;
                        }
                        .nav-links li a {
                            text-decoration: none;
                        }
                        .nav-links li a:hover {
                            color: #8739f9;
                            font-size: 0.9rem;
                            font-weight: bolder;
                        }
                        .nav-active {
                            transform: translateX(0%);
                        }
                        .burger {
                            margin-right: 5%;
                            display: block;
                            cursor: pointer;
                        }
                        @keyframes navLinkFade {
                            from {
                                opacity: 0;
                                transform: translateX(50px);
                            }
                            to {
                                opacity: 1;
                                transform: translateX(0px);
                            }
                        }
                        .toggle .line1 {
                            transform: rotate(42deg) translate(3px, 1px);
                        }
                        .toggle .line2 {
                            transform: rotate(-42deg);
                        }
                        .toggle .line3 {
                            transform: rotate(41deg) translate(-1.5px, -2.4px);
                        }
                        /***********Intro Section**************/
                        /**************Home Section********/
                        #home-section {
                            height: 100vh;
                            background: url(/img/background.png);
                            background-repeat: no-repeat;
                            width: 100%;
                            background-attachment: fixed;
                            z-index: -1;
                        }
                        .developer {
                            list-style: none;
                            top: 8vh;
                            padding: 0;
                            margin: 0;
                            transform: translateY(80%);
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            color: white;
                            font-size: 14vw;
                            font-family: American Captain1;
                            font-weight: bold;
                            position: relative;
                        }
                        .mouse {
                            display: none;
                        }
                        .mouse-icon {
                            border: 2px solid white;
                            border-radius: 16px;
                            height: 35px;
                            width: 24px;
                            display: block;
                            z-index: 1;
                            top: 47%;
                            transform: translateY(-10%, -30%);
                            margin-left: 48.5%;
                            margin-bottom: 2%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            position: relative;
                        }
                        .home-text p {
                            width: 100%;
                            color: white;
                            position: absolute;
                            top: 7vh;
                            align-items: center;
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            transform: translate(-20%, -45%);
                            letter-spacing: 1px;
                            font-weight: bolder;
                            font-size: 2.5vw;
                        }
                        .home-text p span {
                            letter-spacing: 1px;
                        }
                        .home-img {
                            top: 50%;
                            left: 50%;
                            height: auto;
                            transform: translate(-22%, 16%);
                            position: absolute;
                        }
                        .home-img img {
                            height: 40%;
                            width: 40%;
                        }
                        /************* about section***************/
                        #about-heading {
                            width: 10rem;
                        }
                        .about-h4 {
                            margin-top: 8%;
                        }
                        .about-holder {
                            margin-top: 2.5%;
                            margin-left: 10%;
                            padding-bottom: 3%;
                            max-width: 100rem;
                        }
                        .about-para-container {
                            width: 90%;
                        }
                        .line {
                            margin-right: 8%;
                        }
                        .designer {
                            margin-top: 2%;
                            height: 10%;
                            max-width: 40%;
                        }
                        .coder {
                            position: relative;
                            top: 50%;
                            left: 23%;
                            transform: translate(-50%, -50%);
                            height: 5%;
                            max-width: 40%;
                        }
                        .skill {
                            width: 80px;
                            height: 30px;
                            display: flex;
                        }
                        .about-me-img {
                            width: 50%;
                            top: 50%;
                            margin-left: 19%;
                            height: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        /****Project Section****/
                        .column {
                            float: left;
                            width: 100%;
                        }
                        .grid-container {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                        }
                        .grid-container img {
                            height: auto;
                            width: 100%;
                            border-top-right-radius: 5%;
                            border-top-left-radius: 5%;
                        }
                        .card {
                            width: 60%;
                            padding-bottom: 5px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-right: 10%;
                            margin-bottom: 8%;
                        }
                        .card-1 {
                            width: 60%;
                            padding-bottom: 5px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-right: 10%;
                            margin-bottom: 8%;
                        }
                        .card-2 {
                            width: 60%;
                            padding-bottom: 5px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-right: 10%;
                            margin-bottom: 8%;
                        }
                        .card p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        .card-1 p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card-1 strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        .card-2 p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card-2 strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        /*******View Button*******/
                        .view {
                            width: 3vw;
                            height: 24px;
                            -webkit-perspective: 500px;
                            -moz-perspective: 500px;
                            -ms-perspective: 500px;
                            perspective: 500px;
                            top: 50%;
                            position: relative;
                            left: 15%;
                            margin-top: 1rem;
                            margin-bottom: 2rem;
                        }
                        .view a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding-bottom: 8rem;
                            font-weight: 400;
                            font-size: 14px;
                            text-transform: uppercase;
                            margin: 0;
                            padding: 0;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            -webkit-transform-style: preserve-3d;
                            -moz-transform-style: preserve-3d;
                            -o-transform-style: preserve-3d;
                            -ms-transform-style: preserve-3d;
                            transform-style: preserve-3d;
                            -webkit-transform: translateZ(-25px);
                            -moz-transform: translateZ(-25px);
                            -o-transform: translateZ(-25px);
                            -ms-transform: translateZ(-25px);
                            transform: translateZ(-25px);
                            -webkit-transition: -webkit-transform 0.3s;
                            -moz-transition: -moz-transform 0.3s;
                            -o-transition: -o-transform 0.3s;
                            -ms-transition: -ms-transform 0.3s;
                            transition: transform 0.3s;
                            cursor: pointer;
                        }
                        .view a .front6 .view a .back {
                            margin: 0;
                            width: 90px;
                            height: 38px;
                            line-height: 38px;
                            position: absolute;
                            text-align: center;
                            letter-spacing: 0.4em;
                        }
                        .view a .front {
                            background-color: #8739f9;
                            color: #fff;
                            border-radius: 90px;
                            -webkit-transform: rotateY(0) translateZ(24px);
                            -moz-transform: rotateY(0) translateZ(24px);
                            -o-transform: rotateY(0) translateZ(24px);
                            -ms-transform: rotateY(0) translateZ(24px);
                            transform: rotateY(0) translateZ(24px);
                        }
                        .view a .back {
                            background-color: rgba(255, 255, 255, 0);
                            color: rgba(34, 34, 34, 0);
                            border-radius: 90px;
                            -webkit-transform: rotateX(90deg) translateZ(24px);
                            -moz-transform: rotateX(90deg) translateZ(24px);
                            -o-transform: rotateX(90deg) translateZ(24px);
                            -ms-transform: rotateX(90deg) translateZ(24px);
                            transform: rotateX(90deg) translateZ(24px);
                            overflow: hidden;
                        }
                        .view a .back:after {
                            content: '';
                            position: absolute;
                            top: -32%;
                            left: -10%;
                            width: 100%;
                            height: 50%;
                            background: #222;
                            -webkit-transform: rotate(8deg);
                            -moz-transform: rotate(8deg);
                            -o-transform: rotate(8deg);
                            -ms-transform: rotate(8deg);
                            transform: rotate(8deg);
                            -webkit-transition: all 0.5s ease;
                            -moz-transition: all 0.5s ease;
                            -o-transition: all 0.5s ease;
                            -ms-transition: all 0.5s ease;
                            transition: all 0.5s ease;
                            -webkit-transition-delay: 0.15s;
                            -moz-transition-delay: 0.15s;
                            -o-transition-delay: 0.15s;
                            -ms-transition-delay: 0.15s;
                            transition-delay: 0.15s;
                        }
                        .view a:hover {
                            -webkit-transform: translateZ(-24px) rotateX(-90deg);
                            -moz-transform: translateZ(-24px) rotateX(-90deg);
                            -o-transform: translateZ(-24px) rotateX(-90deg);
                            -ms-transform: translateZ(-24px) rotateX(-90deg);
                            transform: translateZ(-24px) rotateX(-90deg);
                        }
                        .view a:hover .front {
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                            -webkit-transition: all 0.8s ease;
                            -moz-transition: all 0.8s ease;
                            -o-transition: all 0.8s ease;
                            -ms-transition: all 0.8s ease;
                            transition: all 0.8s ease;
                        }
                        .view a:hover .back {
                            color: white;
                            -webkit-transition: color 0.4s linear;
                            -moz-transition: color 0.4s linear;
                            -o-transition: color 0.4s linear;
                            -ms-transition: color 0.4s linear;
                            transition: color 0.4s linear;
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                        }
                        .view a:hover .back:after {
                            -webkit-transform: rotate(6deg) translate(90px, -18px);
                            -moz-transform: rotate(6deg) translate(100px, -18px);
                            -o-transform: rotate(6deg) translate(100px, -18px);
                            -ms-transform: rotate(6deg) translate(100px, -18px);
                            transform: rotate(6deg) translate(100px, -18px);
                        }
                        /* The Close Button for lightbox*/
                        .close {
                            color: white;
                            position: absolute;
                            top: 50px;
                            right: 25px;
                            font-size: 35px;
                            font-weight: bold;
                        }
                        .mySlides .numbertext {
                            font-size: 2vw;
                        }
                        /**********Contact section**********/
                        .contact-para-container {
                            width: 90%;
                        }
                        .get-in-touch {
                            position: relative;
                            margin-top: 10%;
                            top: 50%;
                            left: 1.5%;
                            width: 30vw;
                        }
                        .form {
                            margin-left: 2%;
                            align-items: center;
                            margin-bottom: 15%;
                        }
                        .form input {
                            color: white;
                            background-color: transparent;
                            text-decoration: none;
                            border-top: none;
                            border-left: none;
                            border-right: none;
                            resize: none;
                            font-size: 16px;
                            width: 85%;
                            margin-top: 30px;
                            font-family: PopLight;
                            outline: none;
                        }
                        .form label {
                            color: white;
                            top: 10%;
                            font-size: 16px;
                        }
                        textarea {
                            color: white;
                            width: 85%;
                            height: 8rem;
                            margin-right: 98%;
                            padding: 0px 0px;
                            margin-top: 0%;
                            box-sizing: border-box;
                            border-radius: 5px;
                            background-color: #0e0d0dd0;
                            font-size: 16px;
                            resize: none;
                            font-family: PopLight;
                            outline: none;
                        }
                        .contact-email {
                            font-size: 14px;
                        }
                        .form a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            left: 50%;
                            top: 50%;
                            transform: translate(25%, -50%);
                        }
                        /*******submit Button*******/
                        .submit {
                            width: 100vw;
                            height: 24px;
                            -webkit-perspective: 500px;
                            -moz-perspective: 500px;
                            -ms-perspective: 500px;
                            perspective: 500px;
                            top: 50%;
                            position: relative;
                            left: -19%;
                            margin-top: 2rem;
                            margin-bottom: 2rem;
                        }
                        .submit a {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding-bottom: 8rem;
                            font-weight: 400;
                            font-size: 14px;
                            text-transform: uppercase;
                            margin: 0;
                            padding: 0;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            -webkit-transform-style: preserve-3d;
                            -moz-transform-style: preserve-3d;
                            -o-transform-style: preserve-3d;
                            -ms-transform-style: preserve-3d;
                            transform-style: preserve-3d;
                            -webkit-transform: translateZ(-25px);
                            -moz-transform: translateZ(-25px);
                            -o-transform: translateZ(-25px);
                            -ms-transform: translateZ(-25px);
                            transform: translateZ(-25px);
                            -webkit-transition: -webkit-transform 0.3s;
                            -moz-transition: -moz-transform 0.3s;
                            -o-transition: -o-transform 0.3s;
                            -ms-transition: -ms-transform 0.3s;
                            transition: transform 0.3s;
                            cursor: pointer;
                        }
                        .submit a .front,
                        .submit a .back {
                            margin: 0;
                            width: 90px;
                            height: 38px;
                            line-height: 38px;
                            position: absolute;
                            text-align: center;
                            letter-spacing: 0.4em;
                        }
                        .submit a .front {
                            background-color: #8739f9;
                            color: #fff;
                            border-radius: 90px;
                            -webkit-transform: rotateY(0) translateZ(24px);
                            -moz-transform: rotateY(0) translateZ(24px);
                            -o-transform: rotateY(0) translateZ(24px);
                            -ms-transform: rotateY(0) translateZ(24px);
                            transform: rotateY(0) translateZ(24px);
                        }
                        .submit a .back {
                            background-color: rgba(255, 255, 255, 0);
                            color: rgba(34, 34, 34, 0);
                            border-radius: 90px;
                            -webkit-transform: rotateX(90deg) translateZ(24px);
                            -moz-transform: rotateX(90deg) translateZ(24px);
                            -o-transform: rotateX(90deg) translateZ(24px);
                            -ms-transform: rotateX(90deg) translateZ(24px);
                            transform: rotateX(90deg) translateZ(24px);
                            overflow: hidden;
                        }
                        .submit a .back:after {
                            content: '';
                            position: absolute;
                            top: -32%;
                            left: -10%;
                            width: 100%;
                            height: 50%;
                            background: #222;
                            -webkit-transform: rotate(8deg);
                            -moz-transform: rotate(8deg);
                            -o-transform: rotate(8deg);
                            -ms-transform: rotate(8deg);
                            transform: rotate(8deg);
                            -webkit-transition: all 0.5s ease;
                            -moz-transition: all 0.5s ease;
                            -o-transition: all 0.5s ease;
                            -ms-transition: all 0.5s ease;
                            transition: all 0.5s ease;
                            -webkit-transition-delay: 0.15s;
                            -moz-transition-delay: 0.15s;
                            -o-transition-delay: 0.15s;
                            -ms-transition-delay: 0.15s;
                            transition-delay: 0.15s;
                        }
                        .submit a:hover {
                            -webkit-transform: translateZ(-24px) rotateX(-90deg);
                            -moz-transform: translateZ(-24px) rotateX(-90deg);
                            -o-transform: translateZ(-24px) rotateX(-90deg);
                            -ms-transform: translateZ(-24px) rotateX(-90deg);
                            transform: translateZ(-24px) rotateX(-90deg);
                        }
                        .submit a:hover .front {
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                            -webkit-transition: all 0.8s ease;
                            -moz-transition: all 0.8s ease;
                            -o-transition: all 0.8s ease;
                            -ms-transition: all 0.8s ease;
                            transition: all 0.8s ease;
                        }
                        .submit a:hover .back {
                            color: white;
                            -webkit-transition: color 0.4s linear;
                            -moz-transition: color 0.4s linear;
                            -o-transition: color 0.4s linear;
                            -ms-transition: color 0.4s linear;
                            transition: color 0.4s linear;
                            background: linear-gradient(180deg, #C651CD 11.46%, rgba(168, 70, 226, 0.707547) 50.52%, rgba(135, 57, 249, 0.38) 94.27%);
                        }
                        .submit a:hover .back:after {
                            -webkit-transform: rotate(6deg) translate(90px, -18px);
                            -moz-transform: rotate(6deg) translate(100px, -18px);
                            -o-transform: rotate(6deg) translate(100px, -18px);
                            -ms-transform: rotate(6deg) translate(100px, -18px);
                            transform: rotate(6deg) translate(100px, -18px);
                        }
                        .alert {
                            text-align: center;
                            justify-content: center;
                            padding: 5px;
                            background: #79c879;
                            color: #fff;
                            width: 80%;
                            margin-left: 0%;
                            display: none;
                        }
                        /*******Footer*******/
                        .fnav {
                            color: white;
                            background: #100f10;
                            text-transform: uppercase;
                            min-height: 50px;
                            width: 100%;
                            margin: auto;
                            display: flex;
                            align-items: center;
                            padding: 0px, 0px;
                            flex-direction: column;
                        }
                    }
                    
                    @media only screen and (min-width: 1195px) and (max-width: 1294px) and (orientation: landscape) {
                        html {
                            width: 100%;
                            overflow-x: hidden;
                            scroll-behavior: smooth;
                            -webkit-overflow-scrolling: touch;
                        }
                        p {
                            max-width: 32ch;
                            font-size: 1rem;
                        }
                        .sub-head {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 0.8rem;
                        }
                        .sub {
                            text-align: center;
                            font-size: 0.9rem;
                        }
                        h4 {
                            text-align: center;
                        }
                        .container {
                            width: 100%;
                            margin-left: 1rem;
                            padding-bottom: 0px;
                            padding: 0px, 0px, 0px, 0px;
                        }
                        .sidenav {
                            display: none;
                        }
                        nav {
                            min-height: 55.3px;
                            width: 100%;
                            position: fixed;
                            z-index: 3;
                        }
                        .logo-icon {
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            margin-left: 5%;
                            cursor: pointer;
                        }
                        .nav-links {
                            position: absolute;
                            position: fixed;
                            right: 0px;
                            height: 95vh;
                            top: 7vh;
                            background-color: #000;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            width: 20%;
                            transform: translateX(100%);
                            transition: transform 0.5s ease-in;
                            z-index: 6;
                        }
                        .nav-links li {
                            opacity: 0;
                            display: block;
                        }
                        .nav-links li a {
                            text-decoration: none;
                        }
                        .nav-links li a:hover {
                            color: #8739f9;
                            font-size: 0.9rem;
                            font-weight: bolder;
                        }
                        .nav-active {
                            transform: translateX(0%);
                        }
                        .burger {
                            margin-right: 5%;
                            display: block;
                            cursor: pointer;
                        }
                        @keyframes navLinkFade {
                            from {
                                opacity: 0;
                                transform: translateX(50px);
                            }
                            to {
                                opacity: 1;
                                transform: translateX(0px);
                            }
                        }
                        .toggle .line1 {
                            transform: rotate(42deg) translate(3px, 1px);
                        }
                        .toggle .line2 {
                            transform: rotate(-42deg);
                        }
                        .toggle .line3 {
                            transform: rotate(41deg) translate(-1.5px, -2.4px);
                        }
                        /***********Intro Section**************/
                        /**************Home Section********/
                        #home-section {
                            height: 100vh;
                            background: url(/img/background.png);
                            background-repeat: no-repeat;
                            width: 100%;
                            background-attachment: fixed;
                            z-index: -1;
                        }
                        .developer {
                            list-style: none;
                            top: 8vh;
                            padding: 0;
                            margin: 0;
                            transform: translateY(80%);
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            color: white;
                            font-size: 13vw;
                            font-family: American Captain1;
                            font-weight: bold;
                            position: relative;
                        }
                        .mouse {
                            display: none;
                        }
                        .mouse-icon {
                            border: 2px solid white;
                            border-radius: 16px;
                            height: 35px;
                            width: 24px;
                            display: block;
                            z-index: 1;
                            top: 47%;
                            transform: translateY(-10%, -30%);
                            margin-left: 48.5%;
                            margin-bottom: 2%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            position: relative;
                        }
                        .home-text p {
                            width: 100%;
                            color: white;
                            position: absolute;
                            top: 6.5vh;
                            align-items: center;
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            transform: translate(-16%, -45%);
                            letter-spacing: 1px;
                            font-weight: bolder;
                            font-size: 2.5vw;
                        }
                        .home-text p span {
                            letter-spacing: 1px;
                        }
                        .home-img {
                            top: 50%;
                            left: 50%;
                            height: auto;
                            transform: translate(-22%, 16%);
                            position: absolute;
                        }
                        .home-img img {
                            height: 40%;
                            width: 40%;
                        }
                        /****Project Section****/
                        .grid-container {
                            display: grid;
                            grid-template-columns: auto auto auto;
                            margin-left: -5%;
                        }
                        .grid-container img {
                            height: 60%;
                            width: 100%;
                            border-top-right-radius: 5%;
                            border-top-left-radius: 5%;
                        }
                        .card {
                            width: 80%;
                            padding-bottom: 10px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-right: 10%;
                            margin-bottom: 8%;
                        }
                        .card-1 {
                            width: 80%;
                            padding-bottom: 10px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-right: 10%;
                            margin-bottom: 8%;
                        }
                        .card-2 {
                            width: 80%;
                            padding-bottom: 10px;
                            background: #0e0d0dd0;
                            border-radius: 5%;
                            margin-right: 10%;
                            margin-bottom: 8%;
                        }
                        .card p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        .card-1 p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card-1 strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                        .card-2 p {
                            margin: 8px 10px;
                            max-width: 75ch;
                            font-size: 1rem;
                        }
                        .card-2 strong {
                            margin: 6px 0px;
                            font-size: 1rem;
                        }
                    }
                    
                    @media only screen and (min-width: 1367px) {
                        .developer {
                            list-style: none;
                            padding: 0;
                            margin: 0;
                            transform: translateY(35vh);
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            color: white;
                            font-size: 11vw;
                            font-family: fantasy, American Captain1;
                            font-weight: bold;
                            position: relative;
                        }
                        .mouse {
                            position: relative;
                            display: block;
                            margin-top: 45vh;
                        }
                        .mouse-icon {
                            border: 2px solid white;
                            border-radius: 16px;
                            height: 35px;
                            width: 24px;
                            display: block;
                            z-index: 1;
                            top: 45vh;
                            transform: translateY(10vw, 0vh);
                            margin-left: 9.3vw;
                            margin-bottom: 2%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            position: relative;
                        }
                        .home-text p {
                            width: 100%;
                            color: white;
                            position: absolute;
                            top: 6.5vh;
                            align-items: center;
                            justify-content: center;
                            display: flex;
                            flex-direction: row;
                            transform: translate(-34%, 45%);
                            letter-spacing: 1px;
                            font-weight: bolder;
                            font-size: 2vw;
                        }
                        .home-text p span {
                            letter-spacing: 1px;
                        }
                        .home-img {
                            top: 50%;
                            left: 0%;
                            height: auto;
                            transform: translate(5%, -50%);
                            position: absolute;
                        }
                        .home-img img {
                            height: 40%;
                            width: 40%;
                        }
                    }