/*
 * @publisher Ve İnteraktif Medya
 * @author Muzaffer Bayraktar / muzafferbayraktar.net
*/

:root {
    --primary: #ed991a;
    --primary-two: #dd2828;
    --primary-secondary: #ffe3b8;
    --primary-two-secondary: #ffc3c3;
    --text: #3d3d3d;
    --title: #1a1a1a;
    --background:#ffffff;
    --section-bg: #f9f9f9;
    --white:#fff;
    --black:#1a1a1a;
    --font-title: 'League Gothic', sans-serif;
    --font-text: 'Space Grotesk', sans-serif !important;
    --icon-font: 'Font Awesome 6 Free';
    --transition: .22s all linear;
}
html[theme="dark"]:root {
    --primary: #ed991a;
    --primary-two: #dd2828;
    --text: #b3b3b3;
    --title: #fff;
    --background:#1a1a1a;
    --section-bg: #222;
}
*:not(img,.fslightbox-full-dimension) {
    transition: var(--transition);
}
body {
    background:var(--background) !important;
    box-sizing: border-box;
    padding:0;
    margin:0;
}
a,a:hover,a:focus {
    text-decoration:none !important
}
p {font-family:var(--font-text)}

.section-bg {background:var(--section-bg)}
.primary-text {color:var(--primary)}
.secondary-text {color:var(--text)}
.section-m {margin: 100px 0 0 0}
.section-p {padding-top: 100px}
.section-top-bottom-p {padding: 100px 0}
.container-fluid {position: relative}
.social-list {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap:20px
}
.social-list .item {
    display: flex;
    align-items: flex-start;
    gap:10px;
}
.social-list .item i {
    color:var(--primary-two);
    font-size:20px
}

.social-list .item span {
    color:var(--text);
    font-size:15px;
    font-family: var(--font-text);
    font-weight: 400;
}

.line {
    content:'';
    inset: 0 0 0 30px;
    background:var(--primary);
    display: block;
    height:0;
    width:5px;
    animation: 8s linear container_line forwards;
    position:absolute;
}
@keyframes container_line {
    from {height:0}
    to {height:3000px}
}


/* ========================== */
/* =Ve======== MENU ========= */
/* ========================== */
.menu > .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    padding:15px 30px;
    z-index: 3;
}
.menu > .container-fluid.bg {background:#555}
.menu .logo {
    max-width:300px;
    height:auto;
    z-index: 2;
    animation: 1s logo linear forwards;
    animation-delay:.25s;
    opacity: 0;
}
@keyframes logo {
    from {opacity: 0}
    to {opacity: 1}
}
.menu .list {
    display: flex;
    align-items: center;
    gap:25px;
    list-style: none;
    z-index: 2;
    padding: 0;
    margin: 0;
}
.menu .list a {
    color:#fff;
    font-size:17px;
    font-weight:700;
    text-transform: uppercase;
    font-family:var(--font-text);
    font-weight: 400;
}
.menu .list a:is(.active) {color:var(--primary)}
.menu .list a:hover {
    color:var(--primary);
}
.menu .mega-menu-toggle {
    font-size:24px;
    color:var(--white);
    cursor: pointer;
    display:flex;
}
.menu .mega-menu-toggle:hover {
    opacity: .5;
}
.menu .theme-toggle {
    cursor:pointer;
    display:flex;
}
.menu .theme-toggle:hover {
    opacity: .5;
}
/* ========================== */
/* =Ve===== MEGA MENU ======= */
/* ========================== */
.mega-menu {
    display: none;
    position: fixed;
    inset:0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
}
.mega-menu.open {
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: scroll;
}
.mega-menu .close-btn {
    position: absolute;
    top:30px;
    right:40px;
    cursor: pointer;
    color:var(--white);
    font-size:32px;
    z-index: 99999;
}
.mega-menu .close-btn:hover {opacity: .5}
.mega-menu .container-fluid {
    padding:20px 150px;
}
.mega-menu .mega-menu-title {
    color:var(--white);
    font-size:48px;
    position: relative;
    display: flex;
    align-items: center;
    gap:20px;
    letter-spacing: 3px;
}
.mega-menu .mega-menu-title::before {
    content:'';
    width:15px;
    height:15px;
    animation: 3s mega_menu_title linear infinite;
    background:var(--primary);
    display: block;
}
@keyframes mega_menu_title {
    from {transform:rotate(0deg)}
    to {transform:rotate(360deg)}
}
.mega-menu .divider {
    border:2px dashed var(--primary);
    display: block;
    margin:0;
    padding:0;
}
.mega-menu .links {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap:15px;
    margin-top: 30px;
}
.mega-menu .links a {
    color:var(--white);
    font-size:22px;
    font-weight: 400;
    font-family:var(--font-text);
}
.mega-menu .links a:hover {
    color:var(--primary)
}
.mega-menu .mega-promo {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    object-fit: cover;
    position: relative;
    width: 100%;
    height:275px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:20px
}
.mega-menu .mega-promo::before {
    content:'';
    background:rgba(0 0 0 / 60%);
    position: absolute;
    height: 100%;
    inset:0;
}
.mega-menu .mega-promo .title {
    font-size:62px;
    text-align: center;
    position: relative;
    color:var(--white);
}
.mega-menu .social-list .item span {
    color:var(--white)
}
/* ============================ */
/* =Ve======== SLIDER ========= */
/* ============================ */
.slider-line {
    transition: .2s all linear;
    position: absolute;
    left:30px;
    top:135px;
    background:var(--white);
    display: block;
    z-index: 2;
    width: 5px;
    height:0;
}
.slider {
    width: 100%;
    height:100vh;
    position: relative;
    inset:0;
}
.slider video {
    width:100%;
    height:100vh;
    object-fit: cover;
    margin:0;
    padding:0;
    background-size: cover;
    position: absolute;
    inset:0;
    z-index: 0;
}
.slider::before {
    content:'';
    background:rgba(0 0 0 / 60%);
    inset:0;
    position: absolute;
    display: block;
    z-index: 1;
    height:100vh;
    width:100%;
}
.slider video source {
    margin:0;
    padding:0;
    background-size: cover;
}
.slider .content {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider .title {
    position: relative;
    color:#fff;
    font-size:100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    letter-spacing: 2px;
}
.slider .title span {
    color:var(--primary);
}
.slider .title abbr {
    text-transform: none;
    font-size:40px;
    font-family: var(--font-title);
}
/* =========================== */
/* =Ve======== ABOUT ========= */
/* =========================== */
.about-wrapper {
    text-align: center;
    position: relative;
    overflow: hidden;
}
.about-wrapper .title {
    font-size: 82px;
    color:var(--title);
    margin-bottom:40px;
    letter-spacing: 5px;
}
.about-wrapper .description {
    font-size:22px;
    font-weight: 400;
    color:var(--text);
}
/* About Logo */
.about-wrapper svg#logo {
    opacity: .1;
}
/* =========================== */
/* =Ve======== BRAND ========= */
/* =========================== */
.brand-item {
    transition: var(--transition);
    width: 100%;
    height: 250px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    object-fit: cover;
    position: relative;
}
.brand-item:hover {filter: grayscale(0%)}
.brand-item::before {
    transition: var(--transition);
    content:'';
    inset:0;
    background:rgba(0 0 0 / 60%);
    position: absolute;
}
.brand-item:hover::before {
    transition: var(--transition);
    content:'';
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(55,229,233,0) 100%);
}
.brand .title {
    color:var(--title);
    font-size:76px;
    letter-spacing: 2px;
    margin-top: 30px;
}
.brand .description {
    color:var(--text);
    font-size:18px;
    margin-bottom:30px
}
.brand-item .name {
    position: absolute;
    bottom:25px;
    left:25px;
    color:var(--white);
    font-size:52px;
    text-transform: uppercase;
    letter-spacing: 5px;
}
.brand-item .name::before {
    transition: var(--transition);
    content:'';
    bottom:0;
    left:0;
    position: absolute;
    background:#fff;
    height:3px;
    width:0;
}
.brand-item .brand-logo {
    z-index: 99;
    filter: grayscale(0%);
    position: absolute;
    top: 50%;
    max-width: 150px;
    left: 40px;
    transform: translate(-0%,-50%);
}
.brand-item:hover .name::before {
    transition: var(--transition);
    content:'';
    width: 100%;
}
.brand-content {
    position: sticky;
    top: 90px;
    z-index: 1000;
}
.brand .list {
    display: flex;
    flex-direction: column;
    gap:30px;
    margin-bottom:30px;
}
.brand .list .item {
    display: flex;
    align-items:center;
    justify-content: flex-start;
    gap:20px;
}
.brand .list .item p {
    color:var(--title);
    font-size:32px;
    font-family:var(--font-title);
    font-weight:400;
    padding:0;
    margin:0;
}
/* Brand List SVG Colors */
.brand .list .item:nth-child(1) svg path,
.brand .list .item:nth-child(2) svg,
.brand .list .item:nth-child(3) svg path {
    fill:var(--primary)
}
/* =========================== */
/* =Ve==== BRAND DETAIL ====== */
/* =========================== */
.brand-info-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    text-align: center;
    background: var(--section-bg);
    padding: 24px 6px 8px 6px;
    height:230px;
    i {
        color:var(--primary);
        font-size:32px;
        margin-bottom:10px;
    }
    span:not(.info) {
        color:var(--title);
        font-size:20px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    .info {
        color:var(--text);
        font-size:16px;
    }
}
.social-media-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap:8px;
    font-size:22px;
    a {color:var(--white)!important}
    i {
        color:var(--white)!important;
        width:42px;
        height:42px;
        line-height: 42px;
        vertical-align: middle;
        text-align: center;
        font-size:20px;
        border-radius:50%;   
    }
    i:hover {opacity:.6}
    i.fa-instagram {background: #fa298e}
    i.fa-x-twitter {background: #030303}
    i.fa-linkedin {background: #1677e5}
    i.fa-youtube {background: #dc1818}
    i.fa-facebook-f {background:#2088fe}
}
/* ============================ */
/* =Ve======== GALLERY ======== */
/* ============================ */
.container-fluid.gallery {
    padding-right: 50px;
    padding-left: 50px;
}
.gallery {
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    width:100%;
    height:auto;
    padding:50px 0;
}
.gallery-box {
    position: relative;
    overflow: hidden;
}
.gallery-box img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.gallery-box::before {
    cursor: pointer;
    transition: var(--transition);
    content:'';
    background:rgba(0 0 0 / 60%);
    position: absolute;
    inset:0;
    z-index: 3;
    opacity: 0;
}
.gallery-box:hover::before {
    transition: var(--transition);
    opacity: 1;
}
/* ========================== */
/* =Ve==== PAGE DETAIL ====== */
/* ========================== */
.page-sidebar {
    overflow: hidden;
    position: sticky;
    top:100px;
    background:var(--section-bg);
}
.page-sidebar .title {
    font-size:32px;
    padding:12px;
    color:var(--title);
}
.page-sidebar .list {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}
.page-sidebar .list a {
    color:var(--title);
    font-size:18px;
    padding:12px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:8px;
}
.page-sidebar .list a.active {
    background: var(--primary-two);
    color:var(--white);
}
.page-sidebar .list a.active::before {
    background: var(--white);
    width: 12px;
}
.page-sidebar .list a:hover {
    background:var(--primary-two);
    color:var(--white);
}
.page-sidebar .list a::before {
    transition: var(--transition);
    content:'';
    background: var(--primary-two);
    width: 0;
    height:3px;
}
.page-sidebar .list a:hover::before {
    transition: var(--transition);
    width: 12px;
    background: var(--white);
}
.page-content .content {
    margin:16px 0;
}
.page-content .content p,
.page-content .content span,
.page-content .content b,
.page-content .content strong,
.page-content .content i,
.page-content .content u,
.page-content .content li {
    color:var(--text);
}
.page-content .content h1,
.page-content .content h2,
.page-content .content h3,
.page-content .content h4,
.page-content .content h5,
.page-content .content h6 {
    color:var(--title);
}
.page-content .content a {color:var(--primary)}
/* ========================== */
/* =Ve======== BLOG ========= */
/* ========================== */
.blog-box {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap:12px;
    background:var(--section-bg);
}
.blog-box img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.blog-box .content {
    display: flex;
    align-items: flex-start;
    gap:10px;
    flex-direction: column;
    padding:16px;
}
.blog-box .content .title {
    color:var(--title);
    font-size:22px;
    font-family:var(--font-text);
    font-weight: 600;
    text-transform: capitalize;
}
.blog-box:hover .content .title {color:var(--primary)}
/* ================================ */
/* =Ve======== BREADCRUMB ========= */
/* ================================ */
.breadcrumb-header {
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    object-fit: cover;
    width:100%;
    height:400px;
    position: relative;
}
.breadcrumb-header::before {
    content:'';
    background: rgba(0 0 0 / 60%);
    position: absolute;
    inset:0;
}
.breadcrumb-header .breadcrumb-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}
.breadcrumb-header .title {
    font-size:64px;
    color:var(--white);
    position: relative;
    margin-top: 50px;
}
.breadcrumb-header .list {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.breadcrumb-header .list a, .breadcrumb-header .list span {
    color:var(--white);
    font-size:18px;
    font-weight: var(--font-text);
}
.breadcrumb-header .list a:hover {
    color:var(--primary)
}
.breadcrumb-header .list a::after {
    content:'\f105';
    font-family:var(--icon-font);
    font-size:18px;
    color:var(--white);
    font-weight: 600;
    margin: 0 10px;
}
.breadcrumb-header .list a:last-child::after {display: none}
/* ============================ */
/* =Ve========= FORM ========== */
/* ============================ */
html[theme="dark"] .form {
    --input-bg:#555;
    --input-text:#fff;
    --input-border:#444;
    --form-bg:#313131;
}
html .form {
    --input-bg:#fff;
    --input-text:#444;
    --input-border:#e5e5e5;
    --form-bg:#f1f1f1;
}
.form {
    background:var(--form-bg);
    padding:25px;
    label {
        color:var(--text);
        margin-bottom:8px;
        font-weight: 500;
    }
    .input, textarea, select {
        background:var(--input-bg);
        border:2px solid var(--input-border);
        outline: none;
        color:var(--input-text);
        font-size:16px;
        padding:8px 12px;
        width: 100%;
    }
    .input:focus, textarea:focus, select:focus {
        border-color:var(--primary);
    }
    .title {
        font-size:42px;
        color:var(--title);
    }
}
.career-content {
    font-size: 16px;
    font-weight: 400;
    color: var(--text);
}
/* ============================ */
/* =Ve======== FOOTER ========= */
/* ============================ */
.footer {
    position: relative;
    overflow: hidden;
}
.footer-title {
    font-size:36px;
    color:var(--title);
    font-weight:400;
    font-family:var(--font-title);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap:10px;
}
.footer-title::before {
    content:'';
    width:15px;
    height:15px;
    animation: 3s footer_title linear infinite;
    background:var(--primary-two);
}
@keyframes footer_title {
    from {transform:rotate(0deg)}
    to {transform:rotate(360deg)}
}
.footer-info .description {
    color:var(--text);
    font-size:20px;
    font-weight: 600;
    margin-top: 10px;
}
.footer-menu {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap:5px;
}
.footer-menu a {
    color:var(--title);
    font-size:15px;
    font-family:var(--font-text);
}
.footer-menu a:is(.active) {color:var(--primary-two)}
.footer-menu a:hover {
    color:var(--primary-two);
}
.footer .copyright {
    color:var(--text);
    font-family: var(--font-text);
}