:root {
--primary: #2FA09E;
--secondary: #FDBE33;
--light: #F4F6F8;
--dark: #040F28;
}

.list-group {
font-size: 0.85rem;
text-align: justify;
}

.cardf {
background-color: #2FA09E;
}

.form-control {
border-color:  rgba(52, 58, 64, 0.6);
}

    .form-control:focus {
        border-color: #2FA09E;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(47, 160, 158, 0.5);
    }


.pagetop {
color: #2FA09E;
font-family: 'Dancing Script', cursive;
font-weight: 700;
font-size: 55px;
}

@media (max-width: 767px) {
.pagetop {
font-size: 28px;
}
}

.btn-outline-light {
  --bs-btn-color: #FFF;
}

.btn {
position: relative;
font-weight: 600;
text-transform: uppercase;
transition: .5s;
}

.btn::after {
position: absolute;
content: "";
width: 0;
height: 5px;
bottom: -1px;
left: 50%;
background: var(--primary);
transition: .5s;
}

.btn.btn-primary::after {
background: var(--dark);
}

.btn:hover::after,
.btn.active::after {
width: 50%;
left: 25%;
}

.btn-primary {
color: #FFFFFF;
}

.btn-square {
width: 36px;
height: 36px;
}

.btn-sm-square {
width: 28px;
height: 28px;
}

.btn-lg-square {
width: 46px;
height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
padding-left: 0;
padding-right: 0;
text-align: center;
}

.back-to-top {
position: fixed;
display: none;
right: 2%;
bottom: 3%;
margin-right: -12px;
border-radius: 0;
z-index: 9999;
}

.shadow-sm-top {
-webkit-box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
-moz-box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}


@media (max-width: 767px) {
		.carousel-inner .carousel-item > div {
			display: none;
		}
		.carousel-inner .carousel-item > div:first-child {
			display: block;
		}
	}

	.carousel-inner .carousel-item.active,
	.carousel-inner .carousel-item-next,
	.carousel-inner .carousel-item-prev {
		display: flex;
	}

	/* medium and up screens */
	@media (min-width: 768px) {

		.carousel-inner .carousel-item-end.active,
		.carousel-inner .carousel-item-next {
			transform: translateX(25%);
		}

		.carousel-inner .carousel-item-start.active, 
		.carousel-inner .carousel-item-prev {
			transform: translateX(-25%);
		}
	}

	.carousel-inner .carousel-item-end,
	.carousel-inner .carousel-item-start { 
		transform: translateX(0);
	}


.navbar-nav .nav-link {
position: relative;
padding: 20px 15px;
font-size: 18px;
color: var(--dark);
outline: none;
transition: .5s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--dark);
text-decoration: underline;

}

@media (max-width: 991.98px) {
.navbar-nav .nav-link  {
margin-left: 0;
padding: 10px 0;
}
}

.page-header {
height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.service-item .service-icon {
margin-top: -50px;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
}

.service-item .service-icon i {
transition: .2s;
}

.service-item:hover .service-icon i {
font-size: 60px;
}

.portfolio-item {
margin-bottom: 60px;
}

.portfolio-title {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
height: 120px;
padding: 0 30px;
right: 30px;
left: 30px;
bottom: -60px;
background: #FFFFFF;
z-index: 3;
}

.portfolio-btn {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
font-size: 120px;
line-height: 0;
transition: .1s;
transition-delay: .3s;
z-index: 2;
opacity: 0;
}

.portfolio-item:hover .portfolio-btn {
opacity: 1;
}

.portfolio-box::before,
.portfolio-box::after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
transition: .5s;
z-index: 1;
background: rgba(4, 15, 40, .7);
}

.portfolio-box::before {
left: 0;
}

.portfolio-box::after {
right: 0;
}

.portfolio-item:hover .portfolio-box::before {
left: 0;
width: 50%;
}

.portfolio-item:hover .portfolio-box::after {
right: 0;
width: 50%;
}

@media (min-width: 992px) {
.testimonial,
.contact-form {
margin-left: -90px;
}
}

/* ----------------------------------------------------------------------------------------------- */

.clients {
padding: 15px 0;
text-align: center;
}

.clients img {
max-width: 45%;
transition: all 0.4s ease-in-out;
display: inline-block;
padding: 15px 0;
}

.clients img:hover {
transform: scale(1.15);
}

@media (max-width: 768px) {
.clients img {
max-width: 40%;
}
}

/* ----------------------------------------------------------------------------------------------------- */
.featured-services {
background-color: #f2f3f8;
}


.featured-services .icon-box {
padding: 30px;
position: relative;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 0 4px 0 rgba(68, 88, 144, 0.12);
transition: all 0.3s ease-in-out;
z-index: 1;
border-bottom: 4px solid #30aab5;
width: 100%;
}

.featured-services .icon-box::before {
content: '';
position: absolute;
background: #30aab5;
right: 0;
left: 0;
bottom: 0;
top: 100%;
transition: all 0.3s;
z-index: -1;
}

.featured-services .icon-box:hover::before {
background: #30aab5;
top: 0;
border-radius: 0px;
}

.featured-services .icon {
margin-bottom: 15px;
text-align: center;
}

.featured-services .icon i {
font-size: 48px;
line-height: 1;
color: #30aab5;
transition: all 0.3s ease-in-out;
}

.featured-services .title {
font-weight: 700;
margin-bottom: 15px;
font-size: 18px;
text-align: center;
}

.featured-services .title a {
color: #111;
}

.featured-services .description {
font-size: 12px;
margin-bottom: 0;
text-align: justify;

}

.featured-services .icon-box:hover .title a, .featured-services .icon-box:hover .description {
color: #fff;
}

.featured-services .icon-box:hover .icon i {
color: #fff;
}




/* ---------------------------------------------------------------------------------------------------- */
.services .icon-box {
text-align: center;
border: 1px solid #e2eefd;
padding: 80px 20px;
transition: all ease-in-out 0.3s;
background: #fff;
}

.services .icon-box .icon {
margin: 0 auto;
width: 64px;
height: 64px;
background: #f1f6fe;
border-radius: 4px;
border: 1px solid #deebfd;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: ease-in-out 0.3s;
}

.services .icon-box .icon i {
color: #3b8af2;
font-size: 28px;
transition: ease-in-out 0.3s;
}

.services .icon-box h4 {
font-weight: 700;
margin-bottom: 15px;
font-size: 24px;
}

.services .icon-box h4 a {
color: #222222;
transition: ease-in-out 0.3s;
}

.services .icon-box p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}

.services .icon-box:hover {
border-color: #fff;
box-shadow: 0px 0 25px 0 rgba(16, 110, 234, 0.1);
}

.services .icon-box:hover h4 a, .services .icon-box:hover .icon i {
color: #106eea;
}

.services .icon-box:hover .icon {
border-color: #106eea;
}

/*------------------------------------------------------------------------------------------------------------*/
figure {
position: relative;
overflow: hidden;
display: block;
text-align: center;
}

.im-gonna-change img {
width: 100%;
height: 100%;
display: block;
}

figcaption {
cursor: pointer;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
z-index: 100;
padding: 15px;
font-weight: 100;
}

figcaption h3 {
font-size: 1.5rem;
font-weight: 400;
}

figcaption span {
font-weight: 700;
}

.im-gonna-change p,
.im-gonna-change h3 {
transition: opacity 0.35s, transform 0.35s;
}

.im-gonna-change figcaption{
transition:0.35s ease-in;
}

.im-gonna-change h3 {
poition: absolute;
opacity: 0;
}

.im-gonna-change p {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
width: 100%;
opacity: 0;
font-size: 1.0rem;
}

.im-gonna-change:hover figcaption {
transform: translate3d(0,0,0);
background-color: rgba(0,0,0,0.6);
}

.im-gonna-change:hover h3 {
color: #fff;
opacity: 1;
transform: translate3d(0,10px,0);
}

.im-gonna-change:hover p {
color: #fff;
opacity: 1;
transform: translate3d(0,-10px,0);
}

/*------------------------------------------------------------------------------------------------------------*/

#gallery { margin-bottom: 20px; }

/*------------------------------------------------------------------------------------------------------------*/

#gallView { 
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}

#gallView .startitems {
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: calc(100%/4 - 0.5vw);
  margin-right: 0.5vw;
  margin-bottom: 0.5vw;
}

#gallView .items { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: calc(100%/3 - 0.5vw);
  margin-right: 0.5vw;
  margin-bottom: 0.5vw;
}

#gallView .startitems:nth-child(4n) {
margin-right: 0;
margin-bottom: 0;
}

#gallView .items:nth-child(3n) {
  margin: 0;
}

#gallView .startitems img,
#gallView .items img { 
  width: 100%; 
  height: auto; 
}

.zoomIn {
  overflow: hidden;
}

.zoomIn  img {
  transition: transform .5s ease;
}

.zoomIn:hover img {
  transform: scale(1.2);
}

#gallView .startitems:nth-child(4n) .textbox { bottom: 10px; }

.textbox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background:rgba(0, 0, 0, 0.75);
width: 100%;
height: 15%;
text-align: center;
color:#FFFFFF;
z-index:2;
}

.textbox h4 {
margin: 10px 0px 0px 0px;
font-size: 18px;
}

@media screen and (max-width: 400px) {
  #gallView div { margin: 0; }
}