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

    /* top nav style for xs/sm */
    .offer-txt{
        position: absolute;
        top: -22px;
        background-color: #f3e4d6;
        width: 100%;
        left: 0;
        text-align: center;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
    }
    /* homepage */
    .inner-header {
        margin-top: calc(35px + 2%);
    }
    .inner-header.header-top-margin {
        margin-top: calc(100px + 2%);
    }
    .index-header{
        height: calc(50vh - 7.3125rem);
    }
    .welcome-block .welcome-grid, .home-services-block, .our-works-block .card-wrapper{
        grid-template-columns: auto;
    }
    .welcome-block .welcome-grid .right-col{
        margin-top: 30px;
        padding: 0;
    }
    .home-services-block .single-service .title.bottom {
        top: -20px;
        bottom: auto;
    }

    /* homepage dress slider details column order */
    .dress-slider-block{
        display: flex;
        flex-direction: column;
    }
    
    .dress-slider-block .dress-wrapper-grid .dress-details-grid{
        grid-template-columns: auto;
    }
    /* *Homepage dress slider reverse block column order */
    .dress-slider-block.reverse .dress-wrapper-grid{
        order: 2;
    }

    /* Homepage text block margin left/right */
    .welcome-block {
        margin-left: calc(5% + (40 - 15) * ((100vw - 320px) / (1920 - 320))) !important;
        margin-right: calc(5% + (40 - 15) * ((100vw - 320px) / (1920 - 320))) !important;
    }
}

/* *Only for small devices below 767px [xs/sm] */
@media only screen and (max-device-width : 767px) and (orientation : portrait) {

    /* *Footer style */#footer {
        grid-template-columns: auto;
         grid-gap: calc(20px + (30 - 20) * ((100vw - 320px) / (767 - 320)));
    }/* *Footer grid column to row */
    #footer .center-col .footer-contact{
        margin-top: calc(25px + (40 - 25) * ((100vw - 320px) / (767 - 320)));
    } /* *Footer contact content top space */
    #footer .left-col{order: 2;}/* *Link column order as 2nd position */
    #footer .center-col{order: 1;}/* *Logo/Center column order as 1st position */
    #footer .right-col{order: 3;}/* *Last column as usual order 3rd */
    .footer-logo a img{max-width: 320px;} /** footer logo size adjusted*/
    /* *Footer style END */

}

/* *iPhone 6/7 media query 
----------------------------*/
@media only screen and (min-width: 375px) and (max-width: 767px) {
     /* Your Styles... */ 
}

/* portrait */
@media only screen and (min-width: 375px) and (orientation: portrait) {
     /* Your Styles... */ 
}

/* 2x retina */
@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) { 

    /* Retina styles here */

}