/*==================================================
LARGE DESKTOP

1600px and above
====================================================*/

@media (min-width:1600px){

    .container{

        max-width:1500px;

    }

    .hero-title{

        font-size:4.5rem;

    }

    .section{

        padding: 5rem 0 5rem 0;

    }

}


/*==================================================
STANDARD DESKTOP

1400px - 1599px
====================================================*/

@media (max-width:1599px){

    .container{

        max-width:1320px;

    }

}


/*==================================================
LAPTOP

1200px - 1399px
====================================================*/

@media (max-width:1399px){

    html{

        font-size:15px;

    }

    .container{

        max-width:1140px;

    }
	.logo img{
		margin-right:200px;
	}
    .hero{

        min-height:90vh;

    }

    .hero-title{

        font-size:3.8rem;

    }

}


/*==================================================
SMALL LAPTOP

992px - 1199px
====================================================*/

@media (max-width:1199px){

    .container{

        max-width:960px;

    }

    .section{

        padding:6rem 0;

    }
	
	.logo img{
		margin-right:160px;
	}

    .hero-content{

        gap:3rem;

    }

    .service-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .industry-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/*==================================================
GLOBAL IMAGE SAFETY
====================================================*/

img{

    max-width:100%;

    height:auto;

}


/*==================================================
TABLET

991px and below
====================================================*/

@media (max-width:991px){

    html{

        font-size:15px;

    }

    .container{

        max-width:720px;

    }
	
	.navbar{
		border-radius: 10px 10px 10px 10px;
		position: relative;
	}

    /* Navigation */
	
	.logo img{
		margin-right:110px;
	}

    .nav-menu{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }
	.hamburger{
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        background:none;
        border:none;
        cursor:pointer;
        z-index:1001;
		margin-right:20px;
    }

        .hamburger span{
		position:relative;
		width:24px;
		height:3px;
		background:#fff;
		transition:.3s;
	}

	.hamburger span:nth-child(1){
		top:2px;
	}

	.hamburger span:nth-child(2){
		top:3px;
	}

	.hamburger span:nth-child(3){
		top:4px;
	}

	/* X icon */

	.hamburger.active span:nth-child(1){
		transform:rotate(45deg);
		top:9px;
	}

	.hamburger.active span:nth-child(2){
		opacity:0;
	}

	.hamburger.active span:nth-child(3){
		transform:rotate(-45deg);
		top:-7px;
	}
	
	.hamburger:hover span{
		background: var(--primary);
	}

    .nav-menu{
		position:absolute;
		top:85px;
		left:0;
		right:0;
		width:100%;
		background:rgb(30 83 193 / 70%);
		flex-direction:column;
		gap:20px;
		padding:20px 0;
		display:none;
		text-align:center;
		box-sizing:border-box;
		border-radius: 0 0 10px 10px;
		
		 /* Hidden state */
        overflow:hidden;

		max-height:0;
        transition:max-height .4s ease, padding .4s ease;
		box-shadow: inset 0 10px  5px rgba(30,83,193,0.9);
    }

    .nav-menu.active{
        display:flex;
		max-height:450px; /* Adjust to fit your menu */
		opacity:1;
    }

    .btn.btn-primary{
        display:flex;
    }

    /* Hero */

    .hero-content{

        grid-template-columns:1fr;

        text-align:left;

        gap:4rem;

    }
	.hero-grid{
		grid-template-columns: 1fr;
	}

    .hero-buttons{

        justify-content:left;

        flex-wrap:wrap;

    }

    .hero-image{

        order:-1;

        max-width:520px;

        margin:0 auto;

    }

    /* About */

    .about-content{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .about-image{

        max-width:520px;

        margin:0 auto;

    }

    .about-text{

        text-align:center;

    }

    /* Statistics */

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

        gap:2rem;

    }

    /* Services */

    .service-grid{

        grid-template-columns:repeat(2,1fr);

    }

    /* Industries */

    .industry-grid{

        grid-template-columns:repeat(2,1fr);

    }

    /* Contact */

    .contact-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

}


/*==================================================
MOBILE

767px and below
====================================================*/

@media (max-width:767px){

    html{

        font-size:14px;

    }

    .container{

        width:100%;

        padding-inline:1.25rem;

    }

    /* Navigation */

    .header{

        padding: .85rem 0;

    }
	.navbar{
		position: relative;
	}

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }
	
	 .hamburger{
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        background:none;
        border:none;
        cursor:pointer;
        z-index:1001;
		margin-right:20px;
    }
	
    .hamburger span{
		position:relative;
		width:24px;
		height:3px;
		background:#fff;
		transition:.3s;
	}

	.hamburger span:nth-child(1){
    top:2px;
	}

	.hamburger span:nth-child(2){
		top:3px;
	}

	.hamburger span:nth-child(3){
		top:4px;
	}

	/* X icon */

	.hamburger.active span:nth-child(1){
		transform:rotate(45deg);
		top:9px;
	}

	.hamburger.active span:nth-child(2){
		opacity:0;
	}

	.hamburger.active span:nth-child(3){
		transform:rotate(-45deg);
		top:-7px;
	}
	
	.hamburger:hover span{
		background: var(--primary);
	}

    .nav-menu{
		position:absolute;
		top:85px;
		left:0;
		right:0;
		width:100%;
		background:rgb(30 83 193 / 70%);
		flex-direction:column;
		gap:20px;
		padding:20px 0;
		display:none;
		text-align:center;
		box-sizing:border-box;
		border-radius: 0 0 10px 10px;
		
		overflow:hidden;

		max-height:0;
        transition:max-height .4s ease, padding .4s ease;
		box-shadow: inset 0 10px  5px rgba(30,83,193,0.9);
    }

    .nav-menu.active{
        display:flex;
		max-height:450px; /* Adjust to fit your menu */
		opacity:1;
    }

    .btn.btn-primary{
        display:flex;
    }

    /* Hero */

    .hero{

        min-height:auto;

        padding-top:7rem;

        padding-bottom:4rem;

    }
	.hero-grid{
		grid-template-columns: 1fr;
	}
	

    .hero-content{

        grid-template-columns:1fr;

        gap:2.5rem;

        text-align:left;

    }

    .hero-title{

        max-width:100%;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

        gap:1rem;

    }

    .hero-buttons .btn{

        width:100%;

        justify-content:center;

    }

    .hero-image{

        max-width:100%;

        margin-inline:auto;

    }

    /* Statistics */

    .stats-grid{

        grid-template-columns:1fr;

    }
	
	.stat-card{
		min-height:100px;
	}

    /* About */

    .about-grid{

        grid-template-columns:1fr;

    }

    .about-text{

        text-align:left;

    }

    /* Services */

    .service-grid{

        grid-template-columns:1fr;

    }

    /* Industries */

    .industries-grid{

        grid-template-columns:1fr;
	}
    
	
	.industry-card{
		min-height:150px;
		padding: 18px 12px;
	}

    /* Process */

    .process-wrapper{

        /*grid-template-columns:1fr;*/
		flex-direction:column;

    }

    /* Testimonials */

    .testimonial-card{

        padding:2rem;

    }

    /* Contact */

    .contact-content{

        grid-template-columns:1fr;

    }

    /* Footer */

    .footer-grid{

        grid-template-columns:1fr;

        gap:2rem;

    }

}

/*==================================================
SMALL MOBILE

575px and below
====================================================*/

@media (max-width:575px){

    html{

        font-size:13.5px;

    }

    .section{

        padding:4rem 0;

    }

    .hero{

        padding-top:6rem;

        padding-bottom:3rem;

    }

    .hero-buttons{

        gap:.875rem;

    }

    .stat-card{

        padding:1.5rem;

    }

    .service-card{

        padding:1.75rem;

    }

    .industry-card{

		display:flex;

    }

    .contact-form{

        padding:1.75rem;

    }

}


/*==================================================
LANDSCAPE PHONES
====================================================*/

@media (max-height:500px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding-top:5rem;

        padding-bottom:3rem;

    }

}


/*==================================================
FORM ELEMENTS
====================================================*/

@media (max-width:767px){

    input,
    textarea,
    select,
    button{

        min-height:48px;

    }

}


/*==================================================
OVERFLOW PREVENTION
====================================================*/

html{

    overflow-x:hidden;

}

body{

    overflow-x:hidden;

}

img{

    display:block;

}


/*==================================================
LARGE LANDSCAPE TABLETS
====================================================*/

@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){

    .hero{

        min-height:85vh;

    }

}


/*==================================================
HIGH DPI DISPLAYS
====================================================*/

@media (-webkit-min-device-pixel-ratio:2),
       (min-resolution:192dpi){

    img{

        image-rendering:auto;

    }

}


/*==================================================
PRINT RESPONSIVE
====================================================*/

@media print{

    .menu-toggle,
    .back-to-top,
    .hero-scroll{

        display:none !important;

    }

}


/*==================================================
ACCESSIBILITY
====================================================*/

@media (prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

}


/*==================================================
SAFE MEDIA
====================================================*/

video,
iframe,
canvas,
svg{

    max-width:100%;

    height:auto;

}


/*==================================================
RESPONSIVE UTILITIES
====================================================*/

.w-100{

    width:100%;

}

.text-center-mobile{

    text-align:inherit;

}

@media (max-width:767px){

    .text-center-mobile{

        text-align:center;

    }

}