:root {
    --primary-color: #057cf2;
    --secondary-color: #f8f9fa;
    --accent-color: #e9f2ff;
    --text-color: #333333;
    --light-text: #6c757d;
    --white: #ffffff;
    --transition: all 0.3s ease;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --border-radius: 8px;
}

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

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-weight: 600;
    margin-bottom: 20px;
}

p {
    margin-bottom: 15px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

    .btn:hover {
        background-color: #0468d4;
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

.text-center {
    text-align: center;
}

/* ===== Animations ===== */
.animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .animate.animated {
        opacity: 1;
        transform: translateY(0);
    }



/* ===== Section 2: Contact Info ===== */
.contact-info-section {
    background-color: var(--white);
    background-image: url(../Images/contact-us-medical-bg.jpg);
    background-position: center center;
    background-size: cover;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.contact-info-item {
    background-color: var(--secondary-color);
    padding: 30px;
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

    .contact-info-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

.contact-icon {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.contact-info-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.contact-info-text {
    color: var(--light-text);
}

/* ===== Section 3: Contact Form ===== */
.contact-form-section {
    background-color: var(--secondary-color);
}

.contact-form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.contact-form-content {
    padding-right: 30px;
}

.section-subtitle {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.section-title {
    font-size: 36px;
    margin-bottom: 20px;
}

.contact-form-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-row {
    display: flex;
    gap: 20px;
}

    .form-row .form-group {
        flex: 1;
    }

.form-control {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 16px;
    transition: var(--transition);
    position: relative;
    background-color: var(--white);
}

    .form-control:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(5, 124, 242, 0.2);
    }

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

/* Floating label effect */
.floating-label-group {
    position: relative;
    margin-bottom: 20px;
}

.floating-label {
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 15px;
    transition: var(--transition);
    color: var(--light-text);
    background-color: var(--white);
    padding: 0 5px;
}

.form-control:focus ~ .floating-label,
.form-control:not(:placeholder-shown) ~ .floating-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: var(--primary-color);
    background-color: var(--white);
}

/* Loading animation */
.loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--white);
    animation: spin 1s ease-in-out infinite;
    margin-left: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.btn-with-loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Section 4: CTA ===== */
.cta-section {
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
}

.cta-box {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    backdrop-filter: blur(5px);
}

.cta-title {
    font-size: 36px;
    margin-bottom: 20px;
}

.cta-description {
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-btn {
    background-color: var(--white);
    color: var(--primary-color);
}

    .cta-btn:hover {
        background-color: #e6f0ff;
    }

/* ===== Section 5: Video ===== */
.video-section {
    background-color: var(--white);
}

.video-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }



/* ===== Responsive Styles ===== */
@media (max-width: 992px) {
    .contact-form-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact-form-content {
        padding-right: 0;
    }

    .contact-form-image {
        order: -1;
    }

    section {
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 36px;
    }

    .section-title {
        font-size: 28px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .cta-box {
        padding: 40px 20px;
    }

    .cta-title {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 28px;
    }

    .hero-description {
        font-size: 16px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    section {
        padding: 40px 0;
    }
}


























































/*Styels for master slider used in contact header*/

.msp-preset-btn-84 {
    background-color: #b97ebb;
    color: #fff;
}

    .msp-preset-btn-84:hover {
        background-color: #ca89cc;
        color: #fff;
    }

    .msp-preset-btn-84:active {
        top: 1px
    }

.msp-preset-btn-85 {
    background-color: #b97ebb;
    color: #fff;
}

    .msp-preset-btn-85:hover {
        background-color: #ca89cc;
        color: #fff;
    }

    .msp-preset-btn-85:active {
        top: 1px
    }

.msp-preset-btn-86 {
    color: #b97ebb;
    border: solid 1px #b97ebb;
}

    .msp-preset-btn-86:hover {
        border-color: #ca89cc;
        color: #ca89cc
    }

    .msp-preset-btn-86:active {
        top: 1px
    }

.msp-preset-btn-87 {
    background-color: #b97ebb;
    color: #fff;
}

    .msp-preset-btn-87:hover {
        background-color: #ca89cc;
        color: #fff;
    }

    .msp-preset-btn-87:active {
        top: 1px
    }

.msp-preset-btn-88 {
    background-color: #b97ebb;
    color: #fff;
    box-shadow: 0 5px #9a699c;
}

    .msp-preset-btn-88:hover {
        background-color: #ca89cc;
        box-shadow: 0 4px #9a699c;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-88:active {
        box-shadow: 0 2px #9a699c;
        top: 3px;
    }

.msp-preset-btn-89 {
    background-color: #5472D2;
    color: #fff;
}

    .msp-preset-btn-89:hover {
        background-color: #5d7fe9;
        color: #fff;
    }

    .msp-preset-btn-89:active {
        top: 1px
    }

.msp-preset-btn-90 {
    background-color: #5472D2;
    color: #fff;
}

    .msp-preset-btn-90:hover {
        background-color: #5d7fe9;
        color: #fff;
    }

    .msp-preset-btn-90:active {
        top: 1px
    }

.msp-preset-btn-91 {
    color: #5472D2;
    border: solid 1px #5472D2;
}

    .msp-preset-btn-91:hover {
        border-color: #5d7fe9;
        color: #5d7fe9
    }

    .msp-preset-btn-91:active {
        top: 1px
    }

.msp-preset-btn-92 {
    background-color: #5472D2;
    color: #fff;
}

    .msp-preset-btn-92:hover {
        background-color: #5d7fe9;
        color: #fff;
    }

    .msp-preset-btn-92:active {
        top: 1px
    }

.msp-preset-btn-93 {
    background-color: #5472D2;
    color: #fff;
    box-shadow: 0 5px #4c68be;
}

    .msp-preset-btn-93:hover {
        background-color: #5d7fe9;
        box-shadow: 0 4px #4c68be;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-93:active {
        box-shadow: 0 2px #4c68be;
        top: 3px;
    }

.msp-preset-btn-94 {
    background-color: #00c1cf;
    color: #fff;
}

    .msp-preset-btn-94:hover {
        background-color: #01D4E4;
        color: #fff;
    }

    .msp-preset-btn-94:active {
        top: 1px
    }

.msp-preset-btn-95 {
    background-color: #00c1cf;
    color: #fff;
}

    .msp-preset-btn-95:hover {
        background-color: #01D4E4;
        color: #fff;
    }

    .msp-preset-btn-95:active {
        top: 1px
    }

.msp-preset-btn-96 {
    color: #00c1cf;
    border: solid 1px #00c1cf;
}

    .msp-preset-btn-96:hover {
        border-color: #01D4E4;
        color: #01D4E4
    }

    .msp-preset-btn-96:active {
        top: 1px
    }

.msp-preset-btn-97 {
    background-color: #00c1cf;
    color: #fff;
}

    .msp-preset-btn-97:hover {
        background-color: #01D4E4;
        color: #fff;
    }

    .msp-preset-btn-97:active {
        top: 1px
    }

.msp-preset-btn-98 {
    background-color: #00c1cf;
    color: #fff;
    box-shadow: 0 5px #00afbc;
}

    .msp-preset-btn-98:hover {
        background-color: #01D4E4;
        box-shadow: 0 4px #00afbc;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-98:active {
        box-shadow: 0 2px #00afbc;
        top: 3px;
    }

.msp-preset-btn-99 {
    background-color: #4cadc9;
    color: #fff;
}

    .msp-preset-btn-99:hover {
        background-color: #63b2c9;
        color: #fff;
    }

    .msp-preset-btn-99:active {
        top: 1px
    }

.msp-preset-btn-100 {
    background-color: #4cadc9;
    color: #fff;
}

    .msp-preset-btn-100:hover {
        background-color: #63b2c9;
        color: #fff;
    }

    .msp-preset-btn-100:active {
        top: 1px
    }

.msp-preset-btn-101 {
    color: #4cadc9;
    border: solid 1px #4cadc9;
}

    .msp-preset-btn-101:hover {
        border-color: #63b2c9;
        color: #63b2c9
    }

    .msp-preset-btn-101:active {
        top: 1px
    }

.msp-preset-btn-102 {
    background-color: #4cadc9;
    color: #fff;
}

    .msp-preset-btn-102:hover {
        background-color: #63b2c9;
        color: #fff;
    }

    .msp-preset-btn-102:active {
        top: 1px
    }

.msp-preset-btn-103 {
    background-color: #4cadc9;
    color: #fff;
    box-shadow: 0 5px #1aa2c9;
}

    .msp-preset-btn-103:hover {
        background-color: #63b2c9;
        box-shadow: 0 4px #1aa2c9;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-103:active {
        box-shadow: 0 2px #1aa2c9;
        top: 3px;
    }

.msp-preset-btn-104 {
    background-color: #cec2ab;
    color: #fff;
}

    .msp-preset-btn-104:hover {
        background-color: #cebd9d;
        color: #fff;
    }

    .msp-preset-btn-104:active {
        top: 1px
    }

.msp-preset-btn-105 {
    background-color: #cec2ab;
    color: #fff;
}

    .msp-preset-btn-105:hover {
        background-color: #cebd9d;
        color: #fff;
    }

    .msp-preset-btn-105:active {
        top: 1px
    }

.msp-preset-btn-106 {
    color: #cec2ab;
    border: solid 1px #cec2ab;
}

    .msp-preset-btn-106:hover {
        border-color: #cebd9d;
        color: #cebd9d
    }

    .msp-preset-btn-106:active {
        top: 1px
    }

.msp-preset-btn-107 {
    background-color: #cec2ab;
    color: #fff;
}

    .msp-preset-btn-107:hover {
        background-color: #cebd9d;
        color: #fff;
    }

    .msp-preset-btn-107:active {
        top: 1px
    }

.msp-preset-btn-108 {
    background-color: #cec2ab;
    color: #fff;
    box-shadow: 0 5px #C2B7A2;
}

    .msp-preset-btn-108:hover {
        background-color: #cebd9d;
        box-shadow: 0 4px #C2B7A2;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-108:active {
        box-shadow: 0 2px #C2B7A2;
        top: 3px;
    }

.msp-preset-btn-109 {
    background-color: #50485b;
    color: #fff;
}

    .msp-preset-btn-109:hover {
        background-color: #6a6176;
        color: #fff;
    }

    .msp-preset-btn-109:active {
        top: 1px
    }

.msp-preset-btn-110 {
    background-color: #50485b;
    color: #fff;
}

    .msp-preset-btn-110:hover {
        background-color: #6a6176;
        color: #fff;
    }

    .msp-preset-btn-110:active {
        top: 1px
    }

.msp-preset-btn-111 {
    color: #50485b;
    border: solid 1px #50485b;
}

    .msp-preset-btn-111:hover {
        border-color: #6a6176;
        color: #6a6176
    }

    .msp-preset-btn-111:active {
        top: 1px
    }

.msp-preset-btn-112 {
    background-color: #50485b;
    color: #fff;
}

    .msp-preset-btn-112:hover {
        background-color: #6a6176;
        color: #fff;
    }

    .msp-preset-btn-112:active {
        top: 1px
    }

.msp-preset-btn-113 {
    background-color: #50485b;
    color: #fff;
    box-shadow: 0 5px #412d5b;
}

    .msp-preset-btn-113:hover {
        background-color: #6a6176;
        box-shadow: 0 4px #412d5b;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-113:active {
        box-shadow: 0 2px #412d5b;
        top: 3px;
    }

.msp-preset-btn-114 {
    background-color: #8d6dc4;
    color: #fff;
}

    .msp-preset-btn-114:hover {
        background-color: #977cc4;
        color: #fff;
    }

    .msp-preset-btn-114:active {
        top: 1px
    }

.msp-preset-btn-115 {
    background-color: #8d6dc4;
    color: #fff;
}

    .msp-preset-btn-115:hover {
        background-color: #977cc4;
        color: #fff;
    }

    .msp-preset-btn-115:active {
        top: 1px
    }

.msp-preset-btn-116 {
    color: #8d6dc4;
    border: solid 1px #8d6dc4;
}

    .msp-preset-btn-116:hover {
        border-color: #977cc4;
        color: #977cc4
    }

    .msp-preset-btn-116:active {
        top: 1px
    }

.msp-preset-btn-117 {
    background-color: #8d6dc4;
    color: #fff;
}

    .msp-preset-btn-117:hover {
        background-color: #977cc4;
        color: #fff;
    }

    .msp-preset-btn-117:active {
        top: 1px
    }

.msp-preset-btn-118 {
    background-color: #8d6dc4;
    color: #fff;
    box-shadow: 0 5px #7c51c4;
}

    .msp-preset-btn-118:hover {
        background-color: #977cc4;
        box-shadow: 0 4px #7c51c4;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-118:active {
        box-shadow: 0 2px #7c51c4;
        top: 3px;
    }

.msp-preset-btn-119 {
    background-color: #75d69c;
    color: #fff;
}

    .msp-preset-btn-119:hover {
        background-color: #7de5a7;
        color: #fff;
    }

    .msp-preset-btn-119:active {
        top: 1px
    }

.msp-preset-btn-120 {
    background-color: #75d69c;
    color: #fff;
}

    .msp-preset-btn-120:hover {
        background-color: #7de5a7;
        color: #fff;
    }

    .msp-preset-btn-120:active {
        top: 1px
    }

.msp-preset-btn-121 {
    color: #75d69c;
    border: solid 1px #75d69c;
}

    .msp-preset-btn-121:hover {
        border-color: #7de5a7;
        color: #7de5a7
    }

    .msp-preset-btn-121:active {
        top: 1px
    }

.msp-preset-btn-122 {
    background-color: #75d69c;
    color: #fff;
}

    .msp-preset-btn-122:hover {
        background-color: #7de5a7;
        color: #fff;
    }

    .msp-preset-btn-122:active {
        top: 1px
    }

.msp-preset-btn-123 {
    background-color: #75d69c;
    color: #fff;
    box-shadow: 0 5px #41d67d;
}

    .msp-preset-btn-123:hover {
        background-color: #7de5a7;
        box-shadow: 0 4px #41d67d;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-123:active {
        box-shadow: 0 2px #41d67d;
        top: 3px;
    }

.msp-preset-btn-124 {
    background-color: #222;
    color: #fff;
}

    .msp-preset-btn-124:hover {
        background-color: #333;
        color: #fff;
    }

    .msp-preset-btn-124:active {
        top: 1px
    }

.msp-preset-btn-125 {
    background-color: #222;
    color: #fff;
}

    .msp-preset-btn-125:hover {
        background-color: #333;
        color: #fff;
    }

    .msp-preset-btn-125:active {
        top: 1px
    }

.msp-preset-btn-126 {
    color: #222;
    border: solid 1px #222;
}

    .msp-preset-btn-126:hover {
        border-color: #333;
        color: #333
    }

    .msp-preset-btn-126:active {
        top: 1px
    }

.msp-preset-btn-127 {
    background-color: #222;
    color: #fff;
}

    .msp-preset-btn-127:hover {
        background-color: #333;
        color: #fff;
    }

    .msp-preset-btn-127:active {
        top: 1px
    }

.msp-preset-btn-128 {
    background-color: #222;
    color: #fff;
    box-shadow: 0 5px #000;
}

    .msp-preset-btn-128:hover {
        background-color: #333;
        box-shadow: 0 4px #000;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-128:active {
        box-shadow: 0 2px #000;
        top: 3px;
    }

.msp-preset-btn-129 {
    background-color: #dedede;
    color: #666;
}

    .msp-preset-btn-129:hover {
        background-color: #d1d1d1;
        color: #666;
    }

    .msp-preset-btn-129:active {
        top: 1px
    }

.msp-preset-btn-130 {
    background-color: #dedede;
    color: #666;
}

    .msp-preset-btn-130:hover {
        background-color: #d1d1d1;
        color: #666;
    }

    .msp-preset-btn-130:active {
        top: 1px
    }

.msp-preset-btn-131 {
    color: #dedede;
    border: solid 1px #dedede;
}

    .msp-preset-btn-131:hover {
        border-color: #d1d1d1;
        color: #d1d1d1
    }

    .msp-preset-btn-131:active {
        top: 1px
    }

.msp-preset-btn-132 {
    background-color: #dedede;
    color: #666;
}

    .msp-preset-btn-132:hover {
        background-color: #d1d1d1;
        color: #666;
    }

    .msp-preset-btn-132:active {
        top: 1px
    }

.msp-preset-btn-133 {
    background-color: #dedede;
    color: #666;
    box-shadow: 0 5px #CACACA;
}

    .msp-preset-btn-133:hover {
        background-color: #d1d1d1;
        color: #666;
        box-shadow: 0 4px #CACACA;
        top: 1px
    }

    .msp-preset-btn-133:active {
        box-shadow: 0 2px #CACACA;
        top: 3px;
    }

.msp-preset-btn-134 {
    background-color: #f7be68;
    color: #fff;
}

    .msp-preset-btn-134:hover {
        background-color: #e9b362;
        color: #fff;
    }

    .msp-preset-btn-134:active {
        top: 1px
    }

.msp-preset-btn-135 {
    background-color: #f7be68;
    color: #fff;
}

    .msp-preset-btn-135:hover {
        background-color: #e9b362;
        color: #fff;
    }

    .msp-preset-btn-135:active {
        top: 1px
    }

.msp-preset-btn-136 {
    color: #f7be68;
    border: solid 1px #f7be68;
}

    .msp-preset-btn-136:hover {
        border-color: #e9b362;
        color: #e9b362
    }

    .msp-preset-btn-136:active {
        top: 1px
    }

.msp-preset-btn-137 {
    background-color: #f7be68;
    color: #fff;
}

    .msp-preset-btn-137:hover {
        background-color: #e9b362;
        color: #fff;
    }

    .msp-preset-btn-137:active {
        top: 1px
    }

.msp-preset-btn-138 {
    background-color: #f7be68;
    color: #fff;
    box-shadow: 0 5px #E7AF59;
}

    .msp-preset-btn-138:hover {
        background-color: #e9b362;
        box-shadow: 0 4px #E7AF59;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-138:active {
        box-shadow: 0 2px #E7AF59;
        top: 3px;
    }

.msp-preset-btn-139 {
    background-color: #5aa1e3;
    color: #fff;
}

    .msp-preset-btn-139:hover {
        background-color: #5faaef;
        color: #fff;
    }

    .msp-preset-btn-139:active {
        top: 1px
    }

.msp-preset-btn-140 {
    background-color: #5aa1e3;
    color: #fff;
}

    .msp-preset-btn-140:hover {
        background-color: #5faaef;
        color: #fff;
    }

    .msp-preset-btn-140:active {
        top: 1px
    }

.msp-preset-btn-141 {
    color: #5aa1e3;
    border: solid 1px #5aa1e3;
}

    .msp-preset-btn-141:hover {
        border-color: #5faaef;
        color: #5faaef
    }

    .msp-preset-btn-141:active {
        top: 1px
    }

.msp-preset-btn-142 {
    background-color: #5aa1e3;
    color: #fff;
}

    .msp-preset-btn-142:hover {
        background-color: #5faaef;
        color: #fff;
    }

    .msp-preset-btn-142:active {
        top: 1px
    }

.msp-preset-btn-143 {
    background-color: #5aa1e3;
    color: #fff;
    box-shadow: 0 5px #4c87bf;
}

    .msp-preset-btn-143:hover {
        background-color: #5faaef;
        box-shadow: 0 4px #4c87bf;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-143:active {
        box-shadow: 0 2px #4c87bf;
        top: 3px;
    }

.msp-preset-btn-144 {
    background-color: #6dab3c;
    color: #fff;
}

    .msp-preset-btn-144:hover {
        background-color: #76b941;
        color: #fff;
    }

    .msp-preset-btn-144:active {
        top: 1px
    }

.msp-preset-btn-145 {
    background-color: #6dab3c;
    color: #fff;
}

    .msp-preset-btn-145:hover {
        background-color: #76b941;
        color: #fff;
    }

    .msp-preset-btn-145:active {
        top: 1px
    }

.msp-preset-btn-146 {
    color: #6dab3c;
    border: solid 1px #6dab3c;
}

    .msp-preset-btn-146:hover {
        border-color: #76b941;
        color: #76b941
    }

    .msp-preset-btn-146:active {
        top: 1px
    }

.msp-preset-btn-147 {
    background-color: #6dab3c;
    color: #fff;
}

    .msp-preset-btn-147:hover {
        background-color: #76b941;
        color: #fff;
    }

    .msp-preset-btn-147:active {
        top: 1px
    }

.msp-preset-btn-148 {
    background-color: #6dab3c;
    color: #fff;
    box-shadow: 0 5px #5e9334;
}

    .msp-preset-btn-148:hover {
        background-color: #76b941;
        box-shadow: 0 4px #5e9334;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-148:active {
        box-shadow: 0 2px #5e9334;
        top: 3px;
    }

.msp-preset-btn-149 {
    background-color: #f4524d;
    color: #fff;
}

    .msp-preset-btn-149:hover {
        background-color: #e04b47;
        color: #fff;
    }

    .msp-preset-btn-149:active {
        top: 1px
    }

.msp-preset-btn-150 {
    background-color: #f4524d;
    color: #fff;
}

    .msp-preset-btn-150:hover {
        background-color: #e04b47;
        color: #fff;
    }

    .msp-preset-btn-150:active {
        top: 1px
    }

.msp-preset-btn-151 {
    color: #f4524d;
    border: solid 1px #f4524d;
}

    .msp-preset-btn-151:hover {
        border-color: #e04b47;
        color: #e04b47
    }

    .msp-preset-btn-151:active {
        top: 1px
    }

.msp-preset-btn-152 {
    background-color: #f4524d;
    color: #fff;
}

    .msp-preset-btn-152:hover {
        background-color: #e04b47;
        color: #fff;
    }

    .msp-preset-btn-152:active {
        top: 1px
    }

.msp-preset-btn-153 {
    background-color: #f4524d;
    color: #fff;
    box-shadow: 0 5px #cb4440;
}

    .msp-preset-btn-153:hover {
        background-color: #e04b47;
        box-shadow: 0 4px #cb4440;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-153:active {
        box-shadow: 0 2px #cb4440;
        top: 3px;
    }

.msp-preset-btn-154 {
    background-color: #f79468;
    color: #fff;
}

    .msp-preset-btn-154:hover {
        background-color: #e78a61;
        color: #fff;
    }

    .msp-preset-btn-154:active {
        top: 1px
    }

.msp-preset-btn-155 {
    background-color: #f79468;
    color: #fff;
}

    .msp-preset-btn-155:hover {
        background-color: #e78a61;
        color: #fff;
    }

    .msp-preset-btn-155:active {
        top: 1px
    }

.msp-preset-btn-156 {
    color: #f79468;
    border: solid 1px #f79468;
}

    .msp-preset-btn-156:hover {
        border-color: #e78a61;
        color: #e78a61
    }

    .msp-preset-btn-156:active {
        top: 1px
    }

.msp-preset-btn-157 {
    background-color: #f79468;
    color: #fff;
}

    .msp-preset-btn-157:hover {
        background-color: #e78a61;
        color: #fff;
    }

    .msp-preset-btn-157:active {
        top: 1px
    }

.msp-preset-btn-158 {
    background-color: #f79468;
    color: #fff;
    box-shadow: 0 5px #da835c;
}

    .msp-preset-btn-158:hover {
        background-color: #e78a61;
        box-shadow: 0 4px #da835c;
        top: 1px;
        color: #fff;
    }

    .msp-preset-btn-158:active {
        box-shadow: 0 2px #da835c;
        top: 3px;
    }

.msp-preset-1 {
    font-family: "Lato";
    font-weight: 700;
    font-size: 48px;
    line-height: normal;
    color: #ffffff;
}

.msp-preset-3 {
    font-family: "Lato";
    font-weight: 300;
    font-size: 18px;
    line-height: normal;
    color: #f2f2f2;
}

.msp-preset-5 {
    font-family: "Kaushan Script";
    font-weight: normal;
    font-size: 30px;
    text-align: center;
    line-height: normal;
    white-space: nowrap;
    color: #d4d4d4;
}

.msp-preset-6 {
    font-family: "Raleway";
    font-weight: 600;
    font-size: 48px;
    text-align: center;
    line-height: normal;
    white-space: nowrap;
    color: #d4d4d4;
}

.msp-preset-7 {
    font-family: "Raleway";
    font-weight: 600;
    font-size: 48px;
    text-align: center;
    line-height: normal;
    white-space: nowrap;
    color: #77cba9;
}

.msp-preset-8 {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 36px;
    line-height: normal;
    color: #ffffff;
}

.msp-preset-12 {
    font-family: "Raleway";
    font-weight: 600;
    font-size: 72px;
    line-height: normal;
    white-space: nowrap;
    color: #ffffff;
    text-transform: uppercase;
}

.msp-preset-13 {
    font-family: "Raleway";
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    line-height: normal;
    color: #f8f8f8;
}

.msp-preset-14 {
    font-family: "Yanone Kaffeesatz";
    font-weight: normal;
    font-size: 60px;
    text-align: center;
    letter-spacing: 2px;
    line-height: normal;
    white-space: nowrap;
    color: #ffffff;
}

.msp-preset-15 {
    font-family: "Oswald";
    font-weight: normal;
    font-size: 55px;
    text-align: center;
    line-height: normal;
    white-space: nowrap;
    color: #e38181;
}

.msp-preset-16 {
    font-family: "Montserrat";
    font-weight: normal;
    font-size: 54px;
    line-height: normal;
    white-space: nowrap;
    color: #dddddd;
}

.msp-preset-17 {
    font-family: "Playfair Display";
    font-weight: normal;
    font-size: 16px;
    text-align: center;
    line-height: normal;
    color: #c2b273;
    background-color: transparent;
}

.msp-preset-18 {
    font-family: "Quicksand";
    font-weight: normal;
    font-size: 18px;
    text-align: center;
    line-height: normal;
    color: #fdfdfd;
    background-color: transparent;
}

.msp-preset-19 {
    font-family: "Montserrat";
    font-weight: normal;
    font-size: 12px;
    line-height: normal;
    color: #dddddc;
    text-transform: uppercase;
}

.msp-preset-20 {
    font-family: "Lato";
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: normal;
    color: #a9a8a8;
}

.msp-preset-21 {
    background-color: #a9a8a8;
    font-weight: normal;
    line-height: normal;
}

.msp-preset-22 {
    font-family: "Oswald";
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    color: #ffffff;
}

.msp-preset-23 {
    font-family: "Lato";
    font-weight: normal;
    font-size: 16px;
    line-height: normal;
    color: #c0c0c0;
}

.msp-preset-25 {
    padding-top: 10px;
    padding-right: 24px;
    padding-bottom: 10px;
    padding-left: 24px;
    font-family: "Lato";
    font-weight: normal;
    font-size: 10px;
    text-align: center;
    letter-spacing: 2px;
    line-height: normal;
    text-transform: uppercase;
}

.msp-preset-26 {
    font-family: "Lato";
    font-weight: normal;
    font-size: 16px;
    line-height: normal;
    color: #ffffff;
}

.msp-preset-27 {
    background-color: #ffffff;
    font-weight: normal;
    line-height: normal;
}

.msp-preset-28 {
    font-family: "Lato";
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: normal;
    color: #ffffff;
}

.msp-preset-29 {
    font-family: "Raleway";
    font-weight: 800;
    font-size: 120px;
    letter-spacing: 1px;
    line-height: normal;
    color: #ffffff;
}

.msp-preset-30 {
    font-family: "Source Code Pro";
    font-weight: normal;
    font-size: 22px;
    line-height: normal;
    color: #ffffff;
}

.msp-preset-31 {
    font-family: "Source Code Pro";
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: normal;
    color: #ba895d;
}

.msp-preset-32 {
    font-family: "Source Code Pro";
    font-weight: normal;
    font-size: 14px;
    line-height: normal;
    color: #6a6a6a;
}

.msp-preset-33 {
    font-family: "Montserrat";
    font-weight: normal;
    font-size: 36px;
    line-height: normal;
    color: #ffffff;
}

.msp-preset-34 {
    background-color: #ffffff;
    font-weight: normal;
    line-height: normal;
}

.msp-preset-35 {
    background-color: #f4cb68;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    font-family: "Lato";
    font-weight: normal;
    font-size: 11px;
    line-height: 16px;
    color: #333333;
}

.msp-cn-135-3 {
    font-family: "Kaushan Script";
    font-weight: normal;
    font-size: 18px;
    text-align: center;
    line-height: normal;
    white-space: nowrap;
    color: #ececec;
    width:100px;
}

.msp-cn-135-6 {
    font-family: 'Poppins', sans-serif;
    font-weight: normal;
    font-size: 30px;
    text-align: center;
    line-height: normal;
    white-space: nowrap;
    color: #ececec;
}

.msp-cn-135-8 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 80px;
    text-align: center;
    line-height: normal;
    white-space: nowrap;
    color: #fafafa;
    text-transform: uppercase;
}

.msp-cn-135-9 {
    font-family: "Kaushan Script";
    font-weight: normal;
    font-size: 18px;
    text-align: center;
    line-height: normal;
    white-space: nowrap;
    color: #ececec;
    padding-left:15px;
}


.eauShortLogostyle{
    width:50px; 
    height:50px;
}



.animated-mouse .ms-wheel-icon {
    -webkit-animation: scroll-wheel 1.3s ease-out infinite forwards;
    -moz-animation: scroll-wheel 1.3s ease-out infinite forwards;
    animation: scroll-wheel 1.3s ease-out infinite forwards;
}

@-webkit-keyframes scroll-wheel {
    0% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }

    50% {
        -webkit-transform: translateY(10px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        opacity: 0;
    }
}

@-moz-keyframes scroll-wheel {
    0% {
        -moz-transform: translateY(0);
        opacity: 1;
    }

    50% {
        -moz-transform: translateY(10px);
        opacity: 0;
    }

    100% {
        -moz-transform: translateY(0);
        opacity: 0;
    }
}

@keyframes scroll-wheel {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }
}