@media screen and (min-width: 300px){
    .footer{
        width: 100%;
        height: fit-content;
        display: block;
        padding: 100px 15px 30px 15px;
        background-color: var(--thm-base);
    
    
        .footer-left{
            width: 100%;
            height: fit-content;
            transform: translateY(-40px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
            margin-right: 100px;
            padding-bottom: 50px;
    
    
            h2{
                color: var(--thm-gray-bg);
                margin-bottom: 20px;
                font-size: 20px;
            }
    
            p{
                color: rgb(117,137,145);
                font-weight: 600;
            }
        }
    
        .footer-left.visible {
            transform: translateY(0);
            opacity: 1;
        }
    
        .footer-right{
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 50px;
            transform: translateY(-40px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
        }
        
        .navs, .links, .essensials{
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-align: left;
        }
        
        h2{
            color: var(--thm-gray-bg);
            margin-bottom: 20px;
            font-size: 20px;
        }
        
        a {
            text-decoration: none;
            color: rgb(117,137,145);
            font-weight: 800;
            position: relative;
            margin-bottom: 5px;
            font-size: 15px;
            padding: 1px 0;
            width: fit-content;
            transition: color 0.5s ease-in-out;
        }
    
        a::after {
            content: ''; 
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0; 
            height: 3px; 
            background-color: rgb(255,195,0); 
            transition: width 0.5s ease; 
            color: rgb(255,195,0);
        }
        
        a:hover{
            color: rgb(255,195,0);
        }
        
        a:hover::after {
            width: 100%; 
            color: rgb(255,195,0);
        }
        
        
        .footer-right.visible {
            transform: translateY(0);
            opacity: 1;
        }
    
    }
    
    .copyright{
        width: 100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--thm-base);
        padding: 30px 15px 100px 15px;
    
        .item{
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 10px;
            background-color: rgb(14,59,82);
            color: rgb(117,137,145);
            transform: translateY(-35px);
            opacity: 0;
            text-align: center;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
        }
    
        .item.visible {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    
}

@media screen and (min-width: 750px){
    .footer{
        width: 100%;
        height: fit-content;
        display: block;
        padding: 100px 15px 30px 15px;
        background-color: var(--thm-base);
    
    
        .footer-left{
            width: 100%;
            height: fit-content;
            transform: translateY(-40px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
            margin-right: 100px;
            padding-bottom: 50px;
    
    
            h2{
                color: var(--thm-gray-bg);
                margin-bottom: 20px;
                font-size: 20px;
            }
    
            p{
                color: rgb(117,137,145);
                font-weight: 600;
            }
        }
    
        .footer-left.visible {
            transform: translateY(0);
            opacity: 1;
        }
    
        .footer-right{
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 50px;
            transform: translateY(-40px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
        }
        
        .navs, .links, .essensials{
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-align: left;
        }
        
        h2{
            color: var(--thm-gray-bg);
            margin-bottom: 20px;
            font-size: 20px;
        }
        
        a {
            text-decoration: none;
            color: rgb(117,137,145);
            font-weight: 800;
            position: relative;
            margin-bottom: 5px;
            font-size: 15px;
            padding: 1px 0;
            width: fit-content;
            transition: color 0.5s ease-in-out;
        }
    
        a::after {
            content: ''; 
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0; 
            height: 3px; 
            background-color: rgb(255,195,0); 
            transition: width 0.5s ease; 
            color: rgb(255,195,0);
        }
        
        a:hover{
            color: rgb(255,195,0);
        }
        
        a:hover::after {
            width: 100%; 
            color: rgb(255,195,0);
        }
        
        
        .footer-right.visible {
            transform: translateY(0);
            opacity: 1;
        }
    
    }
    
    .copyright{
        width: 100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--thm-base);
        padding: 30px 15px 100px 15px;
    
        .item{
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 10px;
            background-color: rgb(14,59,82);
            color: rgb(117,137,145);
            transform: translateY(-35px);
            opacity: 0;
            text-align: center;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
        }
    
        .item.visible {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    
}

@media screen and (min-width: 800px){
    .footer{
        width: 100%;
        height: fit-content;
        display: block;
        padding: 100px 30px 30px 30px;
        background-color: var(--thm-base);
    
    
        .footer-left{
            width: 100%;
            height: fit-content;
            transform: translateY(-40px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
            margin-right: 100px;
            padding-bottom: 50px;
    
    
            h2{
                color: var(--thm-gray-bg);
                margin-bottom: 20px;
                font-size: 20px;
            }
    
            p{
                color: rgb(117,137,145);
                font-weight: 600;
            }
        }
    
        .footer-left.visible {
            transform: translateY(0);
            opacity: 1;
        }
    
        .footer-right{
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 50px;
            transform: translateY(-40px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
        }
        
        .navs, .links, .essensials{
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-align: left;
        }
        
        h2{
            color: var(--thm-gray-bg);
            margin-bottom: 20px;
            font-size: 20px;
        }
        
        a {
            text-decoration: none;
            color: rgb(117,137,145);
            font-weight: 800;
            position: relative;
            margin-bottom: 5px;
            font-size: 15px;
            padding: 1px 0;
            width: fit-content;
            transition: color 0.5s ease-in-out;
        }
    
        a::after {
            content: ''; 
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0; 
            height: 3px; 
            background-color: rgb(255,195,0); 
            transition: width 0.5s ease; 
            color: rgb(255,195,0);
        }
        
        a:hover{
            color: rgb(255,195,0);
        }
        
        a:hover::after {
            width: 100%; 
            color: rgb(255,195,0);
        }
        
        
        .footer-right.visible {
            transform: translateY(0);
            opacity: 1;
        }
    
    }
    
    .copyright{
        width: 100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--thm-base);
        padding: 30px 30px 100px 30px;
    
        .item{
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 10px;
            background-color: rgb(14,59,82);
            color: rgb(117,137,145);
            transform: translateY(-35px);
            opacity: 0;
            text-align: center;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
        }
    
        .item.visible {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    
}

@media screen and (min-width: 1100px){
    .footer{
        width: 100%;
        height: fit-content;
        display: block;
        padding: 100px 50px 30px 50px;
        background-color: var(--thm-base);
    
    
        .footer-left{
            width: 100%;
            height: fit-content;
            transform: translateY(-40px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
            margin-right: 100px;
            padding-bottom: 50px;
    
    
            h2{
                color: var(--thm-gray-bg);
                margin-bottom: 20px;
                font-size: 20px;
            }
    
            p{
                color: rgb(117,137,145);
                font-weight: 600;
            }
        }
    
        .footer-left.visible {
            transform: translateY(0);
            opacity: 1;
        }
    
        .footer-right{
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 50px;
            transform: translateY(-40px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
        }
        
        .navs, .links, .essensials{
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-align: left;
        }
        
        h2{
            color: var(--thm-gray-bg);
            margin-bottom: 20px;
            font-size: 20px;
        }
        
        a {
            text-decoration: none;
            color: rgb(117,137,145);
            font-weight: 800;
            position: relative;
            margin-bottom: 5px;
            font-size: 15px;
            padding: 1px 0;
            width: fit-content;
            transition: color 0.5s ease-in-out;
        }
    
        a::after {
            content: ''; 
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0; 
            height: 3px; 
            background-color: rgb(255,195,0); 
            transition: width 0.5s ease; 
            color: rgb(255,195,0);
        }
        
        a:hover{
            color: rgb(255,195,0);
        }
        
        a:hover::after {
            width: 100%; 
            color: rgb(255,195,0);
        }
        
        
        .footer-right.visible {
            transform: translateY(0);
            opacity: 1;
        }
    
    }
    
    .copyright{
        width: 100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--thm-base);
        padding: 30px 50px 100px 50px;
    
        .item{
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 10px;
            background-color: rgb(14,59,82);
            color: rgb(117,137,145);
            transform: translateY(-35px);
            opacity: 0;
            text-align: center;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
        }
    
        .item.visible {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    
}

@media screen and (min-width: 1200px) {
    .footer{
        width: 100%;
        height: fit-content;
        display: flex;
        padding: 100px 70px 30px 70px;
        background-color: var(--thm-base);
    
    
        .footer-left{
            width: 30%;
            height: fit-content;
            transform: translateY(-40px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
            margin-right: 100px;
    
    
            h2{
                color: var(--thm-gray-bg);
                margin-bottom: 20px;
                font-size: 20px;
            }
    
            p{
                color: rgb(117,137,145);
                font-weight: 600;
            }
        }
    
        .footer-left.visible {
            transform: translateY(0);
            opacity: 1;
        }
    
        .footer-right{
            width: 70%;
            height: fit-content;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            transform: translateY(-40px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
        }
        
        .navs, .links, .essensials{
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-align: left;
        }
        
        h2{
            color: var(--thm-gray-bg);
            margin-bottom: 20px;
            font-size: 20px;
        }
        
        a {
            text-decoration: none;
            color: rgb(117,137,145);
            font-weight: 800;
            position: relative;
            margin-bottom: 5px;
            font-size: 15px;
            padding: 1px 0;
            width: fit-content;
            transition: color 0.5s ease-in-out;
        }
    
        a::after {
            content: ''; 
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0; 
            height: 3px; 
            background-color: rgb(255,195,0); 
            transition: width 0.5s ease; 
            color: rgb(255,195,0);
        }
        
        a:hover{
            color: rgb(255,195,0);
        }
        
        a:hover::after {
            width: 100%; 
            color: rgb(255,195,0);
        }
        
        
        .footer-right.visible {
            transform: translateY(0);
            opacity: 1;
        }
    
    }
    
    .copyright{
        width: 100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--thm-base);
        padding: 30px 70px 100px 70px;
    
        .item{
            width: 100%;
            height: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            background-color: rgb(14,59,82);
            color: rgb(117,137,145);
            transform: translateY(-35px);
            opacity: 0;
            transition: transform 0.6s ease-out, opacity 0.6s ease-out;
        }
    
        .item.visible {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    
}