/*!* ==========================*/
/*   General*/
/*========================== *!*/

/*!* body *!*/

/*...*/

/*!* container *!*/

/*...*/

/*!* buttons *!*/

/*...*/

/*!* cards *!*/

/*...*/

/*!* ==========================*/
/*   Shared Sections*/
/*========================== *!*/

.section-header {
    max-width: 650px;
    margin: 0 auto 64px;
    text-align: center;
}

.section-subtitle {
    display: inline-block;
    color: var(--primary-blue);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 18px;
}

.section-description {
    color: var(--text-muted);
    line-height: 2;
}


/*==================================
SOLUTIONS
==================================*/

.solutions {

    background: #fff;

}

.solutions-grid {

    display: grid;

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

    gap: 32px;

    margin-top: 60px;

}

.solution-card {

    position: relative;

    height: 520px;

    overflow: hidden;

    text-decoration: none;

    color: #fff;

    border-radius: 18px;

}

.solution-card img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;

}

.solution-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top,
    rgba(0, 0, 0, .82),
    rgba(0, 0, 0, .25),
    rgba(0, 0, 0, .1));

    transition: .4s;

}

.solution-overlay {

    position: absolute;

    right: 40px;

    left: 40px;

    bottom: 40px;

    z-index: 2;

}

.solution-category {

    display: inline-block;

    margin-bottom: 18px;

    font-size: .85rem;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: var(--accent-yellow);

}

.solution-overlay h3 {

    font-size: 2rem;

    margin-bottom: 18px;

    font-weight: 800;

}

.solution-overlay p {

    line-height: 2;

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

    margin-bottom: 30px;

}

.solution-arrow {

    font-size: 2rem;

    display: inline-block;

    transition: .3s;

}

.solution-card:hover img {

    transform: scale(1.08);

}

.solution-card:hover::after {

    background: linear-gradient(to top,
    rgba(10, 61, 98, .92),
    rgba(10, 61, 98, .35));

}

.solution-card:hover .solution-arrow {

    transform: translateX(-10px);

}

@media (max-width: 992px) {

    .solutions-grid {

        grid-template-columns:1fr;

    }

    .solution-card {

        height: 430px;

    }

}

@media (max-width: 576px) {

    .solution-overlay {

        right: 24px;

        left: 24px;

        bottom: 24px;

    }

    .solution-overlay h3 {

        font-size: 1.6rem;

    }

}


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

.about-home {

    background: #f8f9fb;

}

.about-grid {

    display: grid;

    grid-template-columns:1fr 1fr;

    gap: 90px;

    align-items: center;

}

.about-image {

    overflow: hidden;

    border-radius: 20px;

}

.about-image img {

    width: 100%;

    display: block;

    transition: .8s;

}

.about-image:hover img {

    transform: scale(1.05);

}

.about-text {

    margin: 35px 0 45px;

    line-height: 2.2;

    color: var(--text-muted);

    font-size: 1.05rem;

}

.about-features {

    display: grid;

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

    gap: 24px;

    margin-bottom: 50px;

}

.feature-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 24px;

    background: #fff;

    border-radius: 14px;

    transition: .35s;

    border: 1px solid #ececec;

}

.feature-item:hover {

    transform: translateY(-6px);

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

}

.feature-icon {

    width: 62px;

    height: 62px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(10, 61, 98, .08);

    color: var(--primary-blue);

    font-size: 1.4rem;

    flex-shrink: 0;

}

.feature-item h4 {

    margin-bottom: 8px;

    font-size: 1.05rem;

}

.feature-item p {

    font-size: .92rem;

    color: var(--text-muted);

    line-height: 1.8;

}

@media (max-width: 1100px) {

    .about-grid {

        grid-template-columns:1fr;

    }

}

@media (max-width: 768px) {

    .about-features {

        grid-template-columns:1fr;

    }

}


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


.products-home {

    background: #fff;

}


.products-grid {

    display: grid;

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

    gap: 32px;

    margin-top: 60px;

}


.product-card {

    background: #fff;

    border: 1px solid #e8e8e8;

    border-radius: 18px;

    overflow: hidden;

    transition: .4s;

}


.product-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 50px rgba(0, 0, 0, .08);

}


.product-image {

    height: 280px;

    overflow: hidden;

}


.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}


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

    transform: scale(1.08);

}


.product-content {

    padding: 32px;

}


.product-content span {

    font-size: .8rem;

    letter-spacing: .15em;

    color: var(--primary-blue);

    font-weight: 700;

}


.product-content h3 {

    font-size: 1.6rem;

    margin: 15px 0;

}


.product-content p {

    color: var(--text-muted);

    line-height: 2;

    margin-bottom: 25px;

}


.product-content a {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--primary-blue);

    font-weight: 700;

    text-decoration: none;

    transition: .3s;

}


.product-content a:hover {

    gap: 18px;

}


@media (max-width: 992px) {


    .products-grid {

        grid-template-columns:1fr;

    }


}


/*==================================
CERTIFICATES
==================================*/


.certificates-home {

    background: #f8f9fb;

}


.certificates-wrapper {

    display: grid;

    grid-template-columns:1fr 1fr;

    gap: 90px;

    align-items: center;

}


.certificates-text {

    margin: 30px 0 45px;

    color: var(--text-muted);

    line-height: 2.2;

    font-size: 1.05rem;

}


.certificates-list {

    display: flex;

    flex-direction: column;

    gap: 22px;

    margin-bottom: 45px;

}


.certificate-item {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 22px;

    background: #fff;

    border-radius: 14px;

    border: 1px solid #ececec;

    transition: .35s;

}


.certificate-item:hover {

    transform: translateX(-8px);

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

}


.certificate-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(10, 61, 98, .08);

    color: var(--primary-blue);

    font-size: 1.3rem;

    flex-shrink: 0;

}


.certificate-item h4 {

    margin-bottom: 8px;

    font-size: 1.1rem;

}


.certificate-item p {

    font-size: .92rem;

    color: var(--text-muted);

}


.certificates-image {

    position: relative;

    border-radius: 22px;

    overflow: hidden;

}


.certificates-image img {

    width: 100%;

    height: 650px;

    object-fit: cover;

    display: block;

}


.certificate-badge {

    position: absolute;

    bottom: 35px;

    right: 35px;

    background: #fff;

    padding: 30px 40px;

    border-radius: 16px;

    display: flex;

    flex-direction: column;

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

}


.certificate-badge strong {

    font-size: 3rem;

    line-height: 1;

    color: var(--primary-blue);

}


.certificate-badge span {

    margin-top: 10px;

    color: var(--text-muted);

}


@media (max-width: 1100px) {


    .certificates-wrapper {

        grid-template-columns:1fr;

    }


    .certificates-image img {

        height: 500px;

    }


}


@media (max-width: 576px) {


    .certificate-badge {

        right: 20px;

        bottom: 20px;

        padding: 20px 25px;

    }


    .certificate-badge strong {

        font-size: 2.2rem;

    }


}

/*==================================
INDUSTRIES BENTO GRID
==================================*/


.industries-grid {

    display: grid;

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

    grid-template-rows:220px 220px 220px;

    gap: 24px;

    margin-top: 60px;

}


.industry-card {

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    color: #fff;

    text-decoration: none;

}


.industry-card img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s ease;

}


.industry-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
            to top,
            rgba(0, 0, 0, .85),
            rgba(0, 0, 0, .15)
    );

}


.industry-overlay {

    position: absolute;

    right: 30px;

    left: 30px;

    bottom: 30px;

    z-index: 2;

}


.industry-overlay i {

    font-size: 2rem;

    color: var(--accent-yellow);

    margin-bottom: 15px;

}


.industry-overlay h3 {

    font-size: 1.6rem;

    font-weight: 800;

    margin-bottom: 10px;

}


.industry-overlay p {

    font-size: .95rem;

    line-height: 1.9;

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

}


/* کارت اصلی */

.industry-feature {

    grid-column: span 2;

    grid-row: span 2;

}


/* کارت عمودی */

.industry-tall {

    grid-column: span 2;

}


/* کارت عریض */

.industry-wide {

    grid-column: span 2;

}


.industry-card:hover img {

    transform: scale(1.08);

}


.industry-card:hover::after {

    background: linear-gradient(
            to top,
            rgba(10, 61, 98, .9),
            rgba(10, 61, 98, .25)
    );

}


@media (max-width: 992px) {


    .industries-grid {

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

        grid-template-rows:auto;

    }


    .industry-feature,
    .industry-tall,
    .industry-wide {

        grid-column: auto;

        grid-row: auto;

        height: 350px;

    }


}


@media (max-width: 600px) {


    .industries-grid {

        grid-template-columns:1fr;

    }


}

/*==================================
PROJECTS
==================================*/


.projects-home {

    background: #f8f9fb;

}


.projects-grid {

    display: grid;

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

    gap: 32px;

    margin-top: 60px;

}


.project-card {

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid #e8e8e8;

    transition: .4s;

}


.project-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 50px rgba(0, 0, 0, .08);

}


.project-image {

    height: 320px;

    position: relative;

    overflow: hidden;

}


.project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}


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

    transform: scale(1.08);

}


.project-category {

    position: absolute;

    right: 25px;

    bottom: 25px;

    background: var(--accent-yellow);

    color: #212529;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: .85rem;

    font-weight: 700;

}


.project-content {

    padding: 30px;

}


.project-content h3 {

    font-size: 1.45rem;

    margin-bottom: 15px;

}


.project-content p {

    color: var(--text-muted);

    line-height: 2;

    margin-bottom: 25px;

}


.project-content a {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    font-weight: 700;

    color: var(--primary-blue);

    transition: .3s;

}


.project-content a:hover {

    gap: 18px;

}


.projects-button {

    text-align: center;

    margin-top: 55px;

}


@media (max-width: 992px) {


    .projects-grid {

        grid-template-columns:1fr;

    }


}


/*==================================
NEWS
==================================*/


.news-home {

    background: #fff;

}


.news-grid {

    display: grid;

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

    gap: 32px;

    margin-top: 60px;

}


.news-card {

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid #e8e8e8;

    transition: .4s;

}


.news-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 50px rgba(0, 0, 0, .08);

}


.news-image {

    height: 260px;

    overflow: hidden;

}


.news-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}


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

    transform: scale(1.08);

}


.news-content {

    padding: 30px;

}


.news-meta {

    display: flex;

    gap: 20px;

    font-size: .85rem;

    color: var(--text-muted);

    margin-bottom: 18px;

}


.news-meta span:first-child {

    color: var(--primary-blue);

}


.news-content h3 {

    font-size: 1.4rem;

    line-height: 1.6;

    margin-bottom: 15px;

}


.news-content p {

    color: var(--text-muted);

    line-height: 2;

    margin-bottom: 25px;

}


.news-content a {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--primary-blue);

    font-weight: 700;

    text-decoration: none;

    transition: .3s;

}


.news-content a:hover {

    gap: 18px;

}


.news-button {

    text-align: center;

    margin-top: 55px;

}


@media (max-width: 992px) {


    .news-grid {

        grid-template-columns:1fr;

    }


}

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


.contact-cta {

    background: var(--primary-blue);

    padding: 90px 0;

    color: #fff;

}


.contact-cta-wrapper {

    display: grid;

    grid-template-columns:1.4fr .8fr;

    gap: 80px;

    align-items: center;

}


.contact-cta .section-subtitle {

    color: var(--accent-yellow);

}


.contact-cta h2 {

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

    line-height: 1.4;

    margin: 25px 0;

    font-weight: 900;

}


.contact-cta p {

    max-width: 650px;

    line-height: 2.2;

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

    font-size: 1.05rem;

}


.contact-cta-buttons {

    display: flex;

    gap: 18px;

    margin-top: 40px;

    flex-wrap: wrap;

}


.btn-outline-dark {

    background: transparent;

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

    color: #fff;

}


.btn-outline-dark:hover {

    background: #fff;

    color: var(--primary-blue);

}


.contact-cta-info {

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

    border-radius: 20px;

    padding: 35px;

    display: flex;

    flex-direction: column;

    gap: 25px;

}


.cta-info-item {

    display: flex;

    align-items: center;

    gap: 20px;

    padding-bottom: 25px;

    border-bottom: 1px solid rgba(255, 255, 255, .15);

}


.cta-info-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

}


.cta-info-item i {

    width: 55px;

    height: 55px;

    border-radius: 50%;

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.3rem;

    color: var(--accent-yellow);

}


.cta-info-item span {

    display: block;

    font-size: .85rem;

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

    margin-bottom: 5px;

}


.cta-info-item strong {

    font-size: 1.05rem;

}


@media (max-width: 992px) {


    .contact-cta-wrapper {

        grid-template-columns:1fr;

        gap: 50px;

    }


}


@media (max-width: 576px) {


    .contact-cta-buttons .btn {

        width: 100%;

    }


    .contact-cta-info {

        padding: 25px;

    }


}
/*==================================
 PREMIUM INDUSTRIAL FOOTER
==================================*/


.footer-home {


position:relative;

overflow:hidden;

padding-top:100px;

background:

radial-gradient(
circle at 20% 0%,
rgba(0,140,190,.25),
transparent 35%
),

radial-gradient(
circle at 90% 30%,
rgba(0,80,120,.25),
transparent 35%
),

linear-gradient(
135deg,
#061522,
#071f32,
#020b13
);


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


}




/* epoxy light layer */

.footer-home::before {


content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:3px;


background:

linear-gradient(
90deg,
transparent,
#4fc3f7,
#ffffff,
#4fc3f7,
transparent
);


animation:
footerGlow 6s infinite;


}


@keyframes footerGlow {


0%{
opacity:.3;
transform:translateX(-30%);
}


50%{
opacity:1;
}


100%{
opacity:.3;
transform:translateX(30%);
}


}



.footer-home::after {


content:"";

position:absolute;

width:500px;
height:500px;

right:-200px;
bottom:-200px;


background:

radial-gradient(
circle,
rgba(0,188,212,.15),
transparent 65%
);


}




.footer-grid {


position:relative;

z-index:2;


display:grid;

grid-template-columns:
1.6fr
1fr
1fr
1fr;


gap:60px;


padding-bottom:70px;


}





.footer-logo img {


height:55px;

margin-bottom:30px;


filter:

drop-shadow(
0 0 15px rgba(79,195,247,.35)
);


}




.footer-about p {


line-height:2.2;

max-width:350px;

font-size:.95rem;


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


}




/* social */


.footer-social {


display:flex;

gap:15px;

margin-top:35px;


}



.footer-social a {


width:48px;

height:48px;


border-radius:14px;


display:flex;

align-items:center;

justify-content:center;


background:

rgba(255,255,255,.06);


border:

1px solid rgba(255,255,255,.12);


color:white;


font-size:1.1rem;


transition:.4s;


backdrop-filter:blur(10px);


}



.footer-social a:hover {


transform:

translateY(-8px)
rotate(5deg);


background:

linear-gradient(
135deg,
#00bcd4,
#0a3d62
);


box-shadow:

0 15px 35px
rgba(0,188,212,.35);


}





.footer-grid h3 {


position:relative;


color:white;

font-size:1.2rem;

margin-bottom:35px;


}



.footer-grid h3::after {


content:"";

position:absolute;


right:0;

bottom:-12px;


width:45px;

height:3px;


background:

linear-gradient(
90deg,
#4fc3f7,
transparent
);


}





.footer-links ul {


padding:0;

list-style:none;


}




.footer-links li {


margin-bottom:18px;


}




.footer-links a {


display:inline-flex;


color:

rgba(255,255,255,.65);


text-decoration:none;


transition:.35s;


position:relative;


}



.footer-links a::before {


content:"";


width:0;

height:1px;


background:#4fc3f7;


position:absolute;


right:0;

bottom:-5px;


transition:.35s;


}



.footer-links a:hover {


color:white;

transform:
translateX(-8px);


}



.footer-links a:hover::before {


width:100%;


}







/* contact glass */


.contact-glass {


background:

rgba(255,255,255,.05);


border:

1px solid rgba(255,255,255,.12);


border-radius:22px;


padding:25px;


backdrop-filter:

blur(15px);


box-shadow:

0 20px 50px rgba(0,0,0,.25);


}





.footer-contact ul {


padding:0;

list-style:none;


}



.footer-contact li {


display:flex;

align-items:center;

gap:15px;


margin-bottom:22px;


}


.footer-contact li:last-child{

margin-bottom:0;

}



.footer-contact i {


width:42px;

height:42px;


border-radius:12px;


display:flex;

align-items:center;

justify-content:center;


background:

rgba(79,195,247,.12);


color:#4fc3f7;


}



.footer-contact span {


color:

rgba(255,255,255,.8);


}




.footer-bottom {


position:relative;

z-index:2;


border-top:

1px solid rgba(255,255,255,.12);


padding:

30px 0;


text-align:center;


color:

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


}





.footer-bottom p {


margin:0;

}





@media(max-width:992px){


.footer-grid{

grid-template-columns:
1fr 1fr;

}


}



@media(max-width:600px){


.footer-grid{

grid-template-columns:1fr;

}


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


.hero {

    height: 100vh;
    min-height: 750px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;

}

.hero-slider {
    position:absolute;
    inset:0;
    overflow:hidden;
}


.hero-slide {

    position:absolute;

    inset:0;

    opacity:0;

    transition:
        opacity 1.5s ease-in-out;

}


.hero-slide img {

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.05);

    transition:
        transform 8s ease;

}



.hero-slide.active {

    opacity:1;

    z-index:1;

}


.hero-slide.active img {

    transform:scale(1.12);

}


.hero-slide img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: heroZoom 12s ease infinite alternate;

}


@keyframes heroZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }

}


/* کنترل خوانایی */

.hero-overlay {

    position: absolute;
    inset: 0;
    z-index: 3;

    background: linear-gradient(
            270deg,
            rgba(0, 0, 0, .65) 0%,
            rgba(0, 0, 0, .35) 45%,
            rgba(0, 0, 0, .12) 100%
    );

}

.hero .container {
    position: relative;
    z-index: 5;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    direction: rtl;
    padding-right: 20px;

}


.hero-content-box {
    width: 600px;
    margin-right: 0;
    margin-left: 0;
    transform: translateX(0);
}


.hero-content {
    direction: rtl;
    text-align: right;
    width: 100%;
    background: rgba(255, 255, 255, .12);


    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(18px);


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


    border-radius: 24px;


    padding: 45px 50px;


    color: #fff;


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


    animation: heroBox .8s ease;


}


@keyframes heroBox {


    from {

        opacity: 0;

        transform: translateX(60px);

    }


    to {

        opacity: 1;

        transform: translateX(0);

    }


}


.hero-subtitle {


    display: flex;

    align-items: center;

    gap: 15px;


    font-size: .9rem;


    letter-spacing: .2em;

    font-weight: 700;


    color: var(--accent-yellow);


    margin-bottom: 20px;


}


.hero-subtitle::before {


    content: "";


    width: 45px;

    height: 2px;

    background: var(--accent-yellow);


}


.hero-content h1 {


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


    line-height: 1.25;


    font-weight: 900;


    margin-bottom: 25px;


    text-shadow: 0 5px 20px rgba(0, 0, 0, .45);


}


.hero-content p {


    max-width: 520px;


    font-size: 1rem;


    line-height: 2;


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


    margin-bottom: 35px;


    text-shadow: 0 3px 12px rgba(0, 0, 0, .5);


}


.hero-buttons {


    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}


.hero-buttons .btn {


    min-width: 160px;

    padding: 11px 25px;

    border-radius: 30px;


    transition: .35s;


}


.hero .btn-accent {


    background: var(--accent-yellow);

    color: #222;


}


.hero .btn-accent:hover {


    transform: translateY(-4px);

    box-shadow: 0 15px 30px rgba(244, 208, 63, .35);


}


.hero .btn-outline {


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


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


    color: #fff;


}


.hero .btn-outline:hover {


    background: #fff;

    color: #111;


    transform: translateY(-4px);


}


.hero-scroll {


    position: absolute;

    bottom: 35px;

    left: 50%;

    transform: translateX(-50%);


    z-index: 10;


    color: #fff;


}


@media (max-width: 900px) {


    .hero-content-box {


        width: 100%;


    }


    .hero-content {


        padding: 35px 25px;


    }


}


@media (max-width: 576px) {


    .hero-content h1 {


        font-size: 2.2rem;


    }


    .hero-content p {


        font-size: .9rem;


    }


    .hero-buttons .btn {


        width: 100%;


    }


}
.hero-text-hide{

    opacity:0;

    transform:
    translateY(30px)
    rotateX(60deg);

}


.hero-text-show{

    animation:
    heroTextShow .8s ease;

}



@keyframes heroTextShow{


from{

opacity:0;

transform:
translateY(-30px)
rotateX(-60deg);

}


to{

opacity:1;

transform:
translateY(0)
rotateX(0);

}


}