/*----------------------------------------------------------------------------------------------------
  Project Name : Aman Candy
  Website      : https://amancandy.com/

  Author       : Dileep Dilraj
  Author Site  : https://dileepdilraj.com

  Description  :
  Aman Candy is the personal website of Aman Jain, designed to represent his professional identity,
  showcase his work, and provide a clean, modern digital presence. The website focuses on performance,
  aesthetics, and user experience, with carefully crafted interactions and animations.

  Designer & Developer : Dileep Dilraj
  Version              : 1.0
  File                 : theme-light.css
  Last Updated         : January 2026

  © 2026 Dileep Dilraj. All Rights Reserved.
-----------------------------------------------------------------------------------------------------*/


/* Table of Content
====================
* Global variables
* Style switch button
* General
* Logo
* Page header
* If class "tt-section-bg-on" is enabled on parent element
* tt-Ggrid
* Horizontal accordion
* Logo wall
* Content carousel 
* Portfolio sticky
* Portfolio slider
*/


/* ------------------------------------------------------------- *
 * Global variables
 * Please note that the dark and light colors are reversed. Dark colors are light and light colors are dark!
/* ------------------------------------------------------------- */

body.tt-lightmode-on {
    /* General */
    --tt-dark-color: #e5e3dc;
    /* Template light color. #e5e3dc */
    --tt-light-color: #212121;
    /* Template dark color. #212121 */
    --tt-bg-color: #e5e3dc;
    /* Template background color. #e5e3dc */
    --tt-text-color: #212121;
    /* Template text color. #212121 */
    --tt-text-muted-color: #666;
    /* Template text muted color. #666 */
    --tt-border-color: #666;
    /* Template borders color. #666 */
    --tt-linear-text-bg-color: rgb(0 0 0 / 20%);
    /* Template text fill color. For linear text reveal effect (do not change it!). rgb(0 0 0 / 20%) */
    /* Cursor ball */
    --tt-ball-border-color: #999;
    /* Ball border color. #999 */
}


/* ------------------------------------------------------------- *
 * Style switch button
/* ------------------------------------------------------------- */

.tt-style-switch {
    position: relative;
    margin-left: 40px;
}

@media (max-width: 1024px) {
    .tt-style-switch {
        margin-left: 0;
        margin-right: 20px;
    }
}

.tt-style-switch-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgb(179 179 179 / 35%);
    line-height: 1;
    font-size: 15px;
    cursor: pointer;
    border-radius: 100%;
    transition: background-color .3s, color .3s;
}

.tt-style-switch-inner:hover {}

.tt-stsw-dark {
    display: none;
}

body.tt-lightmode-on .tt-stsw-dark {
    display: block;
}

body.tt-lightmode-on .tt-stsw-light {
    display: none;
}


/* If header layout-2 is enabled. */

#tt-header.tt-header-alter .tt-style-switch {}

@media (max-width: 1024px) {
    #tt-header.tt-header-alter .tt-style-switch {
        margin-left: 0;
        margin-right: 25px;
    }
}


/* Disable on "portfolio-slider.html" page (since it does not affect the elements on this page, it has been removed to avoid confusion). It is still visible in the mobile menu. */

body.tt-portfolio-slider-on:not(.tt-m-menu-open) .tt-style-switch {
    display: none;
}


/* ------------------------------------------------------------- *
 * General
/* ------------------------------------------------------------- */


/* Selection */

body.tt-lightmode-on ::selection {
    color: var(--tt-dark-color);
    -webkit-text-fill-color: var(--tt-dark-color);
    text-shadow: none;
    background: var(--tt-main-color);
}

body.tt-lightmode-on ::-moz-selection {
    color: var(--tt-dark-color);
    -webkit-text-fill-color: var(--tt-dark-color);
    text-shadow: none;
    background: var(--tt-main-color);
    /* Firefox */
}

body.tt-lightmode-on ::-webkit-selection {
    color: var(--tt-dark-color);
    -webkit-text-fill-color: var(--tt-dark-color);
    text-shadow: none;
    background: var(--tt-main-color);
    /* Safari */
}


/* ------------------------------------------------------------- *
 * Logo
/* ------------------------------------------------------------- */

body.tt-lightmode-on .tt-logo-light {
    display: none;
}

body.tt-lightmode-on .tt-logo-dark {
    display: block;
}


/* ------------------------------------------------------------- *
 * Page header
/* ------------------------------------------------------------- */


/* If the page header background image is light (effect only if the image exist)
================================================ */

body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) {
    color: var(--tt-light-color);
}


/* Make logo dark */

body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-light {
    display: none;
}

body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-dark {
    display: block;
}


/* Make menu items dark (for desctop only) */

@media (min-width: 1025px) {
    body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list>li>a,
    body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list>li>.tt-submenu-trigger>a {
        color: var(--tt-light-color);
    }
    body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-submenu-master>.tt-submenu-trigger>a::after {
        background-color: var(--tt-light-color);
    }
}


/* Make mobile menu trigger dark */

body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn-text {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::before,
body.tt-lightmode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::after {
    background-color: var(--tt-light-color);
}


/* Make header buttons dark */

@media (min-width: 1025px) {
    body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-secondary {
        background-color: var(--tt-light-color);
    }
    body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-secondary>*,
    body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-secondary>*::after {
        color: var(--tt-dark-color);
    }
    body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-outline {
        box-shadow: inset 0 0 0 2px var(--tt-light-color);
    }
    body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-outline>*,
    body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-outline>*::after {
        color: var(--tt-light-color);
    }
    body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-link>*,
    body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-link>*::after {
        color: var(--tt-light-color);
    }
    body.tt-lightmode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-line {
        background-color: var(--tt-light-color);
    }
}


/* Make page header elements dark */

body.tt-lightmode-on.ph-bg-is-light-on #page-header,
body.tt-lightmode-on.ph-bg-is-light-on #page-header a {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-scroll-down text {
    fill: var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-scroll-down .tt-scrd-icon {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .ph-share-trigger,
body.tt-lightmode-on.ph-bg-is-light-on #page-header .ph-share-buttons>ul>li a {
    color: var(--tt-light-color);
}


/* Make page header buttons dark */

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-secondary {
    background-color: var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-secondary>*,
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-secondary>*::after {
    color: var(--tt-dark-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-outline {
    box-shadow: inset 0 0 0 2px var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-outline>*,
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-outline>*::after {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-big-round-ptn-inner {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-big-round-ptn-inner:hover,
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-big-round-ptn-inner:focus {
    color: #FFF;
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-link>*,
body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-link>*::after {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.ph-bg-is-light-on #page-header .tt-btn-line {
    background-color: var(--tt-light-color);
}


/* ------------------------------------------------------------- *
 * If class "tt-section-bg-on" is enabled on parent element
/* ------------------------------------------------------------- */

body.tt-lightmode-on .tt-section-bg-on {
    color: var(--tt-dark-color);
}

body.tt-lightmode-on .tt-section-bg-on .tt-text-reveal>span {
    color: var(--tt-dark-color);
    -webkit-text-fill-color: rgb(255 255 255 / 20%);
}


/* Buttons 
=========== */

body.tt-lightmode-on .tt-section-bg-on .tt-btn-secondary {
    background-color: var(--tt-dark-color);
}

body.tt-lightmode-on .tt-section-bg-on .tt-btn-secondary>*,
body.tt-lightmode-on .tt-section-bg-on .tt-btn-secondary>*::after {
    color: var(--tt-light-color);
}

body.tt-lightmode-on .tt-section-bg-on .tt-btn-outline {
    box-shadow: inset 0 0 0 2px var(--tt-dark-color);
}

body.tt-lightmode-on .tt-section-bg-on .tt-btn-outline>*,
body.tt-lightmode-on .tt-section-bg-on .tt-btn-outline>*::after {
    color: var(--tt-dark-color);
}


/* ------------------------------------------------------------- *
 * tt-Ggrid
/* ------------------------------------------------------------- */


/* tt-Ggrid categories nav
=========================== */

body.tt-lightmode-on .ttgr-cat-nav {
    background-color: rgb(229 227 220 / 90%);
}


/* ------------------------------------------------------------- *
 * Horizontal accordion
/* ------------------------------------------------------------- */


/* Horizontal accordion item alternative hover (no effect on small screens!) */

@media (min-width: 1025px) {
    body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child,
    body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item.active {
        background-color: var(--tt-light-color);
        color: var(--tt-dark-color);
        border-color: transparent;
    }
    body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child.inactive {
        background-color: var(--tt-bg-color);
        color: var(--tt-text-color);
        border-color: var(--tt-border-color);
    }
}


/* Horizontal accordion item for small screens only (effects only with alternative hover!) */

@media (max-width: 1024px) {
    body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item {
        background-color: var(--tt-light-color);
        color: var(--tt-dark-color);
        border-color: transparent;
    }
    body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline>*,
    body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline>*:after {
        color: var(--tt-dark-color);
    }
    body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline {
        box-shadow: inset 0 0 0 2px var(--tt-dark-color);
    }
    body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item-count::before {
        opacity: .6;
    }
}


/* ------------------------------------------------------------- *
 * Logo wall
/* ------------------------------------------------------------- */

body.tt-lightmode-on .tt-logo-wall-item,
body.tt-lightmode-on a.tt-logo-wall-item:hover {
    background-color: var(--tt-light-color);
}

body.tt-lightmode-on .tt-logo-wall.tt-lw-bordered a.tt-logo-wall-item:not(:hover) .tt-lv-img-dark {
    display: block;
}

body.tt-lightmode-on .tt-logo-wall.tt-lw-bordered a.tt-logo-wall-item:not(:hover) .tt-lv-img-light {
    display: none;
}


/* ------------------------------------------------------------- *
 * Content carousel 
/* ------------------------------------------------------------- */

body.tt-lightmode-on .tt-content-carousel.cc-pagination-outside .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: var(--tt-light-color);
}

body.tt-lightmode-on .tt-content-carousel.cc-pagination-outside .tt-cc-pagination-fraction {
    color: var(--tt-light-color);
}

body.tt-lightmode-on .tt-content-carousel.cc-pagination-outside .tt-cc-pagination-progressbar {
    background-color: rgb(139 138 138 / 30%);
}

body.tt-lightmode-on .tt-content-carousel.cc-pagination-outside .tt-cc-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: var(--tt-light-color);
}


/* ------------------------------------------------------------- *
 * Portfolio sticky
/* ------------------------------------------------------------- */

body.tt-lightmode-on .tt-stp-item.stpi-bg-is-light,
body.tt-lightmode-on .tt-stp-item.stpi-bg-is-light .tt-stp-item-caption {
    color: var(--tt-light-color);
}


/* ------------------------------------------------------------- *
 * Portfolio slider 
/* ------------------------------------------------------------- */


/* If portfolio slider item background is light
================================================ */

body.tt-lightmode-on.tt-posl-light-bg-on:not(.tt-m-menu-active) #tt-header:not(.tt-filled) {
    color: var(--tt-light-color);
}


/* Make logo dark */

body.tt-lightmode-on.tt-posl-light-bg-on:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-light {
    display: none;
}

body.tt-lightmode-on.tt-posl-light-bg-on:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-dark {
    display: block;
}


/* Make menu items dark (for desctop only) */

@media (min-width: 1025px) {
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-main-menu-list>li>a,
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-main-menu-list>li>.tt-submenu-trigger>a {
        color: var(--tt-light-color);
    }
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-submenu-master>.tt-submenu-trigger>a::after {
        background-color: var(--tt-light-color);
    }
}


/* Make mobile menu trigger dark */

body.tt-lightmode-on.tt-posl-light-bg-on:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn-text {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.tt-posl-light-bg-on:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::before,
body.tt-lightmode-on.tt-posl-light-bg-on:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::after {
    background-color: var(--tt-light-color);
}


/* Make header buttons dark */

@media (min-width: 1025px) {
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-btn-secondary {
        background-color: var(--tt-light-color);
    }
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-btn-secondary>*,
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-btn-secondary>*::after {
        color: var(--tt-dark-color);
    }
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-btn-outline {
        box-shadow: inset 0 0 0 2px var(--tt-light-color);
    }
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-btn-outline>*,
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-btn-outline>*::after {
        color: var(--tt-light-color);
    }
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-btn-link>*,
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-btn-link>*::after {
        color: var(--tt-light-color);
    }
    body.tt-lightmode-on.tt-posl-light-bg-on #tt-header:not(.tt-filled) .tt-btn-line {
        background-color: var(--tt-light-color);
    }
}


/* Make portfolio slider elements dark */

body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider a,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-posl-item-title,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-posl-item-title a,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-posl-item-category,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-posl-item-category a,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-social-buttons>ul>li a,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-posl-nav-arrow,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-posl-pagination {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.tt-posl-light-bg-on .tt-posl-pagination-fraction .swiper-pagination-total::before,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-posl-pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active),
body.tt-lightmode-on.tt-posl-light-bg-on .tt-posl-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: var(--tt-light-color);
}

body.tt-lightmode-on.tt-posl-light-bg-on .tt-posl-nav-arrow svg {
    fill: var(--tt-light-color);
}


/* Make portfolio slider buttons dark */

body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-btn-secondary {
    background-color: var(--tt-light-color);
}

body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-btn-secondary>*,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-btn-secondary>*::after {
    color: var(--tt-dark-color);
}

body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-btn-outline {
    box-shadow: inset 0 0 0 2px var(--tt-light-color);
}

body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-btn-outline>*,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-btn-outline>*::after {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-big-round-ptn-inner {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-big-round-ptn-inner:hover,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-big-round-ptn-inner:focus {
    color: #FFF;
}

body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-btn-link>*,
body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-btn-link>*::after {
    color: var(--tt-light-color);
}

body.tt-lightmode-on.tt-posl-light-bg-on .tt-portfolio-slider .tt-btn-line {
    background-color: var(--tt-light-color);
}


/* Make portfolio slider cursor drag dark */

body.tt-lightmode-on.tt-posl-light-bg-on #ball.ball-drag-mouse-down {
    border-color: var(--tt-light-color);
}

body.tt-lightmode-on.tt-posl-light-bg-on #ball .ball-drag-mouse-down-inner {
    color: var(--tt-light-color);
}