/* ===========================================
   TARA ASTROLOGER THEME
   File : css/theme.css
   =========================================== */

:root{

    /* Primary Colors */
    --primary:#FFD700;
    --primary-dark:#b8860b;

    /* Backgrounds */
    --hero-bg:#071421;
    --about-bg:linear-gradient(
        135deg,
        #fffdf7 0%,
        #fff8e8 50%,
        #fffdf7 100%
    );

    --services-bg::#fff8ef;
    --testimonial-bg:#ffffff;
    --contact-bg:#071421;
    --footer-bg:#071421;

    /* Text */
    --heading:#222;
    --text:#555;
    --white:#ffffff;

    /* Card */
    --card:#ffffff;
    --border:#e8e8e8;

    /* Shadow */
    --shadow:0 12px 30px rgba(0,0,0,.08);

}

/* ===========================
   BODY
=========================== */

body{

    background:var(--about-bg);
    color:var(--text);

}

/* ===========================
   HEADER
=========================== */

header{

    background:var(--hero-bg);

}

.logo{

    color:var(--primary);

}

nav ul li a{

    color:#fff;

}

nav ul li a:hover{

    color:var(--primary);

}

.phone{

    color:var(--primary);

}

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

.hero{

    background:var(--hero-bg);
    color:#fff;

}

.hero h1,
.hero h2{

    color:var(--primary);

}

.hero p{

    color:#ddd;

}


/* ===========================
   SERVICES
=========================== */

#services{

    background:var(--services-bg);

}

#services h2{

    color:var(--primary-dark);

}

.service-card{

    background:#fff;
    box-shadow:var(--shadow);

}

.service-card h3{

    color:var(--primary-dark);

}

.service-card p{

    color:var(--text);

}

/* ===========================
   TESTIMONIALS
=========================== */

#testimonials{

    background:var(--testimonial-bg);

}

.testimonial{

    background:#fafafa;
    border-left:4px solid var(--primary);
    box-shadow:var(--shadow);

}

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

#contact{

    background:var(--contact-bg);

}

.contact-form,
.office-info{

    background:#fff;
    box-shadow:var(--shadow);

}

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

    border:1px solid #ddd;
    background:#fff;
    color:#333;

}

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

    border-color:var(--primary);

}

.office-info li{

    color:var(--text);

}

.office-info a{

    color:var(--primary-dark);

}

.office-info a:hover{

    color:#000;

}

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

.btn,
button{

    background:var(--primary);
    color:#111;

}

.btn:hover,
button:hover{

    background:#111;
    color:var(--primary);

}

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

footer{

    background:var(--footer-bg);
    color:#ddd;

}

footer h3{

    color:var(--primary);

}

footer a{

    color:var(--primary);

}

footer a:hover{

    color:#fff;

}

/* ===========================
   COMMON
=========================== */

h2{

    color:var(--primary-dark);

}

.section-subtitle{

    color:#ddd;

}

.card{

    background:#fff;
    box-shadow:var(--shadow);

}

input,
textarea,
select{

    transition:.3s;

}

img{

    max-width:100%;
    display:block;

}