/*320 - 767*/
/* Fix for all mobile browsers */
@media only screen and (hover: none) and (pointer: coarse) {
    /* Enable GPU acceleration on mobile */
    .topnav, .hamenu, .progress-wrap, .call-btn, #popup_wrap, #popup_content {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -ms-perspective: 1000;
        perspective: 1000;
    }
    
    /* Fix for touchscreen scrolling issues */
	html, body {
		overflow-x: hidden;
		position: relative;
		/* Allow full scroll height */
		min-height: 100%;
		height: auto;
		-webkit-overflow-scrolling: touch;
	}
    
    /* Improve popup display on mobile */
    #popup_content {
        max-width: 90% !important;
    }
    
    /* Ensure WhatsApp button doesn't interfere with navigation */
    .call-btn.whatsApp {
        z-index: 9999;
        position: fixed !important;
        top: 5px !important;
        right: 15px !important;
        bottom: auto !important;
		display: block !important;
	}
	/* Removed custom green circle mobile styling to match desktop appearance */
    
    /* Keep navbar fixed on mobile */
    .topnav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999999 !important;
        background: rgba(0, 0, 0, 0.9) !important;
    }
    
    /* Ensure navbar elements stay visible */
    .topnav .logo,
    .topnav .menu-icon {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/*320 - 767*/
@media screen and (max-width: 767px) {
	.full-showcase .parallax-slider .swiper-slide .bg-img{
		background-size: contain;
    background-position: center top;
	
		
		display: block
	}
	.topnav{
		position: fixed !important;
		background: rgba(0, 0, 0, 0.9);
		backdrop-filter: blur(10px);
	}
	
	/* Ensure content doesn't hide behind fixed navbar */
	.full-showcase .parallax-slider .swiper-slide {
		padding-top: 100px;
	}
	
	/* Alternative selector for content spacing */
	body.loading #smooth-wrapper {
		padding-top: 80px;
	}
	
	/* Ensure main banner has proper spacing */
	.full-showcase {
		margin-top: 80px;
	}
	.caption h1{
		font-size: 30px
	}
	.full-showcase .parallax-slider .swiper-slide{
		min-height: 40vh;
		padding: 0
	}
	.full-showcase .container.ontop{
		margin-top: 70px
	}
	.sub-title{
		letter-spacing: 0
	}
	.more-btn{
		padding: 12px 20px
	}
	.project-video{
		width: 40px;
    height: 40px;
    line-height: 40px;
	}
	.full-showcase .swiper-controls{
	display: none	
	}
	.about.section-padding{
		padding: 30px 0 80px
	}
	.section-padding{
		padding: 80px 0
	}
	.about h3{
		font-size: 15px
	}
	.vid-sec{
		margin-top: 0
	}
	.vid-sec .vid-intro{
		margin-top: 0
	}
	.vid-intro{
		margin-bottom: 50px
	}
	.vid-intro p{
		font-size: 15px
	}
	.work .box .item img {
    width: 20px;
    position: absolute;
    filter: invert(1);
    left: 4px;
    top: 7px;
}
	.facts-section{
		margin-top: 0
	}
	.testimonials .sec-head h2 {
    font-size: 30px;
}
	.testimonials .sec-head h2 img {
    width: 13px;
    position: absolute;
    filter: invert(1);
    margin-left: -19px;
    margin-top: 10px;
}
	.call-action .box .item img{
		width: 13px;
    position: absolute;
    filter: invert(1);
    margin-left: -18px;
    margin-top: 13px;
	}
	.footer-container .logo{
		display: none
	}
	.footer-container .mt-80{
		margin-top: 0 !important
	}
	.footer-container .pb-80{
		padding-bottom: 50px !important
	}
	.hamenu .menu-links .main-menu > li .link{
		font-size:18px
	}
	.marquee-head{
		overflow: hidden
	}
	.progress-wrap{
		right: 25px
	}
	.call-btn{
		right: 15px;
		top: 5px !important;
		position: fixed !important;
		z-index: 999999 !important;
		bottom: auto !important;
	}
	.call-btn.whatsApp {
		right: 15px !important;
		top: 5px !important;
		bottom: auto !important;
		position: fixed !important;
		z-index: 999999 !important;
	}
	.topnav .menu-icon{
		margin-left: 125px
	}
	.topnav .logo {
		position: relative;
		z-index: 999999;
	}
	.topnav .container {
		position: relative;
		z-index: 999999;
	}
	.about-header .container.mt-100{
		margin-top: 0 !important
	}
	.about-header .img img{
		    object-fit: contain;
		object-position: top;
	}
	.about-header .img{
		height: auto;
		min-height: auto
	}
	.contact-header .container.mt-100{
		margin-top: 0 !important
	}
	.about-header .cont h1, .header-blog .cont h1, .contact-header .cont h1{
		    font-size: 25px;
    text-align: center;
	}
	.about-header .img.mt-80{
		margin-top: 30px !important
	}
	.about-header .cont h6{
		text-align: center
	}
}

/* Additional fixes for very small screens */
@media screen and (max-width: 480px) {
    .topnav {
        padding: 15px 0 !important;
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 999999 !important;
        background: rgba(0, 0, 0, 0.95) !important;
    }
    
    .topnav .logo {
        max-width: 150px;
    }
    
    .topnav .logo img {
        max-height: 40px;
    }
    
    .call-btn.whatsApp {
        right: 10px !important;
        top: 5px !important;
        bottom: auto !important;
        z-index: 999999 !important;
    }
    
    .call-btn.whatsApp .phonering-alo-ph-circle,
    .call-btn.whatsApp .phonering-alo-ph-circle-fill {
        width: 60px !important;
        height: 60px !important;
    }
    
    .call-btn.whatsApp .phonering-alo-ph-img-circle {
        width: 35px !important;
        height: 35px !important;
        top: 25px !important;
        left: 25px !important;
    }
    
    /* Ensure main content doesn't overlap with navbar on very small screens */
    .full-showcase {
        margin-top: 90px !important;
    }
    
    .full-showcase .parallax-slider .swiper-slide {
        padding-top: 110px !important;
    }
}