@import url(https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;900&display=swap);
@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap&subset=latin-ext');

:root{
    --primary:#2d2b36;
    --secondary:#f2eef1;
    --third: #ffd764;
    --back:#eb6e3d;
    
}
html{scroll-behavior: smooth;}
*{padding:0;margin:0;list-style:none;border:0;text-decoration:none;box-sizing:border-box;-webkit-overflow-scrolling:touch;font-family:'Mulish',sans-serif}:focus{outline:0}
body,html{height:100%}body{background-color:var(--primary);display:flex;flex-direction:column; text-decoration: none;}

/* menu */
.logo1 img{height: 55px; animation: 5s change_Color infinite alternate; }
.logo img{height: 85px;}
.follow i{cursor: context-menu;}

.header .container{display: flex; align-items: center; height: 100px;}
.header .language{display: flex; align-items: center; margin-left: 15px; padding-left: 15px; border-left: 1px solid rgba(255,255,255,.1);}
.header .actions{margin-left: auto; display: flex;}
.header .language a{display: block; font-size: 14px; margin-right: 10px; color:rgba(255,255,255,.5); text-decoration: none;}
.header .language a:focus{font-weight: bold; color: white;}
.header .actions{margin-left: auto;display: flex;}
.header .actions li{margin-left: 10px;}
.header .actions .youtube a:hover{text-decoration: none;}

/*Contact */
.contact{ box-shadow: 0 21px 87px -35px rgba(167, 167, 167, 0.4); border-radius: 20px;background: #fff;padding: 30px; margin-top: 100px; margin-bottom: 100px;}
.contact .contactTitle{display: flex; justify-content: center; justify-items: center;    height: 76px; border-bottom: 1px solid #e7eafb;padding: 0 30px; margin: 0 -30px 30px;}
.contact .contactTitle h5{    height: 46px;line-height: 106px;color:var(--primary); font-weight: 700;}
.contact .contactTitle h5::before{ font-family: "Font Awesome 5 Free";  content: '\f2b6';font-weight: 800; color: var(--primary); margin-right: 20px; }
.field{position: relative;}
.field input{width: 100%; border: 1px solid #e4e8ff; border-radius: 5px; line-height: 50px; padding:0 15px; color: #545d7a; box-sizing: border-box; outline: 0;} 
.field input:focus{outline: 0;}
.field label::before{position: absolute; content:attr(title); top:10px; left: 15px; font-size: 14px; line-height: 40px; color: #777; transition: 300ms all; }
.field input:valid +label::before{line-height: 20px; font-size: 12px; top: -10px; padding:0 6px; left: 9px;}
.field input:focus+label::before{line-height: 20px; font-size: 12px; top: -10px; background: #fff; padding:0 6px; left: 9px; content:attr(data-title); }
.contact button{width:100%;height:57px;background:var(--third);border-radius:8px;color:var(--primary);cursor:pointer;font-size:16px;font-weight:700;box-shadow:0 11px 30px -15px #6778e1;transition:300ms background-color}
.contact button:hover{background:var(--primary); color: white;}
/*  Footer */
.footer{margin-top:auto;padding:75px;border-top:5px solid var(--primary);background-color:#fff;box-shadow:0 10px 76px -12px rgba(0,29,147,.1)}
.footer .footer-top{display:flex;align-items:flex-start}
.footer .footer-top .logo{display:flex;align-items:center;font-size:26px;font-weight:700;margin-right:50px;color:#10182f}
.footer .footer-top .footer-menu{margin-left:auto;display:flex}
.footer .footer-top .footer-menu nav{min-width:180px;margin-right:40px; margin-left: 150px;}
.footer .footer-top .footer-menu nav h5{cursor: context-menu; font-size:14px;font-weight:700;color:var(--primary);margin-bottom:15px;text-transform:uppercase}
.footer .footer-top .footer-menu nav ul li a{display:inline-block;font-size:16px;color:#545d7a;padding:10px 0;z-index:1;position:relative}
.footer .footer-bottom .footer-menu ul li a::before,.footer .footer-top .footer-menu nav ul li a::before{content:'';height:20px;position:absolute;bottom:0;left:0;background-color:rgba(84,93,122,.1);width:0;transition:300ms width;z-index:-1; text-decoration: none;}
.footer .footer-bottom .footer-menu ul li a:hover,.footer .footer-top .footer-menu nav ul li a:hover{color:#222c46; text-decoration: none;}
.footer .footer-bottom .footer-menu ul li a:hover::before,.footer .footer-top .footer-menu nav ul li a:hover::before{width:100%}
.footer .footer-bottom{display:flex;align-items:center;padding-top:85px;justify-content:space-between}
.footer .footer-bottom p{font-size:14px;color:#545d7a}
.footer .footer-bottom .footer-menu ul,.footer .footer-bottom .footer-social{display:flex}
.footer .footer-bottom .footer-menu ul li{margin:0 25px}
.footer .footer-bottom .footer-menu ul li a{display:inline-block;font-size:14px;color:#545d7a;z-index:1;position:relative}
.footer .footer-bottom .footer-menu ul li a::before{bottom:-10px}
.footer .footer-bottom .footer-social li a{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:300ms background-color}
.footer .footer-bottom .footer-social li a img{opacity:.55;transition:300ms opacity}
.footer .footer-bottom .footer-social li a:hover{background-color:rgba(16,24,47,.05)}
.footer .footer-bottom .footer-social li a:hover img{opacity:1}

/*Gallery*/
.galleryIndex{
    background: #ffd764;
    padding: 6px;
    border-radius: 8px;
    font-weight: bold;

}
.imageBox{
    background: white;
    height: 450px;
    border-radius: 5px;
    margin: 50px 15px 50px 15px;
    overflow: hidden;
    border: 3px solid white;
}
.imageBox img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    position: relative;
}
.imageBox h2{
    top:49%;
    left: 17%;
    position: absolute;
    color:white;
    font-weight:700;
    font-size:20px;
}
.imageBox p{
    top:255px;
    position: absolute;
    width:83%;
    height:10%;
    opacity:0.6;
    background: #212529;
}



/* responsive */
@media(min-width:1200px){
    .header .actions li.instagram{ display: none;}
    .header .actions li.youtube{ display: none;}
}

@media(max-width:1200px)and (min-width:992px) {
    .header .actions li.instagram{ display: none;}
    .header .actions li.youtube{ display: none;}
}

@media (max-width: 992px) and (min-width:769px) {
    .header .actions li.instagram{ display: none;}
    .header .actions li.youtube{ display: none;}
  
}

@media (max-width: 769px) and (min-width: 576px) {
    

    .footer .footer-top .footer-menu nav{margin-top: 50px;margin-left: 30px;}
 
 
}
@media (min-width:578px) and (max-width:770px) {
    .header .actions li.youtube{ display: none;}
}

@media (min-width:286px) and (max-width:576px) {

    .header .follow{display: none;}
    .header .actions li{margin-left:10px;}
    .header .actions li a{color: var(--primary);}
    .header .actions li.youtube a i{margin-right: 0 !important;height: 14px !important; animation: 1s hvr-pulse-grow infinite alternate; }
    .header .actions li.youtube a span{display: none;}
    .header .actions li.youtube a {background: var(--third); width: 45px;height: 45px; border-radius: 50%; padding: 0; display: grid;place-items: center;  animation: 5s change_Color infinite alternate;}
    .header .actions li.instagram{ display: none;}
    .footer .footer-top .footer-menu nav{margin-top: 50px; margin-left: 30px;}
    .contact{width: 78%; margin-top: 20px;}
}


/* Iphone5s */

@media(max-width:341px) {
    .contact .contactTitle span{display: none;}

}






/* animation */
@keyframes change_Color{
    0% {
        filter: hue-rotate(3.142rad);
    }
    100% {
        filter: hue-rotate(0deg);
    }
}

.follow i:hover, 
.follow i:focus, 
.follow i:active {
	-webkit-animation-name: buzz;
	animation-name: buzz;
	-webkit-animation-duration: 0.15s;
	animation-duration: 0.15s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
	
@-webkit-keyframes buzz {
  	50% {
  	    -ms-transform: translateX(3px) rotate(2deg);
	    -webkit-transform: translateX(3px) rotate(2deg);
	    transform: translateX(3px) rotate(2deg);
  	}
  	100% {
	    -ms-transform: translateX(-3px) rotate(-2deg);
	    -webkit-transform: translateX(-3px) rotate(-2deg);
	    transform: translateX(-3px) rotate(-2deg);
  	}
}
@keyframes buzz {
  	50% {
	    -ms-transform: translateX(3px) rotate(2deg);
	    -webkit-transform: translateX(3px) rotate(2deg);
	    transform: translateX(3px) rotate(2deg);
  	}
  	100% {
	    -ms-transform: translateX(-3px) rotate(-2deg);
	    -webkit-transform: translateX(-3px) rotate(-2deg);
	    transform: translateX(-3px) rotate(-2deg);
  	}
}

@-webkit-keyframes buzz {
  	50% {
  	    -ms-transform: translateX(3px) rotate(2deg);
	    -webkit-transform: translateX(3px) rotate(2deg);
	    transform: translateX(3px) rotate(2deg);
  	}
  	100% {
	    -ms-transform: translateX(-3px) rotate(-2deg);
	    -webkit-transform: translateX(-3px) rotate(-2deg);
	    transform: translateX(-3px) rotate(-2deg);
  	}
}
@keyframes buzz {
  	50% {
	    -ms-transform: translateX(3px) rotate(2deg);
	    -webkit-transform: translateX(3px) rotate(2deg);
	    transform: translateX(3px) rotate(2deg);
  	}
  	100% {
	    -ms-transform: translateX(-3px) rotate(-2deg);
	    -webkit-transform: translateX(-3px) rotate(-2deg);
	    transform: translateX(-3px) rotate(-2deg);
  	}
}


/* Pulse Grow */
@-webkit-keyframes hvr-pulse-grow {
    to {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
  }
  @keyframes hvr-pulse-grow {
    to {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
  }
  .hvr-pulse-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
    -webkit-animation-name: hvr-pulse-grow;
    animation-name: hvr-pulse-grow;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
  }