@media screen and (max-width: 400px) {
    /* Header */
        #head-bar{
            height: 65px;
        }
        .navbar{
            padding-top: 4%;
            gap:5%;
        }
        .navbar a{
            font-size:12px;
            padding:8px 10px;
        }

    /* Footer */
        .footer{
            height: 300px;
        }

        .footer-top {
            gap: 25px;
            padding-top: 50px;
        }
        
        .footer-col {
            max-width: 220px;
            font-size: 8px;
        }
        
        .footer-col a {
            margin: 8px 0;
        }

        hr {
            margin: 20px 7.5%;
        }

        .socials a:hover svg{
        transform: scale(1.2);
        }
        
        .copyright p{
            font-size: 9px;
        }
        .copyright a {
            font-size: 8px;
        }

    /* Home */
        #home-head h1{
            font-size: 18px;
            margin: 40px 1%;
        }

        #home-head img{
            height: 130px;
        }

        #home-overview h1{
            font-size: 18px;
        }
        #home-overview p{
            font-size: 10px;
            margin: 1.75% auto;
        }
        
        #content{
            width: 85%;
            margin: 3% 7.5% 0 7.5%;
        }

        #content h1{
            font-size: 18px;
        }
        #content ul li{
            font-size: 11px;
        }
        
        .system-components h2 {
            font-size: 22px;
        }
        
        .components-container {
            width: 100%;
            display: block;
        }
        
        .component:not(:last-child)::after {
            width: 0px;
        }
        
        .component h3 {
            margin: 20px 0;
            font-size: 16px;
        }
        
        .component li {
            font-size: 14px;
        }

    /* About */
        .personal-infos{
            margin: 3% 5%  0 5%;
            width: 90%;
            height: 200px;
        }

        #personal-image{
            height: 50%;
            margin: -40% 0 0 10%;
        }
        #in-left-side h3{
            font-size: 10px;
            margin: 30% 0 0 3.5%;
        }

        #mvr-line{
            height: 150px; 
            margin-left: 3%; 
        }

        #list-info{
            font-size: 9px;
        }

        #in-right-side h4{
            margin: 65% 0 0 8%;
            font-size: 12px;
        }
        .contact-center{
            margin: -6% 0 0 35%;              
        }
        .contact-center .icon{
            width: 20px;
            height: 20px;
        }
        .btn_message {
            font-size: 14px;
        }

    /* Download */
        #Down-Part #main-img{
            height: 150px;
        }
        button {
            font-size: 10px;
        }
        .down-info p{
            font-size: 12px;
            padding: 10px 25px;
            margin-bottom: 0;
        }

    /* FAQs */
        #FAQs-Infos{
            width: 90%;
            margin: 3% 5% 0 5%;
        }
        #FAQs-Infos h2{
            font-size: 13px;
        }
        #FAQs-Infos p{
            font-size: 12px;
        }
}

@media screen and (min-width: 401px) and (max-width: 450px) {
    /* Header */
        #head-bar{
            height: 65px;
        }
        .navbar{
            padding-top: 4%;
            gap:7%;
        }
        .navbar a{
            font-size:14px;
            padding:8px 10px;
        }

    /* Footer */
        .footer{
            height: 300px;
        }

        .footer-top {
            gap: 25px;
            padding-top: 50px;
        }
        
        .footer-col {
            max-width: 220px;
            font-size: 10px;
        }
        
        .footer-col a {
            margin: 8px 0;
        }

        hr {
            margin: 20px 7.5%;
        }

        .socials a:hover svg{
        transform: scale(1.2);
        }
        
        .copyright p{
            font-size: 10px;
        }
        .copyright a {
            font-size: 8px;
        }

    /* Home */
        #home-head h1{
            font-size: 20px;
            margin: 40px 1%;
        }

        #home-head img{
            height: 130px;
        }

        #home-overview h1{
            font-size: 19px;
        }
        #home-overview p{
            font-size: 11px;
            margin: 1.75% auto;
        }
        
        #content{
            width: 85%;
            margin: 3% 7.5% 0 7.5%;
        }

        #content h1{
            font-size: 19px;
        }
        #content ul li{
            font-size: 12px;
        }
        
        .system-components h2 {
            font-size: 23px;
        }
        
        .components-container {
            width: 100%;
            display: block;
        }
        
        .component:not(:last-child)::after {
            width: 0px;
        }
        
        .component h3 {
            margin: 20px 0;
            font-size: 17px;
        }
        
        .component li {
            font-size: 15px;
        }

    /* About */
        .personal-infos{
            margin: 3% 5%  0 5%;
            width: 90%;
            height: 200px;
        }

        #personal-image{
            height: 50%;
            margin: -40% 0 0 10%;
        }
        #in-left-side h3{
            font-size: 10px;
            margin: 30% 0 0 3.5%;
        }

        #mvr-line{
            height: 150px; 
            margin-left: 3%; 
        }

        #list-info{
            font-size: 9px;
        }

        #in-right-side h4{
            margin: 65% 0 0 8%;
            font-size: 12px;
        }
        .contact-center{
            margin: -6% 0 0 35%;              
        }
        .contact-center .icon{
            width: 20px;
            height: 20px;
        }
        .btn_message {
            font-size: 14px;
        }

    /* Download */
        #Down-Part #main-img{
            height: 180px;
        }
        button {
            font-size: 12px;
        }
        .down-info p{
            font-size: 13px;
            padding: 10px 25px;
            margin-bottom: 0;
        }

    /* FAQs */
        #FAQs-Infos{
            width: 90%;
            margin: 3% 5% 0 5%;
        }
        #FAQs-Infos h2{
            font-size: 14px;
        }
        #FAQs-Infos p{
            font-size: 13px;
        }
}

@media screen and (min-width: 451px) and (max-width: 600px) {
    /* Header */
        #head-bar{
            height: 65px;
        }
        .navbar{
            padding-top: 3%;
            gap:10%;
        }
        .navbar a{
            font-size:15px;
            padding:8px 10px;
        }

    /* Footer */
        .footer{
            height: 300px;
        }

        .footer-top {
            gap: 30px;
            padding-top: 40px;
        }
        
        .footer-col {
            max-width: 220px;
            font-size: 12px;
        }
        
        .footer-col a {
            margin: 8px 0;
        }

        hr {
            margin: 20px 7.5%;
        }

        .socials a:hover svg{
        transform: scale(1.2);
        }
        
        .copyright p{
            font-size: 12px;
        }
        .copyright a {
            font-size: 10px;
        }

    /* Home */
        #home-head h1{
            font-size: 20px;
            margin: 40px 1%;
        }

        #home-head img{
            height: 150px;
        }

        #home-overview h1{
            font-size: 20px;
        }
        #home-overview p{
            font-size: 12px;
            margin: 1.75% auto;
        }
        
        #content{
            width: 85%;
            margin: 3% 7.5% 0 7.5%;
        }

        #content h1{
            font-size: 20px;
        }
        #content ul li{
            font-size: 12px;
        }
        
        .system-components h2 {
            font-size: 25px;
        }
        
        .components-container {
            width: 100%;
            display: block;
        }
        
        .component:not(:last-child)::after {
            width: 0px;
        }
        
        .component h3 {
            margin: 20px 0;
            font-size: 18px;
        }
        
        .component li {
            font-size: 15px;
        }
            
    /* About */
        .personal-infos{
            margin: 3% 5%  0 5%;
            width: 90%;
            height: 200px;
        }

        #personal-image{
            height: 50%;
            margin: -20% 0 0 10%;
        }
        #in-left-side h3{
            font-size: 13px;
            margin: 30% 0 0 3.5%;
        }

        #mvr-line{
            height: 150px; 
        }

        #list-info{
            font-size: 9.8px;
        }

        #in-right-side h4{
            margin: 50% 0 0 8%;
            font-size: 14px;
        }
        .contact-center{
            margin: -6% 0 0 35%;              
        }
        .contact-center .icon{
            width: 20px;
            height: 20px;
        }
        .btn_message {
            font-size: 14px;
        }

    /* Download */
        #Down-Part #main-img{
            height: 200px;
        }
        button {
            font-size: 14px;
        }
        .down-info p{
            font-size: 15px;
            padding: 10px 25px;
            margin-bottom: 0;
        }

    /* FAQs */
        #FAQs-Infos{
            width: 90%;
            margin: 3% 5% 0 5%;
        }
        #FAQs-Infos h2{
            font-size: 15px;
        }
        #FAQs-Infos p{
            font-size: 14px;
        }
}

@media screen and (min-width: 601px) and (max-width: 800px) {
    /* Header */
        #head-bar{
            height: 65px;
        }
        .navbar{
            padding-top: 2%;
            gap:12%;
        }
        .navbar a{
            font-size:16px;
            padding:8px 10px;
        }

    /* Footer */
        .footer{
            height: 300px;
        }

        .footer-top {
            gap: 30px;
            padding-top: 40px;
        }
        
        .footer-col {
            max-width: 220px;
            font-size: 13px;
        }
        
        .footer-col a {
            margin: 8px 0;
        }

        hr {
            margin: 20px 7.5%;
        }

        .socials a:hover svg{
        transform: scale(1.2);
        }
        
        .copyright p{
            font-size: 12px;
        }
        .copyright a {
            font-size: 11px;
        }

    /* Home */
        #home-head h1{
            font-size: 22px;
            margin: 40px 1%;
        }

        #home-head img{
            height: 150px;
        }

        #home-overview h1{
            font-size: 22px;
        }
        #home-overview p{
            font-size: 14px;
            margin: 1.75% auto;
        }
        
        #content{
            width: 85%;
            margin: 3% 7.5% 0 7.5%;
        }

        #content h1{
            font-size: 22px;
        }
        #content ul li{
            font-size: 14px;
        }
        
        .system-components h2 {
            font-size: 27px;
        }
        
        .components-container {
            width: 100%;
            display: block;
        }
        
        .component:not(:last-child)::after {
            width: 0px;
        }
        
        .component h3 {
            margin: 20px 0;
            font-size: 20px;
        }
        
        .component li {
            font-size: 15px;
        }

    /* About */
        .personal-infos{
            margin: 3% 5%  0 5%;
            width: 90%;
            height: 200px;
        }

        #personal-image{
            height: 60%;
            margin: -10% 0 0 10%;
        }
        #in-left-side h3{
            font-size: 15px;
            margin: 30% 0 0 3.5%;
        }

        #mvr-line{
            height: 150px; 
        }

        #list-info{
            font-size: 11.4px;
        }

        #in-right-side h4{
            margin: 42% 0 0 5%;
            font-size: 14px;
        }
        .contact-center{
            margin: -6% 0 0 5%;              
        }
        .contact-center .icon{
            width: 25px;
            height: 25px;
        }
}

@media screen and (min-width: 801px) and (max-width: 1000px) {
    /* Header */
        #head-bar{
            height: 70px;
        }
        .navbar{
            padding-top: 2%;
            gap:14%;
        }
        .navbar a{
            font-size:17px;
            padding:8px 10px;
        }

    /* Footer */
        .footer{
            height: 300px;
        }

        .footer-top {
            gap: 30px;
            padding-top: 40px;
        }
        
        .footer-col {
            max-width: 220px;
            font-size: 14px;
        }
        
        .footer-col a {
            margin: 8px 0;
        }

        hr {
            margin: 20px 7.5%;
        }

        .socials a:hover svg{
        transform: scale(1.2);
        }
        
        .copyright p{
            font-size: 14px;
        }
        .copyright a {
            font-size: 13px;
        }

    /* Home */
        #home-head h1{
            font-size: 25px;
            margin: 50px 1%;
        }

        #home-head img{
            height: 170px;
        }

        #home-overview h1{
            font-size: 25px;
        }
        #home-overview p{
            font-size: 17px;
            margin: 1.75% auto;
        }
        
        #content{
            width: 85%;
            margin: 3% 7.5% 0 7.5%;
        }

        #content h1{
            font-size: 25px;
        }
        #content ul li{
            font-size: 17px;
        }
        
        .system-components h2 {
            font-size: 30px;
        }
        
        .components-container {
            width: 100%;
            display: block;
        }
        
        .component:not(:last-child)::after {
            width: 0px;
        }
        
        .component h3 {
            margin: 20px 0;
            font-size: 23px;
        }
        
        .component li {
            font-size: 20px;
        }

    /* About */
        .personal-infos{
            margin: 3% 10%  0 10%;
            width: 80%;
            height: 220px;
        }

        #personal-image{
            height: 65%;
            margin: -10% 0 0 10%;
        }
        #in-left-side h3{
            font-size: 17px;
            margin: 28% 0 0 3.5%;
        }

        #mvr-line{
            height: 175px; 
        }

        #list-info{
            font-size: 13px;
        }

        #in-right-side h4{
            margin: 40% 0 0 5%;
            font-size: 16px;
        }

        .contact-center .icon{
            width: 30px;
            height: 30px;
        }
}

@media screen and (min-width: 1001px) and (max-width: 1200px) {
    /* Header */
        .navbar{
            padding-top: 2%;
        }

    /* Home */
        #home-head h1{
            font-size: 35px;
            margin: 60px 1%;
        }

        #home-head img{
            height: 180px;
        }

        #home-overview p{
            font-size: 16px;
        }
        
        #content{
            width: 85%;
            margin: 3% 7.5% 0 7.5%;
        }

        #content h1{
            font-size: 25px;
        }
        #content ul li{
            font-size: 16px;
        }
        
        .system-components h2 {
            font-size: 35px;
        }
        
        .components-container {
            width: 100%;
            display: block;
        }
        
        .component:not(:last-child)::after {
            width: 0px;
        }
        
        .component h3 {
            margin: 20px 0;
            font-size: 25px;
        }
        
        .component li {
            font-size: 18px;
        }

        /* About */
        .personal-infos{
            margin: 3% 10%  0 10%;
            width: 80%;
            height: 220px;
        }

        #personal-image{
            width: 70%;
            height: 65%;
            margin: -5% 0 0 10%;
        }
        #in-left-side h3{
            font-size: 18px;
            margin: 22% 0 0 3.5%;
        }

        #mvr-line{
            height: 175px; 
        }

        #list-info{
            font-size: 14px;
        }

        #in-right-side h4{
            margin: 32% 0 0 5%;
            font-size: 18px;
        }
        
        .contact-center .icon{
            width: 30px;
            height: 30px;
        }
}
@media screen and (min-width: 1201px) and (max-width: 1500px) {
    /* Home */
        #content{
            width: 40%;
            margin: 3% 0 0 6.6%;
            display: inline-block;
        }

        #content h1{
            font-size: 22px;
        }

        #content ul li{
            font-size: 16px;
        }
        
        .system-components h2 {
            font-size: 35px;
        }
        
        .components-container {
            width: 100%;
            display: flex;
            gap: 30px;
            text-align: left;
            flex-wrap: wrap; /* responsive */
        }
        
        .component h3 {
            font-size: 20px;
        }
        
         .component li {
            font-size: 17px;
        }

    /* About */
        #personal-image{
            height: 60%;
        }
        #in-left-side h3{
            font-size: 16px;
            margin: 35% 0 0 0;
        }

        #mvr-line{
            height: 200px; 
        }

        #list-info{
            font-size: 13px;
        }

        #in-right-side h4{
            margin: 55% 0 0 3%;
            font-size: 16px;
        }
        
        .contact-center .icon{
            width: 30px;
            height: 30px;
            margin-left: 50%;
        }
}