/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #151515; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #ffc451; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #312f2f; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: rgba(255, 255, 255, 0.905);  /* The default color of the main navmenu links */
    --nav-hover-color: #ffc451; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #ffc451; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

.text-color{color:#6d6d6d;}
section{padding-top:80px;}
@media (max-width: 1460px){
section{padding-top:70px;}
}
@media (max-width: 1199px){
section{padding-top:60px;}
}
@media (max-width: 991px){
section{padding-top:50px;}
}
@media (max-width: 767px){
section{padding-top:40px;}
}
@media (max-width: 575px){
section{padding-top:30px;}
}
a{color:var(--theme-color);-webkit-transition:0.5s ease;transition:0.5s ease;text-decoration:none;}
a:hover{text-decoration:none;-webkit-transition:0.5s ease;transition:0.5s ease;}
a:focus{outline:none;}
button:focus{outline:none;}
:focus{outline:none;}
h2{font-size:calc(22px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));font-weight:600;line-height:1;text-transform:capitalize;margin:0;}
h3{font-size:calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));font-weight:500;line-height:1.2;margin:0;}
h5{font-size:calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));line-height:1.2;margin:0;font-weight:400;}
span{display:inline-block;}
.theme-color{color:var(--theme-color)!important;}
.theme-bg-color{background-color:var(--theme-color);}
.title{margin-bottom:calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320)));}
.title h5{margin-bottom:10px;margin-top:-2px;color:#7e7e7e;}
.title-2{color:#212529;}
.title-2 h2{margin-top:-2px;}
.title-2 h5{margin-bottom:0;margin-top:10px;color:#7e7e7e;}
.ratio_40 .bg-size:before{padding-top:40%;content:"";display:block;}
.slick-initialized .slick-arrow{z-index:1;-webkit-transition:0.5s;transition:0.5s;}
.slick-initialized .slick-arrow:before{-webkit-transition:0.5s;transition:0.5s;}
.slick-initialized .slick-arrow:hover{-webkit-transition:0.5s;transition:0.5s;}
.slick-initialized .slick-arrow:hover:before{-webkit-transition:0.5s;transition:0.5s;}
.slick-slider .slick-list{margin:0 -12px;}
@media (max-width: 575px){
.slick-slider .slick-list{margin:0 -6px;}
}
.slick-slider .slick-list .slick-slide > div{margin:0 12px;}
@media (max-width: 575px){
.slick-slider .slick-list .slick-slide > div{margin:0 6px;}
}
.white-arrow .slick-arrow{border-radius:100%;width:40px;height:40px;}
@media (max-width: 991px){
.white-arrow .slick-arrow{width:30px;height:30px;}
}
.white-arrow .slick-arrow:before{font-size:12px;font-family:"Font Awesome 5 Free";font-weight:900;}
.white-arrow .slick-prev{z-index:1;}
.white-arrow .slick-prev:before{content:"\f053";}
.white-arrow .slick-next:before{content:"\f054";}
.white-arrow .slick-arrow{background-color:rgba(255, 255, 255, 0.2);width:30px;height:30px;}
.white-arrow .slick-arrow:before{color:#fff;}
.white-arrow .slick-arrow:hover,.white-arrow .slick-arrow:active,.white-arrow .slick-arrow:focus{background-color:#fff;}
.white-arrow .slick-arrow:hover:before,.white-arrow .slick-arrow:active:before,.white-arrow .slick-arrow:focus:before{color:var(--theme-color);}
.blur-up{-webkit-filter:blur(5px);filter:blur(5px);transition:filter 400ms, -webkit-filter 400ms;}
.blur-up.lazyloaded{-webkit-filter:blur(0);filter:blur(0);}
.white-arrow .slick-prev{background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:-70px;margin-top:-25px;}
.white-arrow .slick-prev:active{color:var(--theme-color);}
@media (max-width: 991px){
.white-arrow .slick-prev{left:unset;right:90px;top:-80px;width:40px;height:40px;margin-top:0;}
}
@media (max-width: 360px){
.white-arrow .slick-prev{top:-58px;}
}
.white-arrow .slick-prev::before{content:"\f053";font-family:"Font Awesome 5 Free";color:#000;font-weight:900;}
.white-arrow .slick-next{background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:-70px;margin-top:20px;}
.white-arrow .slick-next:active{color:var(--theme-color);}
@media (max-width: 991px){
.white-arrow .slick-next{left:unset;right:30px;top:-80px;width:40px;height:40px;margin-top:0;}
}
@media (max-width: 360px){
.white-arrow .slick-next{top:-58px;}
}
.white-arrow .slick-next::before{content:"\f054";font-family:"Font Awesome 5 Free";color:#000;font-weight:900;}
.category-section.ratio_40 .bg-size::before{padding-top:20%;}
.category-wrap{padding:calc(15px + (25 - 15) * ((100vw - 320px) / (1920 - 320)));position:relative;height:130px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
@media (max-width: 360px){
.category-wrap{height:unset;}
}
@media (max-width: 1460px){
.category-wrap.category-padding{padding:23px;}
}
@media (max-width: 1199px){
.category-wrap.category-padding{padding:19px;}
}
.category-wrap.theme-bg-color{color:#fff;background-color:var(--theme-color);}
.category-wrap.theme-bg-color .light-text{font-size:72px;line-height:96px;color:#fff;font-weight:700;margin-bottom:0;position:absolute;opacity:0.08;top:-10px;left:0;}
.category-wrap.theme-bg-color h2{margin-bottom:10px;}
.category-wrap.theme-bg-color h2.top-spacing{margin-top:-3px;}
.category-wrap.theme-bg-color span{letter-spacing:calc(2px + (8 - 2) * ((100vw - 320px) / (1920 - 320)));text-transform:uppercase;display:block;margin-bottom:-5px;}
.category-wrap .category-content{position:absolute;right:30px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
.category-wrap .category-content span{color:#212529;display:block;text-align:right;}
.category-wrap .category-content.category-text-1 h3{margin-top:-4px;}
.category-wrap .category-content.category-text-1 span{display:block;margin-bottom:-6px;}
.category-wrap .category-content h3{margin-bottom:2px;font-weight:600;font-size:calc(14px + (24 - 14) * ((100vw - 320px) / (1920 - 320)));}



/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
    padding: 0;
    margin: 0 auto 20px auto;
    list-style: none;
    text-align: center;
}

.portfolio .portfolio-filters li {
    cursor: pointer;
    display: inline-block;
    padding: 8px 20px 10px 20px;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 5px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
    color: var(--contrast-color);
    background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
    margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
    margin-right: 0;
}

@media (max-width: 575px) {
    .portfolio .portfolio-filters li {
        font-size: 14px;
        margin: 0 0 10px 0;
    }
}

.portfolio .portfolio-item {
    position: relative;
    overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
    opacity: 0;
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -100%;
    z-index: 3;
    transition: all ease-in-out 0.5s;
    background: color-mix(in srgb, var(--background-color), transparent 10%);
    padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
    font-size: 18px;
    font-weight: 600;
    padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: 14px;
    margin-bottom: 0;
    padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
    position: absolute;
    right: 50px;
    font-size: 24px;
    top: calc(50% - 14px);
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    transition: 0.3s;
    line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
    color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
    right: 14px;
    font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
    opacity: 1;
    bottom: 0;
}