@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --primary-color: #0B0B0B;
    --secondary-color: #9E9DA9;
    
    --blue: #3482FF;
    --orange: #F89E52
}


div{

background-color: transparent;
background-size: cover; 
background-position: center; 
background-repeat: no-repeat;
display: flex;
justify-content: center; 
align-items:center
}

button{
font-family: 'Poppins', sans-serif; font-weight: 800
}


*{
font-family: 'Poppins', sans-serif;
}
h1{
font-family: 'Poppins', sans-serif; color:var(--primary-color); margin:10px; font-size:60px; font-weight: 800; line-height: 1.2;
}
h2{
font-family: 'Poppins', sans-serif; color:var(--primary-color); margin:10px; font-size:60px; font-weight: 800; line-height: 1;
}
h3{
font-family: 'Poppins', sans-serif; color:var(--orange); margin:10px; font-size:25px; font-weight: 400; line-height: 0;
}

h4{
font-family: 'Poppins', sans-serif; color:var(--primary-color); margin:10px; font-size:25px; font-weight: 800; line-height: 1.2;
}

p{
font-family: 'Poppins', sans-serif; color:var(--secondary-color);  margin:10px;
}
a {
    text-decoration: none;
    color: var(--secondary-color);
}
.contact:hover {
    color: var(--blue);
}

.icon {
    width: 70px;
    height: 70px;
}



.button {
    display: inline-block;
    background-color: var(--blue);
    color: white;
    padding: 26px 55px;
    border-radius: 20px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: var(--orange);
}

.skill {
    display: flex;
justify-content: center; align-items:center;
    background-color: #0B0B0B;
    color: white;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    width: 200px;
}

.container3,
.container2 {
        flex-direction: row;
    }
.container4 h1{
            text-align: end;
        }



.reimg{

         width:40vw;    

    }


    /* When screen is 768px or smaller */
    @media (max-width: 768px) {
        .container2 {
            flex-direction: column-reverse;         
        }
        .container3,
        .container4 
        {
            flex-direction: column;         
        }
        .container4 h1{
            text-align: center;
        }
        .child{
            justify-content: center !important; 
            align-items:center !important;
        }

        .reimg{

             width:90vw;  

        }
    }


.site-footer {
    background-color: #1F2933;
    color: white;
    padding: 60px 8% 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    max-width: 1200px;
    margin: auto;
}

.footer-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.footer-section h2,
.footer-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
}

.footer-section p {
    line-height: 1.7;
    color: #d5dbe0;
}

.footer-section a {
    color: #d5dbe0;
    text-decoration: none;
    margin-bottom: 10px;
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid #4b5563;
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: #d5dbe0;
}


/* Responsive footer */
@media (max-width: 768px) {

    .footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .site-footer {
        padding: 40px 30px 20px;
    }

}