/* Layout 1*/

.layout-1 { text-align: center; }

.layout-1 .hero { margin-bottom: 35px; }

.layout-1 .card { margin-bottom: 30px; padding: 30px 14% 20px; border: none; border-bottom: 4px solid transparent; position: relative; overflow: hidden; }

.layout-1 .card:hover { border-bottom: 4px solid #f79f17;  -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; transition: all 0.1s ease;  }


.layout-1 .card:before {content: '';display: block;position: absolute;left: 0;bottom: -1px;background-image: url('http://ayatasnew.ayatasgroup.com/wp-content/uploads/2025/10/layout-1-hover-img.jpg');
  width: 100%;height: 100%;transition: .5s;background-color: #0291b3;background-repeat: no-repeat;background-position: 50% 50%;
  background-size: cover;transform: translateY(100%);-webkit-transform: translateY(100%);-moz-transform: translateY(100%);-o-transform: translateY(100%);}
  .layout-1 .card:hover:before{transform: translateY(0);-webkit-transform: translateY(0);-moz-transform: translateY(0); z-index: 0;}

.layout-1 p { z-index: 1; }

.layout-1 .card a { color: #000; font-size: 16px; font-weight: 600; z-index: 1; }

.layout-1 .card a i { position: relative;  top: 1px; left: 5px; }

.layout-1 .card h3 { font-size: 19px; text-transform: uppercase; margin-bottom: 10px; font-weight: 700; line-height: 26px;  z-index: 1; }

.layout-1 .card .icon-wrap { width: 60px; height: 60px; margin: 10px auto 20px; cursor: pointer;  z-index: 1; }

.layout-1 .card .icon-wrap .icon {  background-position: 0 0; background-image: url(../../images/icon-set-1.png); width: 100%; height: 100%; background-repeat: no-repeat; display: inline-block;}

.layout-1 .card:hover .icon { filter: brightness(0) invert(1); -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; transition: all 0.1s ease; }

.layout-1 .card:hover h3, .layout-1 .card:hover p, .layout-1 .card:hover a, .layout-1 .card:hover hr{ color: #fff; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; transition: all 0.1s ease; }

.layout-1 .card .icon-wrap .icon-1 { background-position: 0px 0px; }

.layout-1 .card .icon-wrap .icon-2, .layout-1 .hero ~ div:nth-child(4) .card .icon-wrap .icon { background-position: -100px 0px; }

.layout-1 .card .icon-wrap .icon-3, .layout-1 .hero ~ div:nth-child(5) .card .icon-wrap .icon { background-position: -200px 0px; }

.layout-1 .card .icon-wrap .icon-4, .layout-1 .hero ~ div:nth-child(6) .card .icon-wrap .icon { background-position: -300px 0px; }

.layout-1 .card .icon-wrap .icon-5, .layout-1 .hero ~ div:nth-child(7) .card .icon-wrap .icon { background-position: -400px 0px; }

.layout-1 .card .icon-wrap .icon-6, .layout-1 .hero ~ div:nth-child(8) .card .icon-wrap .icon { background-position: -500px 0px; }

.layout-1 .card .icon-wrap .icon-7, .layout-1 .hero ~ div:nth-child(9) .card .icon-wrap .icon { background-position: 0px -100px; }

.layout-1 .card .icon-wrap .icon-8, .layout-1 .hero ~ div:nth-child(10) .card .icon-wrap .icon { background-position: -100px -100px; }

.layout-1 .card .icon-wrap .icon-9, .layout-1 .hero ~ div:nth-child(11) .card .icon-wrap .icon { background-position: -200px -100px; }



 





/* Responsive */



@media (max-width: 1299px){ 



}

/* 1299 END */





@media (max-width: 1199px){ 



}

/* 1199 END */ 



@media (max-width: 991px){ 



}

/* 991 END */



@media (max-width: 767px){ 

.layout-1 .card { max-width: 500px; margin: 0 auto 30px;}







}

/* 767 END */



@media (max-width: 599px){ 

.layout-1 .card { padding: 25px 15px 20px; }

.layout-1 hr { margin-bottom: 15px; }







} 

/* 599 END */





@media (max-width: 479px){ 



} 

/* 479 END */