@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css);
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
@import url(home.css);
@import url(login.css);
@import url(myaccount.css);
@import url(html-editor.css);
@import url(how-template-work.css);
*{
      font-family: "Ubuntu", sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, 
ul, li, p, a,body,button,input{
padding: 0px;
margin:0px;
list-style: none;
text-decoration: none;
color: #3c3c3c;
}
img{
    max-width: 100%;
}
:root{
--primary-site-bg-color:#880114;
--primary-site-text-color:#fff;
--secondary-site-bg-color:#FE9900;
--secondary-site-text-color:#000;
--hover-site-bg-color:#222;
--hover-site-text-color:#fff;
--border-site-color:#ddd;
--border-site-color2:#0364bf;
--b-shadow-site:rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
}
::-webkit-scrollbar {
    width: 1em;
    cursor: pointer!important;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    cursor: pointer!important;
}
 
::-webkit-scrollbar-thumb {
  background-color: #0074E7!important;
  cursor: pointer!important;
}

.error-text{
    font-size: 25px;
    text-align: center;
    color: var(--secondary-site-bg-color)!important; 
}
.error-img{
    text-align: center;
}


#iframe-container {
    width: 100%;
    height:100vh; /* Adjust the height as needed */
    border: none;
}
iframe{
    width: 100%;
    height: 100%;
}
/* Buttons to switch views */
#mobile-btn, #tablet-btn, #desktop-btn {
    margin: 10px;
    padding: 10px;
    font-size: 1em;
    cursor: pointer;
}
.all-btn .active{
    background: var(--secondary-site-bg-color)!important; 
   color: var(--secondary-site-text-color)!important;
}
.primary-bg{
    background: var(--primary-site-bg-color)!important;
    color: var(--primary-site-text-color)!important;
}
.secodary-bg{
   background: var(--secondary-site-bg-color)!important; 
   color: var(--secondary-site-text-color)!important;
}
.primary-bg:hover,.secodary-bg:hover{
    background: var(--hover-site-bg-color)!important; 
   color: var(--hover-site-text-color)!important;
}

.all-btn{
    text-align: center;
/*    display: inline-block;*/
}
.all-btn .btn{
/*    width: 100%;*/
    min-width:150px;
     margin: auto;
     margin-top: 10px;
    font-weight: bold;
    text-align: center;
}
.alert {
    display: inline-block;
    width: 100%;
}
/*btn and color class*/
input:focus,
input:active{
    border:1px solid var(--primary-site-bg-color)!important;
    outline: none;
}
.ebay_info input[type="file"]::file-selector-button {
display: none;
}
.note{
    margin-bottom: 15px;
    text-align: center;
}
.note a{
    color: var(--primary-site-bg-color);
}




/**/
#header{
   background: #222;
}

#header .header-inside> .row{
align-items: center;
}
/*social icons*/
#header .social-icons{
 text-align: right;   
}

#header .social-icons ul li{
    display: inline-block;
    padding: 0 10px;
    margin: 15px 0;
}
#header .social-icons ul li a{
    display: inline-block;
}
#header .social-icons ul li i{
    transform: scale(1.5);
    text-align: center;
    position: relative;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height:30px;
    color:#fff;
    border-radius: 100%;
    letter-spacing: 0!important;
}
#header .social-icons ul li:first-child i{
    background:#4267B2;
}
#header .social-icons ul li:nth-child(2) i{
    background: linear-gradient(115deg, #f9ce34, #ee2a7b, #6228d7);
}
#header .social-icons ul li:last-child i{
    background:#FF0000;
}
/*social icons end*/
#header .site-logo{
    max-width:270px;
    width: 100%;
    padding:20px 0;
/*    margin: auto;*/
}
#header .site-logo img{
    width: 100%;
}
/*logo */


#header .site-menu-bg{
background:var(--primary-site-bg-color);
}
#header .site-menu-bg input,.site-menu-bg label{
display: none;
}
#header .site-menu{
position: relative;
text-align: left;
}
#header .site-menu .main-menu{
    position: relative;
    z-index: 99;
}
#header .site-menu .main-menu{
    display: inline-block;
}
#header .site-menu .main-menu li{
display: inline-block;
    position: relative;
    z-index: 99;

}
#header .site-menu .main-menu li a i{
    color:var(--primary-site-text-color);
}
#header .site-menu .main-menu li a{
text-align: center;
position: relative;
z-index: 99;
display: block;
padding:20px;
color:var(--primary-site-text-color);
text-transform: uppercase;
font-weight: bold;
transition: .4s;
font-size: 15px;
}
#header .site-menu .main-menu li a:hover{
background:var(--secondary-site-bg-color);
color:var(--secondary-site-text-color);
border: none;
outline: none;
}
.main-menu li a.active{
background:var(--secondary-site-bg-color)!important;
color:var(--secondary-site-text-color)!important;
border: none;
outline: none;
}
#header .right-side-menu{
    float: right;
}
#header .right-side-menu li a{
    min-width: 200px;
}
/*sub-menu*/
#header .site-menu .main-menu li .sub-menu{
    position: absolute;
    display: none;
    left: 0;
    background:var(--primary-site-bg-color);
    text-align: left;
}
#header .site-menu .main-menu li:hover .sub-menu{
    display: block;

}
#header .site-menu .main-menu .sub-menu li{
    width:100%;
}
#header .site-menu .main-menu .sub-menu li a{
    width:100%;
    min-width:200px ;
    padding:10px 20px;
    font-size: 14px;
     text-align: left;
     position: relative;
     border-bottom: 1px solid var(--border-site-color);
}
#header .site-menu .main-menu .sub-menu li .menu-sub{
    display: none;
    left:100%;
    top: 0;
     position: absolute;
     background:var(--primary-site-bg-color);
}
#header .site-menu .main-menu .sub-menu li:hover .menu-sub{
    display: block;
     font-weight: normal;
}
/*menu*/
/*heading*/
#middle .main-title h1, #middle .main-title h2, #middle .main-title h3,
#middle .main-title h4, #middle .main-title h5, #middle .main-title h6{
    padding: 20px;
    background: #f4f4f4;
    color: var(--primary-site-bg-color);
    border-left: 5px solid var(--secondary-site-bg-color);
    font-size: 21px;
    text-transform: uppercase;
    margin:20px auto;
}


/*section of potfolio*/
#content{
    padding: 20px;
}
#middle>.container{
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, 
    rgba(0, 0, 0, 0.07) 0px 2px 4px, 
    rgba(0, 0, 0, 0.07) 0px 4px 8px, 
    rgba(0, 0, 0, 0.07) 0px 8px 16px, 
    rgba(0, 0, 0, 0.07) 0px 16px 32px, 
    rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
#middle .content-section{
    display: flex;
    flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

#middle .content-section .content-box {
    flex: 0 0 auto;
    text-align: center;
    width: 100%;
    max-width: 350px;
    margin: 10px 0;
    position: relative;
    border: 1px solid var(--secondary-site-bg-color);
    padding: 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
     background: #fff; 
}
#middle .content-box .img-content-box {
    height: 470px;
    overflow: hidden;
}
#middle .content-box .img-content-box img{
    width: 100%;
    border-radius: 10px;
}

#middle .section-details li{
    margin-bottom: 5px;
    padding: 5px;
}
#middle .section-details li:before{
    font-family: fontawesome;
    content: "\f0c8";
    padding-right: 7px;
    font-weight: bold;
    color: var(--secondary-site-bg-color);
}

/*end*/
/*Footer start*/
#footer{
    background:#222;
    color:var(--primary-site-text-color);
    padding-top: 20px;
}
#footer .site-footer-box{
    text-align: left;
/*    max-width:240px;*/
    margin: auto;
}
#footer .site-footer-box ul li{
     padding:3px 10px;
     color:var(--primary-site-text-color);
}
#footer .site-footer-box h2{
      color:var(--primary-site-text-color);
}
#footer .site-footer-box .logo {
    max-width: 200px!important;
    width: 100%;
    padding: 10px;
    margin: auto;
}
#footer .site-footer-box .logo img{
    width: 100%!important;
}
#footer .site-footer-box ul li a{
    display: block;
    color:var(--primary-site-text-color);
    width: 100%;

}
#footer .site-footer-box ul li i {
    padding:5px 10px;
    color:var(--primary-site-text-color);
    text-align: center;

}
#footer .site-copyright{
background:var(--secondary-site-bg-color);
padding: 15px;
text-align: center;
}
#footer .site-copyright p{
    color:var(--secondary-site-text-color);
}
/*Footer end*/
.badge-template.premium{
    background:var(--primary-site-bg-color);
     color:var(--primary-site-text-color);
}
.badge-template.standard{
     background:var(--secondary-site-bg-color);
     color:var(--secondary-site-text-color);
}
.badge-template.basic{
    background:#222;
     color:#fff
}
.badge-template{
    text-align: center;
    padding:5px 10px;
    position: absolute;
    top:20px;
    right:0px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 20px 0 0 20px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, 
    rgba(0, 0, 0, 0.23) 0px 6px 6px;

}
.template-id{
    text-align: center;
    padding:5px 10px;
    position: absolute;
    bottom:100px;
    left:0px;
/*    text-transform: uppercase;*/
    font-weight: bold;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, 
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
    background: #0478F9;
    color: #fff;
}
.pagination{
    text-align: center;
    justify-content: center;
    margin-top: 30px;
}
.pagination a{
    margin: 5px;
    display:inline-block;
    padding: 10px;
    border-radius:5px;
    font-weight: bold;
       border: 1px solid var(--border-site-color); 
}
.pagination a.active{
    background: var(--secondary-site-bg-color);
    color: var(--secondary-site-text-color);
}

/*about us*/
#about-section h1, #about-section h2, #about-section h3{
    padding:10px;
    background: #f4f4f4;
    color: var(--primary-site-bg-color);
    border-left: 5px solid var(--secondary-site-bg-color);
    font-size: 19px;
    text-transform: uppercase;
    margin: 20px auto;
}