/* only small desktops */
@media (min-width: 992px) and (max-width: 1199px) {
  #hero-area .contents .head-title {
    font-size: 40px;
  }
  .services-item .services-content h3 a {
    font-size: 14px;
  }
}

/* tablets */
@media (max-width: 991px) {
	.banner_content h1{
		font-size: 30px;
	}
	.banner_content p {
		max-width: 100%;
		margin: 0 auto;
	}
	.banner_content{
		margin-top: 130px;
	}
	.about-content {
		margin-top: 30px;
	}
	.section-title {
		font-size: 30px;
		margin-bottom: 30px;
	}
	.section-title:after {
		content: "";
		position: absolute;
		padding: 38px;
	}
	.services-item {
		margin-bottom: 30px;
	}
	.testimonial .description {
		text-align: center;
		padding: 20px 0;
	}
}

/* only small tablets */
@media (min-width: 768px) and (max-width: 991px) {
	.section-title {
		font-size: 30px;
		margin-bottom: 70px;
	}
	.services-item .services-content h3 a {
		font-size: 18px;
	}
	.services-item {
		margin-bottom: 30px;
	}
	
}

/* mobile or only mobile */
@media (max-width: 767px) {
	/* Force dark background on mobile navbar */
	.navbar,
	.navbar.bg-faded,
	.navbar-light.bg-faded {
		background-color: #000 !important;
		background: #000 !important;
		transition: none !important;
	}
	
	/* Fix navbar collapse background and prevent auto-close */
	.navbar-collapse {
		background-color: #000 !important;
		background: #000 !important;
		text-align: center !important;
		transition: none !important;
		position: relative !important;
		z-index: 1000 !important;
		border: none !important;
		box-shadow: none !important;
	}
	
	.navbar-collapse.collapsing,
	.navbar-collapse.show {
		background-color: #000 !important;
		background: #000 !important;
		text-align: center !important;
		border: none !important;
		box-shadow: none !important;
	}
	
	/* Ensure nav links are white on mobile */
	.navbar-light .navbar-nav .nav-link {
		color: #fff !important;
		padding: 12px 0 !important;
		text-align: center !important;
		display: block !important;
		width: 100% !important;
		margin: 0 auto !important;
		transition: color 0.3s ease !important;
		background: transparent !important;
	}
	
	.navbar-light .navbar-nav .nav-link:hover,
	.navbar-light .navbar-nav .nav-link:focus {
		color: #ffff00 !important;
		background: transparent !important;
	}
	
	/* Center align dropdown navigation items on mobile */
	.navbar-nav {
		text-align: center !important;
		display: block !important;
		width: 100% !important;
		margin: 0 auto !important;
		padding: 10px 0 !important;
		background-color: #000 !important;
		background: #000 !important;
	}
	
	.navbar-nav .nav-item {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
	}
	
	/* Prevent Bootstrap's flex layout from interfering */
	.navbar-collapse.collapsing .navbar-nav,
	.navbar-collapse.show .navbar-nav {
		flex-direction: column !important;
		align-items: center !important;
		width: 100% !important;
		background-color: #000 !important;
		background: #000 !important;
	}
	
	/* Override Bootstrap's default navbar-nav flex properties */
	.navbar-expand-md .navbar-nav {
		flex-direction: column !important;
		align-items: center !important;
	}
	
	.navbar-toggler {
		transition: all 0.3s ease !important;
	}
	
	/* Preserve hamburger button animation */
	.navbar-toggler-icon {
		transition: all 0.3s ease !important;
	}
	
	.navbar-toggler-icon::before,
	.navbar-toggler-icon::after {
		transition: all 0.3s ease !important;
	}
	
	/* Completely disable Bootstrap collapse animations */
	.navbar-collapse {
		transition: none !important;
		height: auto !important;
		overflow: visible !important;
	}
	
	.navbar-collapse.collapsing {
		display: block !important;
		visibility: visible !important;
		text-align: center !important;
		transition: none !important;
		height: auto !important;
		overflow: visible !important;
		background-color: #000 !important;
		background: #000 !important;
		transform: none !important;
		-webkit-transform: none !important;
		-moz-transform: none !important;
		-o-transform: none !important;
	}
	
	.navbar-collapse.show {
		height: auto !important;
		overflow: visible !important;
	}
	
	.navbar-collapse.collapsing .navbar-nav {
		text-align: center !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 100% !important;
		justify-content: center !important;
		background-color: #000 !important;
		background: #000 !important;
	}
	
	.navbar-collapse.collapsing .navbar-nav .nav-item {
		text-align: center !important;
		width: 100% !important;
		display: block !important;
		background: transparent !important;
	}
	
	.navbar-collapse.collapsing .navbar-nav .nav-link {
		text-align: center !important;
		width: 100% !important;
		display: block !important;
		color: #fff !important;
		background: transparent !important;
	}
	.funfact {
		margin-bottom: 30px;
	}
	.section-title {
		margin-bottom: 70px;
	}
	.navbar-brand img {
		margin: 5px 0;
	}
	.banner_content h1 {
		font-size: 60px;
	}
	.btn-common {
		font-size: 12px;
		padding: 8px 26px;
	}
	.blog-image img{
		width: 100%;
	}
	.single_blog {
		margin-bottom: 30px;
	}
	.blog-thumb h4{
		font-size: 18px;
	}
	.contact-form-area {
		padding: 40px 20px;
	}
	.footer-right-area {
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 480px) { 
	.banner_content h3{
		font-size: 18px;
	}
	.banner_content h1{
		font-size: 24px;
	}
	.about-content h3 {
		font-size: 22px;
		line-height: 30px;
	}
	.blog-thumb h4{
		font-size: 16px;
	}
	.contact-form-area h4{
		font-size: 14px;
	}
	.footer-right-contact .single-contact{
		margin: 10px 0px;
		padding: 3px 50px;
	}
	.footer-right-contact .single-contact p{
		font-size: 12px;
	}	
}

/* ==========================================================================\nResponsive Contact Section Enhancements\n========================================================================== */

/* Large screens (desktops) */
@media (max-width: 1200px) {
  #contact .glassmorphism-card {
    padding: 1.5rem !important;
    min-height: 300px;
  }
  #contact h1 {
    font-size: 2.5rem !important;
  }
  #contact h2 {
    font-size: 1.8rem !important;
  }
  #contact h3 {
    font-size: 1.4rem !important;
  }
  #contact p, #contact label {
    font-size: 1rem !important;
  }
  #contact .w-14 {
    width: 3rem !important;
    height: 3rem !important;
  }
  #contact svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
}

/* Medium screens (tablets) */
@media (max-width: 992px) {
  #contact .glassmorphism-card {
    padding: 1.2rem !important;
    min-height: 260px;
  }
  #contact h1 {
    font-size: 2.2rem !important;
  }
  #contact h2 {
    font-size: 1.5rem !important;
  }
  #contact h3 {
    font-size: 1.2rem !important;
  }
  #contact p, #contact label {
    font-size: 0.9rem !important;
  }
  #contact .w-14 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  #contact svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
  }
  #contact .lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* Small tablets */
@media (max-width: 768px) {
  #contact .glassmorphism-card {
    padding: 1rem !important;
    min-height: 220px;
    margin-bottom: 1.5rem !important;
  }
  #contact h1 {
    font-size: 1.8rem !important;
  }
  #contact h2 {
    font-size: 1.3rem !important;
  }
  #contact h3 {
    font-size: 1.1rem !important;
  }
  #contact p, #contact label {
    font-size: 0.85rem !important;
  }
  #contact .w-14 {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }
  #contact svg {
    width: 1rem !important;
    height: 1rem !important;
  }
  #contact .md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  #contact .space-y-6 > * + * {
    margin-top: 1rem !important;
  }
}

/* Mobile phones */
@media (max-width: 576px) {
  #contact .glassmorphism-card {
    padding: 0.8rem !important;
    min-height: 180px;
    margin-bottom: 1rem !important;
    border-radius: 12px !important;
  }
  #contact h1 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  #contact h2 {
    font-size: 1.1rem !important;
  }
  #contact h3 {
    font-size: 1rem !important;
  }
  #contact p, #contact label {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  #contact .w-14 {
    width: 2rem !important;
    height: 2rem !important;
  }
  #contact svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
  }
  #contact .w-16 {
    width: 3rem !important;
    height: 3rem !important;
  }
  #contact .w-16 svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  #contact input, #contact textarea {
    padding: 0.6rem !important;
    font-size: 0.8rem !important;
  }
  #contact button {
    padding: 0.8rem 1.5rem !important;
    font-size: 0.8rem !important;
  }
  #contact .space-x-3 {
    gap: 0.5rem !important;
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  #contact .glassmorphism-card {
    padding: 0.6rem !important;
    min-height: 160px;
    margin-bottom: 0.8rem !important;
  }
  #contact h1 {
    font-size: 1.3rem !important;
  }
  #contact h2 {
    font-size: 1rem !important;
  }
  #contact h3 {
    font-size: 0.9rem !important;
  }
  #contact p, #contact label {
    font-size: 0.75rem !important;
  }
  #contact .w-14 {
    width: 1.8rem !important;
    height: 1.8rem !important;
  }
  #contact svg {
    width: 0.8rem !important;
    height: 0.8rem !important;
  }
  #contact .w-16 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  #contact .w-16 svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
  }
  #contact input, #contact textarea {
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }
  #contact button {
    padding: 0.7rem 1.2rem !important;
    font-size: 0.75rem !important;
  }
  #contact .max-w-5xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Additional responsive styles for Email Me, Let's Build Together, and Connect With Me cards */
@media (max-width: 1200px) {
  #contact .space-y-8 > .glassmorphism-card {
    padding: 1.5rem !important;
  }
  #contact .space-y-8 .glassmorphism-card h3 {
    font-size: 1.2rem !important;
  }
  #contact .space-y-8 .glassmorphism-card p {
    font-size: 0.95rem !important;
  }
  #contact .space-y-8 .glassmorphism-card a {
    font-size: 1rem !important;
  }
}

@media (max-width: 992px) {
  #contact .space-y-8 > .glassmorphism-card {
    padding: 1.2rem !important;
    margin-bottom: 1.5rem !important;
  }
  #contact .space-y-8 .glassmorphism-card h3 {
    font-size: 1.1rem !important;
  }
  #contact .space-y-8 .glassmorphism-card p {
    font-size: 0.9rem !important;
  }
  #contact .space-y-8 .glassmorphism-card a {
    font-size: 0.95rem !important;
  }
  #contact .space-x-3 > a {
    width: 2.8rem !important;
    height: 2.8rem !important;
  }
}

@media (max-width: 768px) {
  #contact .space-y-8 > .glassmorphism-card {
    padding: 1rem !important;
    margin-bottom: 1.2rem !important;
  }
  #contact .space-y-8 .glassmorphism-card h3 {
    font-size: 1rem !important;
  }
  #contact .space-y-8 .glassmorphism-card p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
  #contact .space-y-8 .glassmorphism-card a {
    font-size: 0.85rem !important;
  }
  #contact .space-x-3 > a {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  #contact .space-x-3 svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
  }
}

@media (max-width: 576px) {
  #contact .space-y-8 > .glassmorphism-card {
    padding: 0.8rem !important;
    margin-bottom: 1rem !important;
  }
  #contact .space-y-8 .glassmorphism-card h3 {
    font-size: 0.9rem !important;
  }
  #contact .space-y-8 .glassmorphism-card p {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }
  #contact .space-y-8 .glassmorphism-card a {
    font-size: 0.8rem !important;
  }
  #contact .space-x-3 > a {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }
  #contact .space-x-3 svg {
    width: 1rem !important;
    height: 1rem !important;
  }
}

@media (max-width: 480px) {
  #contact .space-y-8 > .glassmorphism-card {
    padding: 0.6rem !important;
    margin-bottom: 0.8rem !important;
  }
  #contact .space-y-8 .glassmorphism-card h3 {
    font-size: 0.8rem !important;
  }
  #contact .space-y-8 .glassmorphism-card p {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }
  #contact .space-y-8 .glassmorphism-card a {
    font-size: 0.75rem !important;
  }
  #contact .space-x-3 > a {
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.4rem !important;
  }
  #contact .space-x-3 svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
  }
}

/* Contact form specific responsive adjustments */
@media (max-width: 768px) {
  #contact .lg\:col-span-2 {
    margin-bottom: 2rem;
  }
  #contact .space-y-8 > * + * {
    margin-top: 1.5rem !important;
  }
}

@media (max-width: 576px) {
  #contact .space-y-8 > * + * {
    margin-top: 1rem !important;
  }
  #contact .mb-16 {
    margin-bottom: 2rem !important;
  }
}

/* More specific responsive overrides for Tailwind classes */
@media (max-width: 1200px) {
  #contact .max-w-5xl {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  #contact .text-4xl,
  #contact .md\:text-5xl {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  #contact .text-2xl {
    font-size: 1.5rem !important;
  }
  #contact .text-xl {
    font-size: 1.2rem !important;
  }
  #contact .p-8 {
    padding: 1.5rem !important;
  }
  #contact .rounded-2xl,
  #contact .rounded-3xl {
    border-radius: 1rem !important;
  }
}

@media (max-width: 992px) {
  #contact .max-w-5xl {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  #contact .text-4xl,
  #contact .md\:text-5xl {
    font-size: 2rem !important;
  }
  #contact .text-2xl {
    font-size: 1.3rem !important;
  }
  #contact .text-xl {
    font-size: 1.1rem !important;
  }
  #contact .text-lg {
    font-size: 1rem !important;
  }
  #contact .p-8 {
    padding: 1.2rem !important;
  }
  #contact .grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  #contact .w-14.h-14 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  #contact .w-16.h-16 {
    width: 3rem !important;
    height: 3rem !important;
  }
}

@media (max-width: 768px) {
  #contact .max-w-5xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #contact .text-4xl,
  #contact .md\:text-5xl {
    font-size: 1.8rem !important;
  }
  #contact .text-2xl {
    font-size: 1.2rem !important;
  }
  #contact .text-xl {
    font-size: 1rem !important;
  }
  #contact .text-lg {
    font-size: 0.9rem !important;
  }
  #contact .p-8 {
    padding: 1rem !important;
  }
  #contact .py-4 {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
  }
  #contact .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #contact .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  #contact .w-14.h-14 {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }
  #contact .w-16.h-16 {
    width: 2.8rem !important;
    height: 2.8rem !important;
  }
  #contact .space-x-3 > * {
    margin-left: 0.5rem !important;
  }
  #contact .mb-16 {
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 576px) {
  #contact .max-w-5xl {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }
  #contact .text-4xl,
  #contact .md\:text-5xl {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  #contact .text-2xl {
    font-size: 1.1rem !important;
  }
  #contact .text-xl {
    font-size: 0.9rem !important;
  }
  #contact .text-lg {
    font-size: 0.85rem !important;
  }
  #contact .p-8 {
    padding: 0.8rem !important;
  }
  #contact .py-4 {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }
  #contact .px-8 {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }
  #contact .w-14.h-14 {
    width: 2rem !important;
    height: 2rem !important;
  }
  #contact .w-16.h-16 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  #contact .w-8.h-8,
  #contact .w-7.h-7 {
    width: 1.2rem !important;
    height: 1.2rem !important;
  }
  #contact .space-x-3 > * {
    margin-left: 0.3rem !important;
  }
  #contact .rounded-2xl,
  #contact .rounded-3xl {
    border-radius: 0.8rem !important;
  }
  #contact .mb-16 {
    margin-bottom: 1.5rem !important;
  }
  #contact .space-y-6 > * + * {
    margin-top: 0.8rem !important;
  }
  #contact .space-y-8 > * + * {
    margin-top: 0.8rem !important;
  }
}

@media (max-width: 480px) {
  #contact .max-w-5xl {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }
  #contact .text-4xl,
  #contact .md\:text-5xl {
    font-size: 1.3rem !important;
  }
  #contact .text-2xl {
    font-size: 1rem !important;
  }
  #contact .text-xl {
    font-size: 0.85rem !important;
  }
  #contact .text-lg {
    font-size: 0.8rem !important;
  }
  #contact .p-8 {
    padding: 0.6rem !important;
  }
  #contact .py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  #contact .px-8 {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }
  #contact .w-14.h-14 {
    width: 1.8rem !important;
    height: 1.8rem !important;
  }
  #contact .w-16.h-16 {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }
  #contact .w-8.h-8,
  #contact .w-7.h-7 {
    width: 1rem !important;
    height: 1rem !important;
  }
  #contact .w-5.h-5 {
    width: 0.9rem !important;
    height: 0.9rem !important;
  }
  #contact .w-6.h-6 {
    width: 1rem !important;
    height: 1rem !important;
  }
  #contact .space-x-3 > * {
    margin-left: 0.2rem !important;
  }
  #contact .rounded-2xl,
  #contact .rounded-3xl {
    border-radius: 0.6rem !important;
  }
  #contact .mb-16 {
    margin-bottom: 1rem !important;
  }
  #contact .space-y-6 > * + * {
    margin-top: 0.6rem !important;
  }
  #contact .space-y-8 > * + * {
    margin-top: 0.6rem !important;
  }
}

/* ==========================================================================
Project Section Icons Responsive Styles
========================================================================== */

/* Large screens (desktops) */
@media (max-width: 1200px) {
  #portfolio .fa.text-5xl {
    font-size: 2.8rem !important;
  }
  #portfolio .w-20.h-20 {
    width: 4.5rem !important;
    height: 4.5rem !important;
  }
}

/* Medium screens (tablets) */
@media (max-width: 992px) {
  #portfolio .fa.text-5xl {
    font-size: 2.5rem !important;
  }
  #portfolio .w-20.h-20 {
    width: 4rem !important;
    height: 4rem !important;
  }
}

/* Small tablets */
@media (max-width: 768px) {
  #portfolio .fa.text-5xl {
    font-size: 2.2rem !important;
  }
  #portfolio .w-20.h-20 {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }
}

/* Mobile phones */
@media (max-width: 576px) {
  #portfolio .fa.text-5xl {
    font-size: 2rem !important;
  }
  #portfolio .w-20.h-20 {
    width: 3rem !important;
    height: 3rem !important;
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  #portfolio .fa.text-5xl {
    font-size: 1.8rem !important;
  }
  #portfolio .w-20.h-20 {
    width: 2.8rem !important;
    height: 2.8rem !important;
  }
}