/*======================================================
    AL-HAYMANA
    Main Stylesheet
======================================================*/


/*======================================================
    Google Fonts
======================================================*/

:root{

    --primary:#0D5C85;
    --primary-light:#3AA5D8;
    --primary-dark:#083C59;

    --secondary:#F5FAFD;

    --white:#FFFFFF;

    --dark:#1E293B;

    --text:#64748B;

    --border:#E8EEF3;

    --success:#14B8A6;

    --radius:22px;

    --shadow:
        0 20px 60px rgba(15,23,42,.08);

    --transition:.35s ease;

}



/*======================================================
    Reset
======================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    color:var(--dark);

    background:#fff;

    overflow-x:hidden;

    line-height:1.7;

}



/*======================================================
    Typography
======================================================*/

h1,h2,h3,h4,h5,h6{

    font-family:'Poppins',sans-serif;

    font-weight:700;

    color:var(--dark);

}

h1{

    font-size:72px;

    line-height:1.08;

}

h2{

    font-size:48px;

}

h3{

    font-size:28px;

}

p{

    color:var(--text);

    font-size:17px;

}



/*======================================================
    Links
======================================================*/

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

    padding:0;

    margin:0;

}



/*======================================================
    Images
======================================================*/

img{

    max-width:100%;

    display:block;

}



/*======================================================
    Sections
======================================================*/

section{

    position:relative;

    padding:120px 0;

}




/*==================================================
    BUTTONS
==================================================*/

.btn-main{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:190px;

    height:58px;

    padding:0 34px;

    border:none;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        #49A7D7
    );

    color:#ffffff;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    overflow:hidden;

    cursor:pointer;

    transition:.35s ease;

    box-shadow:
        0 20px 45px rgba(13,92,133,.25);

}

.btn-main:hover{

    color:#ffffff;

    transform:translateY(-5px);

    box-shadow:
        0 28px 60px rgba(13,92,133,.35);

}

.btn-main:active{

    transform:translateY(-2px);

}

.btn-outline-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:190px;

    height:58px;

    padding:0 34px;

    border-radius:18px;

    border:2px solid var(--primary);

    background:#ffffff;

    color:var(--primary);

    text-decoration:none;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:600;

    transition:.35s ease;

}

.btn-outline-custom:hover{

    background:var(--primary);

    color:#ffffff;

    transform:translateY(-5px);

    box-shadow:
        0 20px 50px rgba(13,92,133,.20);

}

.btn-main i,
.btn-outline-custom i{

    font-size:15px;

}

.btn-main::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.btn-main:hover::before{

    left:140%;

}

/*==================================================
    NAVBAR
==================================================*/

.custom-navbar{

    padding:20px 0;

    transition:.4s ease;

    background:transparent;

}

.custom-navbar.scrolled{

    padding:12px 0;

}

.custom-navbar.scrolled .container{

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.35);

    box-shadow:0 20px 50px rgba(15,23,42,.08);

}

.custom-navbar .container{

    transition:.4s ease;

    border-radius:20px;

    padding:14px 30px;

}

.logo{

    height:72px;

    transition:.3s;

}

.custom-navbar.scrolled .logo{

    height:62px;

}

.navbar-nav{

    gap:8px;

}

.nav-link{

    position:relative;

    color:var(--dark)!important;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:500;

    padding:12px 18px !important;

    border-radius:12px;

    transition:.3s;

}

.nav-link:hover{

    color:var(--primary)!important;

    background:rgba(13,92,133,.06);

}

.nav-link.active{

    background:var(--primary);

    color:#fff!important;

}

.navbar-toggler{

    font-size:24px;

    color:var(--primary);

}

/*======================================================
    Containers
======================================================*/

.container{

    max-width:1280px;

}



/*==================================================
    UTILITIES
==================================================*/

.section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(13,92,133,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:24px;

}

.section-title{

    font-size:clamp(2.2rem,4vw,3.5rem);

    line-height:1.15;

    font-weight:700;

    color:var(--dark);

    margin-bottom:22px;

}

.section-subtitle{

    max-width:720px;

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    color:var(--text);

}

.text-primary{

    color:var(--primary)!important;

}

.bg-primary{

    background:var(--primary)!important;

}

.rounded-xl{

    border-radius:30px;

}

.shadow-xl{

    box-shadow:

        0 25px 70px rgba(15,23,42,.10);

}

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.overflow-hidden{

    overflow:hidden;

}

.mb-80{

    margin-bottom:80px;

}

.mt-80{

    margin-top:80px;

}

.py-120{

    padding-top:120px;

    padding-bottom:120px;

}

.transition{

    transition:.35s ease;

}

::selection{

    background:var(--primary);

    color:#ffffff;

}

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EDF4F8;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        180deg,

        var(--primary),

        #49A7D7

    );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}



/*==================================================
    HERO
==================================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbfd 100%
        );

    padding-top:140px;

}

.hero-content{

    position:relative;

    z-index:5;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:#EDF8FD;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    margin-bottom:28px;

}

.hero h1{

    font-size:clamp(3rem,5vw,5rem);

    line-height:1.05;

    font-weight:700;

    margin-bottom:28px;

    letter-spacing:-2px;

}

.hero h1 span{

    color:var(--primary);

}

.hero p{

    font-size:18px;

    color:var(--text);

    max-width:560px;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:45px;

}

.btn-outline-custom{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 34px;

    border-radius:999px;

    border:2px solid var(--primary);

    color:var(--primary);

    font-weight:600;

    transition:.35s;

}

.btn-outline-custom:hover{

    background:var(--primary);

    color:#fff;

}

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--dark);

    font-weight:600;

}

.hero-features i{

    color:var(--primary);

}

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:620px;

    border-radius:36px;

    position:relative;

    z-index:2;

    box-shadow:

        0 30px 80px rgba(0,0,0,.12);

}

.hero-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

        radial-gradient(circle,

        rgba(74,168,216,.45) 0%,

        rgba(74,168,216,0) 70%);

    z-index:1;

}

.hero-blob{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.45;

}

.hero-blob-1{

    width:420px;

    height:420px;

    background:#4AA8D8;

    top:-140px;

    right:-140px;

}

.hero-blob-2{

    width:320px;

    height:320px;

    background:#0D5C85;

    left:-120px;

    bottom:-120px;

}

/*==================================================
    ABOUT
==================================================*/

.about-section{

    background:#ffffff;

    position:relative;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:30px;

    box-shadow:0 30px 80px rgba(15,23,42,.12);

}

.experience-card{

    position:absolute;

    bottom:30px;

    right:-30px;

    background:#fff;

    padding:28px;

    border-radius:24px;

    box-shadow:0 20px 60px rgba(15,23,42,.10);

    text-align:center;

    min-width:180px;

}

.experience-card h3{

    color:var(--primary);

    font-size:42px;

    margin-bottom:5px;

}

.experience-card span{

    color:var(--text);

    font-size:15px;

}

.about-content{

    padding-left:25px;

}

.about-content p{

    margin-bottom:20px;

}

.about-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin:40px 0;

}

.about-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:var(--dark);

}

.about-item i{

    color:var(--primary);

    font-size:18px;

}

/*==================================================
    SERVICES
==================================================*/

.services-section{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        180deg,
        #F8FBFD 0%,
        #FFFFFF 100%
    );

}

.services-header{

    max-width:760px;

    margin:0 auto 70px;

}

.service-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:28px;

    transition:.45s ease;

    box-shadow:
        0 20px 60px rgba(15,23,42,.08);

    height:100%;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:
        0 35px 80px rgba(15,23,42,.14);

}

.service-image{

    position:relative;

    overflow:hidden;

    height:260px;

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}

.service-card:hover .service-image img{

    transform:scale(1.08);

}

.service-content{

    padding:35px;

}

.service-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:24px;

    background:linear-gradient(
        135deg,
        var(--primary),
        #49A7D7
    );

    color:#fff;

    font-size:28px;

    box-shadow:
        0 15px 35px rgba(13,92,133,.25);

}

.service-content h3{

    margin-bottom:16px;

    font-size:28px;

}

.service-content p{

    margin:0;

    line-height:1.8;

    color:var(--text);

}


/*==================================================
    FEATURED PRODUCTS
==================================================*/

.featured-products{

    padding:120px 0;

    background:#F8FBFD;

}

.product-card{

    position:relative;

    height:100%;

    background:#ffffff;

    border-radius:30px;

    padding:35px;

    text-align:center;

    overflow:hidden;

    transition:.45s;

    border:1px solid rgba(13,92,133,.08);

    box-shadow:0 20px 60px rgba(15,23,42,.06);

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 80px rgba(15,23,42,.12);

}

.product-card img{

    width:220px;

    height:220px;

    object-fit:contain;

    margin:0 auto 30px;

    transition:.45s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-card h4{

    font-size:24px;

    margin-bottom:10px;

}

.product-card span{

    display:block;

    margin-bottom:25px;

    color:var(--text);

}

.product-card .btn-main{

    width:100%;

}

/*==================================================
    WHY CHOOSE
==================================================*/

.why-section{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #F7FBFD 100%
    );

    overflow:hidden;

}

.feature-card{

    position:relative;

    height:100%;

    padding:45px 35px;

    background:#ffffff;

    border-radius:28px;

    text-align:center;

    transition:.45s ease;

    border:1px solid rgba(13,92,133,.08);

    box-shadow:
        0 20px 60px rgba(15,23,42,.06);

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:
        0 35px 80px rgba(15,23,42,.12);

}

.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        rgba(13,92,133,.04),
        rgba(74,168,216,.02)
    );

    opacity:0;

    transition:.35s ease;

}

.feature-card:hover::before{

    opacity:1;

}

.feature-icon{

    width:90px;

    height:90px;

    margin:0 auto 28px;

    border-radius:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        var(--primary),
        #49A7D7
    );

    box-shadow:
        0 20px 45px rgba(13,92,133,.25);

    position:relative;

    z-index:2;

}

.feature-card h4{

    margin-bottom:18px;

    font-size:26px;

    position:relative;

    z-index:2;

}

.feature-card p{

    margin:0;

    line-height:1.8;

    color:var(--text);

    position:relative;

    z-index:2;

}

.why-section .section-title{

    max-width:760px;

    margin:0 auto 20px;

}

.why-section .section-subtitle{

    max-width:720px;

    margin:0 auto 70px;

}

/*==================================================
    CONTACT
==================================================*/

.contact-section{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        180deg,
        #F8FBFD 0%,
        #FFFFFF 100%
    );

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.contact-card{

    display:flex;

    align-items:center;

    gap:22px;

    padding:28px;

    background:#ffffff;

    border-radius:24px;

    transition:.4s ease;

    border:1px solid rgba(13,92,133,.08);

    box-shadow:
        0 20px 60px rgba(15,23,42,.06);

}

.contact-card:hover{

    transform:translateX(8px);

    box-shadow:
        0 30px 70px rgba(15,23,42,.10);

}

.contact-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        #49A7D7
    );

    color:#fff;

    font-size:28px;

    box-shadow:
        0 18px 40px rgba(13,92,133,.25);

}

.contact-card h5{

    margin-bottom:8px;

    font-size:20px;

}

.contact-card p{

    margin:0;

    color:var(--text);

}

.contact-box{

    background:#ffffff;

    padding:50px;

    border-radius:30px;

    border:1px solid rgba(13,92,133,.08);

    box-shadow:
        0 25px 70px rgba(15,23,42,.08);

}

/*==================================================
    FORMS
==================================================*/

.contact-box form{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.contact-box .row{

    --bs-gutter-x:24px;

}

.form-control{

    width:100%;

    height:60px;

    padding:0 22px;

    border-radius:18px;

    border:1px solid #E7EEF4;

    background:#FFFFFF;

    color:var(--dark);

    font-size:15px;

    font-weight:500;

    transition:.35s ease;

    box-shadow:none;

}

.form-control::placeholder{

    color:#94A3B8;

    font-weight:400;

}

.form-control:hover{

    border-color:#C9DCE8;

}

.form-control:focus{

    border-color:var(--primary);

    background:#FFFFFF;

    box-shadow:

        0 0 0 5px rgba(13,92,133,.08);

    outline:none;

}

textarea.form-control{

    height:180px;

    padding:20px 22px;

    resize:none;

    line-height:1.8;

}

input[type="text"],

input[type="email"],

input[type="tel"],

textarea{

    appearance:none;

    -webkit-appearance:none;

}

.contact-box button{

    margin-top:10px;

}

.contact-box .btn-main{

    width:100%;

    height:60px;

    border:none;

    font-size:16px;

}

/*==================================================
    FOOTER
==================================================*/

.footer{

    position:relative;

    overflow:hidden;

    padding:100px 0 30px;

    background:linear-gradient(
        135deg,
        #071A27 0%,
        #0B2D42 100%
    );

    color:#ffffff;

}

.footer::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(74,168,216,.08);

    top:-220px;

    right:-150px;

    filter:blur(80px);

}

.footer-logo{

    height:80px;

    margin-bottom:25px;

}

.footer-description{

    color:rgba(255,255,255,.75);

    line-height:1.9;

    max-width:360px;

}

.footer-title{

    font-size:22px;

    margin-bottom:28px;

    color:#ffffff;

}

.footer-links{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li{

    margin-bottom:16px;

}

.footer-links a{

    color:rgba(255,255,255,.72);

    text-decoration:none;

    transition:.35s;

}

.footer-links a:hover{

    color:#ffffff;

    padding-left:8px;

}

.footer-contact{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-contact li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    color:rgba(255,255,255,.72);

}

.footer-contact i{

    width:36px;

    height:36px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#7CC8F2;

}

.footer-social{

    display:flex;

    gap:14px;

    margin-top:30px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#ffffff;

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

    transition:.35s;

}

.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-6px);

}

.footer-divider{

    margin:70px 0 30px;

    border-color:rgba(255,255,255,.08);

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.footer-bottom p{

    margin:0;

    color:rgba(255,255,255,.60);

}

/*==================================
PRELOADER
==================================*/

#preloader{

    position:fixed;

    inset:0;

    background:#FFFFFF;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:opacity .7s ease,
               visibility .7s ease;

}

#preloader.hide{

    opacity:0;

    visibility:hidden;

}

.preloader-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:35px;

}

.preloader-content img{

    width:170px;

}

.loader-ring{

    width:58px;

    height:58px;

    border-radius:50%;

    border:3px solid rgba(13,92,133,.15);

    border-top:3px solid var(--primary);

    animation:loaderSpin .8s linear infinite;

}

@keyframes loaderSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
    GALLERY
==================================================*/

.gallery-section{

    position:relative;

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(12,1fr);

    grid-auto-rows:260px;

    gap:24px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

    box-shadow:
        0 20px 60px rgba(15,23,42,.08);

    transition:.45s ease;

}

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:
        0 35px 80px rgba(15,23,42,.15);

}

.gallery-item.large{

    grid-column:span 6;

}

.gallery-item:not(.large){

    grid-column:span 3;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s ease;

}

.gallery-item:hover img{

    transform:scale(1.1);

}

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        180deg,

        rgba(13,92,133,0) 0%,

        rgba(13,92,133,.55) 100%

    );

    opacity:0;

    transition:.35s ease;

    z-index:2;

}

.gallery-item:hover::before{

    opacity:1;

}

.gallery-item::after{

    content:"+";

    position:absolute;

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(15px);

    color:var(--primary);

    font-size:34px;

    font-weight:300;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%) scale(.5);

    opacity:0;

    transition:.35s ease;

    z-index:3;

}

.gallery-item:hover::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

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

.whatsapp-btn{

    position:fixed;

    right:30px;

    bottom:30px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    z-index:999;

    text-decoration:none;

    box-shadow:
        0 15px 40px rgba(37,211,102,.35);

    transition:.35s ease;

    animation:whatsappPulse 2.5s infinite;

}

.whatsapp-btn:hover{

    color:#fff;

    transform:translateY(-8px) scale(1.08);

    box-shadow:
        0 20px 50px rgba(37,211,102,.45);

}

@keyframes whatsappPulse{

    0%{

        box-shadow:
            0 0 0 0 rgba(37,211,102,.45);

    }

    70%{

        box-shadow:
            0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:
            0 0 0 0 rgba(37,211,102,0);

    }

}

/*==================================
BACK TO TOP
==================================*/

#backToTop{

    position:fixed;

    right:30px;

    bottom:110px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:20px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;

    box-shadow:0 15px 40px rgba(13,92,133,.30);

    z-index:998;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#backToTop:hover{

    background:var(--primary-dark);

    transform:translateY(-5px);

}

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

/* Global Transition */

a,
button,
img,
.card,
.service-card,
.feature-card,
.gallery-item,
.contact-card{

    transition:all .35s ease;

}

/* Floating Animation */

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* Pulse */

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/* Glow */

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(13,92,133,0);

    }

    50%{

        box-shadow:0 0 35px rgba(13,92,133,.25);

    }

    100%{

        box-shadow:0 0 0 rgba(13,92,133,0);

    }

}

/* Fade Up */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Fade Left */

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* Fade Right */

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* Hero Image */

.hero-image{

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

}

/* Cards */

.service-card:hover,

.feature-card:hover,

.contact-card:hover{

    animation:glow 2s ease;

}

/* Buttons */

.btn-main:hover,

.btn-outline-custom:hover{

    animation:pulse .4s ease;

}

/* Images */

.about-image img:hover,

.gallery-item:hover img{

    transform:scale(1.05);

}