footer{margin-top: var(--gap-20);}
footer{background-color: var(--dark-gray-clr);}
footer .container{display: grid; grid-template-columns: 1fr 1fr 1fr; padding: var(--gap-40); gap: 3%;}

footer h4{font-weight: 500;}
footer .middle h4{font-size: clamp(16px, 1.3vw, 23px); color: var(--white-clr);}
footer .middle span {font-size: var(--font-18); color: var(--white-clr); align-items: flex-start; gap: 12px; display: flex; }

footer .right{ display: flex; flex-direction: column; gap:18px;}
footer .right h4 {font-size: var(--font-18); color: var(--white-clr);}
footer .right p {font-size: 9px; color: var(--white-clr); margin-top: 3px; line-height: 1.5;}
footer .contact-detail{margin-top: var(--gap-13);}

.footer2 p{font-size: var(--font-18); color: var(--white-clr); text-align: center; line-height: 1.5; padding: var(--gap-13);border-top: 1px solid #707070;}
footer .contact-detail a{text-decoration: none;color: inherit;}


@media only screen and (max-width: 1599px) {
    
}

@media only screen and (max-width: 1500px) {
    footer .container {gap: 6%;}
    footer .left a{width: 20%;}
}

@media only screen and (max-width: 1300px) {
    footer .container {gap: 3%;}
}

@media only screen and (max-width: 1279px) {
     footer .container .left img{width: 80%;}
}

@media only screen and (max-width: 1023px) {
    footer .container .left img{width: 80%;}
}

@media only screen and (max-width: 900px) {
    

}

@media only screen and (max-width: 700px) {
    footer .container{display: flex; flex-direction: column; align-items: center;}
    footer .container .left{text-align: center;}
    footer .container .left img{width: 80%;}
    footer .middle{margin-top: 30px;}
    footer .middle h4{text-align: center;}
    footer .right{text-align: center; margin-top: 30px;}
}

@media only screen and (max-width: 479px) {
    footer .container {padding: 10px 0px !important;gap: 0% !important;}
footer .container .left {grid-column: span 2;}
footer .middle {grid-column: span 2; margin-top: 10px !important;}
footer .container .right {display: grid;grid-template-columns: 1fr 1fr; margin-top: 15px;}
footer .container .right p {text-align: left;line-height: 1;}
footer .contact-detail br{display:none}
footer .contact-detail img{width: 15px;}
    footer .container .left img {
        width: 50% !important;
    }
}