/*
Theme Name: Sevag Akelian
Author: Sevag Akelian
Author URI: http://sevagakelian.com
Description: This is my portfolio's theme
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: sevag, akelian, web-development, web-developer, php, cakephp, croogo, react, react-native, nodejs, websites, jquery, javascript, html5, css3
*/

/***CSS VARIABLES***/
:root{
	--grey-color:#252A30;
	--yellow-color:#FED766;
	--yellow-shade-color:#BFA24D;
	--white-color:#FFFFFF;
  --secondary-color:#04C2C9;
}
/***CSS VARIABLES***/

*{
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition:    all 0.4s ease;
  -ms-transition:     all 0.4s ease;
  -o-transition:      all 0.4s ease;
}
body{font-family: 'Montserrat',sans-serif;font-weight:normal;
color:var(--grey-color);font-size:14px;}

/***general***/
*:focus {outline: none;}
a{color:inherit;}
p a{color:var(--secondary-color);}
p a:hover{opacity:0.8;color:var(--secondary-color);}
a:hover{text-decoration: none;color:inherit;;}
a:active{text-decoration: none;}
.wrapper{position:relative;}

.sa-button{display:inline-block;color:var(--white-color);padding:10px 20px;
border:2px solid var(--white-color);}
.sa-button i{margin-left:5px;}
.sa-button:hover{color:inherit;background-color:var(--secondary-color);cursor:pointer;
border-color:var(--secondary-color);}
.sa-button:hover i{transform: rotate(90deg);}
h1{font-size:28px;font-weight:bold;}
h2.section-title{text-align: center;margin:15px 0;font-size:28px;font-weight:bold;}
h2.section-title hr{width:65px;border:2px solid var(--secondary-color);display:block;margin:0 auto;
margin-top:15px;}
.sa-button-dark{display:inline-block;color:var(--white-color);padding:10px 20px;
background-color: var(--grey-color);font-size:14px;font-weight:bold;}
.sa-button-dark i{margin-left:5px;}
.sa-button-dark:hover{color:var(--white-color);background-color:var(--secondary-color);cursor:pointer;}

.lg-backdrop.in{opacity:0.8;}
.lg-backdrop{z-index:200000 !important;}
.lg-outer{z-index:200001 !important;}
/***general***/

/***section***/
.section{padding-top:50px;position:relative;}
.section-content{padding:40px 0;}
.section-overlay{width:100%;height:100%;position:absolute;top:0;right:0;background-color:var(--grey-color);
opacity:0.8;}
/***section***/

/***header***/
.header-full{position:relative;width:100vw;height:93vh;background-color:var(--grey-color);
background-repeat: no-repeat;background-size: cover;background-position:center;display:flex;
z-index:10;align-items:center;justify-content: center;text-align:center;max-width:100%;
background-attachment: fixed;}
body.chrome.linux .header-full{height:calc(100vh - 56px);}
.header-overlay{position:absolute;width:100%;height:100%;top:0;left:0;
background-color:rgba(0,0,0,0.5);z-index:11;}

.header-content{z-index:12;color:var(--white-color);}
.home .header-content{margin-top:34vh;}
.header-content h3.header_name{font-size:2.5vw;margin-bottom:16px;color:#04c2c9;letter-spacing:12px;}
.header-content h1.header_description{font-size:1.2vw;margin-bottom:32px;}
.header-content .sa-button{font-size:18px;}
.header-social-links{text-align:center;margin:30px 0;margin-bottom:0;}
.header-social-links a{display: inline-block;font-size: 2.1vw;margin:0 14px;line-height:0px;}
.header-social-links i:hover{color:var(--secondary-color);}

.scroll-down-icon{position:absolute;width:30px;height:50px;border-radius:35px;bottom:8%;border:1px solid #ffffff;
z-index:12;display:flex;justify-content:center;}
.scroll-down-icon span{position:absolute;top:20%;width:10px;height:10px;background-color:#ffffff;
border-radius:50%;opacity:1;animation: sa-scroll-icon 2.5s linear infinite;transition-duration: 0s !important;}

@keyframes sa-scroll-icon {
  0% {
      opacity: 1;
      top: 20%;
  }
  15% {
      opacity: 1;
      top: 50%;
  }
  50% {
      opacity: 0;
      top: 50%;
  }
  100% {
      opacity: 0;
      top: 20%;
  }
}
/***header***/

/***back-to-top***/
.back-to-top{position:fixed;display:block;background-color:var(--secondary-color);
bottom:15px;right:15px;line-height:0;padding:15px;opacity:0.4;color:#ffffff;z-index:1000;}
.back-to-top.hidden{display:none;}
.back-to-top.show{display:block;}
.back-to-top:hover{cursor: pointer;opacity:0.7;color:#ffffff;}

/***back-to-top***/

/***main-menu***/
.main-menu{width:100%;background-color:var(--grey-color);padding:15px 0;
border-bottom:3px solid var(--secondary-color);z-index:1000;}
.main-menu ul{list-style-type:none;text-align:center;margin:0;}
.main-menu ul li{display:inline;text-align:center;margin-right:25px;}
.main-menu ul li:last-child{margin-right:0;}
.main-menu ul li a{color:var(--white-color);font-size:14px;}
.main-menu ul li a:hover{color:var(--secondary-color);}
.main-menu.fixed-menu{position:fixed;top:0;}
.main-menu-holder{width:100%;height:54px;}
.main-menu ul li a.active{color:var(--secondary-color);}
#responsive-menu-container{bottom:auto !important;padding-top:35px !important;}
/***main-menu***/

/***about front page***/
#about-front-page {background-color: #f5f5f5;}
.about-image{text-align:right;}
.about-image img{border:1px solid var(--grey-color);padding:3px;
border-radius:8px;border-radius: 50%;margin-bottom:15px;max-width:300px;}
#about-front-page .section-content {text-align: center;}
.about-description{margin-top:15px;text-align: center;}
/***about front page***/

/***clients front page***/
#clients-list > div{margin-bottom:15px;overflow:hidden;text-align:center;}
.client-photo{border-radius: 50%;overflow:hidden;margin:0 auto;margin-bottom:15px;}
.client-photo img{width:100%;}
.client-item h5{font-size:18px;margin-bottom:3px;}
.client-item h6{font-size:15px;opacity:0.5;}
/***clients front page***/

/*** Numbers Front Page ***/
.number-item {
  padding: 15px;
  margin-bottom: 15px;
  margin-top: 15px;
}

.number-item i {
  display: block;
  color: var(--secondary-color);
  font-size: 45px;
}

.number-item h1 {
  font-size: 45px;
}

.number-item span {
  font-size: 45px;
  font-weight: bold;
  display: block;
}

.number-item h2 {
  font-size: 20px;
}

.number-item p {
  font-size: 20px;
}

.number-item i, 
.number-item h1, 
.number-item h2, 
.number-item span, 
.number-item p {
  text-align: center;
}
@media (max-width: 768px) {
  .number-item {
    display: flex; /* Flexbox for alignment */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center all child items */
    justify-content: center; /* Center items vertically */
    text-align: center; /* Ensure text stays centered */
    padding: 10px; /* Adjust padding for mobile */
  }

  .number-item i {
    font-size: 40px; /* Reduce icon size for smaller screens */
  }

  .number-item h1,
  .number-item span {
    font-size: 18px; /* Adjust heading and number size */
  }

  .number-item h2,
  .number-item p {
    margin: 5px 0; /* Reduce spacing between text */
    font-size: 12px; /* Reduce text size for smaller screens */
  }
}
/***numbers front page***/

/***services front page***/
.fixed-background{background-size:cover;background-repeat: no-repeat;
background-attachment: fixed;}
.service-item{margin-bottom:30px;}
.service-item i{display:block;font-size:45px;margin-bottom:10px;}
.service-item h1{font-size:26px;}
.service-item h3{font-size:26px;font-weight: bold;}
.service-item h2{font-size:17px;}
.service-item p{font-size:17px;}
.service-item i, .service-item h1, .service-item h2,.service-item h3,.service-item p{text-align:center;}
/***services front page***/

/***boxes front page***/
.home-boxes{display:flex;}
.home-box{text-align:center;padding:10px;}
.home-box:nth-child(2n){background-color:#f5f5f5;}
.box-icon i{color:var(--secondary-color);font-size:45px;display:block;margin-bottom:15px;}
.box-title h4{color:var(--secondary-color);margin-bottom:7px;font-size:18px;}
.box-description p{font-size:10pt;}

/***boxes front page***/

/***portfolio front page***/
.portfolio-item{width:100%;padding-bottom:100%;margin-bottom:30px;
position:relative;overflow:hidden;}
.portfolio-item img{width:100%;position:absolute;left:0;top:0;display:block;}
.portfolio-black-over{position:absolute;width:100%;height:100%;
background-color:rgba(255,255,255,0.1);z-index:10;}
.portfolio-overlay{position:absolute;width:100%;height:100%;
background-color:rgba(255,255,255,0);z-index:11;}
.portfolio-text{position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);
width:100%;text-align:center;padding:0 5px;}
.portfolio-text h2,.portfolio-text h3,.portfolio-text h4,.portfolio-text i,.portfolio-text h5{color:transparent;}
@media (max-width: 768px) {
    .portfolio-overlay {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .portfolio-text i {
        color: white; /* Makes the icon white */
        font-size: 36px; /* Adjust size as needed for mobile */
        z-index: 12; /* Ensures it stays on top */
        display: block; /* Ensures it's visible */
    }

    /* Hide other text elements on mobile if necessary */
    .portfolio-text h2,
    .portfolio-text h3,
    .portfolio-text h4,
    .portfolio-text h5 {
        display: none;
    }
}
.portfolio-text i{padding:7px;font-size:24px;}
.portfolio-text h2{font-size:22px;}
.portfolio-text h5{font-size:22px;}
.portfolio-text h3{font-size:16px;}
.portfolio-text h4{font-size:15px;font-style: italic;margin-top:7px;}
.portfolio-item:hover{cursor:pointer;}
.portfolio-item:hover .portfolio-overlay{background-color:rgba(255,255,255,0.8);}
.portfolio-item:hover .portfolio-text h2,.portfolio-item:hover .portfolio-text h3,.portfolio-item:hover .portfolio-text h4,.portfolio-item:hover .portfolio-text h5{color:var(--grey-color);}
.portfolio-item:hover .portfolio-text i{color:var(--grey-color);}
/*.portfolio-item:hover .portfolio-text i{background-color:var(--secondary-color);}*/

.project-ajax.hide{opacity:0;}
.project-ajax.show{opacity:1;}
.project-ajax{}

.single-project-content{padding:15px;position:relative;}
.single-project-content p{text-align: justify;}
.single-project-content h1{font-size:28px;line-height: 28px;}
.single-project-content h2{font-size:21px;line-height:21px;color:#6c757d;}
.single-project-gallery{height:75vh;width:100%;overflow:hidden;
background-color:#f5f5f5;max-height:800px;}
.single-project-item{width:100%;height:75vh;position: relative;max-height:800px;overflow:hidden;}
.single-project-item img{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);
max-width: 100%;max-height: 100%;}
.slick-arrow{position:absolute;z-index: 1000;top:50%;transform: translateY(-50%);padding:15px;color:#ffffff;
background-color:rgba(0,0,0,0.6);}
.slick-arrow:hover{cursor:pointer;opacity:0.3;}
.slick-arrow.slick-prev-arrow{left:0;}
.slick-arrow.slick-next-arrow{right:0;}
.slick-arrow.slick-disabled{opacity:0.3;}
.slick-arrow.slick-disabled:hover{cursor:auto;}

.project-tags{padding-bottom:15px;}
.project-tags h5{font-size:25px;margin-bottom:15px;}
.project-tag{background-color:#6c757d;padding:5px 10px;margin-right:10px;text-align:center;
color:#ffffff;margin-bottom:15px;display:inline-block;}
/***portfolio front page***/

/***contact front page***/
.contact-form{text-align: justify;}
.contact-info{margin-bottom:30px;}
.cinfo a:hover{color:var(--secondary-color);}
.cinfo{margin-bottom:15px;}
.cinfo i{margin-right:8px;font-size:20px;}
/***contact front page***/

/***social-section***/
#social-section{background-color:#1E242C;margin-top:-2px;}
.social-content{text-align: center;color:#ffffff;font-size:25px;}
.social-icon{padding:7px;border-radius: 50%;background-color: #252a30;display:inline-block;
width:50px;height:50px;vertical-align: middle;margin-left:10px;}
.social-icon:hover{background-color: var(--secondary-color);}
.social-icon:first-child{margin-left:0;}
.footer-text{text-align: center;margin-top:10px;}
.footer-text h5{color: #6c757d;font-size:13px;letter-spacing: 6px;margin-bottom:0;}
.footer-text h5 span{}
.footer-menu ul{list-style-type:none;text-align:center;display:flex;align-items:center;justify-content:center;padding:0;}
.footer-menu ul li a{color: #6c757d;font-size:12px;margin:0 18px;}
.footer-menu ul li a:hover{color: #ffffff;}

/***social-section***/

/***prices***/
.price-item{text-align:center;width:100%;border:1px solid #E5E5E5;padding-bottom:30px;
margin-bottom:30px;}
#prices-list{padding:0 60px;}
.price-item i{font-size:32px;padding:30px 15px;}
.price-item h1{font-size:17px;margin-bottom:30px;}
.price-item h6{font-size:17px;margin-bottom:30px;font-weight:bold;}

.price-item h2{font-size:15px;padding:12px 15px;border-bottom:1px solid #E5E5E5;
margin:0;}
.price-item h2:first-child{border-top:1px solid #E5E5E5;}

.price-item h4{
  font-size: 14px;
    margin-bottom: 6px;
    margin-top: 16px;
}

.price-item h5{font-size:15px;padding:12px 15px;border-bottom:1px solid #E5E5E5;
margin:0;}
.price-item h5:first-child{border-top:1px solid #E5E5E5;}
.price-item h3{padding:30px 15px;margin:0;padding-top:0;}
.price-item:hover{background-color:#ffffff;}
.price-item .sa-button-dark{line-height:14px;font-weight:normal;background-color:var(--secondary-color);}
.price-item .sa-button-dark:hover{background-color:var(--grey-color);}
h2.section-description{font-size:18px;text-align:center;}
/***prices***/
.alignleft {
    float: left;
    margin: 0.5em 1em 0.5em 0;
}
.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1em;
}
.price-item sup{
  font-size: 15px;
  line-height: 15px;
  top: -13px;
}
.clear{clear:both;}
@media(max-width:1200px){

}

@media(max-width:992px){
  .about-image{text-align: center;margin-top:30px;}
  .about-image img{border-radius: 5px;}
  #prices-list{padding:inherit;}
	.home-boxes{display:block;}
}

@media(min-width:992px){
	.home-box{max-width:20%;}
}

@media(max-width:768px){
  .modal-open{overflow-y:hidden !important;}
  .header-content h1.header_description, .header-content h3.header_name{font-size:28px;}
  .header-social-links a{font-size:28px;}
  .header-social-links{margin:23px 0;}
  .parallax-effect{background-position: center !important;}
    #prices-list{padding:inherit;}
  /*.body{min-height:calc(100vh + 56px);background-color:black;}/*to fix the android chrome bottom issue*/
  .alignleft,.alignright{float: none;}

}

@media(max-width:576px){
  .header-content h1.header_description, .header-content h3.header_name{font-size:22px;}
  .header-social-links a{font-size:22px;}
    #prices-list{padding:inherit;}
	
}

@media(max-width:450px){
  .header-content h1.header_description{font-size:20px;}
  .header-social-links a{font-size:20px;}
  .footer-text h5 span{display:block;margin-top:5px;}
    #prices-list{padding:inherit;}
}


/****AJAX LOADER****/
.cssload-spin-box.show{opacity:1;}
.cssload-spin-box.hide{opacity:0;}
.cssload-spin-box {
	position: absolute;
	margin: auto;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
		-o-box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
		-ms-box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
		-webkit-box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
		-moz-box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
	animation: cssload-spin ease infinite 2.2s;
		-o-animation: cssload-spin ease infinite 2.2s;
		-ms-animation: cssload-spin ease infinite 2.2s;
		-webkit-animation: cssload-spin ease infinite 2.2s;
		-moz-animation: cssload-spin ease infinite 2.2s;
}



@keyframes cssload-spin {
	0%,
	100% {
		box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
	}
	25% {
		box-shadow: -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73);
	}
	50% {
		box-shadow: -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223);
	}
	75% {
		box-shadow: 15px -15px #dfdfdf, 15px 15px #4f4d49, -15px 15px #dfdfdf, -15px -15px #4f4d49;
	}
}

@-o-keyframes cssload-spin {
	0%,
	100% {
		box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
	}
	25% {
		box-shadow: -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73);
	}
	50% {
		box-shadow: -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223);
	}
	75% {
		box-shadow: 15px -15px #dfdfdf, 15px 15px #4f4d49, -15px 15px #dfdfdf, -15px -15px #4f4d49;
	}
}

@-ms-keyframes cssload-spin {
	0%,
	100% {
		box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
	}
	25% {
		box-shadow: -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73);
	}
	50% {
		box-shadow: -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223);
	}
	75% {
		box-shadow: 15px -15px #dfdfdf, 15px 15px #4f4d49, -15px 15px #dfdfdf, -15px -15px #4f4d49;
	}
}

@-webkit-keyframes cssload-spin {
	0%,
	100% {
		box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
	}
	25% {
		box-shadow: -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73);
	}
	50% {
		box-shadow: -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223);
	}
	75% {
		box-shadow: 15px -15px #dfdfdf, 15px 15px #4f4d49, -15px 15px #dfdfdf, -15px -15px #4f4d49;
	}
}

@-moz-keyframes cssload-spin {
	0%,
	100% {
		box-shadow: 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223);
	}
	25% {
		box-shadow: -15px 15px rgb(223,223,223), -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73);
	}
	50% {
		box-shadow: -15px -15px rgb(79,77,73), 15px -15px rgb(223,223,223), 15px 15px rgb(79,77,73), -15px 15px rgb(223,223,223);
	}
	75% {
		box-shadow: 15px -15px #dfdfdf, 15px 15px #4f4d49, -15px 15px #dfdfdf, -15px -15px #4f4d49;
	}
}
/****AJAX LOADER****/