/* ==========================================================
   YCSM Enterprise Contact Page
   contact.css
   Part 1
========================================================== */


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

.hero-contact{

position:relative;

overflow:hidden;

background-size:300% 300%;

animation:heroGradient 18s ease infinite;

}

@keyframes heroGradient{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}


/* ==========================================================
   FLOATING CIRCLES
========================================================== */

.hero-circle{

position:absolute;

border-radius:50%;

pointer-events:none;

animation:

floatCircle 14s ease-in-out infinite,

circleGlow 8s ease-in-out infinite;

filter:blur(.3px);

}

@keyframes floatCircle{

0%{

transform:translate(0,0);

}

25%{

transform:translate(12px,-15px);

}

50%{

transform:translate(-10px,-28px);

}

75%{

transform:translate(15px,-12px);

}

100%{

transform:translate(0,0);

}

}

@keyframes circleGlow{

0%{

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

}

25%{

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

}

50%{

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

}

75%{

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

}

100%{

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

}

}


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

.hero-contact h1{

background:linear-gradient(

90deg,

#ffffff,

#ffe082,

#ffffff,

#bbdefb,

#ffffff

);

background-size:300%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:titleShine 8s linear infinite;

}

@keyframes titleShine{

100%{

background-position:300%;

}

}


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

.hero-contact .lead{

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

}

@keyframes textBreath{

0%{

color:#ffffff;

}

25%{

color:#e3f2fd;

}

50%{

color:#fff8e1;

}

75%{

color:#f5f5f5;

}

100%{

color:#ffffff;

}

}


/* ==========================================================
   BADGE
========================================================== */

.hero-contact .badge{

animation:badgePulse 3s infinite;

}

@keyframes badgePulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}


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

.hero-contact .btn{

transition:.35s;

}

.hero-contact .btn-warning{

animation:buttonPulse 3s infinite;

}

@keyframes buttonPulse{

0%{

box-shadow:0 0 0 rgba(255,193,7,0);

}

50%{

box-shadow:0 0 30px rgba(255,193,7,.45);

}

100%{

box-shadow:0 0 0 rgba(255,193,7,0);

}

}

.hero-contact .btn:hover{

transform:translateY(-4px);

}


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

.hero-contact img{

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

}

@keyframes imageFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}


/* ==========================================================
   QUICK CONTACT BAR
========================================================== */

.quick-contact{

background:#fff;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.quick-contact .col-lg-3{

transition:.35s;

}

.quick-contact .col-lg-3:hover{

transform:translateY(-8px);

}

.quick-contact i{

transition:.35s;

}

.quick-contact .col-lg-3:hover i{

transform:scale(1.15) rotate(8deg);

}
/* ==========================================================
   OFFICE ADDRESS SECTION
========================================================== */

#office-address{

position:relative;

background:#f8fbff;

overflow:hidden;

}

#office-address::before{

content:"";

position:absolute;

width:500px;

height:500px;

left:-180px;

top:-180px;

border-radius:50%;

background:rgba(25,118,210,.04);

animation:bgFloat 18s ease-in-out infinite;

}

#office-address::after{

content:"";

position:absolute;

width:420px;

height:420px;

right:-150px;

bottom:-150px;

border-radius:50%;

background:rgba(66,165,245,.05);

animation:bgFloatReverse 22s ease-in-out infinite;

}

@keyframes bgFloat{

0%{

transform:translate(0,0);

}

50%{

transform:translate(40px,25px);

}

100%{

transform:translate(0,0);

}

}

@keyframes bgFloatReverse{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-40px,-30px);

}

100%{

transform:translate(0,0);

}

}

/* ==========================================================
   OFFICE CARD
========================================================== */

.office-card{

position:relative;

overflow:hidden;

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

backdrop-filter:blur(12px);

border-radius:24px;

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

transition:.45s;

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

}

@keyframes breatheCard{

0%{

transform:scale(1);

}

50%{

transform:scale(1.015);

}

100%{

transform:scale(1);

}

}

.office-card:hover{

transform:translateY(-12px) scale(1.03);

box-shadow:

0 20px 50px rgba(25,118,210,.15);

}

/* Animated Left Border */

.office-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:0;

background:linear-gradient(

180deg,

#1976d2,

#42a5f5

);

transition:.45s;

}

.office-card:hover::before{

height:100%;

}

/* ==========================================================
   ICON
========================================================== */

.office-card .icon-circle{

width:75px;

height:75px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

transition:.45s;

}

.office-card:hover .icon-circle{

transform:rotate(10deg) scale(1.12);

}

.office-card i{

transition:.45s;

}

.office-card:hover i{

transform:scale(1.15);

}

/* ==========================================================
   TITLE
========================================================== */

.office-card h3{

transition:.4s;

}

.office-card:hover h3{

letter-spacing:1px;

}

/* ==========================================================
   ADDRESS
========================================================== */

.office-card p{

transition:.35s;

}

.office-card:hover p{

color:#1976d2;

}

/* ==========================================================
   SUPPORT SECTION
========================================================== */

.support-item{

position:relative;

overflow:hidden;

border-radius:22px;

background:#fff;

transition:.45s;

}

.support-item::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.55),

transparent

);

transition:.8s;

}

.support-item:hover::before{

left:120%;

}

.support-item:hover{

transform:translateY(-12px);

box-shadow:

0 20px 45px rgba(0,0,0,.12);

}

.support-item:hover .icon-box{

transform:scale(1.12)

rotate(8deg);

}

/* ==========================================================
   BADGE
========================================================== */

.support-item .badge{

animation:badgeMove 3.5s ease infinite;

}

@keyframes badgeMove{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-3px);

}

100%{

transform:translateY(0);

}

}

/* ==========================================================
   SECTION TITLE
========================================================== */

section h2{

transition:.4s;

}

section:hover h2{

letter-spacing:1px;

}
/* ==========================================================
   CTA SECTION
========================================================== */

.contact-cta{

position:relative;

overflow:hidden;

background:linear-gradient(
135deg,
#0d47a1,
#1565c0,
#1e88e5,
#42a5f5
);

background-size:300% 300%;

animation:gradientMove 15s ease infinite;

}

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

.contact-cta::before{

content:"";

position:absolute;

width:600px;

height:600px;

left:-220px;

top:-220px;

border-radius:50%;

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

animation:ctaFloat 18s ease-in-out infinite;

}

.contact-cta::after{

content:"";

position:absolute;

width:500px;

height:500px;

right:-180px;

bottom:-180px;

border-radius:50%;

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

animation:ctaFloatReverse 20s ease-in-out infinite;

}

@keyframes ctaFloat{

50%{

transform:translate(45px,35px);

}

}

@keyframes ctaFloatReverse{

50%{

transform:translate(-45px,-30px);

}

}

/* ==========================================================
   CTA BUTTON
========================================================== */

.contact-cta .btn{

transition:.35s;

}

.contact-cta .btn:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(255,255,255,.18);

}

/* ==========================================================
   CTA TEXT
========================================================== */

.contact-cta .lead{

    color:#FFC107 !important;

    font-size:20px;

    font-weight:500;

    line-height:1.9;

    text-shadow:
        0 0 8px rgba(255,193,7,.35),
        0 2px 10px rgba(0,0,0,.25);

    animation:ctaTextGlow 4s ease-in-out infinite;

}

@keyframes ctaTextGlow{

    0%,100%{

        color:#FFC107;

    }

    50%{

        color:#FFD54F;

    }

}
/* ==========================================================
   FAQ
========================================================== */

.accordion-item{

border:none;

margin-bottom:15px;

border-radius:18px!important;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.accordion-button{

padding:20px 25px;

font-size:17px;

font-weight:600;

transition:.35s;

}

.accordion-button:hover{

padding-left:35px;

}

.accordion-button:not(.collapsed){

background:#1565c0;

color:#fff;

}

.accordion-body{

padding:22px 28px;

line-height:1.9;

}

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

[data-aos]{

transition-duration:.9s!important;

}

/* ==========================================================
   IMAGE
========================================================== */

img{

transition:.45s;

}

img:hover{

transform:scale(1.02);

}

/* ==========================================================
   LINK
========================================================== */

a{

transition:.3s;

}

a:hover{

text-decoration:none;

}

/* ==========================================================
   WAVE DIVIDER
========================================================== */

.wave-divider{

position:relative;

height:70px;

overflow:hidden;

}

.wave-divider svg{

position:absolute;

bottom:0;

left:0;

width:100%;

height:100%;

animation:waveMove 12s linear infinite;

}

@keyframes waveMove{

0%{

transform:translateX(0);

}

50%{

transform:translateX(-25px);

}

100%{

transform:translateX(0);

}
}
/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

width:9px;

}

::-webkit-scrollbar-thumb{

background:#1976d2;

border-radius:50px;

}

::-webkit-scrollbar-track{

background:#eef5ff;

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:991px){

.office-card{

margin-bottom:25px;

}

.hero-contact h1{

font-size:38px;

}

.hero-contact .lead{

font-size:17px;

}

}

@media(max-width:768px){

.hero-contact{

padding-top:90px;

padding-bottom:90px;

}

.hero-contact h1{

font-size:32px;

}

.quick-contact .col-lg-3{

margin-bottom:20px;

}

.office-card{

padding:30px 22px;

}

.icon-circle{

width:65px;

height:65px;

}

}

@media(max-width:576px){

.hero-contact h1{

font-size:28px;

line-height:1.45;

}

.hero-contact .lead{

font-size:15px;

}

.office-card{

border-radius:18px;

}

.support-item{

padding:25px;

}

.contact-cta{

padding:60px 0;

}

}
/* ==========================================
   Contact Hero Image
========================================== */

.contact-hero-image{

    max-height:360px;
    border-radius:28px;
    overflow:hidden;

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

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

    transition:all .4s ease;

}

.contact-hero-image:hover{

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

    box-shadow:
        0 30px 70px rgba(13,71,161,.30);

}
/* ==========================================================
   END
========================================================== */