/* ================================================================
 📜 NOTE: Extra large ≥1200px @media (min-width: 1200px) col-xl
=================================================================== */

/* ➡️ Extra large devices (large laptops, TV and desktops, 1200px and up)*/

@media only screen and (min-width: 1201px){

}


/* ================================================================ 
 📜 NOTE: Large ≥992px - 1200px @media (min-width: 992px) col-lg
=================================================================== */

/* ➡️ Desktops, large screens  {} */

@media only screen and (min-width: 1025px) and (max-width: 1200px){

}

/* ➡️ Large devices (laptops/desktops, 992px and up)  */ 

@media only screen and (min-width: 993px) and (max-width: 1024px){

}


/* ================================================================ 
 📜 NOTE: Medium ≥768px - 992px @media (min-width: 768px) col-md
=================================================================== */

/* ➡️ Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) and (max-width: 992px){

}


/* ================================================================ 
 📜 NOTE: Small ≥576px - 768px @media (min-width: 576px) col-sm
=================================================================== */

/* ➡️ iPads, Tablets */

@media only screen and (min-width: 577px) and (max-width: 767px){

}



/* ================================================================
 📜 NOTE: Extra small <576px @media (max-width: 576px) col
=================================================================== */

/* ➡️ COMMON: Common css for mobile (portrait tablets and phones, 576px and below) */

@media screen and (max-width: 576px){

.mobile-menubar {
    width: 100%;
    background-color: #fff;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
}
.mobile-menubar-inner{
    padding: 0 20px 20px 20px;
}
.mobile-logo-section {
    padding: 0 20px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}
.sidenav-close ion-icon{
    font-size: 28px;
    color: #f00;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 4px;
    border-radius: 50%;
}
.bold_heading {
    font-size: 25px;
}
.banner_info h4 {
    font-size: 18px;
}
.mobile-sub-heading {
    font-size: 20px;
    font-weight: 500;
    margin: 20px 0;
}
/* .mobile-nav{
    padding-left: 10px !important;
} */
.mobile-nav li{
    display: flex;
    align-items: center;
}
.mobile-nav li a{
    font-size: 17px;
    font-weight: 500;
    color: var(--black_color);
    line-height: 54px;
}

.mobile-nav li ion-icon {
    font-size: 20px;
    margin-right: 10px;
    color: var(--primary_color);
}
.mobile-nav li a:hover{
    color: var(--primary_color);
}

/* .mobile-nav li a::before {
      font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061";
    } */
.mobile-none{
    display: none;
}
.mobile-block{
    display: block;
}
.mobile-menu-icon {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-right: 5px;
}
.mobile-menu-icon ion-icon {
  font-size: 28px;
  color: var(--primary_color);
}
.contact_button {
    padding: 7px 11px;
    font-size: 14px;
}
.contact_button.desktop-none{
    display: block;
}
.section-box {
    padding: 20px 20px;
}
.section-50{
    width: 100%;
}
.section-25{
    width: 100%;
}
.section-40{
    width: 100%;
}
.flex-on:has(.section-50){
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
}
.banner {
    height: 800px;
}
.banner_info{
    padding-right: 0px;
}
.main-heading {
    font-size: 22px;
    line-height: 30px;
}
.sub-heading {
    font-size: 16px;
    line-height: 18px;
}
.workflow-item {
    width: 100%;
}
.objective-item {
    width: 100%;
    height: auto;
}
.objective-image {
    width: 120px;
    height: 120px;
}
.objective-word {
    width: 90%;
}
.objective-image img {
    filter: opacity(20%);
}
.section-30{
    width: 100%;
}
.section-70{
    width: 100%;
}
.flex-on:has(.section-30), .flex-on:has(.section-70){
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
}
.framework-section {
    height: 300px;
}
.framework-item {
    padding: 4px 6px;
}
.framework-icon {
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin-right: 3px;
}
.framework-item .mini-heading {
    font-size: 12px;
}
.framework-item:nth-child(1) {
    top: 48px;
    left: 10px;
}
.framework-item:nth-child(2) {
    top: 95px;
    left: 100px;
}
.framework-item:nth-child(3) {
    top: 150px;
    left: 0px;
}
.framework-item:nth-child(4) {
    bottom: 45px;
    left: 45px;
}
.framework-item:nth-child(5) {
    top: 5px;
    right: 130px;
}
.framework-item:nth-child(6) {
    bottom: 140px;
    right: 5px;
}
.framework-item:nth-child(7) {
    top: 20px;
    right: 10px;
}
.framework-item:nth-child(8) {
    bottom: 28px;
    right: 30px;
}
.portbtn {
    padding: 5px 18px;
    font-size: 14px;
    font-weight: 500;
}
.isotope-item {
    width: 100%;
}
.secondary-button {
    padding: 7px 12px;
    font-size: 14px;
}
.enquiry-line .flex-end{
    justify-content: flex-start;
}
.footer {
    padding: 50px 20px 20px 20px;
    flex-wrap: wrap;
    gap: 20px;
}
.about_wrap {
    width: 100%;
}
.links_wrap {
    width: 100%;
}
.important_wrap {
    width: 100%;
}
.right_wrap {
    gap: 5px;
    flex-wrap: wrap;
}
.footer_bottom {
    height: auto;
    padding: 10px 10px;
    align-items: end;
}
}

/* @media only screen and (max-width: 576px) and (orientation:portrait){

} */

/* ➡️ Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 481px) and (max-width: 576px){

}

/* ➡️ Mobile devices */ 

@media only screen and (min-width: 421px) and (max-width: 480px){

}

@media only screen and (min-width: 361px) and (max-width: 420px){

}
@media only screen and (min-width: 321px) and (max-width: 360px){

}

/* ➡️ Small Mobile devices */ 

@media only screen and (min-width: 281px) and (max-width: 320px){

}




/* ➡️ Extra small devices */ 

@media only screen and (max-width: 280px){

}





/* @media screen and (max-width: 540px){

} */






/* @media (min-width: 1400px)
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px;
}
@media (min-width: 1200px)
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1140px;
}
@media (min-width: 992px)
.container, .container-lg, .container-md, .container-sm {
    max-width: 960px;
}
@media (min-width: 768px)
.container, .container-md, .container-sm {
    max-width: 720px;
}
@media (min-width: 576px)
.container, .container-sm {
    max-width: 540px;
} */