/* ==========================================================================
   Theme Custom Colors - Override main.css colors
   ========================================================================== 
   
   This file allows you to customize the website colors to match your logo.
   Update the CSS variables below with colors extracted from your logo.
   
   To extract colors from your logo:
   1. Open your logo in an image editor (Photoshop, GIMP, or online tool)
   2. Use the color picker to identify the main colors
   3. Convert them to hex format (e.g., #FF5733)
   4. Replace the values below
   
   ========================================================================== */

:root {
    /* Primary Color - Main brand color from logo */
    --primary-color: #0763d0;
    /* Primary Hover - Lighter shade for hover states */
    --primary-hover: #2c7ad7;
    /* Primary Dark - Darker shade for borders, shadows */
    --primary-dark: #054fa6;
    /* Secondary Color - Accent color from logo */
    --secondary-color: #fffffe;
    /* Text Colors */
    --text-primary: #101010;
    --text-secondary: #555;
    --text-muted: #888;
    /* Background Colors */
    --bg-light: #F7F7F7;
    --bg-white: #ffffff;
}

/* ==========================================================================
   Override main.css with custom colors
   ========================================================================== */

/* Links */
a {
    color: var(--primary-color);
}

a:hover,
a:focus {
    color: var(--primary-hover);
}

/* Buttons */
.bttn {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.bttn:hover,
.bttn:active,
.bttn:focus {
    background: var(--primary-hover);
    border: 2px solid var(--primary-hover);
}

.action-btn .bttn:last-child:hover {
    color: var(--primary-color);
}

/* Navigation */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: var(--primary-color);
}

.navbar-default.stuck .navbar-nav > li > a:hover,
.navbar-default.stuck .navbar-nav > li > a:focus {
    color: var(--primary-color);
}

.navbar-default.stuck .navbar-nav .bttn {
    background: var(--primary-color);
}

.navbar-default.stuck .navbar-nav .bttn:hover,
.navbar-default.stuck .navbar-nav .bttn:focus {
    background: var(--primary-hover) !important;
}

/* Counter Icons */
.counter i {
    color: var(--primary-color);
}

/* Schedule/Timeline */
.timeline {
    border-left: 4px solid var(--primary-color);
}

.timeline .event:after {
    box-shadow: 0 0 0 4px var(--primary-color);
}

.nav-tabs > li.active,
.nav-tabs > li:hover,
.nav-tabs > li:focus {
    background: var(--primary-color);
}

/* Speaker Section */
.event-speaker .social li a {
    border: 1px solid var(--primary-color);
}

.event-speaker .social li a:hover {
    background: var(--primary-hover);
    border: 1px solid var(--primary-hover);
}

/* Pricing Section */
.plan .header {
    background: var(--primary-hover);
}

/* FAQ Section */
.cd-faq-trigger::before,
.cd-faq-trigger::after {
    background: var(--primary-color);
}

/* Hotels Section */
.hotels figure figcaption {
    border: 1px solid var(--primary-hover);
}

/* Forms */
.btn-default {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

#contact-form > div[class*="for-user-"] > i,
#mc-form i.fa-envelope-o {
    color: var(--primary-color);
}

/* Footer */
.footer-links a:hover {
    color: var(--primary-hover);
}

.scroll-top a {
    color: var(--primary-color);
}

.scroll-top a:hover {
    background: var(--primary-hover);
}

.site-footer .social li a {
    color: var(--primary-hover);
    border: 1px solid var(--primary-hover);
}

.site-footer .social li a:hover {
    background: var(--primary-hover);
    border: 1px solid var(--primary-hover);
}

/* Modals */
#privacy .modal-content,
#terms .modal-content {
    background-color: var(--primary-color);
}

/* OWL Carousel */
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--primary-color);
}