@media screen and (max-width: 575px) {
    /* Styles for extra small devices (phones) */
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    /* Styles for small devices (tablets in portrait mode) */

}

@media screen and (min-width: 991px) {
    header {
        height: var(--header-large)
    }
    /*mobile nav*/
    .str-header-primary-menu-button{
        display: none;
    }
    /*sec nav*/
    .str-header-menu-sec-nav {
        flex: 1;
        display: flex;
    }
    .str-header-menu-container{
        flex: 1;
    }
    .str-header-menu-container-child{
        display: flex;
        background-color: none;
        align-items: center;
        height: 100%;
        justify-content: center;
    }
    .str-header-menu-item{
        background-color: none;
    }
    .str-header-menu-button{
        position: relative;
        font-size: 1.1rem;
        display: flex;
        background-color: none;
        align-items: center;
        color: var(--primary--text); 
        font-weight: 400;
        margin: 10px;
    }
    .str-header-menu-button:hover{
        opacity: 0.9;
    }
    .str-header-sign-container{
        flex-basis: 250px;
        flex-grow: 0;
        flex-shrink: 0;
        background-color: none;
    }
    .str-header-sign-container-child{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        background-color: none;
        justify-content: space-around;
    }
    .str-header-sign-login,.str-header-sign-sign{
        flex: 1;
        background-color: none;
        height: 100%;
        margin: 10px;
    }
    .str-header-sign-login div{
        width: 100%;
        height: 100%;
    }
    .str-header-sign-login div a{
        background-color: var(--light);
        border: solid 1px var(--primary);
        border-radius: 3px;
        color: var(--primary);
        font-weight: 500;
        font-size: 1rem;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .str-header-sign-sign div{
        width: 100%;
        height: 100%;
    }
    .str-header-sign-sign div a{
        background-color: var(--primary);
        border: solid 1px var(--primary);
        border-radius: 3px;
        color: var(--light);
        font-weight: 500;
        font-size: 1rem;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .str-header-primary-navigation-container {
        display: none!important;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    /* ! change the main content width */

}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    /* ! change the main content width */

}

/* Extra Large Devices (Large Desktops) */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    /* ! change the main content width */

}

/* Extra Extra Large Devices */
@media screen and (min-width: 1400px) and (max-width: 1599px) {
    /* ! change the main content width */

}

/* Ultra Large Devices */
@media screen and (min-width: 1600px) and (max-width: 1799px) {
    /* ! change the main content width */

}

/* Mega Large Devices */
@media screen and (min-width: 1800px) and (max-width: 1999px) {
    /* ! change the main content width */

}

/* Giga Large Devices */
@media screen and (min-width: 2000px) and (max-width: 2500px) {
    /* ! change the main content width */

}

@media screen and (min-width: 2500px) and (max-width: 3000px) {
    /* ! change the main content width */

}

@media screen and (min-width: 3000px) and (max-width: 3500px) {
    /* ! change the main content width */

}

@media screen and (min-width: 3500px) {
    /* ! change the main content width */

}/*fixed width styles*/
@media screen and (max-width: 575px) {
  /* Styles for extra small devices (phones) */
}

@media screen and (min-width: 768px) {
  .str-footer-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 992px) {
  .str-footer-parent {
    width: 90%;
    grid-template-columns: 30% 70%;
  }

  .str-footer-bottom {
    width: 80%;
  }
}

/* Extra Large Devices (Large Desktops) */
@media screen and (min-width: 1200px) {}

/* Extra Extra Large Devices */
@media screen and (min-width: 1400px) {}

/* Ultra Large Devices */
@media screen and (min-width: 1600px) {}

/* Mega Large Devices */
@media screen and (min-width: 1800px) {}

/* Giga Large Devices */
@media screen and (min-width: 2000px) {}

@media screen and (min-width: 2500px) {}

@media screen and (min-width: 3000px) {}

@media screen and (min-width: 3500px) {
  /* ! change the main content width */
}

/*single width styles*/

@media screen and (min-width: 576px) and (max-width: 767px) {
  .str-footer-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  /* ! change the main content width */
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  /* ! change the main content width */
}

/* Extra Large Devices (Large Desktops) */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  /* ! change the main content width */
}

/* Extra Extra Large Devices */
@media screen and (min-width: 1400px) and (max-width: 1599px) {
  /* ! change the main content width */
}

/* Ultra Large Devices */
@media screen and (min-width: 1600px) and (max-width: 1799px) {
  /* ! change the main content width */
}

/* Mega Large Devices */
@media screen and (min-width: 1800px) and (max-width: 1999px) {
  /* ! change the main content width */
}

/* Giga Large Devices */
@media screen and (min-width: 2000px) and (max-width: 2500px) {
    /* ! change the main content width */

}

@media screen and (min-width: 2500px) and (max-width: 3000px) {
    /* ! change the main content width */

}

@media screen and (min-width: 3000px) and (max-width: 3500px) {
    /* ! change the main content width */

}