@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400);
@import url(http://fonts.googleapis.com/css?family=Metamorphous);

* {
	margin: 0px;
	padding: 0px;	   
    font-size: 16px!important; 
	box-shadow: border-box;
}
:root {
    --brand-color: #013755;
    --navcolor: #544AA1;
    --header: #B378D4;
    --title: #B982D8;
}
body {
	position: relative;
	height: 100%;
	box-shadow: border-box;
	color: #000;
	background: #fff!important;
	font:400 19px/24px 'Open Sans', Arial, Helvetica, sans-serif;
		
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	color: #333;
	margin: 0 0 8px;
	font-weight: 400;
	line-height: 1.5;
	font-style: normal;
	text-transform:capitalize;
	font-family: 'Work Sans', Arial, Helvetica, sans-serif;
		
}

a{
  text-decoration: none!important;
}

.logo{
  position:absolute; 
  width:300px; 
  height:100%
}

.logo img{
  height:100%; 
  width:auto;}


#toTop {
  width:45px;
  height:45px;
  border:0px solid #000;  
  background:var(--header)!important;     
  text-align:center;
  padding:5px;
  position:fixed; /* this is the magic */
  bottom:4px; /* together with this to put the div at the bottom*/
  right:4px;
  cursor:pointer;
  display:none;
  color:#333;
  font-family:verdana;
  font-size:11px;
  z-index:200;
}
#toTop i{
font-size:23px;
padding-top:5px;
}


.form-group{
  border:0px solid red;
  margin:30px auto!important;
}

h2.title{
    font-size:30px!important;
    color:#fff;
    
}

h2.pagetitle{
  color:var(--header)!important;
  font-weight:600!important;
  font-size:2.1rem!important;
}
.pservice{
  
  padding: 2px !important;
}
.pservice i{
  color:var(--header)!important;
}

.cropit-preview{	
						
	background-size: cover!important;
	border-radius: 3px;
	margin-top: 7px;        
	display:inline-block;		
	width: 100%!important;
	padding-bottom: 65%!important;
	position: relative!important;
	background-color: #c0c0c0;
	border:1px solid #c0c0c0!important;
	
}

.cropit-preview .error-msg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    color: #fff;
    background: rgba(210,65,72,0.8);
    line-height: 1.5;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    -ms-transition: opacity 0.25s;
    transition: opacity 0.25s;
}

.cropit-preview.has-error .error-msg {
    opacity: 1;
    -ms-filter: none;
    filter: none;
}

.upfiles{
	width:360px; 
	height:600px; 
	border:0px solid red; 
	display:inline-block;
	margin:auto!important;
	
}

/** header section **/

.header-right-text h3 {
    font-family: 'Metamorphous', cursive;
    text-align: right;
    color: #fff;
    font-size: 1.5rem!important;
      margin: 15px 0 9px;
    font-weight: 600;
  }
  .header-right-text {
    float: right;
  }
.header-right-text h3 span {
	  font-family: 'Open Sans', sans-serif;
    margin: 0 12px;
    color: #ffff;
    font-weight: 600;
    font-size: 1.4rem!important;
}
.header-right-text h3  i {
	  font-family: 'Open Sans', sans-serif;
	  font-weight: 500;
    font-size: 1.4rem!important;
    font-style:normal;
    color: #fff;
}

.moblie-title{
  display:none;
}
.navbar-expand-sm{
  float:right !important;
}
.navbar-nav{
    margin-top:7px;
}
.navbar-nav > li.nav-item > a.nav-link{
    color: #000;
    font-size: 16px;
    padding: 0 20px!important;
    
    font-family: 'Metamorphous', cursive;
}
.nav > li.nav-item {
    font-family: 'Metamorphous', cursive;
    margin: 0 27px 0 !important;
}
.nav > li > a:hover {
	  color: #B982D8 !important;
	  transition: 1s all;
	  -webkit-transition: 1s all;
	  -moz-transition: 1s all;
	  -o-transition: 1s all;
	  -ms-transition: 1s all;
}
.nav > li:last-child {
    margin-right: 0 !important;
 }
ul.nav.navbar-nav li a.active {
    color: #fff200 !important;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #B982D8;
    background: none;
}
/** end header section **/


/** homepage slider section **/


  .my-slider {
    height: 450px;
    margin: 0 auto;
    /*width: 900px;*/
    width: 100%;
    display:block;
    position:relative;
  }
  .my-slider ul {
    height: 450px;
    overflow: hidden;
    display:block;
    position:relative;
    
  }
  .my-slider li.my-slider-item {
    min-width:20px!important;
    display:block;
    position:relative;
    float: left;
    padding:0 4px;  
    
  }

  .my-slider li.my-slider-item img{   
    display:inline-block;
    position:relative;
  }

/** end of homepage slider section **/

/** welcome section **/

  .homeintro{
    
    background:var(--title)!important;
    padding:32px 0!important;
    width: 100% !important;
  }

  .welcome-img img {
    width:90%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
  }
  .welcome-text h4 {
    font-family: 'Metamorphous', cursive;
    font-size: 1.7rem!important;
    text-transform: uppercase;
    color:#000!important;
    text-align: center;
  }
  .welcome-text p {
    font-size: 1.1rem!important;
    color: #fff;
    margin-top: 14px;
    line-height: 1.5em!important;
  }

/** end of welcome section **/

/** home page gallery section **/

  .homegallery {
    padding: 2.5em 0;
    width: 100% !important;
  }
  .homegallery h3 {
    font-family: 'Metamorphous', cursive;
    text-align: center;
    font-size: 3em!important;
    margin-bottom: .6em;    
    color:var(--title)!important;
  }

  .portfolio-wrapper {
	  padding: 0;
	    text-align: center;
	}
	div#portfoliolist {
	  padding: 19px 0px 0px 0px;
	}
	.portfolio-wrapper img {
	  width: 80%;
	  margin: 0 auto;
	}
	.b-link-stripe .b-wrapper {
	  width: 81%;
	  left: 27px;
    display: none!important;
	}
	.portfolio-wrapper span a:hover {
	  background: url(../assets/images/list1.png) no-repeat 68% 51%;
	}

a#swipebox-prev, a#swipebox-next,
a#swipebox-close {
    color: #fff!important;    

  }
  .card{
    border: 0 !important;
  }
  .card-title{
    text-align: center!important;
    font-size:1.6rem!important;
    color:var(--title)!important;

  }
/** end of home page gallery **/

/**  footer section **/

    .footer{
        background:#3a3a3a;
        min-height:200px;
        color:#fff;
    }

    .footer .card{
        background:none !important;
        color: #fff !important;
    }

    .footer .card-body h2{
        background:none !important;
        color: #fff !important;
        font-weight: 400!important;
    }

    .footer ul{
      width: 100%;
      float: left;
      list-style-type: none;
      display: block !important;      
      padding:10px 0 0!important;
    }

    .contacts li i{
       margin-right:10px!important; 
    }

    .footer li{
      width: 100%;
      float: left;
      list-style-type: none;
      padding:52px auto!important;      
      display:block!important;
      
    }

    .footer li a{
      color: #fff !important;
      
    }

    .footer .tg-socialicons{
      width:100%;
      float:left;
      padding:10px 0 0;
      
    }
    .footer .tg-socialicons li:first-child{padding-left:0;}
    
    .tg-socialicons{
      overflow: hidden;
      list-style: none;
      text-align:center;
      line-height: 30px;
    }
    .tg-socialicons li{
      float: left;
      padding: 0 4px;
      line-height: inherit;
      list-style-type: none;
      width:auto!important;
    }
    .tg-socialicons li a{
      width:30px;
      height:30px;
      color: #fff;
      display:block;
      background:#3a3a3a;
      overflow:hidden;
      line-height: 30px;
      position:relative;
      text-align: center;
      border-radius: 30px;
      text-transform:capitalize;
    }
    

    .sbody{
        padding: 12px 0px !important;
    }
/** end footer section **/


@media(Max-width:500px){

  .header-right-text{
    display:none;
  }

  .logo{
    position: absolute !important;; 
    width: 100% !important;
    height: 50% !important;
    
  }

  .logo img{
    height:100%; 
    width:auto;
    display:inline-block!important;
  }

  .moblie-title{
    display:block;
    width:80%;
    float:right;
    text-align: left;
    font-size: 1.3rem!important;
    color:#ffff;
    padding-left:10px;
  }

  .navbar-expand-sm{
    float:left !important;
    position: relative!important;
    width:100%!important;
    background-color: #fff;
    margin: 0px !important;
    z-index: 1000;
  }

  .navbar-collapse{
    
    width:100%!important;
    margin-top:10px!important;
    
  }


  .welcome-img{

    width: 100% !important;
    height:auto !important;
    text-align: center;
  }

  .welcome-img img{
    display: inline-block;
    width: 40% !important;
    height: auto!important;
    margin-bottom:30px;
    
  } 

  .card{
    margin:20px 30px;
    border:1px solid #ccc;
  }
}