/* ==========================================
   SHUBHAM CHAUDHARI PORTFOLIO
   Senior .NET Developer | Technical Lead
   Formatted and cleaned
========================================== */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #06b6d4;

    --dark: #0f172a;
    --dark-light: #1e293b;

    --white: #ffffff;
    --light: #f8fafc;

    --gray: #94a3b8;
    --gray-dark: #475569;

    --success: #22c55e;

    --gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    --shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    --transition: 0.35s ease;
}

/* Global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--light);
    color: var(--dark);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

a {
    text-decoration: none;
    transition: var(--transition);
}

img {
    max-width: 100%;
}

section {
    position: relative;
}

.new-py-5{
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.port-py-5 {
    padding-top: 4rem !important;
    padding-bottom: 3rem !important;
}

/* Navbar */
.custom-navbar {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(15px);
    transition: 0.4s;
    padding: 18px 0;
}

.navbar-brand {
    font-size: 1.35rem;
    color: #fff !important;
}

.nav-link {
    color: #dbeafe !important;
    margin-left: 18px;
    font-weight: 500;
    position: relative;
}

.nav-link:hover {
    color: #fff !important;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transition: 0.3s;
}

.nav-link:hover::after {
    width: 100%;
}

/* Hero */
.hero-bg {
    background: linear-gradient(135deg, #0f172a, #1e3a8a, #0f172a);
}
.hero-section {
    background: linear-gradient(135deg, #0f172a, #1e3a8a, #0f172a);
    color: white;
    padding-top: 120px;
    padding-bottom: 80px;
    overflow: hidden;
}

.hero-tag {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    font-size: 14px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
}

.hero-title {
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 25px;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: #d1d5db;
    line-height: 1.8;
    max-width: 700px;
}

/* Buttons */
.btn {
    border-radius: 50px;
    padding: 14px 32px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-primary {
    background: var(--gradient);
    border: none;
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.35);
}

.btn-primary:hover {
    transform: translateY(-4px);
}

.btn-outline-light:hover {
    color: var(--primary);
}

/* Social icons */
.social-icons {
    display: flex;
    gap: 20px;
}

.social-icons a {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 20px;
    transition: var(--transition);
}

.social-icons a:hover {
    background: var(--secondary);
    transform: translateY(-5px);
}

/* Profile */
.profile-wrapper {
    position: relative;
}

.profile-image {
    width: 360px;
    border-radius: 50%;
    border: 8px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* Stats */
/* ===================================
            HERO STATS
=================================== */

.hero-stats{

    margin-top:60px;

}

/* Equal Height */

.hero-stats .row{

    align-items:stretch;

}

.stat-card{

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    text-align:center;

    padding:40px 30px;

    min-height:320px;

    background:#ffffff;

    border-radius:22px;

    border:1px solid #E5E7EB;

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

    transition:.35s ease;

}

.stat-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(37,99,235,.15);

    border-color:#2563EB;

}

.stat-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.stat-icon i{

    font-size:34px;

    color:#ffffff;

}

.stat-card h2{

    font-size:42px;

    font-weight:800;

    color:#2563EB;

    margin-bottom:8px;

}

.stat-card h5{

    font-size:22px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:18px;

    min-height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.stat-card p{

    color:#64748B;

    line-height:1.8;

    flex-grow:1;

    margin:0;

}

/* Hover Animation */

.stat-card:hover .stat-icon{

    transform:rotate(360deg);

    transition:.8s;

}

.stat-card:hover h2{

    color:#06B6D4;

}

/* Tablet */

@media (max-width:992px){

    .stat-card{

        min-height:290px;

    }

}

/* Mobile */

@media (max-width:768px){

    .hero-stats{

        margin-top:30px;

    }

    .stat-card{

        min-height:auto;

        padding:35px 25px;

    }

    .stat-card h2{

        font-size:34px;

    }

    .stat-card h5{

        font-size:20px;

        min-height:auto;

    }

}

/* End of file */

.stat-card p{

    color:var(--gray-dark);

    margin:0;

}

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

.scroll-down{

    text-align:center;

    margin-top:60px;

}

.scroll-down a{

    color:white;

    font-size:34px;

    animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

}

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

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:3rem;

    color:var(--dark);

}

.section-title p{

    color:var(--gray-dark);

    max-width:700px;

    margin:auto;

    margin-top:15px;

}

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

.custom-card{

    background:white;

    border-radius:20px;

    padding:35px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.custom-card:hover{

    transform:translateY(-10px);

}

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

.text-primary{

    color:var(--secondary)!important;

}

.bg-gradient{

    background:var(--gradient);

}

.rounded-xl{

    border-radius:25px;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:992px){

.hero-title{

font-size:3rem;

text-align:center;

}

.hero-subtitle{

text-align:center;

}

.hero-tag{

display:block;

margin:auto;

margin-bottom:25px;

width:fit-content;

}

.social-icons{

justify-content:center;

}

.profile-wrapper{

margin-top:60px;

}

.profile-image{

width:280px;

}

.hero-section{

text-align:center;

}

}

@media(max-width:768px){

.hero-title{

font-size:2.3rem;

}

.hero-subtitle{

font-size:1rem;

}

.stat-card{

margin-bottom:20px;

}

.section-title h2{

font-size:2.2rem;

}

}
/* ==========================================
   ACTIVE MENU
========================================== */

.nav-link.active{

    color:#06B6D4 !important;
    font-weight:600;

}

.nav-link.active::after{

    width:100%;

}

/* ==========================================
   SCROLL REVEAL
========================================== */

.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}
/* ===================================================
                    ABOUT SECTION
=================================================== */

.section-badge{

    display:inline-block;

    padding:8px 18px;

    background:#E0F2FE;

    color:#2563EB;

    border-radius:30px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:18px;

}

.about-image{

    position:relative;

    text-align:center;

}

.about-image img{

    border-radius:25px;

    transition:.4s;

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

}

.about-image img:hover{

    transform:scale(1.03);

}

.about-card{

    background:#fff;

    padding:30px;

    border-radius:18px;

    height:100%;

    transition:.35s;

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

    border:1px solid #EEF2F7;

}

.about-card:hover{

    transform:translateY(-8px);

    border-color:#2563EB;

}

.about-card i{

    font-size:42px;

    color:#2563EB;

    margin-bottom:20px;

}

.about-card h5{

    margin-bottom:15px;

    font-weight:700;

}

.about-card p{

    margin:0;

    color:#64748B;

    line-height:1.7;

}

#about p{

    line-height:1.9;
}

#about .lead{

    font-size:1.2rem;

    color:#334155 !important;

}

@media(max-width:992px){

.about-image{

margin-bottom:40px;

}

}
/* ==========================================
                SKILLS SECTION
========================================== */

.skills-section{

    background:#F8FAFC;

}

.skill-card{

    background:#ffffff;

    border-radius:22px;

    padding:35px;

    height:100%;

    transition:.35s;

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

    border:1px solid #E2E8F0;

}

.skill-card:hover{

    transform:translateY(-10px);

    border-color:#2563EB;

    box-shadow:0 30px 60px rgba(37,99,235,.15);

}

.skill-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.skill-icon i{

    color:#fff;

    font-size:32px;

}

.skill-card h4{

    font-weight:700;

    margin-bottom:15px;

}

.skill-card p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:25px;

}

.skill-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.skill-tags span{

    padding:8px 16px;

    border-radius:30px;

    background:#EFF6FF;

    color:#2563EB;

    font-size:14px;

    font-weight:600;

    transition:.3s;

    cursor:default;

}

.skill-tags span:hover{

    background:#2563EB;

    color:#ffffff;

}

/* ==========================================
            EXPERIENCE
========================================== */

.experience-section{

    background:#ffffff;

}

.timeline{

    position:relative;

    margin-top:60px;

    padding-left:40px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:20px;

    top:0;

    width:4px;

    height:100%;

    background:#2563EB;

    border-radius:20px;

}

.timeline-item{

    position:relative;

    margin-bottom:60px;

}

.timeline-dot{

    position:absolute;

    left:-30px;

    top:15px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#2563EB;

    border:4px solid white;

    box-shadow:0 0 0 6px rgba(37,99,235,.15);

}

.timeline-dot.active{

    background:#06B6D4;

    animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(6,182,212,.5);

}

70%{

box-shadow:0 0 0 15px rgba(6,182,212,0);

}

100%{

box-shadow:0 0 0 0 rgba(6,182,212,0);

}

}

.timeline-content{

    background:white;

    border-radius:20px;

    padding:35px;

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

    border:1px solid #E2E8F0;

    transition:.35s;

}

.timeline-content:hover{

    transform:translateY(-8px);

    border-color:#2563EB;

}

.timeline-year{

    display:inline-block;

    padding:8px 18px;

    background:#EFF6FF;

    color:#2563EB;

    border-radius:25px;

    font-weight:700;

    margin-bottom:20px;

}

.timeline-content h4{

    margin-bottom:10px;

    font-weight:700;

}

.timeline-content h6{

    color:#06B6D4;

    margin-bottom:20px;

}

.timeline-content p{

    color:#64748B;

    line-height:1.8;

}

.timeline-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:25px;

}

.timeline-tags span{

    padding:8px 16px;

    background:#F1F5F9;

    border-radius:25px;

    color:#2563EB;

    font-size:14px;

    font-weight:600;

}

.achievement-card{

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    color:white;

    border-radius:22px;

    text-align:center;

    padding:35px;

    transition:.35s;

}

.achievement-card:hover{

    transform:translateY(-8px);

}

.achievement-card h2{

    font-size:3rem;

    font-weight:700;

}

.achievement-card p{

    margin:0;

    font-size:18px;

}

@media(max-width:768px){

.timeline{

padding-left:20px;

}

.timeline::before{

left:10px;

}

.timeline-dot{

left:-40px;

}

}

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

.projects-section{

    background:#F8FAFC;

}

.project-card{

    background:#ffffff;

    border-radius:24px;

    padding:45px;

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

    border:1px solid #E2E8F0;

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 60px rgba(37,99,235,.12);

}

.project-category{

    display:inline-block;

    background:#DBEAFE;

    color:#2563EB;

    padding:8px 16px;

    border-radius:30px;

    font-weight:600;

    font-size:14px;

}

.project-features{

    margin-top:25px;

}

.project-features div{

    margin-bottom:10px;

    color:#475569;

}

.project-features i{

    color:#22C55E;

    margin-right:10px;

}

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.tech-stack span{

    background:#EFF6FF;

    color:#2563EB;

    padding:8px 15px;

    border-radius:25px;

    font-weight:600;

    font-size:14px;

}

.impact-box{

    background:#F8FAFC;

    border-left:5px solid #2563EB;

    padding:20px;

    border-radius:12px;

}

.impact-box h6{

    font-weight:700;

    margin-bottom:12px;

}

.impact-box ul{

    margin:0;

    padding-left:20px;

}

.impact-box li{

    margin-bottom:8px;

}

.project-card img{

    transition:.4s;

}

.project-card:hover img{

    transform:scale(1.03);

}

@media(max-width:992px){

.project-card{

padding:30px;

}

.project-card img{

margin-bottom:30px;

}

}
/* ==========================================
            CERTIFICATIONS
========================================== */

.certifications-section{

    background:#ffffff;

}

.certificate-card{

    background:#ffffff;

    border-radius:22px;

    padding:40px;

    text-align:center;

    border:1px solid #E2E8F0;

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

    transition:.35s;

    height:100%;

}

.certificate-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 60px rgba(37,99,235,.15);

}

.certificate-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    margin-bottom:25px;

}

.certificate-icon i{

    color:#ffffff;

    font-size:42px;

}

.certificate-status{

    display:inline-block;

    background:#DBEAFE;

    color:#2563EB;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.certificate-card h3{

    font-size:2rem;

    margin-bottom:10px;

}

.certificate-card h5{

    color:#06B6D4;

    margin-bottom:20px;

}

.certificate-card p{

    color:#64748B;

    line-height:1.8;

}

.certificate-footer{

    margin-top:25px;

    font-weight:600;

}

/* ==========================
   ACHIEVEMENT BOX
========================== */

.achievement-box{

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    color:#ffffff;

    text-align:center;

    padding:35px;

    border-radius:20px;

    transition:.35s;

}

.achievement-box:hover{

    transform:translateY(-8px);

}

.achievement-box i{

    font-size:42px;

    margin-bottom:20px;

}

.achievement-box h2{

    font-size:2.8rem;

    margin-bottom:10px;

}

.achievement-box p{

    margin:0;

}

/* ==========================
   RESUME CTA
========================== */

.resume-box{

    background:linear-gradient(135deg,#0F172A,#1E3A8A);

    color:#ffffff;

    border-radius:25px;

    padding:50px;

}

.resume-box h3{

    margin-bottom:20px;

}

.resume-box p{

    color:#CBD5E1;

    margin:0;

}

@media(max-width:992px){

.resume-box{

text-align:center;

}

.resume-box .btn{

margin-top:25px;

}

}

/* ==========================================
            CERTIFICATIONS
========================================== */

.certifications-section{

    background:#ffffff;

}

.certificate-card{

    background:#ffffff;

    border-radius:22px;

    padding:40px;

    text-align:center;

    border:1px solid #E2E8F0;

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

    transition:.35s;

    height:100%;

}

.certificate-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 60px rgba(37,99,235,.15);

}

.certificate-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    margin-bottom:25px;

}

.certificate-icon i{

    color:#ffffff;

    font-size:42px;

}

.certificate-status{

    display:inline-block;

    background:#DBEAFE;

    color:#2563EB;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.certificate-card h3{

    font-size:2rem;

    margin-bottom:10px;

}

.certificate-card h5{

    color:#06B6D4;

    margin-bottom:20px;

}

.certificate-card p{

    color:#64748B;

    line-height:1.8;

}

.certificate-footer{

    margin-top:25px;

    font-weight:600;

}

/* ==========================
   ACHIEVEMENT BOX
========================== */

.achievement-box{

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    color:#ffffff;

    text-align:center;

    padding:35px;

    border-radius:20px;

    transition:.35s;

}

.achievement-box:hover{

    transform:translateY(-8px);

}

.achievement-box i{

    font-size:42px;

    margin-bottom:20px;

}

.achievement-box h2{

    font-size:2.8rem;

    margin-bottom:10px;

}

.achievement-box p{

    margin:0;

}

/* ==========================
   RESUME CTA
========================== */

.resume-box{

    background:linear-gradient(135deg,#0F172A,#1E3A8A);

    color:#ffffff;

    border-radius:25px;

    padding:50px;

}

.resume-box h3{

    margin-bottom:20px;

}

.resume-box p{

    color:#CBD5E1;

    margin:0;

}

@media(max-width:992px){

.resume-box{

text-align:center;

}

.resume-box .btn{

margin-top:25px;

}

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

.contact-section{

    background:#F8FAFC;

}

.contact-info{

    background:#ffffff;

    padding:40px;

    border-radius:24px;

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

    height:100%;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    margin-bottom:30px;

}

.contact-icon{

    width:60px;

    height:60px;

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    border-radius:15px;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-right:20px;

    flex-shrink:0;

}

.contact-icon i{

    font-size:24px;

}

.contact-item h6{

    margin-bottom:6px;

    font-weight:700;

}

.contact-item a{

    color:#2563EB;

    word-break:break-word;

}

.contact-form{

    background:#ffffff;

    padding:40px;

    border-radius:24px;

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

}

.form-control{

    border-radius:12px;

    border:1px solid #CBD5E1;

    padding:15px;

}

.form-control:focus{

    border-color:#2563EB;

    box-shadow:0 0 0 .25rem rgba(37,99,235,.15);

}

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

.footer{

    background:#0F172A;

    color:#CBD5E1;

    padding:60px 0 25px;

}

.footer h4{

    color:#ffffff;

}

.footer p{

    margin:0;

}

.footer-social{

    display:flex;

    justify-content:end;

    gap:15px;

}

.footer-social a{

    width:45px;

    height:45px;

    background:#1E293B;

    color:#ffffff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.footer-social a:hover{

    background:#2563EB;

    transform:translateY(-5px);

}

.footer hr{

    border-color:#334155;

    margin:35px 0;

}

@media(max-width:992px){

.footer-social{

justify-content:center;

margin-top:25px;

}

.footer{

text-align:center;

}

.contact-info{

margin-bottom:30px;

}

}

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

#preloader{

    position:fixed;

    inset:0;

    background:#ffffff;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

}

#preloader.hidden{

    opacity:0;

    visibility:hidden;

    transition:.6s;

}

/* ==========================================
            PROGRESS BAR
========================================== */

#progressBar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(90deg,#2563EB,#06B6D4);

    z-index:9999;

}

/* ==========================================
            DARK MODE
========================================== */

.dark-mode{

    background:#0F172A;

    color:#F8FAFC;

}

.dark-mode section{

    background:#0F172A !important;

}

.dark-mode .custom-card,
.dark-mode .about-card,
.dark-mode .skill-card,
.dark-mode .timeline-content,
.dark-mode .project-card,
.dark-mode .certificate-card,
.dark-mode .contact-form,
.dark-mode .contact-info{

    background:#1E293B;

    color:white;

    border-color:#334155;

}

.dark-mode p{

    color:#CBD5E1 !important;

}

.dark-mode .stat-card{

    background:#1E293B;

    color:white;

}

.dark-mode .achievement-box{

    background:linear-gradient(135deg,#1D4ED8,#06B6D4);

}

.dark-mode .footer{

    background:#020617;

}

/* ==========================================
            BUTTON EFFECT
========================================== */

.btn{

    overflow:hidden;

    position:relative;

}

.btn::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

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

    transition:.4s;

}

.btn:hover::before{

    left:100%;

}

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

.project-card img,
.profile-image{

    transition:.4s;

}

.project-card:hover img{

    transform:scale(1.05);

}

/* ==========================================
            SELECTION
========================================== */

::selection{

    background:#2563EB;

    color:white;

}

#typing-text{

    color:#06B6D4;

    font-weight:700;

    min-height:70px;

    display:inline-block;

}

#typing-text::after{

    content:"|";

    animation:blink .8s infinite;

}

@keyframes blink{

    50%{

        opacity:0;

    }

}

.name{

    color:#ffffff;

    font-weight:800;

}

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

.contact-section{

    background:#F8FAFC;

    padding:100px 0;

}

.contact-card{

    background:#fff;

    border-radius:20px;

    padding:35px 20px;

    text-align:center;

    height:100%;

    border:1px solid #E2E8F0;

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

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(37,99,235,.15);

}

.contact-icon{

    width:75px;

    height:75px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    display:flex;

    align-items:center;

    justify-content:center;

}

.contact-icon i{

    color:#fff;

    font-size:30px;

}

.contact-card h5{

    margin-bottom:15px;

    font-weight:600;

}

.contact-card a{

    color:#2563EB;

    text-decoration:none;

    word-break:break-word;

}

.contact-card p{

    margin:0;

}

.contact-cta{

    margin-top:70px;

    text-align:center;

    padding:60px;

    border-radius:25px;

    background:linear-gradient(135deg,#0F172A,#1E3A8A);

    color:#fff;

}

.contact-cta h3{

    margin-bottom:20px;

}

.contact-cta p{

    color:#CBD5E1;

    max-width:700px;

    margin:auto;

}

/*=====================================
        RESPONSIVE
======================================*/

@media(max-width:992px){

.contact-section{

padding:80px 0;

}

.contact-cta{

padding:45px 25px;

}

}

@media(max-width:768px){

.contact-section{

padding:60px 0;

}

.contact-card{

padding:30px 20px;

}

.contact-cta{

margin-top:50px;

padding:35px 20px;

}

.contact-cta .btn{

width:100%;

margin:10px 0 !important;

}

}