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

.contact-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(rgba(6, 23, 55, 0.82),
            rgba(6, 23, 55, 0.82)),
        url("../images/contact/contact-banner.jpg") center center/cover no-repeat;
}

.contact-hero .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(11, 61, 145, 0.55),
            rgba(0, 0, 0, 0.45));
}

.contact-hero .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    color: #fff;
    animation: fadeUp 0.8s ease;
}

.contact-hero span {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.12);
    color: #4fc3f7;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.contact-hero h1 {
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 25px;
    color: #fff;
}

.contact-hero p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.9);
    max-width: 650px;
    margin-bottom: 40px;
}

.contact-hero .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.contact-hero .btn-primary,
.contact-hero .btn-outline {
    padding: 15px 34px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.35s ease;
}

.contact-hero .btn-primary {
    background: #0d6efd;
    color: #fff;
    box-shadow: 0 12px 30px rgba(13, 110, 253, 0.35);
}

.contact-hero .btn-primary:hover {
    background: #0b5ed7;
    transform: translateY(-4px);
}

.contact-hero .btn-outline {
    border: 2px solid rgba(255, 255, 255, 0.75);
    color: #fff;
    background: transparent;
}

.contact-hero .btn-outline:hover {
    background: #fff;
    color: #0b3d91;
    transform: translateY(-4px);
}

/* Responsive */

@media (max-width: 991px) {
    .contact-hero {
        min-height: 60vh;
        text-align: center;
    }

    .contact-hero p {
        margin: 0 auto 35px;
    }

    .contact-hero .hero-buttons {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        padding: 90px 0;
    }

    .contact-hero h1 {
        font-size: 2.5rem;
    }

    .contact-hero p {
        font-size: 1rem;
        line-height: 1.8;
    }

    .contact-hero .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .contact-hero .btn-primary,
    .contact-hero .btn-outline {
        width: 230px;
        text-align: center;
    }
}
/*=========================================
  BREADCRUMB
=========================================*/

.breadcrumb-area {
    background: #f8fafc;
    padding: 18px 0;
    border-bottom: 1px solid #e6edf5;
}

.breadcrumb-area .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
}

.breadcrumb-area a {
    color: #0b3d91;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.breadcrumb-area a:hover {
    color: #0d6efd;
}

.breadcrumb-area i {
    color: #9aa6b2;
    font-size: 12px;
}

.breadcrumb-area span {
    color: #555;
    font-weight: 500;
}

/* Responsive */

@media (max-width: 768px) {

    .breadcrumb-area {
        padding: 14px 0;
    }

    .breadcrumb-area .container {
        font-size: 14px;
        gap: 8px;
    }

}
/* ===============================
   Contact Information Section
================================ */

.contact-info {
    padding: 80px 0;
    background: #f8fafc;
}

.contact-info .container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}


/* Section Title */

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title span {
    display: inline-block;
    color: #0d6efd;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.section-title h2 {
    font-size: 38px;
    color: #1e293b;
    font-weight: 700;
    margin-bottom: 15px;
}

.section-title p {
    max-width: 650px;
    margin: auto;
    color: #64748b;
    font-size: 16px;
    line-height: 1.7;
}


/* Contact Grid */

.contact-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;

}


/* Contact Card */

.contact-card {

    background: #ffffff;
    padding: 35px 25px;
    text-align: center;

    border-radius: 15px;

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

    transition: all 0.35s ease;

    position: relative;
    overflow: hidden;

}


/* Top Border Animation */

.contact-card::before {

    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #0d6efd,
        #00b4d8
    );

    transform: scaleX(0);
    transition: .35s ease;

}


.contact-card:hover::before {

    transform: scaleX(1);

}


.contact-card:hover {

    transform: translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.12);

}



/* Contact Icon */

.contact-icon {

    width: 75px;
    height: 75px;

    margin: 0 auto 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background: #eaf3ff;

    color:#0d6efd;

    font-size:32px;

    transition:.3s ease;

}


.contact-card:hover .contact-icon {

    background:#0d6efd;
    color:#ffffff;

    transform: rotateY(360deg);

}



/* Heading */

.contact-card h3 {

    font-size:22px;

    color:#1e293b;

    margin-bottom:15px;

    font-weight:700;

}



/* Paragraph */

.contact-card p {

    color:#64748b;

    font-size:15px;

    line-height:1.7;

    margin:5px 0;

}



/* Highlight Email / Website */

.contact-card p:first-of-type {

    font-weight:600;

    color:#334155;

}



/* ===============================
   Responsive Design
================================ */


/* Tablet */

@media(max-width:992px){

    .contact-grid {

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

    }

    .section-title h2 {

        font-size:32px;

    }

}



/* Mobile */

@media(max-width:576px){

    .contact-info {

        padding:60px 0;

    }


    .contact-grid {

        grid-template-columns:1fr;

    }


    .section-title h2 {

        font-size:28px;

    }


    .contact-card {

        padding:30px 20px;

    }

}
/* =====================================
   Contact Form Section
===================================== */

.contact-form-section {

    padding: 90px 0;
    background: #ffffff;

}


.contact-form-section .container {

    width: 90%;
    max-width: 1200px;
    margin:auto;

}



/* Main Wrapper */

.contact-wrapper {

    display:grid;
    grid-template-columns: 1fr 1.1fr;
    gap:50px;

    align-items:center;

}



/* ===============================
   Left Content
================================ */


.contact-content .section-label {

    display:inline-block;

    color:#0d6efd;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

    text-transform:uppercase;

}



.contact-content h2 {

    font-size:40px;

    line-height:1.2;

    color:#1e293b;

    margin-bottom:20px;

    font-weight:700;

}



.contact-content p {

    color:#64748b;

    font-size:16px;

    line-height:1.8;

    margin-bottom:30px;

    max-width:500px;

}



/* Features */

.contact-features {

    display:grid;

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

    gap:18px;

}



.contact-features div {

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

    color:#334155;

    font-weight:500;

}



.contact-features i {

    color:#0d6efd;

    font-size:18px;

}



/* ===============================
   Form Box
================================ */


.contact-form-box {

    background:#ffffff;

    padding:40px;

    border-radius:20px;

    box-shadow:
    0 15px 45px rgba(0,0,0,0.10);

    border:1px solid #e2e8f0;

}



/* Form Grid */

.form-grid {

    display:grid;

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

    gap:25px;

}



/* Form Group */

.form-group {

    margin-bottom:22px;

}



.form-group label {

    display:block;

    margin-bottom:8px;

    color:#1e293b;

    font-size:15px;

    font-weight:600;

}



/* Inputs */

.form-group input,
.form-group select,
.form-group textarea {


    width:100%;

    padding:14px 16px;

    border:1px solid #cbd5e1;

    border-radius:10px;

    outline:none;

    font-size:15px;

    color:#334155;

    background:#ffffff;

    transition:.3s ease;

    font-family:inherit;

}



.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {


    border-color:#0d6efd;

    box-shadow:
    0 0 0 3px rgba(13,110,253,.15);

}



/* Textarea Resize */

.form-group textarea {

    resize:none;

}



/* ===============================
   Submit Button
================================ */


.btn-primary {


    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 35px;

    background:#0d6efd;

    color:#ffffff;

    border:none;

    border-radius:50px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;

}



.btn-primary:hover {


    background:#084298;

    transform:translateY(-3px);

    box-shadow:
    0 10px 25px rgba(13,110,253,.3);

}


.btn-primary i {

    font-size:17px;

}



/* ===============================
   Responsive Design
================================ */


/* Tablet */

@media(max-width:992px){


    .contact-wrapper {

        grid-template-columns:1fr;

        gap:40px;

    }


    .contact-content h2 {

        font-size:34px;

    }


}



/* Mobile */

@media(max-width:576px){


    .contact-form-section {

        padding:60px 0;

    }


    .contact-form-box {

        padding:25px;

    }


    .form-grid {

        grid-template-columns:1fr;

        gap:0;

    }


    .contact-features {

        grid-template-columns:1fr;

    }


    .contact-content h2 {

        font-size:28px;

    }


    .btn-primary {

        width:100%;

        justify-content:center;

    }

}
/* =====================================
   Office Location Section
===================================== */

.office-location {

    padding:90px 0;

    background:#f8fafc;

}


.office-location .container {

    width:90%;

    max-width:1200px;

    margin:auto;

}



/* ===============================
   Office Grid
================================ */


.office-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}



/* ===============================
   Office Details
================================ */


.office-details {

    display:flex;

    flex-direction:column;

    gap:20px;

}



/* Office Card */

.office-card {

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#ffffff;

    padding:25px;

    border-radius:15px;

    box-shadow:

    0 10px 30px rgba(0,0,0,0.08);

    transition:.35s ease;

    border-left:4px solid transparent;

}



.office-card:hover {

    transform:translateX(8px);

    border-left-color:#0d6efd;

    box-shadow:

    0 15px 35px rgba(0,0,0,0.12);

}



/* Icon */

.office-icon {

    min-width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eaf3ff;

    color:#0d6efd;

    font-size:25px;

    transition:.3s ease;

}



.office-card:hover .office-icon {

    background:#0d6efd;

    color:#ffffff;

    transform:rotateY(360deg);

}



/* Text */

.office-card h3 {

    margin:0 0 8px;

    font-size:20px;

    color:#1e293b;

    font-weight:700;

}



.office-card p {

    margin:0;

    color:#64748b;

    font-size:15px;

    line-height:1.7;

}



/* ===============================
   Office Image
================================ */


.office-image {

    position:relative;

    overflow:hidden;

    border-radius:20px;

    box-shadow:

    0 20px 50px rgba(0,0,0,0.15);

}



.office-image::after {

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        transparent,

        rgba(0,0,0,.25)

    );

}



.office-image img {

    width:100%;

    height:520px;

    object-fit:cover;

    display:block;

    transition:.5s ease;

}



.office-image:hover img {

    transform:scale(1.05);

}



/* ===============================
   Responsive Design
================================ */


/* Tablet */

@media(max-width:992px){


    .office-grid {

        grid-template-columns:1fr;

        gap:40px;

    }


    .office-image img {

        height:450px;

    }


}



/* Mobile */

@media(max-width:576px){


    .office-location {

        padding:60px 0;

    }


    .office-card {

        padding:20px;

        gap:15px;

    }


    .office-icon {

        min-width:50px;

        height:50px;

        font-size:20px;

    }


    .office-card h3 {

        font-size:18px;

    }


    .office-image img {

        height:300px;

    }

}
/* =====================================
   Map Section
===================================== */

.map-section {

    padding:80px 0;

    background:#ffffff;

}


.map-section .container {

    width:90%;

    max-width:1200px;

    margin:auto;

}



/* Section Title */

.map-section .section-title {

    text-align:center;

    margin-bottom:40px;

}


.map-section .section-title span {

    display:inline-block;

    color:#0d6efd;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;

}


.map-section .section-title h2 {

    font-size:38px;

    color:#1e293b;

    font-weight:700;

    margin:0;

}



/* ===============================
   Map Wrapper
================================ */


.map-wrapper {

    width:100%;

    height:500px;

    overflow:hidden;

    border-radius:20px;

    box-shadow:

    0 15px 40px rgba(0,0,0,0.12);

    border:1px solid #e2e8f0;

    position:relative;

}



/* Map iframe */

.map-wrapper iframe {

    width:100%;

    height:100%;

    border:0;

    display:block;

    filter:

    grayscale(20%)

    contrast(105%);

    transition:.4s ease;

}



/* Hover Effect */

.map-wrapper:hover iframe {

    filter:none;

}



/* ===============================
   Responsive Design
================================ */


/* Tablet */

@media(max-width:992px){


    .map-wrapper {

        height:420px;

    }


    .map-section .section-title h2 {

        font-size:32px;

    }

}



/* Mobile */

@media(max-width:576px){


    .map-section {

        padding:60px 0;

    }


    .map-wrapper {

        height:300px;

        border-radius:15px;

    }


    .map-section .section-title h2 {

        font-size:28px;

    }

}
/* =====================================
   Departments Section
===================================== */

.departments {

    padding:90px 0;

    background:#f8fafc;

}


.departments .container {

    width:90%;

    max-width:1200px;

    margin:auto;

}



/* ===============================
   Department Grid
================================ */


.department-grid {

    display:grid;

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

    gap:25px;

}



/* ===============================
   Department Card
================================ */


.department-card {

    background:#ffffff;

    padding:35px 25px;

    text-align:center;

    border-radius:18px;

    box-shadow:

    0 10px 30px rgba(0,0,0,0.08);

    position:relative;

    overflow:hidden;

    transition:.35s ease;

}



/* Top Line Animation */

.department-card::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        #0d6efd,

        #00b4d8

    );

    transform:scaleX(0);

    transition:.35s ease;

}



.department-card:hover::before {

    transform:scaleX(1);

}



.department-card:hover {

    transform:translateY(-10px);

    box-shadow:

    0 20px 45px rgba(0,0,0,0.12);

}



/* ===============================
   Icon
================================ */


.department-card > i {

    width:75px;

    height:75px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eaf3ff;

    color:#0d6efd;

    font-size:32px;

    transition:.4s ease;

}



.department-card:hover > i {

    background:#0d6efd;

    color:#ffffff;

    transform:rotateY(360deg);

}



/* ===============================
   Heading
================================ */


.department-card h3 {

    font-size:22px;

    color:#1e293b;

    margin-bottom:15px;

    font-weight:700;

}



/* Description */

.department-card p {

    color:#64748b;

    font-size:15px;

    line-height:1.7;

    min-height:120px;

    margin-bottom:20px;

}



/* Email Link */

.department-card a {

    display:inline-block;

    color:#0d6efd;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    word-break:break-word;

    transition:.3s ease;

}



.department-card a:hover {

    color:#084298;

    text-decoration:underline;

}



/* ===============================
   Responsive Design
================================ */


/* Large Tablet */

@media(max-width:1100px){


    .department-grid {

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

    }


}



/* Tablet */

@media(max-width:768px){


    .department-grid {

        grid-template-columns:1fr;

    }


    .department-card p {

        min-height:auto;

    }


}



/* Mobile */

@media(max-width:576px){


    .departments {

        padding:60px 0;

    }


    .department-card {

        padding:30px 20px;

    }


    .department-card h3 {

        font-size:20px;

    }


}
/* =====================================
   Working Hours Section
===================================== */

.working-hours {

    padding:90px 0;

    background:#ffffff;

}


.working-hours .container {

    width:90%;
    max-width:1200px;
    margin:auto;

}


/* Main Box */

.hours-box {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

    background:#f8fafc;

    padding:50px;

    border-radius:25px;

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

}



/* Content */

.hours-content span {

    color:#0d6efd;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

}


.hours-content h2 {

    font-size:38px;

    color:#1e293b;

    margin:15px 0;

}


.hours-content p {

    color:#64748b;

    font-size:16px;

    line-height:1.8;

}



/* Hours Table */

.hours-table {

    background:#ffffff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:

    0 10px 30px rgba(0,0,0,0.08);

}


.hours-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 25px;

    border-bottom:1px solid #e2e8f0;

}


.hours-row:last-child {

    border-bottom:none;

}


.hours-row span {

    color:#475569;

    font-size:15px;

    font-weight:600;

}


.hours-row strong {

    color:#0d6efd;

    font-size:15px;

}



/* 24x7 Highlight */

.hours-row strong::before {

    content:"✓ ";

    font-weight:700;

}



/* Responsive */

@media(max-width:992px){

    .hours-box {

        grid-template-columns:1fr;

        padding:35px;

    }

}


@media(max-width:576px){

    .working-hours {

        padding:60px 0;

    }


    .hours-box {

        padding:25px;

    }


    .hours-content h2 {

        font-size:28px;

    }


    .hours-row {

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

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

.faq-section {

    padding:90px 0;

    background:#f8fafc;

}


.faq-section .container {

    width:90%;

    max-width:1000px;

    margin:auto;

}



/* ===============================
   FAQ Header
================================ */


.faq-section .section-title {

    text-align:center;

    margin-bottom:50px;

}


.faq-section .section-title span {

    display:inline-block;

    color:#0d6efd;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;

}


.faq-section .section-title h2 {

    font-size:38px;

    color:#1e293b;

    font-weight:700;

    margin-bottom:15px;

}


.faq-section .section-title p {

    color:#64748b;

    font-size:16px;

    line-height:1.7;

}



/* ===============================
   FAQ Container
================================ */


.faq-container {

    display:flex;

    flex-direction:column;

    gap:18px;

}



/* FAQ Item */

.faq-item {

    background:#ffffff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:

    0 8px 25px rgba(0,0,0,0.07);

    transition:.3s ease;

    border:1px solid #e2e8f0;

}



.faq-item:hover {

    box-shadow:

    0 15px 35px rgba(0,0,0,0.10);

}



/* ===============================
   Question Button
================================ */


.faq-question {

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:22px 25px;

    background:#ffffff;

    border:none;

    cursor:pointer;

    text-align:left;

    font-size:17px;

    font-weight:600;

    color:#1e293b;

}



.faq-question i {

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eaf3ff;

    color:#0d6efd;

    font-size:14px;

    transition:.3s ease;

}



/* Active State */

.faq-item.active .faq-question {

    color:#0d6efd;

}


.faq-item.active .faq-question i {

    transform:rotate(45deg);

    background:#0d6efd;

    color:#ffffff;

}



/* ===============================
   Answer
================================ */


.faq-answer {

    padding:0 25px 22px;

}


.faq-answer p {

    margin:0;

    color:#64748b;

    font-size:15px;

    line-height:1.8;

}



/* ===============================
   Animation
================================ */


.faq-item:not(.active) .faq-answer {

    display:none;

}



/* ===============================
   Responsive Design
================================ */


@media(max-width:768px){


    .faq-section {

        padding:60px 0;

    }


    .faq-section .section-title h2 {

        font-size:30px;

    }


    .faq-question {

        font-size:15px;

        padding:18px 20px;

    }


    .faq-answer {

        padding:0 20px 20px;

    }

}


@media(max-width:576px){


    .faq-section .section-title h2 {

        font-size:26px;

    }


    .faq-question {

        align-items:flex-start;

    }


    .faq-question i {

        flex-shrink:0;

    }

}
/* =====================================
   Contact CTA Section
===================================== */

.contact-cta {

    padding:90px 0;

    background:#f8fafc;

}


.contact-cta .container {

    width:90%;

    max-width:1200px;

    margin:auto;

}



/* CTA Box */

.cta-box {

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:70px 60px;

    border-radius:25px;

    background:

    linear-gradient(

        135deg,

        #0d6efd,

        #003f88

    );

    color:#ffffff;

    box-shadow:

    0 20px 50px rgba(0,0,0,0.15);

}



/* Background Shape */

.cta-box::before {

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(255,255,255,0.08);

    top:-150px;

    right:-100px;

}



.cta-box::after {

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    background:rgba(255,255,255,0.06);

    bottom:-100px;

    left:-80px;

}



/* Keep Content Above Shapes */

.cta-box > * {

    position:relative;

    z-index:2;

}



/* Label */

.cta-box span {

    display:inline-block;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

    color:#dbeafe;

    text-transform:uppercase;

}



/* Heading */

.cta-box h2 {

    font-size:42px;

    line-height:1.2;

    margin-bottom:20px;

    font-weight:700;

}



/* Description */

.cta-box p {

    max-width:750px;

    margin:0 auto 35px;

    font-size:17px;

    line-height:1.8;

    color:#e0f2fe;

}



/* Buttons */

.cta-buttons {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}



/* Primary Button */

.cta-buttons .btn-primary {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 35px;

    border-radius:50px;

    background:#ffffff;

    color:#0d6efd;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:.3s ease;

}



.cta-buttons .btn-primary:hover {

    transform:translateY(-3px);

    box-shadow:

    0 10px 25px rgba(0,0,0,0.2);

}



/* Outline Button */

.btn-outline {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 35px;

    border-radius:50px;

    border:2px solid #ffffff;

    color:#ffffff;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:.3s ease;

}



.btn-outline:hover {

    background:#ffffff;

    color:#0d6efd;

    transform:translateY(-3px);

}



/* =====================================
   Responsive Design
===================================== */


@media(max-width:768px){


    .contact-cta {

        padding:60px 0;

    }


    .cta-box {

        padding:50px 25px;

    }


    .cta-box h2 {

        font-size:32px;

    }


    .cta-box p {

        font-size:15px;

    }


    .cta-buttons {

        flex-direction:column;

        width:100%;

    }


    .cta-buttons a {

        width:100%;

    }

}



@media(max-width:576px){


    .cta-box h2 {

        font-size:26px;

    }


    .cta-box span {

        font-size:12px;

    }

}