*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Vazirmatn",sans-serif;
    }
    
    
    html{
    scroll-behavior:smooth;
    }
    
    
    
    body{
    
    background:
    radial-gradient(circle at 15% 15%,rgba(37,99,235,.25),transparent 35%),
    radial-gradient(circle at 85% 70%,rgba(14,165,233,.2),transparent 35%),
    #020617;
    
    color:white;
    
    overflow-x:hidden;
    
    }
    
    
    
    
    a{
    
    text-decoration:none;
    
    color:white;
    
    }
    
    
    
    img{
    
    width:100%;
    
    display:block;
    
    }
    
    
    
    
    
    
    
    /* ================= NAVBAR ================= */
    
    
    .navbar{
    
    width:90%;
    
    margin:25px auto;
    
    padding:18px 35px;
    
    
    display:flex;
    
    align-items:center;
    
    justify-content:space-between;
    
    
    background:rgba(255,255,255,.06);
    
    border:1px solid rgba(255,255,255,.12);
    
    
    backdrop-filter:blur(25px);
    
    
    border-radius:30px;
    
    
    position:sticky;
    
    top:20px;
    
    z-index:999;
    
    
    }
    
    
    
    .logo{
    
    font-size:32px;
    
    font-weight:900;
    
    }
    
    
    
    .logo span{
    
    color:#60a5fa;
    
    }
    
    
    
    
    nav{
    
    display:flex;
    
    gap:30px;
    
    }
    
    
    
    nav a{
    
    color:#cbd5e1;
    
    transition:.3s;
    
    }
    
    
    
    nav a:hover{
    
    color:#60a5fa;
    
    }
    
    
    
    
    
    
    
    
    
    /* ================= HERO ================= */
    
    
    
    .hero{
    
    min-height:90vh;
    
    padding:80px 8%;
    
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    
    gap:80px;
    
    
    position:relative;
    
    }
    
    
    
    
    .ambient-light{
    
    
    position:absolute;
    
    
    width:650px;
    
    
    height:650px;
    
    
    background:#2563eb;
    
    
    filter:blur(180px);
    
    
    opacity:.3;
    
    
    z-index:-1;
    
    
    }
    
    
    
    
    
    .hero-content{
    
    max-width:750px;
    
    }
    
    
    
    .brand-title{
    
    
    font-size:45px;
    
    
    font-weight:900;
    
    
    margin-bottom:25px;
    
    
    }
    
    
    
    .brand-title span{
    
    
    color:#60a5fa;
    
    
    }
    
    
    
    
    
    .badge{
    
    
    display:inline-block;
    
    
    padding:10px 25px;
    
    
    border-radius:50px;
    
    
    background:rgba(96,165,250,.1);
    
    
    border:1px solid rgba(96,165,250,.3);
    
    
    color:#60a5fa;
    
    
    margin-bottom:25px;
    
    
    letter-spacing:2px;
    
    
    }
    
    
    
    
    
    .hero h1{
    
    
    font-size:65px;
    
    
    line-height:1.4;
    
    
    font-weight:900;
    
    
    }
    
    
    
    .hero h1 span{
    
    
    color:#60a5fa;
    
    
    }
    
    
    
    .hero p{
    
    
    margin-top:25px;
    
    
    font-size:19px;
    
    
    line-height:2.2;
    
    
    color:#cbd5e1;
    
    
    }
    
    
    
    
    .hero-actions{
    
    
    margin-top:40px;
    
    
    display:flex;
    
    
    gap:20px;
    
    
    }
    
    
    
    
    
    .btn{
    
    
    padding:15px 40px;
    
    
    border-radius:50px;
    
    
    transition:.4s;
    
    
    display:inline-block;
    
    
    }
    
    
    
    
    .primary{
    
    
    background:#2563eb;
    
    
    box-shadow:0 0 40px rgba(37,99,235,.5);
    
    
    }
    
    
    
    .outline{
    
    
    background:rgba(255,255,255,.06);
    
    
    border:1px solid rgba(255,255,255,.25);
    
    
    }
    
    
    
    .btn:hover{
    
    
    transform:translateY(-7px);
    
    
    }
    
    
    
    
    
    
    
    
    
    /* ================= BRAND CARD ================= */
    
    
    .brand-card{
    
    
    width:370px;
    
    
    padding:35px;
    
    
    background:rgba(255,255,255,.07);
    
    
    border:1px solid rgba(255,255,255,.15);
    
    
    border-radius:35px;
    
    
    backdrop-filter:blur(25px);
    
    
    box-shadow:
    
    0 0 70px rgba(37,99,235,.25);
    
    
    }
    
    
    
    
    .card-header{
    
    
    color:#60a5fa;
    
    
    letter-spacing:3px;
    
    
    }
    
    
    
    
    .brand-card h2{
    
    
    font-size:32px;
    
    
    margin:25px 0 10px;
    
    
    }
    
    
    
    .brand-card p{
    
    
    color:#94a3b8;
    
    
    }
    
    
    
    .divider{
    
    
    height:1px;
    
    
    background:rgba(255,255,255,.15);
    
    
    margin:30px 0;
    
    
    }
    
    
    
    
    
    .stats{
    
    
    display:flex;
    
    
    justify-content:space-between;
    
    
    }
    
    
    
    .stats strong{
    
    
    font-size:35px;
    
    
    display:block;
    
    
    }
    
    
    
    
    .stats span{
    
    
    font-size:13px;
    
    
    color:#94a3b8;
    
    
    }
    
    
    
    .online-status{
    
    
    margin-top:30px;
    
    
    color:#cbd5e1;
    
    
    }
    
    
    
    .online-status span{
    
    
    width:10px;
    
    
    height:10px;
    
    
    display:inline-block;
    
    
    background:#22c55e;
    
    
    border-radius:50%;
    
    
    }
    
    
    
    
    
    
    
    
    
    /* ================= SECTION TITLE ================= */
    
    
    
    section{
    
    
    padding:100px 8%;
    
    
    }
    
    
    
    .section-heading{
    
    
    text-align:center;
    
    
    margin-bottom:60px;
    
    
    }
    
    
    
    
    .section-heading span{
    
    
    color:#60a5fa;
    
    
    letter-spacing:4px;
    
    
    }
    
    
    
    
    .section-heading h2{
    
    
    font-size:45px;
    
    
    margin:15px 0;
    
    
    }
    
    
    
    
    .section-heading p{
    
    
    color:#94a3b8;
    
    
    line-height:2;
    
    
    }
    
    
    
    
    
    
    
    
    /* ================= ABOUT ================= */
    
    
    
    .about-box{
    
    
    max-width:950px;
    
    
    margin:auto;
    
    
    padding:50px;
    
    
    background:rgba(255,255,255,.06);
    
    
    border:1px solid rgba(255,255,255,.12);
    
    
    border-radius:35px;
    
    
    text-align:center;
    
    
    line-height:2.3;
    
    
    color:#cbd5e1;
    
    
    }
    /* ================= AI EXPERIENCE ================= */


.experience-grid,
.services-grid{


display:grid;

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

gap:25px;


}




.experience-card,
.service-card{


padding:35px;


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


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


border-radius:30px;


transition:.5s;


position:relative;


overflow:hidden;


}




.experience-card:hover,
.service-card:hover{


transform:translateY(-15px);


border-color:#60a5fa;


box-shadow:

0 20px 60px rgba(37,99,235,.25);


}





.experience-number,
.service-icon{


font-size:45px;


font-weight:900;


color:#60a5fa;


}




.experience-card h3,
.service-card h3{


font-size:23px;


margin:20px 0;


}



.experience-card p,
.service-card p{


color:#94a3b8;


line-height:2;


}










/* ================= BRAND IDENTITY ================= */


.identity-wrapper{


display:flex;


align-items:center;


gap:70px;


}



.identity-image{


flex:1;


}




.image-frame{


height:500px;


border-radius:40px;


background:


linear-gradient(

135deg,

rgba(96,165,250,.3),

rgba(255,255,255,.05)

);


padding:10px;


box-shadow:

0 0 80px rgba(37,99,235,.3);


}



.image-placeholder{


height:100%;


display:flex;


align-items:center;


justify-content:center;


text-align:center;


font-size:35px;


font-weight:900;


background:#0f172a;


border-radius:35px;


color:#60a5fa;


}





.identity-content{


flex:1;


}



.identity-content h3{


font-size:35px;


margin-bottom:25px;


}




.identity-content p{


color:#cbd5e1;


line-height:2.4;


}




.philosophy{


margin-top:35px;


padding:25px;


border-radius:25px;


background:rgba(96,165,250,.08);


border:1px solid rgba(96,165,250,.2);


}



.philosophy span{


color:#60a5fa;


}



.philosophy h4{


margin-top:15px;


line-height:2;


font-size:20px;


}






.identity-stats{


display:flex;


gap:25px;


margin-top:35px;


}



.identity-stats div{


padding:20px;


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


border-radius:20px;


text-align:center;


}



.identity-stats strong{


display:block;


font-size:30px;


color:#60a5fa;


}



.identity-stats span{


color:#94a3b8;


font-size:13px;


}









/* ================= TIMELINE ================= */


.timeline{


max-width:800px;


margin:80px auto 0;


border-right:2px solid #2563eb;


padding-right:40px;


}



.timeline-item{


margin-bottom:45px;


position:relative;


}



.timeline-item::before{


content:"";


position:absolute;


right:-51px;


top:5px;


width:18px;


height:18px;


border-radius:50%;


background:#60a5fa;


box-shadow:0 0 25px #60a5fa;


}



.timeline-item span{


font-size:30px;


font-weight:900;


color:#60a5fa;


}



.timeline-item p{


margin-top:10px;


color:#cbd5e1;


line-height:2;


}









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



.projects-grid{


display:grid;


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


gap:30px;


}




.project-card{


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


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


border-radius:35px;


overflow:hidden;


transition:.5s;


}



.project-card:hover{


transform:translateY(-15px);


box-shadow:

0 25px 60px rgba(37,99,235,.25);


}





.project-image{


height:450px;


overflow:hidden;


}



.project-image img{


height:100%;


object-fit:cover;


transition:.6s;


}




.project-card:hover img{


transform:scale(1.08);


}




.project-info{


padding:30px;


}



.project-info span{


color:#60a5fa;


font-size:13px;


}



.project-info h3{


font-size:28px;


margin:15px 0;


}



.project-info p{


color:#94a3b8;


line-height:2;


}









/* ================= REQUEST FORM ================= */



.request-box{


max-width:950px;


margin:auto;


padding:50px;


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


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


border-radius:40px;


}





.input-group{


margin-bottom:25px;


}




.input-group label{


display:block;


margin-bottom:10px;


color:#cbd5e1;


}




input,
textarea,
select{


width:100%;


padding:17px;


border-radius:18px;


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


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


color:white;


outline:none;


}



textarea{


height:160px;


}




.submit-btn{


padding:17px 50px;


border:0;


border-radius:50px;


background:#2563eb;


color:white;


cursor:pointer;


font-size:16px;


}










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



.contact{


text-align:center;


}




.contact h2{


font-size:45px;


}




.contact p{


margin:25px;


color:#94a3b8;


}



.contact-buttons{


display:flex;


justify-content:center;


gap:20px;


}









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



footer{


padding:50px 8%;


text-align:center;


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


}



.footer-logo{


font-size:35px;


font-weight:900;


color:#60a5fa;


margin-bottom:20px;


}



footer p{


color:#94a3b8;


line-height:2;


}






.footer-copy{


margin-top:30px;


color:#64748b;


}









/* ================= MOTION ================= */



.experience-card,
.service-card,
.project-card,
.brand-card,
.about-box,
.request-box{


animation:fadeUp .8s ease both;


}




@keyframes fadeUp{


from{


opacity:0;


transform:translateY(40px);


}



to{


opacity:1;


transform:translateY(0);


}



}









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



@media(max-width:1000px){



.hero,
.identity-wrapper{


flex-direction:column;


text-align:center;


}




.hero h1{


font-size:42px;


}





.brand-card{


width:100%;


}



.experience-grid,
.services-grid,
.projects-grid{


grid-template-columns:1fr;


}



.identity-stats{


justify-content:center;


flex-wrap:wrap;


}




.image-frame{


height:400px;


}



nav{


display:none;


}




.contact-buttons{


flex-direction:column;


}



}
.order-btn{
    background: linear-gradient(135deg,#00d4ff,#2563eb);
    color:#fff !important;
    box-shadow:0 0 25px rgba(0,212,255,.35);
    transition:.3s;
}

.order-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 0 40px rgba(0,212,255,.55);
}
/*======================================================
      CREATIVE CONTACT HUB
      Mr.aiwithmahdi
======================================================*/


.creative-contact{

    position:relative;
    
    width:100%;
    
    padding:120px 8%;
    
    overflow:hidden;
    
    }
    
    
    
    .contact-glow{
    
    position:absolute;
    
    width:500px;
    
    height:500px;
    
    background:#00d4ff;
    
    opacity:.15;
    
    filter:blur(150px);
    
    top:0;
    
    right:10%;
    
    animation:contactGlow 10s infinite alternate;
    
    }
    
    
    
    @keyframes contactGlow{
    
    from{
    
    transform:translateY(0);
    
    }
    
    
    to{
    
    transform:translateY(120px);
    
    }
    
    }
    
    
    
    
    
    .contact-container{
    
    max-width:1250px;
    
    margin:auto;
    
    position:relative;
    
    z-index:2;
    
    }
    
    
    
    
    .creative-contact .section-heading{
    
    text-align:center;
    
    margin-bottom:70px;
    
    }
    
    
    
    .creative-contact .section-heading span{
    
    color:#00d4ff;
    
    letter-spacing:3px;
    
    font-size:14px;
    
    font-weight:700;
    
    }
    
    
    
    .creative-contact .section-heading h2{
    
    font-size:48px;
    
    font-weight:900;
    
    margin:20px 0;
    
    }
    
    
    
    .creative-contact .section-heading p{
    
    color:#b7c3d4;
    
    font-size:18px;
    
    line-height:2;
    
    }
    
    
    
    
    
    /* CONTACT CARDS */
    
    
    .contact-cards{
    
    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:30px;
    
    }
    
    
    
    
    .contact-card{
    
    position:relative;
    
    padding:45px 30px;
    
    border-radius:35px;
    
    background:
    
    rgba(255,255,255,.05);
    
    border:
    
    1px solid rgba(255,255,255,.1);
    
    backdrop-filter:blur(25px);
    
    text-align:center;
    
    overflow:hidden;
    
    transition:.5s;
    
    animation:cardShow 1s ease forwards;
    
    }
    
    
    
    
    .contact-card::before{
    
    content:"";
    
    position:absolute;
    
    inset:-2px;
    
    background:
    
    linear-gradient(
    
    120deg,
    
    transparent,
    
    #00d4ff,
    
    transparent
    
    );
    
    opacity:0;
    
    transition:.5s;
    
    z-index:-1;
    
    }
    
    
    
    
    .contact-card:hover{
    
    transform:
    
    translateY(-15px)
    
    rotateX(5deg);
    
    box-shadow:
    
    0 35px 80px rgba(0,200,255,.25);
    
    border-color:#00d4ff;
    
    }
    
    
    
    .contact-card:hover::before{
    
    opacity:1;
    
    }
    
    
    
    
    
    .contact-icon{
    
    font-size:55px;
    
    margin-bottom:25px;
    
    filter:
    
    drop-shadow(0 0 20px rgba(0,200,255,.5));
    
    }
    
    
    
    
    .contact-card h3{
    
    font-size:24px;
    
    margin-bottom:20px;
    
    }
    
    
    
    
    .contact-card strong{
    
    display:block;
    
    font-size:22px;
    
    color:#fff;
    
    margin-bottom:20px;
    
    }
    
    
    
    
    .contact-card p{
    
    color:#aebacc;
    
    line-height:2;
    
    min-height:65px;
    
    }
    
    
    
    
    .contact-card a{
    
    display:inline-flex;
    
    margin-top:25px;
    
    padding:14px 30px;
    
    border-radius:50px;
    
    background:
    
    linear-gradient(
    
    135deg,
    
    #00d4ff,
    
    #2563eb
    
    );
    
    color:white;
    
    text-decoration:none;
    
    font-weight:800;
    
    transition:.4s;
    
    }
    
    
    
    .contact-card a:hover{
    
    transform:scale(1.08);
    
    box-shadow:
    
    0 15px 40px rgba(0,200,255,.4);
    
    }
    
    
    
    
    /* FINAL MESSAGE */
    
    
    .contact-final{
    
    margin-top:80px;
    
    padding:45px;
    
    border-radius:35px;
    
    text-align:center;
    
    background:
    
    rgba(255,255,255,.03);
    
    border:
    
    1px solid rgba(255,255,255,.08);
    
    }
    
    
    
    .contact-final h3{
    
    font-size:30px;
    
    font-weight:900;
    
    margin-bottom:15px;
    
    }
    
    
    
    .contact-final p{
    
    color:#b7c3d4;
    
    font-size:18px;
    
    }
    
    
    
    
    
    @keyframes cardShow{
    
    from{
    
    opacity:0;
    
    transform:translateY(60px);
    
    }
    
    
    to{
    
    opacity:1;
    
    transform:translateY(0);
    
    }
    
    }
    
    
    
    
    
    /* MOBILE */
    
    
    @media(max-width:900px){
    
    
    .contact-cards{
    
    grid-template-columns:1fr;
    
    }
    
    
    
    .creative-contact{
    
    padding:80px 5%;
    
    }
    
    
    
    .creative-contact .section-heading h2{
    
    font-size:34px;
    
    }
    
    
    
    .contact-final{
    
    padding:30px 20px;
    
    }
    
    
    
    .contact-final h3{
    
    font-size:22px;
    
    }
    
    
    
    }
    /*======================================================
        FLOATING CONTACT BUTTON
        Mr.aiwithmahdi
======================================================*/


.floating-contact{

    position:fixed;
    
    bottom:30px;
    
    right:30px;
    
    z-index:99999;
    
    }
    
    
    
    .floating-btn{
    
    width:65px;
    
    height:65px;
    
    border-radius:50%;
    
    border:none;
    
    cursor:pointer;
    
    font-size:30px;
    
    background:
    
    linear-gradient(135deg,#00d4ff,#2563eb);
    
    color:#fff;
    
    box-shadow:
    
    0 0 30px rgba(0,212,255,.5);
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    transition:.4s;
    
    animation:
    
    floatingPulse 2.5s infinite;
    
    }
    
    
    
    .floating-btn:hover{
    
    transform:
    
    scale(1.15)
    
    rotate(10deg);
    
    box-shadow:
    
    0 0 55px rgba(0,212,255,.8);
    
    }
    
    
    
    
    
    @keyframes floatingPulse{
    
    
    0%{
    
    box-shadow:
    
    0 0 20px rgba(0,212,255,.4);
    
    }
    
    
    
    50%{
    
    box-shadow:
    
    0 0 55px rgba(0,212,255,.8);
    
    }
    
    
    
    100%{
    
    box-shadow:
    
    0 0 20px rgba(0,212,255,.4);
    
    }
    
    
    
    }
    
    
    
    
    
    
    
    .floating-panel{
    
    position:absolute;
    
    bottom:80px;
    
    right:0;
    
    width:260px;
    
    padding:25px;
    
    border-radius:30px;
    
    
    background:
    
    rgba(10,15,30,.85);
    
    
    border:
    
    1px solid rgba(255,255,255,.12);
    
    
    backdrop-filter:
    
    blur(25px);
    
    
    box-shadow:
    
    0 25px 70px rgba(0,0,0,.45);
    
    
    display:flex;
    
    flex-direction:column;
    
    gap:15px;
    
    
    opacity:0;
    
    visibility:hidden;
    
    transform:
    
    translateY(30px)
    
    scale(.9);
    
    
    transition:.45s;
    
    }
    
    
    
    
    .floating-panel.active{
    
    
    opacity:1;
    
    visibility:visible;
    
    
    transform:
    
    translateY(0)
    
    scale(1);
    
    
    }
    
    
    
    
    
    .floating-title{
    
    
    text-align:center;
    
    font-size:20px;
    
    font-weight:900;
    
    margin-bottom:10px;
    
    
    color:#fff;
    
    
    }
    
    
    
    
    
    .floating-panel a{
    
    
    text-decoration:none;
    
    
    color:#fff;
    
    
    padding:15px 18px;
    
    
    border-radius:18px;
    
    
    background:
    
    rgba(255,255,255,.07);
    
    
    border:
    
    1px solid rgba(255,255,255,.08);
    
    
    transition:.35s;
    
    
    font-weight:700;
    
    
    }
    
    
    
    .floating-panel a:hover{
    
    
    background:
    
    linear-gradient(
    
    135deg,
    
    #00d4ff,
    
    #2563eb
    
    );
    
    
    transform:
    
    translateX(-8px);
    
    
    }
    
    
    
    
    
    
    @media(max-width:600px){
    
    
    .floating-contact{
    
    
    right:20px;
    
    bottom:20px;
    
    
    }
    
    
    
    .floating-btn{
    
    
    width:58px;
    
    height:58px;
    
    
    }
    
    
    
    .floating-panel{
    
    
    width:240px;
    
    
    }
    
    
    }
    /*======================================================
        PREMIUM FAQ SECTION
        Mr.aiwithmahdi
======================================================*/


.faq-section{

    padding:100px 8%;
    
    position:relative;
    
    }
    
    
    
    .faq-container{
    
    max-width:900px;
    
    margin:60px auto 0;
    
    display:flex;
    
    flex-direction:column;
    
    gap:20px;
    
    }
    
    
    
    
    
    .faq-item{
    
    background:
    
    rgba(255,255,255,.05);
    
    
    border:
    
    1px solid rgba(255,255,255,.1);
    
    
    border-radius:25px;
    
    
    overflow:hidden;
    
    
    backdrop-filter:blur(20px);
    
    
    transition:.4s;
    
    
    }
    
    
    
    
    
    .faq-item:hover{
    
    transform:translateY(-5px);
    
    
    border-color:
    
    rgba(0,212,255,.5);
    
    
    box-shadow:
    
    0 20px 50px rgba(0,212,255,.12);
    
    
    }
    
    
    
    
    
    .faq-question{
    
    width:100%;
    
    
    padding:25px 30px;
    
    
    background:none;
    
    
    border:none;
    
    
    color:#fff;
    
    
    font-family:inherit;
    
    
    font-size:18px;
    
    
    font-weight:800;
    
    
    display:flex;
    
    
    justify-content:space-between;
    
    
    align-items:center;
    
    
    cursor:pointer;
    
    
    text-align:right;
    
    
    }
    
    
    
    
    .faq-question span{
    
    width:35px;
    
    height:35px;
    
    
    display:flex;
    
    
    align-items:center;
    
    justify-content:center;
    
    
    border-radius:50%;
    
    
    background:
    
    linear-gradient(135deg,#00d4ff,#2563eb);
    
    
    font-size:25px;
    
    
    transition:.4s;
    
    
    }
    
    
    
    
    .faq-answer{
    
    max-height:0;
    
    
    overflow:hidden;
    
    
    transition:
    
    max-height .5s ease;
    
    
    }
    
    
    
    
    .faq-answer p{
    
    padding:
    
    0 30px 25px;
    
    
    color:#b8c4d8;
    
    
    line-height:2;
    
    
    font-size:15px;
    
    
    }
    
    
    
    
    
    .faq-item.active .faq-question span{
    
    transform:
    
    rotate(45deg);
    
    
    }
    
    
    
    
    
    .faq-item.active .faq-answer{
    
    max-height:300px;
    
    
    }
    
    
    
    
    @media(max-width:600px){
    
    
    .faq-section{
    
    padding:70px 5%;
    
    }
    
    
    
    .faq-question{
    
    font-size:15px;
    
    padding:20px;
    
    }
    
    
    
    .faq-answer p{
    
    padding:0 20px 20px;
    
    font-size:14px;
    
    }
    
    
    }
    /* FAQ Equal Style Fix */

.faq-answer p{

    margin:0;

    padding:25px 30px;

    line-height:2.1;

}


.faq-item.active .faq-answer{

    max-height:500px;

}


.faq-question{

    min-height:80px;

}


.faq-item{

    transition:all .4s ease;

}
.faq-answer{
    height:180px;
    overflow-y:auto;
}


.faq-answer p{
    padding:25px 30px;
}
.show-more-faq{

    display:block;
    
    margin:40px auto 0;
    
    padding:14px 35px;
    
    border:none;
    
    border-radius:50px;
    
    background:linear-gradient(135deg,#00d4ff,#2563eb);
    
    color:white;
    
    font-family:inherit;
    
    font-size:16px;
    
    font-weight:800;
    
    cursor:pointer;
    
    transition:.3s;
    
    }
    
    
    .show-more-faq:hover{
    
    transform:translateY(-5px);
    
    box-shadow:0 15px 35px rgba(0,212,255,.35);
    
    }
    /* WEB DESIGN SPECIAL CARD */

.service-card{

    display:block;
    
    text-decoration:none;
    
    color:white;
    
    background:
    rgba(255,255,255,.06);
    
    border:
    
    1px solid rgba(255,255,255,.15);
    
    border-radius:30px;
    
    padding:30px;
    
    transition:.35s;
    
    }
    
    
    .service-card:hover{
    
    transform:translateY(-10px);
    
    border-color:#00d4ff;
    
    box-shadow:
    
    0 20px 50px rgba(0,212,255,.2);
    
    }
    
    
    
    .service-icon{
    
    font-size:45px;
    
    margin-bottom:20px;
    
    }
    
    
    
    .service-card h3{
    
    font-size:24px;
    
    margin-bottom:15px;
    
    }
    
    
    
    .service-card p{
    
    color:#cbd5e1;
    
    line-height:2;
    
    }
    
    
    
    .service-card span{
    
    display:inline-block;
    
    margin-top:20px;
    
    color:#00d4ff;
    
    font-weight:700;
    
    }