@media only screen and (max-width:1200px){
.nav-link{
	margin-right: 1.5rem;
}
.same_height{
        	height: 12rem;
        }
        .pricing-card{
        	padding: 2rem;
        }
}


@media only screen and (max-width: 992px){
	html{
	font-size: 55.5%;
	}
	.my_menu{
	display: block;
	text-align: center;
	margin-top: 4rem;
}
.nav-link{
	margin:0;
	padding:0;
	margin-bottom:1rem;
	font-size: 2.2rem;
}
.download_btn{
	width:100%;
	margin-top:5rem;
}
.forspace{
	display: none;
}
.logoMain{
	max-height: 10rem;
}
.offcanvas-header{
	margin-right: 2rem;
	margin-left: 0rem;
}
.offcanvas-header .main_logo{
	max-height: 7rem;
	width: auto;
}
.menu_icon{
	font-size:2.5rem;
	cursor: pointer;
}
.offcanvas.show .contact_btn{
	background: white;
	color: var(--blue);
}
.offcanvas.show .contact_btn:hover{
	background: transparent;
	outline: .1rem solid white;
	color: white;
}

	.nav_mobile_right{
		display: flex;
		flex-direction: row-reverse;
	}

/* 1.  The mobile menu background (change if you want a different colour) */
@media (max-width: 991.98px) {          /* same breakpoint as Bootstrap’s off‑canvas */
  .offcanvas-body .navbar-nav:last-of-type {
    margin-left: auto;                  /* push to the right */
    display: flex;                      /* keep horizontal alignment */
  }
}

.offcanvas-body.my_menu {
    background: #fff;           /* white background – adjust if you use a different one */
    color: #000;                /* default text colour for items inside the menu */
}

/* 2.  Links inside that menu */
.offcanvas-body.my_menu .navbar-nav .nav-link {
    color: #222;                /* dark text – change as needed */
    font-weight: 700;
    padding: .4rem 0;           /* keep the same padding you already have */
    transition: color .15s ease;/* optional smooth hover effect */
}

/* 3.  Hover / focus states (optional, but improves accessibility) */
.offcanvas-body.my_menu .navbar-nav .nav-link:hover,
.offcanvas-body.my_menu .navbar-nav .nav-link:focus,
.offcanvas-body.my_menu .navbar-nav .nav-link.active {
    color: #0069d9;             /* Bootstrap primary colour – or any colour you like */
}

.offcanvas-body .navbar-nav.ms-auto {
  margin-left: auto;             /* ensures second list sits on the right */
}

.offcanvas-body .navbar-nav:last-of-type {
  margin-left: auto;          /* pushes this entire list to the right */
  display: flex;              /* keep the horizontal row */
}
	.hero_contents{
		width: 85%;
	}
	.hero_section{
	height: auto;
}

.hero_contents{
		width:90%;
	padding-top:0rem;
		
	}
.mt_3m{
	margin-top: 3rem;
}
.pricing-card{
	padding: 3rem;
}
.same_height {
	height: 7rem;
}
.ourapproach_card{
	max-width: 100%;
}
}





@media only screen and (max-width: 768px){
	html{
	font-size: 47.5%;
	}
.offcanvas.show{
	max-width: 45rem;
}
.navbar{
	padding:1.5rem 1rem;
}
.menu_icon{
	font-size: 3rem;
	color: var(--blue);
}
.sticky_navigation .menu_icon{
	color: var(--blue);
}
.navbar-nav .nav-link{
	font-size: 2.2rem;
}
.hero_section{
	height: auto;
}
.hero_contents{
		width:90%;
		
	}
	.sec_heading {
		font-size: 3rem;
		line-height: 3.3rem;
	}
	.px_2{
		padding-left: 1.5rem;
		padding-right: 1.5rem
	}
	.contact_illustartion{display: none}
	.footerheading{
		margin-top: 3rem;
	}
	.contact_main{
		padding: 0rem;
	}
	 .partners_logos {
    display: flex;
  }
  .partners_logos .partner{
    width: 48%;
  }
  .hero_contents{
  	padding:2rem;
  	text-align:center;
  }
  .footer_logo{
  	justify-content: center;
  	display: flex;
  	align-items: center;
  	width: auto;
  }
  .logoMain{
  	max-width: 15rem;
  }
  .logos_section .blue_bg{
  	background:white;
  	padding:2rem;
  	text-align: center;

  }
  .logos_section .sub_heading{
  	font-size: 2.4rem;
  	text-align: right;
  	width: auto;
  	display: block;
  	color: var(--blue)!important;
  }
  .logos_section{
  	background: transparent;
  	text-align: center;

  }
  .hero_heading{
  	font-size: 4.5rem;
  }
  .hero_desc{
  	font-size: 2rem;
  }
  .counter_section .sec_heading{
  	text-align: center;
  	margin-top: 4rem;
  }
  .counter_card{
  	padding:1.5rem;

  }
  .pdf-card{
	max-width:40rem;
	margin:0 auto;
	height:auto;
	padding-bottom: 1rem;
  }
  .pdf-card .card-title{
	text-align: center;
	font-size: 2.2rem;
  }
  .pdf-preview{
	width: 34rem;
	height:38rem;
	overflow: visible;
	margin:0 auto;
  }
  .job-offer-slider .slick-next {

	right:1px;
  }
  .job-offer-slider .slick-prev {
left:1px;

  }
  .quote_heading{
	font-size:2.5rem;
	text-align: center;
	flex-direction:column;
  }

}



@media only screen and (max-width: 576px){
	.hero_contents{
		width:96%;
}}