/* */

/* Universal */
@font-face {
    font-family: 'Alluring';
    src: url(/font/Alluring.woff);
}
* {
    box-sizing: border-box;
}

body {
    font-family: Roboto, sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-inline-size: 1440px;
    margin-inline: auto;
    background-color: rgb(233, 228, 220);
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

main {
    margin-inline: 16px;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    max-inline-size: 1248px; /* 1440px - 192px (2 * 96px) */
}

@media screen and (min-width:480px) {
    main {
        margin-inline: 6.6vw;
    }   
}

@media screen and (min-width:1440px) {
    main {
        margin-inline: 96px;
    } 
    
}

img {
    width: 100%;
    height: auto;
}

p, table {
    font-size: 5vw;
}

@media screen and (min-width:480px) {
    p, table {
        font-size: 3vw;
    } 
}

@media screen and (min-width:768px) {
    p, table {
        font-size: 2vw;
    } 
}

@media screen and (min-width:1024px) {
    p, table {
        font-size: 1.5vw;
    }  
}

@media screen and (min-width:1440px) {
    p, table {
        font-size: 21.6px;
    } 
}

figcaption {
    font-size: 4vw;
    font-weight: bold;
    margin-block-start: 1vw;
}

@media screen and (min-width:768px) {
    figcaption {
        font-size: 3vw;
        margin-block-start: 0;
    }   
}

@media screen and (min-width:1024px) {
    figcaption {
        font-size: 2vw;
    } 
    
}

@media screen and (min-width:1440px) {
    figcaption {
        font-size: 28.8px;
    } 
    
}

h1 {
    font-size: 10vw;
}

@media  screen and (min-width:480px) {
    h1 {
        font-size: 6vw;
    } 
}
@media screen and (min-width:768px) {
    h1 {
        font-size: 4vw;
    }
}

@media screen and (min-width:1440px) {
    h1 {
        font-size: 57.6px;
    }
}

h2 {
    font-size: 7.5vw;
}

@media screen and (min-width:480px) {
    h2 {
        font-size: 4.5vw;
    }
}

@media screen and (min-width:768px) {
    h2 {
        font-size: 3vw;
    }
}

@media screen and (min-width:1440px) {
    h2 {
        font-size: 43.2px;
    }
}

h3 {
    font-size: 5.85vw;
}

@media screen and (min-width:480px) {
    h3 {
        font-size: 3.5vw;
    } 
}

@media screen and (min-width:768px) {
    h3 {
        font-size: 2.33vw;
    } 
}

@media screen and (min-width:1440px) {
    h3 {
        font-size: 33.552px;
    } 
}

h4 {
    font-size: 5vw;
}

@media screen and (min-width:480px) {
    h4 {
        font-size: 3vw;
    }
}

@media screen and (min-width:768px) {
    h4 {
        font-size: 2vw;
    }
}

@media screen and (min-width:1440px) {
    h4 {
        font-size: 28.8px;
    }
}

a {
    text-decoration: none;
    color: inherit;
    font-size: 5vw;
}

@media screen and (min-width:480px) {
    a {
        font-size: 3vw;
    }
}

@media screen and (min-width:768px) {
    a {
        font-size: 2vw;
    } 
}

@media screen and (min-width:1024px) {
    a {
        font-size: 1.5vw;
    } 
}

@media screen and (min-width:1440px) {
    a {
        font-size: 28.8px;
    }   
}

hr {
    border: 0;
    block-size: 1.5625vw;
    inline-size: 100%;
    background-color: #808080;
    border-radius: 15%;
    margin-block: 7.5vw;
}

@media screen and (min-width:480px) {
    hr {
        block-size: 1vw;
        margin-block: 3vw;
    }  
}

@media screen and (min-width:768px) {
    hr {
        block-size: 0.625vw;
    } 
}

@media screen and (min-width:1440px) {
    hr {
        block-size: 9px;
        margin-block: 43.2px;
    } 
}

header {
    background-color: #333;
    color: #fff;
    padding-block-start: 5px;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

@media screen and (min-width:768px) {
    header {
        justify-content: space-between;
    }
}

#header_logo {
    inline-size: 40%;
    margin-inline: 20px auto;
    background-color:#fff;
    font-size: 0;
    background-color: transparent;
}

@media screen and (min-width:768px) {
    #header_logo {
        inline-size: 10%;
        margin-inline-start: 25px;
    }
    
}

#header_logo svg {
    block-size: 100%;
    inline-size: auto;
}

@media screen and (min-width:768px) {
    .main-nav li:hover > .sub-menu {
        max-height: 100vh;
        opacity: 1;
        transition: opacity 0.3s ease-in-out, max-height 0.6s ease-in-out;
    }
}

header ul {
    display: block;
    overflow: hidden;
    position: absolute;
    left: 0%;
    top: 100%;
    background-color: rgba(24,24,27);
    width: 100%;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s ease-in-out, max-height 0.6s ease-in-out;
}

@media screen and (min-width:768px) {
    header ul {
        display: flex;
        position: static;
        background-color: inherit;
        opacity: 1;
        max-height: none;
        column-gap: 2vw;
    } 
}

@media screen and (min-width:1440px) {
    header ul {
        column-gap: 28.8px;
    }  
    
}

header li {
    padding: 10px 20px;
    text-align: left;
}

@media screen and (min-width:768px) {
    header li {
        padding: 10px;
        text-align: center;
    }    
}

header a {
    font-size: 6vw;
    font-weight: bold;
    display: block;
}

@media screen and (min-width:480px) {
    header a {
        font-size: 3.6vw;
    }  
}

@media screen and (min-width:768px) {
    header a {
        font-size: 2vw;
    }  
}

@media screen and (min-width:1440px) {
    header a {
        font-size: 28.8px;
    }  
}

header a:hover {
    text-decoration: underline;
}

.sub-menu {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    top: 100%;
    left: 0;
    overflow: hidden;
    position: sticky;
    background-color: rgba(24,24,27);
    width: 100%;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s ease-in-out, max-height 0.6s ease-in-out;
    z-index: 1;
}

@media screen and (min-width:768px) {
    .sub-menu {
        position: absolute;
        inline-size: fit-content;
        left: initial;
    }
}

.sub-menu.showMenu {
    max-height: 100vh;
    opacity: 1;
    transition: opacity 0.3s ease-in-out, max-height 0.6s ease-in-out;
}

header a {
    color: #fff;
    text-decoration: none;
}

header a:hover {
    text-decoration: underline;
}

/*Hamburgermenu*/
header nav {
    text-align: right;
    margin-block: auto;
}

@media screen and (min-width:768px) {
    header nav {
        align-self: center;
        justify-self: right;
        margin-inline-end: 25px;
    }
}
#menubutton {
    margin-inline: auto 20px;
    padding-block: 6px;
    display: inline-block;
    cursor: pointer;
}

@media screen and (min-width:768px) {
    #menubutton {
        display: none;
    }
}

header button {
    border: none;
    background-color: inherit;
    display: block;
    margin-inline: auto;
    padding-inline: 0; 
}

.menubar1, .menubar2, .menubar3 {
    inline-size: 10.9375vw;
    block-size: 1.25vw;
    background-color: white;
    margin-block: 2.18vw;
    transition: 0.3s;
    border-radius: 15%;  
}

@media screen and (min-width:480px) {
    .menubar1, .menubar2, .menubar3 {
        inline-size: 5.625vw;
        block-size: 0.625vw;
        margin-block: 1.25vw;
    } 
}
  
.changeHamburger .menubar1 {
    transform: translate(0, 3.4370vw) rotate(-45deg);
}

@media screen and (min-width:480px) {
    .changeHamburger .menubar1 {
        transform: translate(0, 1.93vw) rotate(-45deg);
    } 
}
  
.changeHamburger .menubar2 {
    opacity: 0;
}
  
.changeHamburger .menubar3 {
    transform: translate(0, -3.4370vw) rotate(45deg);
}

@media screen and (min-width:480px) {
    .changeHamburger .menubar3 {
        transform: translate(0, -1.93vw) rotate(45deg);
    }
}

.showMenu {
    z-index: 1;
    max-height: 100vh;
    opacity: 1;
    transition: opacity 0.3s ease-in-out, max-height 0.6s ease-in-out;
}
/*End hamburgermenu (no need to set fixed values at 1440px, it's hidden)*/ 
main > h1 {
    margin-block-end: 0;
}
/*Footer*/
footer {
    background-color: #333;
    color: #fff;
    padding-block-start: 5vw;
    padding-block-end: 3.125vw;
    text-align: center;
    flex-shrink: 0;
}

@media screen and (min-width:480px) {
    footer {
        padding-block-start: 3vw;
        padding-block-end: 2vw;
    }
}

@media screen and (min-width:768px) {
    footer {
        padding-block-start: 2vw;
        padding-block-end: 1vw;
    } 
}

@media screen and (min-width:1440px) {
    footer {
        padding-block-start: 28.8px;
        padding-block-end: 14.4px;
    }
}

footer a {
    margin-inline: 1.5625vw;
}

@media screen and (min-width:480px) {
    footer a {
        margin-inline: 1vw;
    }  
}

@media screen and (min-width:1440px) {
    footer a {
        margin-inline: 14.4px;
    }  
}

footer a svg {
    inline-size: 7.5vw;
    block-size: 7.5vw;
}

@media screen and (min-width:480px) {
    footer a svg {
        inline-size: 4.5vw;
        block-size: 4.5vw;
    }
}

@media screen and (min-width:768px) {
    footer a svg {
        inline-size: 2.5vw;
        block-size: 2.5vw;
    }   
}

@media screen and (min-width:1440px) {
    footer a svg {
        inline-size: 36px;
        block-size: 36px;
    }   
}
/* End Footer */

.card {
    background-color: #d7d7d7;
    margin-block: 20px;
    overflow: hidden;
    box-shadow: 0 1.25vw 2.5vw 0 rgba(0, 0, 0, 0.2), 0 1.875vw 6.25vw 0 rgba(0, 0, 0, 0.19);
}

@media screen and (min-width:768px) {
    .card {
        box-shadow: 0 1.25vw 1.875vw rgba(0, 0, 0, 0.2), 0 0.3125vw 0.9375vw rgba(0, 0, 0, 0.19);
    }
    
}

@media screen and (min-width:1440px) {
    .card {
        box-shadow: 0 18px 27px rgba(0, 0, 0, 0.2), 0 4.5px 13.5px rgba(0, 0, 0, 0.19);
    }   
}

/* End Universal */

/* Home */
.home-intro h1 {
    font-size: 13vw;
    margin: 0;
    padding: 20px 0 5px 0;
    text-align: center;
}

@media screen and (min-width:480px) {
    .home-intro h1 {
        font-size: 7.8vw;
    }
}

@media screen and (min-width:768px) {
    .home-intro h1 {
        font-size: 5vw;
    }  
}

@media screen and (min-width:1024px) {
    .home-intro h1 {
        font-size: 51.2px; /* fixed size from 1024px */
    }
}

.home-intro h2 {
    font-size: 7vw;
    margin: 0;
    padding: 10px 0;
    text-align: center;
    color: #707070;
}

@media screen and (min-width:480px) {
    .home-intro h2 {
        font-size: 4.2vw;
    }
}

@media screen and (min-width:768px) {
    .home-intro h2 {
        font-size: 2.8vw;
    } 
}

@media screen and (min-width:1024px) {
    .home-intro h2 {
        font-size: 28.672px; /* fixed size from 1024px */
    } 
}

#home_main_img {
    max-block-size: 85vw;
    object-fit: cover;
    border-radius: 25%;
    box-shadow: 0 1.25vw 2.5vw 0 rgba(0, 0, 0, 0.2), 0 1.875vw 6.25vw 0 rgba(0, 0, 0, 0.19);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width:480px) {
    #home_main_img {
        max-block-size: 75vw;
        object-position: 50% 20%;
        box-shadow: 0 0.75vw 1.5vw 0 rgba(0, 0, 0, 0.2), 0 1.125vw 3.75vw 0 rgba(0, 0, 0, 0.19);
    } 
}

@media screen and (min-width:768px) {
    #home_main_img {
        max-block-size: 45vw;
        object-position: 50% 20%;
        inline-size: 60vw;
        align-self: center;
        border-radius: 10%;
    } 
}

@media screen and (min-width:1024px) {
    #home_main_img {
        max-block-size: 30vw;
        object-position: 50% 20%;
        inline-size: 40vw;
        border-radius: 5%;
    }    
}

@media screen and (min-width:1440px) {
    #home_main_img {
        max-block-size: 432px;
        inline-size: 576px;
        box-shadow: 0 10.8px 21.6px rgba(0, 0, 0, 0.2), 0 16.2px 54px rgba(0, 0, 0, 0.19);
    } 
}

.skillCategories {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    flex-wrap: wrap;
    column-gap: 10vw;
    margin-block: 0;
}

@media screen and (min-width:480px) {
    .skillCategories {
        column-gap: 20vw;
    }
}

@media screen and (min-width:768px) {
    .skillCategories {
        column-gap: 10vw;
    }
}

@media screen and (min-width:1440px) {
    .skillCategories {
        column-gap: 144px;
    } 
}

.skillCategories div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    inline-size: 35vw;
}

@media screen and (min-width:480px) {
    .skillCategories div {
        margin-block: 3vw;
        inline-size: 20vw;
    }
}

@media screen and (min-width:768px) {
    .skillCategories div {
        margin-block: 1vw;
        inline-size: 13vw;
    }
}

@media screen and (min-width:1440px) {
    .skillCategories div {
        margin-block: 14.4px;
        inline-size: 187.2px;
    }
}

.skillCategories p {
    font-size: 5vw;
    text-align: center; 
}

@media screen and (min-width:480px) {
    .skillCategories p {
        font-size: 3vw;
    }
}

@media screen and (min-width:768px) {
    .skillCategories p {
        font-size: 2vw;
    }
}

@media screen and (min-width:1440px) {
    .skillCategories p {
        font-size: 28.8px;
    }
}

.home_contact {
    margin-block: 10vw;
}

@media screen and (min-width:1440px) {
    .home_contact {
        margin-block: 144px;
    }
}

.home_contact h2 {
    font-size: 10vw;
    margin-block: 0;
    text-align: center;
}

@media screen and (min-width:480px) {
    .home_contact h2 {
        font-size: 6vw;
        text-align: left;
    }
}

@media screen and (min-width:768px) {
    .home_contact h2 {
        font-size: 4vw;
    }    
}

@media screen and (min-width:1440px) {
    .home_contact h2 {
        font-size: 57.6px;
    } 
}

.home_contact a {
    display: flex;
}

.home_contact section {
    display: flex;
    flex-wrap: wrap;
}

.home_contact section a {
    border-radius: 8px;
    padding-inline: 16px;
    padding-block: 4px;
    margin-inline: 5px;
    margin-block: 5px;
    box-shadow: 0 1.25vw 1.875vw rgba(0, 0, 0, 0.1), 0 0.3125vw 0.9375vw rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease-in-out;
    align-items: center;
    background-color: rgb(236, 232, 227);
}

@media screen and (min-width:480px) {
    .home_contact section a {
        box-shadow: 0 0.75vw 1.125vw rgba(0, 0, 0, 0.1), 0 0.1875vw 0.5625vw rgba(0, 0, 0, 0.06);
    };
}

@media screen and (min-width:768px) {
    .home_contact section a {
        box-shadow: 0 0.5vw 0.75vw rgba(0, 0, 0, 0.1), 0 0.125vw 0.375vw rgba(0, 0, 0, 0.06);
    };
    
}

.home_contact section a:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
}

.home_contact section a svg {
    inline-size: 7.5vw;
    block-size: 7.5vw;
}

@media screen and (min-width:480px) {
    .home_contact section a svg {
        inline-size: 4.5vw;
        block-size: 4.5vw;
    }
}

@media screen and (min-width:768px) {
    .home_contact section a svg {
        inline-size: 3.5vw;
        block-size: 3.5vw;
    }
}

@media screen and (min-width:1440px) {
    .home_contact section a svg {
        inline-size: 50.4px;
        block-size: 50.4px;
    } 
}

.home_contact section a span {
    padding-inline-start: 5px;
}
/* End Home */

/*Portfolio*/
#slideshow-container {
    position: relative;
    max-inline-size: 100%;
}

@media screen and (min-width:768px) {
    #slideshow-container {
        max-inline-size: 80%;
        margin-inline: auto;
    }
    
}

.portfolioSlide {
    padding-block-end: 5.5vw;   
}

@media screen and (min-width:768px) {
    .portfolioSlide {
        padding-block-end: 0;
    }
    
}
@media screen and (min-width:480px) {
    .portfolioSlide img {
        padding: 2vw 4vw 0 4vw;
    }
}

@media screen and (min-width:768px) {
    .portfolioSlide img {
        padding: 2vw 12vw 0 12vw;
    }  
}

@media screen and (min-width:1440px) {
    .portfolioSlide img {
        padding: 28.8px 172.8px 0 172.8px;
    }
}

.portfolioSlide h3, .portfolioSlide p {
    margin-inline: 3.125vw;
}

@media screen and (min-width:480px) {
    .portfolioSlide h3, .portfolioSlide p{
        margin-inline: 4vw;
        margin-block: 0.5em;
    }
}

@media screen and (min-width:768px) {
    .portfolioSlide h3, .portfolioSlide p{
        margin-inline: 12vw;
    }
}

@media screen and (min-width:1440px) {
    .portfolioSlide h3, .portfolioSlide p{
        margin-inline: 172.8px;
    }
}

.carr-prev, .carr-next {
    cursor: pointer;
    position: absolute;
    top: 91%;
    width: auto;
    margin-top: -22px;
    padding: 10px;
    font-weight: bold;
    font-size: 5vw;
    transition: 0.6s ease;
    border-radius: 0 1vw 1vw 0;
    user-select: none;
}

@media screen and (min-width:768px) {
    .carr-prev, .carr-next {
        font-size: 3.375vw;
        top: 5.5%;
        display: flex;
        align-items: center;
        block-size: 100%;
        padding: 16px;
        border-radius: 0;
    }
}

@media screen and (min-width:1440px) {
    .carr-prev, .carr-next {
        font-size: 48.6px;
    }
}

.carr-next {
    right: 0;
    border-radius: 1vw 0 0 1vw;
}

@media screen and (min-width:768px) {
    .carr-next {
        border-radius: 0;
    }
    
}

.carr-prev:hover, .carr-next:hover {
    background-color: rgba(113, 113, 113, 0.8);
}

.dot {
    cursor: pointer;
    height: 4.6875vw;
    width: 4.6875vw;
    margin: 0 2vw;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

@media screen and (min-width:480px) {
    .dot {
        height: 2.5vw;
        width: 2.5vw;
        margin: 0 1vw;
    }   
}

@media screen and (min-width:768px) {
    .dot {
        height: 1.5vw;
        width: 1.5vw;
    }
}

@media screen and (min-width:1440px) {
    .dot {
        height: 21.6px;
        width: 21.6px;
        margin: 0 14.4px;
    }
}

#carrousel-dots {
    text-align: center;
}

.active, .dot:hover {
    background-color: rgb(113, 113, 113);
}

.portfolio_page figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-block: 10vw;
    margin-inline: 9vw;
}

@media screen and (min-width:768px) {
    .portfolio_page figure {
        display: grid;
        grid-template-columns: 1fr 2fr;
        margin: 4vw;
        column-gap: 2vw;
    }
}

@media screen and (min-width:1440px) {
    .portfolio_page figure {
        margin: 57.6px;
        column-gap: 28.8px;
    } 
}

@media screen and (min-width:768px) {
    .portfolio_page figure img {
        grid-row: 1 / 4;
    }
}

.portfolio_page .card hr {
    margin-inline: 4.5vw;
    block-size: 1.25vw;
    background-color: #808080;
    border-radius: 15%;
    inline-size: auto;
}

@media screen and (min-width:768px) {
    .portfolio_page .card hr {
        margin-inline: 2vw;
        block-size: 0.625vw;
    }
}

@media screen and (min-width:1440px) {
    .portfolio_page .card hr {
        margin-inline: 28.8px;
        block-size: 9px;
    }
    
}

.portfolio_page figure ul {
    list-style-type: square;
    margin-inline-start: 0; /* Align with the rest of the content */
    padding-inline-start: 0; /* Remove default padding */
    font-size: 5vw;;
}

@media screen and (min-width:480px) {
    .portfolio_page figure ul {
        font-size: 3vw;
    }
}

@media screen and (min-width:768px) {
    .portfolio_page figure ul {
        font-size: 2vw;
    }
}

@media screen and (min-width:1024px) {
    .portfolio_page figure ul {
        font-size: 1.5vw;
    }  
}

@media screen and (min-width:1440px) {
    .portfolio_page figure ul {
        font-size: 21.6px;
    }  
}

.portfolio_page figure ul li {
    margin-inline-start: 4.5vw; /* Add consistent spacing */
}

@media screen and (min-width:768px) {
    .portfolio_page figure ul li {
        margin-inline-start: 2vw; /* Adjust spacing for larger screens */
    }
}

@media screen and (min-width:1440px) {
    .portfolio_page figure ul li {
        margin-inline-start: 28.8px;
    } 
}

.portfolio_page article {
    margin-block-end: 14vw;
}

@media screen and (min-width:768px) {
    .portfolio_page article {
        margin-block-end: 10vw;
    } 
}

@media screen and (min-width:1440px) {
    .portfolio_page article {
        margin-block-end: 144px;
    }  
}
/*End Portfolio*/
/*Start About me*/

.about_page table {
    inline-size: 100%;
    margin-block-start: 0;
    max-inline-size: 500px;
}
/*End About me*/
/*Start Contact*/
@media screen and (min-width:480px) {
    .contact_page h2 {
        font-size: 4vw;
    }
}

@media screen and (min-width:768px) {
    .contact_page h2 {
        text-align: center;
        font-size: 2.8vw;
    } 
    
}
.contact_page section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-block-end: 10vw;
}

@media screen and (min-width:480px) {
    .contact_page section {
        margin-block-end: 5vw;
    }
}

@media screen and (min-width:768px) {
    .contact_page section {
        margin-block-end: 3vw;
    }
}

@media screen and (min-width:1024px) {
    .contact_page section {
        margin-block-end: 2vw;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 2vw;
    } 
}

@media screen and (min-width:1440px) {
    .contact_page section {
        column-gap: 28.8px;
        margin-block-end: 28.8px;
    }
}

@media screen and (min-width:1024px) {
    .contact_page section h4 {
        inline-size: 100%;
        flex-basis: 100%;
        text-align: center;
    }
}

.contact_card {
    display: block;
    block-size: 18vw;
    padding-block: 2.5vw;
    padding-inline: 2.5vw;
    border-radius: 5px;
    inline-size: 100%;
    margin-block: 3vw;
}

@media screen and (min-width:480px) {
    .contact_card {
        padding-block: 1vw;
        padding-inline: 5vw;
        block-size: 10.8vw;
    }
}

@media screen and (min-width:768px) {
    .contact_card {
        padding-block: 0.5vw;
        padding-inline: 2vw;
        block-size: 7vw;
        inline-size: 82vw;
        margin-block: 2vw;
    }
}

@media screen and (min-width:1024px) {
    .contact_card {
        inline-size: 20%;
        block-size: 250px;
    }
}

@media screen and (min-width:1440px) {
    .contact_card {
        padding-block: 7.2px;
        padding-inline: 28.8px;
        margin-block: 28.8px;
    }
}

.contact_card a {
    block-size: 100%;
    display: flex;
    align-items: center; /* Vertically center the content */
    gap: 8px; /* Add spacing between the SVG and text */
    justify-content: space-between;
}

@media screen and (min-width:768px) {
    .contact_card a {
        font-size: 2.5vw; /* Adjust font size for larger screens */
    } 
}

@media screen and (min-width:1024px) {
    .contact_card a {
        font-size: 2vw; /* Further adjust font size for larger screens */
        flex-direction: column; /* Stack the SVG and text vertically */
        justify-content: space-evenly; /* Distribute space evenly */
    } 
    
}

@media screen and (min-width:1440px) {
    .contact_card a {
        font-size: 28.8px; /* Set a fixed font size for large screens */
    } 
}

.contact_card a svg {
    inline-size: 9vw; /* Set a consistent size for the SVG */
    block-size: 9vw;
    flex-shrink: 0; /* Prevent the SVG from shrinking */
}

@media screen and (min-width:480px) {
    .contact_card a svg {
        inline-size: 5.4vw;
        block-size: 5.4vw;
    }
}

@media screen and (min-width:1440px) {
    .contact_card a svg {
        inline-size: 77.76px;
        block-size: 77.76px;
    }   
}
/*End Contact*/