Img{max-width: 100%;}
body{font-family: 'Signika', sans-serif;}
/* width */
.inner-bodyinfo{ height: 100%;     text-align: center; }
.text-primary:{color: #4099C2;}
.splash{cursor : pointer;position : fixed; top : 0;left : 0;height : 100%;width : 100%;   background-color: rgba(0,0,0);
 transition : all ease-in-out 5s;}
.hidden{ transition : 0.4s; display : none;}
.main-bg{background-image:url(../images/bg-image.png);    background-size: cover;background-position: center;background-repeat: no-repeat;width: 100%; 
  min-height: 100vh;    height: 100%;}
.main-bgsplash{background-image:url(../images/bg-image.png);    background-size: cover;background-position: center;background-repeat: no-repeat;width: 100%; 
  max-height: 1800px;    height: 100%;animation-name: scale-in;  animation-duration: 50s;}
  @keyframes scale-in {
  0% {
    background-size: 100%;
  }
  100% {
    background-size: 200%;
  }
}


.pagination a {color: white; float: left; padding: 3px 10px;  text-decoration: none;  transition: background-color .3s;
  border: 1px solid #ddd;    border-radius: 25px;    margin: 6px;}
.pagination a.active {  background-color: #3f98c0;  color: white;  border: 1px solid #3f98c0;}
.pagination a:hover:not(.active) {background-color: #efd17880;}
.navbar-toggler { margin-left: 1.5vh; padding: 0.1rem; border: 0; outline: 0 none !important; position: relative; background: none !important}
.navbar-toggler .navbar-toggler-icon { position: relative; width: 2rem; height: 1.5rem; background: none !important}
.navbar-toggler[aria-expanded="true"] { background: none !important}
#nav-icon2 span { display: block; position: absolute; height: 2px; width: 50%; background: #fff; opacity: 1; -webkit-transform: rotate(0deg);
    transform: rotate(0deg);  -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out}
#nav-icon2 span:nth-child(even) { left: 50%;  border-radius: 0 9px 9px 0}
#nav-icon2 span:nth-child(odd) { left: 0px; border-radius: 9px 0 0 9px}
#nav-icon2 span:nth-child(1),#nav-icon2 span:nth-child(2) { top: 0px}
#nav-icon2 span:nth-child(3),#nav-icon2 span:nth-child(4) { top: 10px}
#nav-icon2 span:nth-child(5),#nav-icon2 span:nth-child(6) { top: 20px}
#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) { -webkit-transform: rotate(45deg); transform: rotate(45deg)}
#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg)}
#nav-icon2.open span:nth-child(1) { left: 5px; top: 7px}
#nav-icon2.open span:nth-child(2) { left: calc(50% - 5px); top: 7px}
#nav-icon2.open span:nth-child(3) { left: -50%; opacity: 0}
#nav-icon2.open span:nth-child(4) { left: 100%; opacity: 0}
#nav-icon2.open span:nth-child(5) { left: 5px; top: 13px}
#nav-icon2.open span:nth-child(6) { left: calc(50% - 5px); top: 13px}
.main-page{ display: flex; justify-content: center;  align-items: center;}
.main-image{display: flex;  justify-content: center; align-items: center;width: 100%;height: 100%;}
.secondpg-image{width: 80%; padding-top: 5%!important; }
.website-design a{ transition: all 0.1s ease; width: 100%; height: 100%; justify-content: center; text-align: center;display: flex; flex-direction: column; align-items: center;text-decoration: none; color: white;}
.website-design{width: 175px; height: 175px;    padding: 1rem;  display: flex; align-items: center; justify-content: center;border: 1px solid white;
    border-radius: 8px;margin: 1rem;}
.website-design i{ font-size: 72px; color: white;}
.design-info{ width: 90%; margin: auto; display: flex; justify-content: center;}
.website-design:hover{ border: 1px solid #4099C2;}
.website-design:hover a{ color: #4099C2!important;}
.website-design:hover i{ color: #4099C2!important;}
.website-design{ /*box-shadow: 0 15px 18px -10px rgba(225,225,225,.5);*/ box-shadow: 0 6px 10px -4px rgba(255,225,225,.25); transform: translate3d(0,0px,0); transition: all 300ms cubic-bezier(.34,2,.6,1);}
.website-design:hover { transform: translate3d(0,-10px,0); box-shadow: 0 12px 19px -7px rgba(225,225,225,.4);}
.site-info{ overflow-y: auto; min-height: 100vh; height: 100%; transition: all .5s;}
.main-nav{ min-height: 100vh; background: #0c0c0cd1;}
.designer-page{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center;}
.website-design span{ text-transform: uppercase;}
.website-design svg{width: 60px;  height: auto;}
.website-design svg path{stroke: white;transition: all 0.1s ease; }
.website-design:hover svg path{stroke: #4099C2;}






/* wesdesigner page css*/
.nav-menu{ width: 280px; background: #0c0c0cd1;}
.brand-logo{ width: 70%; padding-right: 0px!important; padding: 1.5rem 0; position: relative;  margin-left: 20px;} 
.side-nav{ position: relative;}
.side-nav li{ height: 50px; transition: all 0.8s ease; margin: 0.8rem 0; border-radius: 0px 8px 8px 0px; color:white; width: 213px; list-style: none;
  background-color: #4099c2;}
.side-nav li:hover{ width: 230px;}
.right-sidepanel{ padding-left: 3rem;}
/*.side-nav li:nth-child(even) {border-radius: 8px 8px 8px 8px;    margin-left: 32%!important;}*/
.side-nav li:hover{ background-color: #18688d;}
.right-sidepanel{ width: calc(100vw - 350px); padding: 3rem 3rem;}
.slidename{color:#fff;position: relative;    padding-bottom: 7px;}
.slidename:before{ position: absolute; content: ""; width: 56px; height: 2px; background-color: #fff; bottom: 0;}
.side-nav ul li a{ text-decoration: none; width: 100%; height: 100%;  display: flex;  align-items: center; justify-content: flex-start;}
.side-nav ul li a img{ width: 40px;}
.side-nav ul li a i{ color: #ffffff; display: none; transition: all 0.5s ease; padding-left: 7px;}
.side-nav ul li:hover a i{ display: block; }
.slidename-info { cursor: pointer; height: 100%; position: relative; animation: 1s ease-out 0s 1; box-shadow: 0px 0px 2px 2px rgba(21,164,230,0.7); overflow: hidden; border-radius: 5px; transition: all .2s cubic-bezier(.4,0,.2,1);}
@keyframes slideInFromLeft {
  0% {
    transform: translateY(-80%);
  }
  100% {
    transform: translateX(0);
  }
}

.slidename-info:hover{ transform: scale(1.02);}
.slidename-info img{ width: 100%; transition: transform 2s;overflow: hidden;}
.slide-name{ position: absolute; flex-direction: column; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.23) 18%, rgb(0 0 0 / 76%) 61%, rgb(0 0 0 / 80%) 69%, rgb(0 0 0 / 83%) 81%);
top:100px ;left: 0; display: flex; justify-content: flex-end;  align-items: flex-start;color: white;opacity: 0;transition: all 0.5s ease;}
.toggler-btn{ background: none;   outline: 0px;  border: 0px;}
.slide-cont{ margin: 1.5rem; border-left: 2px solid #4099c2; padding-left: 10px;}
.slide-cont p{ margin-bottom: 0px; letter-spacing: 2px;}
.toggler-btn i{ color: #ffffff; font-size: 25px; opacity: 0;}
.slidename-info:hover .slide-name{ opacity: 1; top: 0px;}
.logo-info{ background: url(../images/Rectangle-1.png) no-repeat; background-position: center; display: flex;
    justify-content: center; align-items: center; background-size: cover; width: 100%; height: 280px; border-radius: 5px!important;}
.logo-info img{width: 250px;}
.slide-heading{ font-size: 22px; text-transform: uppercase;margin-bottom: 0;}
.slide-cont small{text-transform: uppercase; font-size: 10px;}
.navigation { position: relative; display: none;}
.logoinner-info{ background: #fdf8f8de; max-height: 100%; height: 452px; display: flex;  align-content: center;
    align-items: center; justify-content: center;}
.logoinner-info img{max-width: 300px;   width: 100%;}
.logoinner-info {background: #fdf8f8de; max-height: 100%; max-width: 500px; width: 100%;    height: 452px;  display: flex;  align-content: center;
    align-items: center; justify-content: center;    margin: auto;}
.logo-info a{display: flex;  width: 100%;  height: 100%;   justify-content: center; align-items: center;}

.modal-dialog::-webkit-scrollbar {width: 7px; background: white;border: 1px solid black;}  
.modal-dialog::-webkit-scrollbar-track { background:  white;}
/* Handle */
.modal-dialog::-webkit-scrollbar-thumb {background: #17a2b8; }
/* Handle on hover */
.modal-dialog::-webkit-scrollbar-thumb:hover {  background: #555; }

/*.inner-bodyinfo::-webkit-scrollbar-thumb { background: white; box-shadow: 0px 0px 0px 100vh white;}*/
.modal-dialog{background-image:url(../images/bg-image.png);    background-size: cover;background-position: center;background-repeat: no-repeat;width: 100%; 
  ;    height: 100%;max-width: 100%;margin: 0;overflow: hidden;}
.modal-content{background: transparent;  width: 100%;  margin: auto;}
.modal-header {border-bottom: 0px;align-items: flex-end;}
.modal-body{    padding: 0 18%;}
.close {color: #fff;font-size: 2rem;opacity: 1;font-weight: 100;transition: all 0.5s ease;}
.close:hover {color: #30a4d3;opacity: 1;background-color: white!important;}
.close:focus{outline: 0px auto -webkit-focus-ring-color!important;}*/
.inner-bodyinfo img{margin-bottom: 2rem!important;}
button.close { background-color: #17a2b8;border-radius: 8px;}
.modal-dialog{min-height: 100vh;   height: 100%;   overflow: auto;}
.modal-header .close {padding: 1px 10px;    margin: 5px;}
.modal{padding-right: 0px!important;}

/* business card css*/

.header-section{display: flex;align-items: flex-end;}
.brandbusiness-logo{width: 200px;margin: 0 2rem;padding-top: 2rem;}
.banner-section{width: 90%;margin: auto; padding-top: 2rem;}
.Page.navigation{padding-bottom: 1rem;}
.pagination{    justify-content: center;    margin-top: 2rem;}
.business-card{max-height: 100%; width: 100%; display: flex;
  align-content: center; align-items: center; justify-content: center;  margin: auto;}
.business-info img{height: 100%;width: 100%;}

.rightside-icon {display: flex;    justify-content: space-between; }
/* Flyer card css*/
.flyer-card img{    border: 1px solid #ffffff38;}
.flyer-info img{width: 100%;height: 100%;}
.brand-logobg{max-width: 200px; padding: 0!important; margin: 2px;display: none;margin-right: -42px;}
.nav-menu::-webkit-scrollbar{background: transparent;}
button:focus {outline: 0px auto -webkit-focus-ring-color;}
.navbar-toggler {    display: none;}
@media (max-width: 1399px){
  .slide-heading{ font-size: 18px; }
  .logo-info img{width: 200px;}
}
@media (max-width: 992px){
  .design-info { width: 70%;flex-wrap: wrap;padding-top: 2rem!important}
  .website-design {  width: 155px;   height: 155px;padding: 10px;  text-align: center;}
  .secondpg-image {padding-top: 2%!important;}
  .nav-menu {left: -100%;overflow: auto;    transition: all 0.8s ease;position: fixed;   width: 260px;  height: 100vh;  z-index: 9;  }
  .site-info{position: relative;}
  .right-sidepanel {width: 100%!important;}
  .navigation{display: block!important;padding-right: 1rem;} 
  .side-nav li {margin: 15px 0px!important;}
  #menu {margin-top: 90px!important; padding: 0px;    z-index: 9;background: #00000085;}
  .modal-content{max-width:99vh;}
  .slidename {font-size: 20px!important;}
  .brand-logobg{display: block;}
  .modal-content {padding: 0 0%;}  
  .combine-text{  display: flex;  width: 100%;  padding-top: 26px;  align-items: flex-end; justify-content: space-between;}
  .toggler-btn i{opacity: 1!important; }
  .nav-menu.active{left: 0;}
  .navbar-toggler {    display: block!important;}
  
 
}
@media (max-width: 768px){
  .site-info .container {  max-width: 700px;}
  .website-design i { font-size: 50px;}
  .website-design {   width: 150px;  height: 150px;}
  .secondpg-image { width: 70%!important;}
  .secondpg-image { padding-top: 5%!important;}
  .modal-content{width: 100%!important; height: 100%;      overflow-y: scroll;  }
  /*.inner-bodyinfo{max-height: 650px!important;}
  .inner-bodyinfo img{    margin-bottom: 15rem;} */
  .slide-cont {margin: 0.5rem;}
  .site-info { height: 100svh!important;}
  .modal-content::-webkit-scrollbar {width: 7px; background: white;border: 1px solid black;}  
  .modal-content::-webkit-scrollbar-track { background:  white;}
  /* Handle */
  .modal-content::-webkit-scrollbar-thumb {background: #17a2b8; }
  /* Handle on hover */
  .modal-content::-webkit-scrollbar-thumb:hover {  background: #555; }
  .modal-body{padding: 0 1%;}


}

@media (max-width: 575px){
  .secondpg-image { width: 70%!important;}
  .secondpg-image {  padding-top: 7.5%!important;}
  .design-info {    width: 90%;}
  .website-design {   width: 132px;   height: 139px;}
  .logo-info {height: 160px!important;}
  .site-info .container { padding: 0 4rem;}
  .nav-menu {height: 100svh;}


  }