/*======================================================
                PREMIUM ANIMATIONS
======================================================*/

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(80px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes fadeLeft{

0%{
opacity:0;
transform:translateX(-80px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

@keyframes fadeRight{

0%{
opacity:0;
transform:translateX(80px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0px);
}

}

.hero-arch{

animation:float 7s ease-in-out infinite;

}

.service-card{

animation:float 6s ease-in-out infinite;

}

.package-card:nth-child(2){

animation-delay:.5s;

}

.package-card:nth-child(3){

animation-delay:1s;

}

.service-card:nth-child(2){

animation-delay:.4s;

}

.service-card:nth-child(3){

animation-delay:.8s;

}

.service-card:nth-child(4){

animation-delay:1.2s;

}

.service-card:nth-child(5){

animation-delay:1.6s;

}

.service-card:nth-child(6){

animation-delay:2s;

}

/*=========================================
            GOLD SHINE
=========================================*/

@keyframes gold{

0%{

background-position:-200%;

}

100%{

background-position:200%;

}

}

.hero h1{

background:linear-gradient(
90deg,
#ffffff,
#e8d39a,
#ffffff
);

background-size:200%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:gold 8s linear infinite;

}

/*=========================================
        ARCH GLOW (hero merkez motifi)
=========================================*/

@keyframes archGlow{

0%,100%{

box-shadow:0 30px 70px rgba(200,166,78,.25);

}

50%{

box-shadow:0 30px 90px rgba(200,166,78,.45);

}

}

.hero-arch .arch-shape{

animation:archGlow 5s ease-in-out infinite;

}

/*=========================================
            CARD HOVER
=========================================*/

.package-card,
.service-card,
.blog-card,
.gallery-item,
.why-card,
.testimonial-card{

transition:.45s;

}

.package-card:hover,
.service-card:hover,
.blog-card:hover,
.why-card:hover,
.testimonial-card:hover{

transform:translateY(-14px);

box-shadow:
0 30px 70px rgba(0,0,0,.12);

}

.gallery-item:hover .arch-shape{

transform:translateY(-10px);

box-shadow:0 35px 80px rgba(31,109,57,.35);

}

/*=========================================
            BUTTON SHINE
=========================================*/

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:70px;

height:100%;

background:rgba(255,255,255,.45);

transform:skew(-30deg);

transition:.8s;

}

.btn-primary:hover::before{

left:140%;

}

/*=========================================
            ARCH ZOOM (imge yerine)
=========================================*/

.blog-cover i,
.about-visual .arch-shape,
.hajj-left .arch-shape{

transition:.6s;

}

.blog-card:hover .blog-cover i{

transform:scale(1.12);

}

.about-visual:hover .arch-shape,
.hajj-left:hover .arch-shape{

transform:scale(1.04);

}

/*=========================================
            SCROLL INDICATOR
=========================================*/

.scroll-top{

position:fixed;

right:35px;

bottom:35px;

width:58px;

height:58px;

border-radius:50%;

background:#2F8F4E;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

cursor:pointer;

font-size:20px;

box-shadow:0 15px 35px rgba(0,0,0,.2);

transition:.4s;

z-index:999;

}

.scroll-top:hover{

background:#C8A64E;

transform:translateY(-8px);

}

/*=========================================
            LOADER
=========================================*/

.loader{

position:fixed;

width:100%;

height:100%;

background:white;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:99999;

transition:.8s;

}

.loader-logo .mark{

width:90px;

height:90px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(160deg,#2F8F4E,#1F6D39);

border:3px solid #C8A64E;

color:#E8D39A;

font-size:36px;

margin:auto;

animation:float 3s infinite;

}

.loader h2{

margin-top:25px;

font-size:28px;

font-family:"Playfair Display";

text-align:center;

}

/*=========================================
        WHATSAPP BUTTON
=========================================*/

.whatsapp{

position:fixed;

left:30px;

bottom:35px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:white;

box-shadow:0 15px 40px rgba(0,0,0,.25);

transition:.4s;

z-index:999;

}

.whatsapp:hover{

transform:scale(1.12);

}

/*=========================================
            GLASS EFFECT
=========================================*/

.package-card{

backdrop-filter:blur(10px);

}

/*=========================================
            FADE
=========================================*/

[data-aos]{

transition-duration:1s!important;

}