/* Responsive Styles */
@media (max-width: 768px) {
    /* cumon css */
    html{font-size: 9px;}
    .container{padding: 0 2rem;}
    .sec-gap{ margin-top: 5rem; }

    .menu ul { flex-direction: column; position: absolute; left: 0; top: 0; background: #dea141; height: 100vh; width: 60%; transform: translateX(-100%); transition: 0.5s all ease; padding: 5rem 3rem 0 3rem;}
    .menu-toggle { display: block; }
    .menu-toggle i { color: var(--text-color1); font-size: 2.5rem;  position: relative; z-index: 1;}
    .stickynav .menu-toggle i { color: var(--text-color2); position: relative; z-index: 1;}
    .menu-open .menu ul {transform: translateX(0);}
    .menu-open .dropshadow{width: 100%; height: 100vh; background: #0000003d; position: absolute; top: 0; left: 0;}
    .menu-open{overflow: hidden;}

    .hero-section .content, .content{width: 100%; max-width: 100%;}
    .about-wrap { flex-direction: column; }
    .about-img { width: 100%; margin: 0px auto; }
    footer .footer-content { flex-direction: column-reverse; }
    footer .contact-form { width: 100%; padding-bottom: 3rem;}
    footer .footer-logo { width: 100%; padding: 3rem 0 1rem; }
    .illustrator img { bottom: -19%; right: 0; z-index: -1; opacity: 30%; }
    .count-content.sec-df-js { flex-direction: column-reverse; }
    .latest-news { width: 100%; margin-top: 8rem; }
    .card-wrap .card{margin: 1rem; width: calc(50% - 2rem);}
    .hero-section .content {padding-top: 12rem; }
    .about-img img {position: relative; z-index: -1; }
    .gallery-item { width: 50% !important; padding: 0 8px; margin-bottom: 8px; }
    .gallery-wrap { display: flex ; flex-wrap: wrap; justify-content: center; gap: 0; }
    .total-count{    background-position: 94%;}
    footer{background-position: 30%; }
    footer .footer-content {  padding-top: 5rem; }
    .mobile{display: block;}
    .desktop{display: none;}
    .gallery-wrap .gallery-item a img{height: 100px;}
    .founder-wrap{flex-direction: column; margin-top: 4rem;}
    .founder-img{width: 100%;}
    .desktop-object{display: none;}
    .mobile-object{display: block;}
    .objectiv-wrap{ margin-top: 8rem;}
    .hero-section .content h1{-webkit-text-stroke: 1px var(--text-color1); -moz-text-stroke: 1px var(--text-color1);}

}