/* Height Responsive */
@media (max-height: 1000px) { #home-social-box { margin-bottom: 150px !important; } }
@media (max-height: 850px) { #home .section-container { padding-top: 300px !important; } }
/* Width Responsive */
@media (max-width: 1715px) { #contactme-box { padding: 0px !important; } }
@media (min-width: 1630px) and (max-width: 1790px) {
    .services-card {
        width: 400px !important;
        height: 400px !important;
    }
}
@media (max-width: 1629px) { 
    #contactme-box { 
        flex-direction: column-reverse;
        width: 50%;
    }
    #contactme-text { padding: 0px 50px 50px 50px; }
    #contactme-text .border-btn, .blue-btn2 { width: 100% !important; }
    #coder-frame { 
        position: relative;
        width: 100% !important; 
        top: auto;
        right: auto;
    }
    #services-card-box { gap: calc(5vw) 10px !important; } 
}
@media (max-width: 1399px) {
    nav {
        width: calc(100% - 110px) !important;
        left: 55px !important;
    }
    .row {
        padding-left: 145px !important; 
        padding-right: 145px !important; 
    }
    .section-container {
        padding-left: 145px; 
        padding-right: 145px; 
    }
    #contactme-box { width: 75%; }
    #avatar-card { right: 143px; }
}
@media (max-width: 1210px) {
    .services-card {
        width: 400px !important;
        height: 400px !important;
    }
}
@media (max-width: 1199px) {
    .row {
        padding-left: 110px !important; 
        padding-right: 110px !important; 
    }
    .section-container {
        padding-left: 110px; 
        padding-right: 110px; 
    }
    nav { padding: 16px 55px 16px 55px; }
    nav #big-link-list, #resume-contact { display: none !important; }
    #burger-button { display: flex !important; }
    #avatar-card { right: 110px; }
    #form-language  { right: 110px; }
}
@media (min-width: 1199px) { #small-menu { display: none !important; } }
@media (max-width: 1099px) {
    nav {
        width: calc(100% - 54px) !important;
        left: 27px !important;
        padding: 16px 30px 16px 30px;
    }
    #form-language  { right: 82px; }
    #small-menu {
        width: calc(100% - 54px) !important;
        left: 27px !important; 
    }
    .row {
        padding-left: 57px !important; 
        padding-right: 57px !important; 
    }
    .section-container {
        padding-left: 57px; 
        padding-right: 57px; 
    }
    #avatar-card { right: 57px; }
}
@media (max-width: 1000px) {
    nav { 
        top: 8px !important;    
        height: 75px !important; 
        width: calc(100% - 16px) !important;
        left: 8px !important;
        border-radius: 5.8px;  
    }
    nav #logo-nav-big img { width: 100px !important; }
    #form-language  { top: 18px; }
    #small-menu {
        top: 92px;
        width: calc(100% - 16px) !important;
        left: 8px !important;
    }
    .transition { height: 200px !important; }
    .transition-bb { bottom: -50px; }
    .transition-bt { bottom: -150px; }
    .transition-bc { bottom: -100px; }
    .transition-tb { top: -50px; }
    .transition-tt { top: -150px; }
    .transition-tc { top: -100px; }
    #home {
        background-position: top right;
        background-size: 200%;
    }
    #home .section-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 0 !important;
    }
    #intro { 
        padding-top: 96px; 
        font-size: 12px;
    }
    #col-text-home {
        height: fit-content !important;
        justify-content: start !important;
        align-items: center !important;
        text-align: center;
    }
    #home-title {
        margin-top: 17px;
        margin-bottom: 32px;
        font-size: 52px;
    }
    #home-social-box { 
        margin-bottom: 0px !important;
        gap: 14px !important;
        justify-content: center !important;
    }
    #home-social-box .social-link { font-size: 15px !important; }
    #btn-and-social-box { width: 100%; } 
    .blue-btn { 
        width: 100% !important; 
        padding: 10px 25px !important;
        font-size: 12px !important; 
        border-radius: 7px;
    }
    .blue-btn p { font-size: 12px !important; }
    .blue-btn2 { 
        width: 100% !important; 
        padding: 10px 25px !important;
        font-size: 12px !important; 
        border-radius: 7px;
        height: auto;
    }
    .border-btn {
        border-radius: 7px;
        height: auto;
    }
    .transparent-btn { 
        width: 100% !important; 
        padding: 10px 25px !important;
        font-size: 12px !important; 
        border-radius: 7px;
    }
    #btn-and-social-box #home-social-box { gap: 64px; }
    #avatar-card {
        width: 183px !important;
        height: 274px !important;
        margin-top: 50px;
        margin-bottom: 200px;
        position: relative; 
        right: auto;
        bottom: auto;
    }
}
@media (max-width: 991px) {
    footer { height: fit-content; }
    footer .row { 
        padding-top: 50px !important; 
        padding-bottom: 50px !important; 
    }
    footer .h3-heading { 
        position: relative; 
        padding-bottom: 25px;
        font-size: 35px;
        line-height: 40px;
    }
    footer #footer-logo-box {
        flex-direction: column !important;
        align-items: start !important;
        padding-bottom: 50px !important;
    }
    footer #footer-logo { max-width: 50% !important; }
}
@media (max-width: 933px) {
    #services .h2-heading, #services-text {
        text-align: center;
        padding: 0;
    } 
    .services-card {
        margin: auto;
        width: 450px !important;
        height: 450px !important;
    }
}
@media (max-width: 869px) {
    #heading-skills #skills-title { text-align: center; }
    #heading-skills .paragraph-2 { text-align: center; }
    #carousel-skill-control1 {
        position: absolute;
        bottom: 40px;
        left: 57px;
        border-radius: 25px;
        z-index: 16 !important;
        height: 542px;
    }
    #carousel-skill-control2 {
        position: absolute;
        bottom: 40px;
        right: 57px;
        border-radius: 25px;
        z-index: 16 !important ;
        height: 542px;
    }
}
@media (max-width: 850px) {
    #contactme-text { padding: 0px 25px 25px 25px; }
    #contactme-box { width: 100%; }
    footer .h3-heading { 
        font-size: 30px;
        line-height: 38px;
    }
}
@media (max-width: 700px) {
    #about-text { padding: 0px !important; }
    #contact #contact-box { 
        margin-top: 50px;  
        margin-bottom: 100px !important; 
    }
    #contact form .w-50 { width: 100% !important; }
    #contact form #name-box { gap: 12px !important; }
    #contact form .gap-24 { gap: 12px !important; }
    #name-box { flex-direction: column; }
    footer .h3-heading { 
        font-size: 25px;
        line-height: 36px;
    }
}
@media (max-width: 575px) {
    nav {
        top: 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        width: 100% !important;
        left: 0 !important;
    }
    nav.br-24 { border-radius: 0px !important; }
    #small-menu {
        top: 75px;
        border-left: none;
        border-top: none;
        border-right: none;
        border-radius: 0 !important;
        width: 100% !important;
        left: 0px !important;
    }
    .row {
        padding-left: 20px !important; 
        padding-right: 20px !important; 
    }
    .section-container {
        padding-left: 20px; 
        padding-right: 20px; 
    }
    #about-title { margin-bottom: 16px; }
    #about-btn-box {
        flex-direction: column !important;
        gap: 16px;
        width: 100%;
    }
    .vertical-bar { animation: none !important; }
    #about-text { margin-bottom: 32px !important; }
    #about-btn-box button { width: 100% !important; }
    #carousel-skill-control1 { left: 20px !important; }
    #carousel-skill-control2 { right: 20px !important; }
    footer .row { padding: 0 !important; }
    footer #footer-logo-box { margin-left: 25px; }
    footer #footer-menu {
        border-radius: 0 !important;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
}
@media (max-width: 520px) {
    #carousel-skill-control1 { display: none; }
    #carousel-skill-control2 { display: none; }
}
@media (max-width: 491px) {
    .services-card {
        width: 100% !important;
        height: 400px !important;
    }
    footer #footer-menu { padding: 32px !important; }
}
@media (max-width: 441px) {
    .services-card {
        padding: 40px !important;
        height: fit-content !important;
    }
    #home-title { font-size: calc(1px + 12vw); }
}