/*
Theme Name: softit child
Tags:  custom-menu, editor-style, featured-images
Template: softit
Version: 1.0.0
*/

/*---------------------------------
      write your css from here
------------------------------------*/

/* ── Colour tokens ───────────────────────────────────────────────────────────
   To retheme the site, only edit the values in :root below.
   --color-primary   : the main brand/accent colour (buttons, borders, icons)
   --color-secondary : panel and dropdown backgrounds
   --color-text      : default body/heading text
   --color-text-muted: secondary descriptive text
   --color-border    : subtle card/divider borders
   --color-shadow    : box-shadow base colour
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --color-primary:      #ff3c00;
    --color-on-primary:   #ffffff;   /* text / icons placed ON a primary bg  */
    --color-secondary:    #ffffff;   /* dropdown & panel backgrounds          */
    --color-text:         #232323;
    --color-text-muted:   #6d6d6d;
    --color-border:       #f0f0f0;
    --color-shadow:       rgba(0, 0, 0, 0.12);

    /* Derived – update automatically when --color-primary changes */
    --color-primary-tint: color-mix(in srgb, var(--color-primary) 8%, white);
    --color-primary-glow: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* ── Dropdown sub-menu ───────────────────────────────────────────────────── */

/* ── Header logo size ────────────────────────────────────────────────────── */
.logo img {
    width: 300px;
    height: auto;
    max-width: none; /* override Bootstrap's max-width: 100% cap */
}

/* Reduce gap between main menu items and their dropdowns */
.softit_menu ul li:hover > .sub-menu {
    margin-top: -20px;
}

.softit_menu ul .sub-menu {
    background: var(--color-secondary);
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 8px 30px var(--color-shadow);
}
.softit_menu ul .sub-menu li a {
    color: var(--color-text);
}
.softit_menu ul .sub-menu li:hover > a,
.softit_menu ul .sub-menu .sub-menu li:hover > a,
.softit_menu ul .sub-menu .sub-menu .sub-menu li:hover > a,
.softit_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover > a {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* ── Slides: hide specified buttons and play buttons ─────────────────────── */

/* Slide 1: hide "View Properties" + play button */
.gallery-top .swiper-slide:nth-child(1) .witr_btn:not(.active),
.gallery-top .swiper-slide:nth-child(1) .slider_vd_icon,
/* Slide 2: hide "Explore Accommodation" + play button */
.gallery-top .swiper-slide:nth-child(2) .witr_btn:not(.active),
.gallery-top .swiper-slide:nth-child(2) .slider_vd_icon,
/* Slide 3: hide "Partner With Us" */
.gallery-top .swiper-slide:nth-child(3) .witr_btn:not(.active) {
    display: none;
}

/* ── Megamenu: What We Do ────────────────────────────────────────────────── */

.ucg-megamenu {
    position: absolute;
    left: auto;
    right: 0;
    top: 100%;
    width: 690px;
    background: var(--color-secondary);
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 8px 30px var(--color-shadow);
    padding: 28px 20px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, margin-top .3s ease;
    margin-top: 0;
}

.ucg-megamenu-parent:hover .ucg-megamenu {
    opacity: 1;
    visibility: visible;
    margin-top: -20px;
}

.ucg-megamenu-inner {
    display: flex;
    gap: 16px;
}

.ucg-mega-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color .25s, box-shadow .25s;
}

.ucg-mega-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 18px var(--color-primary-glow);
    text-decoration: none;
    color: inherit;
}

.ucg-mega-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--color-primary-tint);
    margin-bottom: 14px;
    transition: background .25s;
}

.ucg-mega-card:hover .ucg-mega-icon {
    background: var(--color-primary);
}

.ucg-mega-icon i {
    font-size: 30px;
    color: var(--color-primary);
    transition: color .25s;
}

.ucg-mega-card:hover .ucg-mega-icon i {
    color: var(--color-on-primary);
}

.ucg-mega-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 10px;
    line-height: 1.3;
}

.ucg-mega-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}