@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Oswald:wght@200;300;400;500;600&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
:root{
    --primary-color: #0070e7;
    --secondary-color: #ff8400;
    --on-primary-color: #f9f9f9;

    --background-color-1: #e6f2ff;
    --background-color-2: #f9f9f9;
    --font-family-3: 'Michroma';
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Raleway', 'Oswald', 'Michroma', sans-serif;
    overflow-x: hidden;
}

link[rel="icon"]{
  display: inline-block;
  object-fit: contain;
  width: 32px;
  height: 32px;
}

/* preloader */
.loading-page{
    position: absolute;
    z-index: 10000;
    overflow: hidden;
    top: 0;
    left: 0;
    background: var(--background-color-2);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: pulse 3s ease-in-out infinite;
}
#svg{
    width: 150px;
    stroke: #fff;
    fill: #001F40;
    stroke-width: 2px;
}
.loading-naming-container{
    font-family: var(--font-family-3);
    color: #001F40;
    font-size: 1.5rem;
    letter-spacing: 16px;
    text-transform: uppercase;
    font-weight: 900;
    stroke-dasharray: 4500;
}
@keyframes pulse {
    0% {
        transform: scale(1); /* Default scale */
    }
    50% {
        transform: scale(1.3); /* Scale up */
    }
    100% {
        transform: scale(1); /* Back to default scale */
    }
}



.container{  
    padding-left: 3%;
    padding-right: 3%;
}

.exceed{
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;  
}
  
/* header  */
header {
    height: auto;
    width: 100%;
    background-color: var(--background-color-1);
    position: relative;
    overflow: hidden;
}

.header-section1{
    position: fixed;
    z-index: 100;
    height: auto;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    top: 0;
    overflow: hidden;
}

nav{
    width: 100%;
    background-color: #1e1e1ee7;
    backdrop-filter: blur(30%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    /* box-shadow: -3px -3px 10px #ffffff, 3px 3px 5px #ceced1; */
    box-shadow: 0px 4px 10px #1e1e1ee7;
    z-index: 10;
}

nav .nav-brand{
    position: absolute;
    top: -8px;
    background-color: var(--secondary-color);
    display: inline-block;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 30px 8px 5px 8px;
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
    color: white;
}

nav .nav-brand img{
    width: 60px;
}

nav button{
    cursor: pointer;
    font-weight: 500;
    font-size: 3rem;
    outline: none;
    border: none;
    background-color: transparent;
    display: none;
    transition: linear .1s ease;
    position: relative;
    color: var(--on-primary-color);
}

nav button:hover{
    color: var(--secondary-color);
}

nav .developer{
    display: none;
}

nav .developer .developer-img{
    display: flex;
    justify-content: center;
    width: 100%;
}


nav ul{
    display: flex;
    list-style: none;
}

nav ul li a{
    color: var(--on-primary-color);
    font-family: 'Oswald';
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 500;
    display: inline-flex;
    box-shadow: -3px -3px 7px #2f2323, 3px 3px 10px #434345;
    margin: 0 15px;
    padding: 10px 20px;
    position: relative;
    transition: all .6s ease;
}
nav ul li a:hover::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset -3px -3px 7px #2f2323, inset 3px 3px 5px #434345;
}
nav ul li a:hover{
    color: var(--secondary-color);
}



/* header section 2 style */
.header-section2 {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 72px;
    padding-top: calc(10vh);
    padding-bottom: 10vh;
    overflow: hidden;
}
.display-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.message-name{
    max-width: 60%;
}
.message-name h1{
    color: #001f40;
    /* color: var(--primary-color); */
    font-size: 4rem;
}
.message-name #developer-name{
    color: var(--secondary-color);
    font-size: 5rem;
    font-weight: bolder;
}
.message-name .developer-skills{
    font-size: 4rem;
    font-weight: bold;
}
.message-name div{
    margin-top: 30px;
    color: #1e1e1e;
    font-size: 1.2rem;
    line-height: 1.7;
    width: 80%;
}
.message-name p{
    padding-bottom: 30px;
}

.message-name div a{
    font-family: 'Raleway' ;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: var(--secondary-color);
    color: white;
    font-size: 1.3rem;
    font-weight: 500;
    text-decoration: none;
    transition: .5s ease;
}
.message-name div a:hover{
    background-color: #ffb260;
    border: 1px solid var(--secondary-color);
    color: black;
}

.message-name img{
    width: 25px;
    height: 25px;
    object-fit: contain;
}
.kings-pic{
    height: 400px;
    width: 400px;
    right: 100px;
}
.kings-pic img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/* Main  */

/* main-section 1 */
.main-section1{
    width: 100%;
    background-color: var(--background-color-2);
    padding: 5vh 0;
}

.main-section1 h2, .main-section2 h2{
    color: var(--primary-color);
    text-align: center;
}

.section1-container{
    margin-top: 30px;
    width: 100%;
    display: flex;
}
.exp-pro-container{
    position: relative;
    width: 50%;
    display: flex;
    justify-content: center;
}

.exp-pro-container::after{
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    height: 2px;
    width: 200px;
    top: 0;
    left: 0;
}
.exp-pro-container img{
    height: 70px;
    width: 70px;
    object-fit: contain;
}
.flex-center{
    width: 70%;
}
.exp-pro{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}
.exp-pro p, .strongest-skills h3, .section2-container h3{
    font-size: 3rem;
    font-weight: bolder;
}
.exp-pro span, .strongest-skills span, .section2-container span{
    color: var(--primary-color);
}
.strongest-skills{
    position: relative;
    padding: 0 30px;
    width: 50%;
    height: auto;
}

.strongest-skills::after{
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    height: 200px;
    width: 2px;
    top: 0;
    left: 0;
}
.strongest-skills p, .bio-container p{
    line-height: 25px;
    color: #1e1e1e;
}

.main-section2{
    width: 100%;
    height: auto;
    background-color: var(--background-color-1);
    padding: 5vh 0;
}

.section2-container{
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.my-pic{
    width: 40%;
    height: 505px;
    border-left: 5px solid var(--primary-color);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 1px solid inherit;
    overflow: hidden;
    position: relative;
    transform: .5s;
}
.my-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
}

.my-pic:before{
    content: "";
    position: absolute;
    bottom: -100%;
    height: 100%;
    width: 100%;
    background-color: #ff840063;
    z-index: 1;
    transition: .5s;
}
.my-pic:hover img{
    -webkit-filter: grayscale();
    filter: grayscale(100%);
}
.my-pic:hover:before{
    bottom: 0;
}

.my-pic:hover img{
    transform: scale(1.3);
}

.bio-container{
    padding: 0 30px;
    max-width: 50%;
}


/* main section  3*/
.main-section3,
.main-section5,
.footer-section1
{
    width: 100%;
    height: auto;
    padding: 5vh 0;
}
.h2-container3, 
.h2-container4,
.h2-container5,
.h2-container1{
    margin-top: 5vh;
    width: 100%;
    display: flex;
    justify-content: center;
}
.main-section3 h2, 
.main-section4-th h2,
.main-section5-th h2,
.footer-section1-th h2{
    color: var(--primary-color);
    text-align: center;
}
.main-section3-th, 
.main-section4-th,
.main-section5-th,
.footer-section1-th{
    position: relative;
    width: 100px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.main-section3-th:after, 
.main-section4-th::after,
.main-section5-th::after,
.footer-section1-th::after{
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    height: 170px;
    width: 2px;
    top: 0;
    left: 50%;
}
.section3-container, 
.section4-container, 
.section5-container,
.footer1-container{
    width: 100%;
}
.skill-gen-container{
    margin-top: 30px;
    margin-bottom: 50px;
}
.skill-gen-container h3{
    font-size: 2rem;
    font-weight: bolder;
    color: var(--secondary-color);
}
.skill-container {
    padding: 10px 0px;
    display: flex;
    gap: 40px;
    margin-top: 30px;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}
  
.image-type{
    flex: 0 1 100px;
}

.skill-image{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    background-color: white;
    box-shadow: 1px 1px 10px #001f40;
    transition: all .3s ease;
}
.skill-image:hover{
    border-radius: 50px;
    width: 100%;
    height: 100px;
    background-color: #eee;
}
.skill-image img{
    width: 65%;
    height: 65%;
    object-fit: contain;
}
.skill-type p{
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
    color: #1e1e1e;
    font-size: 1rem;
}

.main-section4{
    width: 100%;
    height: auto;
    background-color: var(--background-color-1);
    padding: 5vh 0;
}

.done-projects{
    width: 30%;
    border: 1px solid #1e1e1e;
    background-color: white;
    margin-top: 40px;
}
.section4-container{
    display: flex;
    justify-content: space-evenly;
}
.project-pic{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 230px;
}
.project-pic div{
    width: 90%;
    height: 90%;
    background-color: inherit;
}
.project-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.project-detials h3{
    color: var(--secondary-color);
}

.project-detials{
    padding: 20px;
    line-height: 25px;
    color: #1e1e1e;
}
.source-view{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.source-view a{
    font-weight: bold;
    color: white;
    background-color: var(--secondary-color);
    text-decoration: none;
    padding: 8px 17px;
    border-radius: 20px;
}
.source-view a:hover{
    color:  var(--primary-color);
    border: 1px solid var(--primary-color);
    background-color: white;
}

/* see work link */
.see-works{
    width: 100%;
    text-align: center;
    /* margin-top: 30px; */
    display: flex;
    justify-content: center;
}
.see-works div{
    width: auto;
    background-color: var(--background-color-2);
    border: 1px solid var(--secondary-color) ;
    position: relative;
    overflow: hidden;
}

.see-works div:before{
    content: "";
    position: absolute;
    left: -100%;
    height: 100%;
    width: 100%;
    background-color: var(--primary-color);
    transition: .9s;
}
.see-works div:hover:before{
    left: 0;
}
.see-works div:hover a{
    color: var(--on-primary-color);
}
.see-works p{
    border: 1px solid inherit;
    overflow: hidden;
    position: relative;
    transform: .5s;
    padding: 10px;
}
.see-works a{
    z-index: 100;
    text-decoration: none;
    text-align: center;
    color: var(--secondary-color);
    font-size: 1.3rem;
    font-weight: 500;
}
.see-works .bx{
    transform: rotate(180deg);
}


/* main section 5 */
.main-section5{
    padding: 5vh 0;
}
.main-section5-th{
    width: 230px !important;
}

.section5-container{
    display: flex;
    justify-content: space-between;
    flex-flow: column;
    position: relative;
    margin-top: 40px;
}
.section5-container::before{
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    height: 100%;
    width: 2px;
    top: 0;
    left: 50%;
}
.edu-two, .edu-four{
    position: relative;
    right:-53%;
}
.education{
    position: relative;
    width: 47%;
    margin-bottom: 40px;
    color: var(--primary-color);
}
.edu-one::after, .edu-three::after{
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    height: 20px;
    width: 20px;
    border-radius: 25px;
    top: 0;
    right: -8.4%;
}
.edu-two::after, .edu-four::after{
    content: "";
    position: absolute;
    background-color: var(--primary-color);
    height: 20px;
    width: 20px;
    border-radius: 25px;
    top: 0;
    left: -8.1%;
}
.education-detials{
    width: 100%;
    border: 2px solid var(--primary-color);
    margin-top: 8px;
    padding: 16px;
    border-radius: 0 50px 0 30px;
    color: #1e1e1e;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.5);
}
.course-name{
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--primary-color);
}
.school-name{
    font-weight: bold;
    font-size: 1.15rem;
    color: var(--primary-color);
}
.education-write{
    font-size: 1.1rem;
    line-height: 25px;
}
.education .date{
    opacity: 0.8;
    color: var(--secondary-color);
}

/* footer section 1 */
footer{
    background-color: var(--background-color-1);
}
.footer1-container .text{
    margin-top: 30px;
}
.footer1-container .text p{
    font-size: 3rem;
    font-weight: bolder;
    text-align: center;
}
.footer1-container .text span{
    color: var(--secondary-color);
}

.into-pic{
    margin-top: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.contact-info{
    width: 55%;
}
input[id="fullname"], 
input[id="email"],
textarea[id='message']{
    font-size: 1.2rem;
    font-family: 'Raleway' ;
    line-height: 1.5;
    padding-left: 10px;
    width: 100%;
    height: 38px;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid #1e1e1e;
}
textarea[id='message']{
    height: 100px;
}
input[id="fullname"]:focus, 
input[id="email"]:focus,
textarea[id='message']:focus{
    outline: none;
    background-color: transparent;
}
textarea[id='message']{
    padding-top: 10px !important;
    height: 70px !important;
}
button[type="submit"]{
    font-family: 'Raleway' ;
    padding: 10px 25px;
    border-radius: 10px;
    background-color: var(--secondary-color);
    color: white;
    border: none;
    font-size: 1.2rem;
    font-weight: 500;
    transition: .1s ease;
}
button[type="submit"]:active{
    background-color: #ffb260;
    color: black;
    border: 1px solid var(--secondary-color);
} 

.contact-care{
    width: 40%;
}
.contact-care img{
    width: 100%;
}

/* footer section 2*/
.footer-section2{
    padding-bottom: 50px;
}

.links-footer-container{
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    padding-left: 10%;
    padding-right: 10%;
}

.links-footer{
    color: hsl(0, 0%, 12%);
    line-height: 40px;
}

.links-footer p{
    font-weight: bold;
    font-size: 1.3rem ;
}
.links-footer ul{
    margin-top: 10px;
    list-style: none;
}
.links-footer a{
    color: #1e1e1e;
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
}
.links-footer a:hover{
    text-decoration: underline;
    color: var(--secondary-color);
}

.footer-social i{
    font-size: 1.5rem;
}
.footer-social a:hover{
    text-decoration: none;
}
.footer-social li a .bx,
.footer-social li a .fa,
.footer-social li a .fa{
    transition: 1.5s;
}
.footer-social li a:hover .bx,
.footer-social li a:hover .fa,
.footer-social li a:hover .fab{
    transform: rotateY(360deg);
}

.footer-section3{
    padding-bottom: 70px;
    text-align: center;
    font-weight: 300;
    color: #1e1e1e;
    font-size: 1.3rem;
    border-top: 1px solid #1e1e1e;
    padding: 20px;
    margin-left: 3%;
    margin-right: 3%;
}


/* Project page */
.pm-section1{
    width: 100%;
    height: auto;
    background-color: var(--background-color-1);
    padding: 5vh 0;
}

.project-header{
    text-align: center;
    color: #1e1e1e;
    font-size: 1.3rem;
}
.container-padding{
    padding-left: 5%;
    padding-right: 5%;    
}

/* index project section */
.project-index{
    justify-content: center !important;
}

.project-container {
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Align items to the left */
  }
  
.loop-project {
    flex: 0 1 calc(33.33% - 20px); /* Adjust width accordingly */
    /* margin-right: 20px; */
    margin-bottom: 30px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0px 0px 5px #ceced1;
    transition: all ease 0.6s;
    transform: translateY(0%);
}

.project-container .loop-project:hover{
    transform: translateY(-5%);
    box-shadow: 3px 5px 10px #ceced1;
}

.project-container .project-img{
    width: 100%;
    min-height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: #fefefe5e;
    overflow: hidden;
}

.project-container .project-img img{
    width: 50%;
}

.project-container .project-detials{
    height: 140px;
    width: 100%;
    background-color: #ffffff;
    line-height: 1.5;
}
.project-container h2{
    font-size: 1.5rem;
    font-weight: bold;
    color: #1e1e1e;
}
.project-container a{
    color: var(--secondary-color);
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: 500;
}


/* modal */

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 550px;
    text-align: center;
    border-radius: 20px;
    position: relative;
    line-height: 2;
}

.modal-content .bxs-badge-check{
    font-size: 8rem;
    color: var(--primary-color);
    padding-bottom: 10px;
}
.modal-content .bxs-error{
    font-size: 6rem;
    color: red;
    padding-bottom: 10px;
}
.modal-content p{
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 500;
}

.modal-content #thank-you{
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: bold;
}

.modal-content #backButton{
    margin-top: 20px;
    padding: 5px 20px;
    color: var(--on-primary-color);
    font-family: 'Raleway';
    outline: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 500;
    background-color: var(--primary-color);
    border-radius: 25px;
    cursor: pointer;
}
.close{
    color: var(--secondary-color);
    position: absolute;
    top: 0px;
    right: 20px;
    /* float: right; */
    font-size: 2.6rem;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
  

@media (max-width: 999px) {
    nav{
        padding: 5px 0;
    }
    nav .nav-brand {
        position: relative;
        top: -10px;
    }

    nav ul{
        display: block;
        position: fixed;
        transition: all 0.3s linear;
        transform: translate(-100%);
        top: 0;
        left: 0;
        padding-top: 45px;
        max-width: 330px;
        width: 100%;
        height: 100%;
        min-height: 500px;
        background-color: #ffffff;
        box-shadow: 3px 5px 10px ;
        box-shadow: 0 5px 10px #b0b0b5;
        z-index: 1000;
        /* transition-delay: 2s; */
    }
    nav ul.active{
        transform: translate(0%);
    } 
    nav ul li a{
        display: block;
        margin-top: 40px;
        text-align: center;
        box-shadow: none;
        color: #1e1e1e;
    }
    nav ul li a:hover::before{
        box-shadow: none;
    }
    nav button.bars{
        display: block;
        transition: linear 0.9s ease;
        transition-delay: 0.5s;
    }
    nav button.cancel{
        position: absolute;
        top: 25px;
        right: 30px;
        color: #1e1e1e;
    }

    nav .developer{
        position: relative;
    }

    nav .developer::before{
        position: absolute;
        content: "";
        width: 100%;
        height: 1px;
        top: -15px;
        background-color: #31344b;
    }
    nav .developer{
        width: 100%;
        position: absolute;
        bottom: 30px;
        display: block;
    }
    nav .developer img{
        width: 70%;
        max-width: 250px;
        object-fit: contain;
        transform: translateX(20%);
    }

    nav .developer p{
        text-align: center;
        padding-bottom: 10px;
        font-weight: 500;
    }

    /* project */

      
    .loop-project {
        flex: 0 1 calc(49% - 19px);
    }
}

@media (max-width:768px){
    html{
        font-size: 14px;
    }
    .container {
        padding-left: 6%;
        padding-right: 6%;
    }
    .display-container {
        /* flex-flow: column; */
        flex-wrap: wrap;
    }
    .message-name {
        max-width: 100%;
    }
    .kings-pic-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .kings-pic {
        max-height: 400px;
        max-width: 400px;
    }
    /* main section 1 */
    .section1-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .exp-pro .text{
        margin-left: 15px;
    }

    .exp-pro-container {
        margin-bottom: 30px;
        width: 100%;
    }
    .strongest-skills {
        position: relative;
        padding: 0 30px;
        width: 100%;
        height: auto;
    }

    /* main section 2 */
    .section2-container {
        flex-wrap: wrap;
        flex-flow: column;
    }
    .bio-container {
        max-width: 100%;
    }
    .my-pic {
        width: 60%;
        height: auto;
    }

    /* .done-projects {
        width: 46% !important;
        margin-left: 20px;
        margin-bottom: 10px;
    } */
    .source-view a {
        padding: 7px 22px;
    }
    .section4-container {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .section5-container::before {
        display: none;
    }
    .section5-container {
        align-items: center;
    }
    .education {
        width: 85%;
        margin-bottom: 50px;
    }
    .edu-one::after, 
    .edu-two::after, 
    .edu-three::after,
    .edu-four::after {
        display: none;
    }
    .edu-two, .edu-four {
        position: relative;
        right: 0%;
    }

    .links-footer-container {
        padding-left: 5%;
        padding-right: 5%;
    }
    .links-footer{
        margin-bottom: 10px;
    }
    .links-footer ul {
        margin-top: 0px;
    }

}

@media screen and (max-width: 500px) {
    nav{
        padding: 0px 0px;
    }

    .header-section2 {
        margin-top: 50px;
    }   
    /* .section4-container {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    } */
    /* .done-projects {
        width: 85% !important;
        margin-left: 0;
        margin-bottom: 0;
    }
    .source-view {
        justify-content: center;
        flex-flow: column;
        align-items: center;
    }
    .source-view .margin-bottom{
        margin-bottom: 15px;
    }
    .source-view a {
        padding: 8px 23px;
    } */

    .into-pic{
        width: 100%;
        flex-flow: column;
        align-items: center;
    }

    .contact-info {
        width: 100%;
    }

    .contact-care {
        width: 90%;
    }

    .links-footer{
        line-height: 2;
    }

    .links-footer-container {
        padding-left: 6%;
        padding-right: 6%;
        flex-flow: column;
    }

    /* Project page */
    .loop-project {
        flex: 0 1 calc(70% - 19px);
    }
    .project-container {
        flex-direction: column;
        align-items: center;
    }
    /* .project-container .loop-project {
        width: 80% !important;
    } */

    .modal-content {
        width: 85%;
    }
}