/*
Theme Name: Samar-Child
Theme URI: http://samar.dexignzone.com/wp/demo/
Author: DexignZone
Author URI: https://themeforest.net/user/dexignzone/portfolio
Description: Samar is a professionally designed WordPress theme that is ideal for businesses, agencies, corporations, and freelancers, who are looking to grow their business. Show your experience, portfolio, team members, and services, and help grow client relationships and your company, with Samar.
Version: 1.0
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: samar
Text Domain: samar-child
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, rtl-language-support, sticky-post, translation-ready, microformats
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/ 

.cms-con {
    background: rgba(34,58,123, 0.8);
    padding: 150px 50px;
}
.cms-con h2, .cms-con h4 { color:#fff;  }

.cms-con h2 { font-size:30px !important; }

.cms-con h4 { font-size:15px !important; }


/*  */
.theme-preview-hover {
    display: flex;
    align-items: flex-end;
    position: relative;
}
.theme-preview-hover .desktop-frame {
    max-width: 90%;
    width: 100%;
    padding-top: 60%;
}
.theme-preview-hover .desktop-frame, .theme-preview-hover .mobile-frame {
    position: relative;
}
.theme-preview-hover .mobile-frame > img, .theme-preview-hover .desktop-frame > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
    cursor: n-resize;
}
.theme-preview-hover .desktop-inner-div {
    position: absolute;
    right: 8%;
    height: 90%;
    left: 8%;
    top: 6%;
    display: block;
    background: #000;
}

.theme-preview-hover .mobile-inner-div img, .theme-preview-hover .desktop-inner-div img {
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 10px;
    height: 100%;
    transition: 10s all ease-in-out;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-transition: 10s all ease-in-out;
    -moz-transition: 10s all ease-in-out;
    -ms-transition: 10s all ease-in-out;
    -o-transition: 10s all ease-in-out;
}
.theme-preview-hover .mobile-frame {
    position: absolute;
    right: 50px;
    bottom: 40px;
    max-width: 230px;
    width: 100%;
    height: 480px;
    z-index: 9;
}
.theme-preview-hover .mobile-frame > img, .theme-preview-hover .desktop-frame > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
    cursor: n-resize;
}
.theme-preview-hover .mobile-inner-div {
    position: absolute;
    right: 9px;
    height: 97%;
    left: 7px;
    top: 8px;
    display: block;
    background: #000;
    overflow: hidden;
    border-radius: 26px;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    -ms-border-radius: 26px;
    -o-border-radius: 26px;
}

.theme-preview-hover .mobile-inner-div img, .theme-preview-hover .desktop-inner-div img {
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 10px;
    height: 100%;
    transition: 10s all ease-in-out;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-transition: 10s all ease-in-out;
    -moz-transition: 10s all ease-in-out;
    -ms-transition: 10s all ease-in-out;
    -o-transition: 10s all ease-in-out;
}

.theme-preview-hover .mobile-frame img:hover + .mobile-inner-div img, .theme-preview-hover .desktop-frame img:hover + .desktop-inner-div img {
    object-position: bottom;
}

.single-snail-product .dlab-bnr-inr{
    display: none;
}   
.cms-dlab-bnr-inr.cms-dlab-bnr-inr-md {
    height: 400px;
}

.cms-dlab-bnr-inr {
    background: #223a7b;
    height: 300px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.cms-overlay-primary-dark::before{
    opacity: 0.8;
}
.cms-dlab-bnr-inr .container {
    display: table;
    height: 100%;
}
.cms-dlab-bnr-inr .cms-dlab-bnr-inr-entry {
    height: 300px;
    display: table-cell;
    padding-top: 40px;
}
.cms-dlab-bnr-inr h1 {
    font-weight: 700;
    font-size: 49px;
    margin-bottom: 40px;
    color: #34AEFF;
    text-transform: capitalize;
    line-height: 49px;
    text-align: center;
}
.cms-dlab-bnr-inr h1 span{
    color:  #fff;
}
a.cms-buynow {
    margin-right: 20px;
}
.cms-dlab-bnr-inr p{
   
    font-size: 16px;
    margin-bottom: 40px;
    color: #fff;
    text-align: center;
}
.cms-button a {
    color: #fff;
    background: #34AEFF;
    padding: 20px 35px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 0.25rem;    
    
}
.cms-button { text-align: center; }

.cms-button a:hover {
    -webkit-box-shadow: 0px 0px 61px rgb(111 217 67 / 61%);
    box-shadow: 0px 0px 61px rgb(111 217 67 / 61%);
    transform: translateY(4px);
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -o-transform: translateY(4px);
    color: #fff;

}


@media screen and (max-width: 1023px){
    .theme-preview-hover .desktop-frame {
        max-width: 100%;
    }
    .theme-preview-hover .mobile-frame {
        bottom: 30px;
        max-width: 175px;
        height: 350px;
        right: 15px;
    }
}

@media screen and (max-width: 767px) {
    .theme-preview-hover .desktop-frame {
        padding-top: 70%;
    }
    .theme-preview-hover .mobile-inner-div {
        right: 2px;
        height: 98%;
        left: 4px;
        top: 2px;
        border-radius: 12px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 26px;
        -ms-border-radius: 26px;
        -o-border-radius: 26px;
    }
    .theme-preview-hover .mobile-frame {
      max-width: 120px;
      height: 240px;
    }

}

@media screen and (max-width: 480px){
    .theme-preview-hover .mobile-frame {
        max-width: 83px;
        height: 160px;
        bottom: 13px;
    }
}