@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800&family=Oswald:wght@200;300;400;500;700&display=swap');
* {transition: 300ms linear !important;}
body {
    transition:0s !important;
    font-family: 'Oswald',sans-serif !important;}
a {text-decoration: none;}
.title {
    font-size: 58px;
    color: rgb(95, 95, 95);
    text-align: center;
    letter-spacing: 10px;
    font-weight: 600;
}

/**************************** HEADER ******************************/
header.header {padding: 25px 0;}
header img {height: 75px;}

/**************************** AUTO MOTO BANNER ******************************/
.automotopark {
    background: url(/assets/images/automotopark-bg.jpg) no-repeat center;
    background-size: cover;
    padding: 100px 0;
}
.automoto-info {padding: 0 30px;}
.automoto-info p {
    font-size: 23px;
    font-weight: 300;
    text-align: justify;
    line-height: 1.3;
}
.pista-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 10px rgba(0 , 0, 0, 15%);
    padding: 30px;
    gap: 30px;
    background-color: white;
    border-radius: 10px;
}
.pista-card img {
    width: 160px;
    height: auto;
}
.pista-list {
    font-family: 'Figtree',sans-serif !important;
    width: 100%;
}
.pista-list li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 18px;
}
.pista-list li:last-child {border: none;}

.automoto-info-legend p{font-size: 16px;}
.automoto-info-legend b{
    background-color: white;
    border: 2px solid black;
    text-align: center;
    height: 35px;
    width: 35px;
    display: inline-block;
    border-radius: 100%;
    line-height: 30px;
    font-size: 14px;
}


/******************************** DISIPLINAT *******************************/
.disiplinat-section .title {padding: 50px 0;}
.galeria {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr 1fr;
    width: 100%;
}
.galeria-col {height: 900px;}
.galeria-col-img {position: relative;}
.galeria-col-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.galeria-col-img h4 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    margin: 0;
    padding:50px 20px;
    z-index: 99;
    font-size: 20px;
    letter-spacing: 5px;
    text-align: left;
}
.galeria-col-img button::after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(35,31,32,0) 50%, rgba(0,0,0,1) 100%);
    position: absolute;
}
.galeria-col .img-35 {height: 35%;}
.galeria-col .img-65 {height: 65%;}
.galeria-col .img-60 {height: 60%;}
.galeria-col .img-40 {height: 40%;}
.galeria-col .img-100 {height: 100%;}

.galeria-col button {
    border: none;
    background: none;
    padding: 0;
    width: 100%;
    height: 100%;
}
.modal-body p,
.modal-body ul {margin-bottom: 0;}


/******************************** SERIA VIDEO *******************************/
.seria-video-section {
    background-image: url(/assets/images/seria-video-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    color: white;
    padding: 75px 50px 150px 75px;
}
.seria-video-section h2 {
    font-size: 40px;
    font-weight: 200;
}
.seria-video-title span {font-weight: 600;}
.video-seria {
    height: 375px;
    position: relative;
}
.video-btn {
    border: none;
    background:none;
    padding: 0;
    text-align: left;
}
.video-btn::after{
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(35,31,32,0) 50%, rgba(0,0,0,1) 100%);
    position: absolute;
}
.video-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    padding: 20px;
    font-weight: 500;
    color: white;
}
.video-title p {
    font-weight: 600;
    margin: 0;
}
.all-videos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-modal {min-width: max-content !important;}

.owl-theme .owl-nav .nav-button[class*=owl-] {
    color: black;
    font-size: 20px;
    margin: 0;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 35px;
    width: 40px;
    height: 40px;
}
.owl-theme .owl-nav button {background: none !important;}
.owl-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 30px !important;
}

/************************************ PARTNERET ******************************/
.partneret-logo {
    display: flex;
    padding: 100px 0;
    gap: 50px;
    justify-content: space-between;
}
.partner-title {
    box-shadow: 0 5px 10px rgb(0 0 0 / 5%);
    padding: 50px 0;
}
.partneret-logo img {height: 50px;}

.dpshtrr-mie-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding:50px 0;
    border-bottom: 1px solid red;
}
.dpshtrr-mie-logos img {height:100px;}


/************************************ FOOTER ******************************/
footer.footer h4,
footer.footer p,
footer.footer a {
    font-family: 'Figtree',sans-serif !important;
}
.footer-copyright {
    padding: 20px 0;
    background-color: rgb(43 43 43);
    color: white;
    font-weight: 300;
    letter-spacing: 3px;
}

.main-footer {
    padding: 50px 0;
    background-color: black;
}
.main-footer h4 {
    color: white;
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 4px;
}
.main-footer a, 
.main-footer p {color: #808080;}

.main-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.adresa-footer {
    display: flex;
    justify-content: center;
    gap: 50px;
}
.social-footer {
    display: flex;
    flex-direction: column;
    align-items: end;
}
.social-footer li a {
    display: flex;
    align-items: center;
    gap: 10px;
}
.social-footer i {font-size: 20px;}

/************************************ OPTIMIZATION ******************************/
@media (max-width:1500px) {
    .video-seria-last img {object-position: 90% !important;}
}

@media (max-width:1400px) {
    .seria-video-section h2 br {display: none;}
    .all-videos {margin-top: 20px;}
    .seria-video-section {padding: 75px;}
}
@media (max-width:1200px) {
    .galeria {grid-template-columns: repeat(2,1fr);}
    .partneret-logo {
        text-align: center;
        display: block !important;
    }
    .galeria-col-img h4 {padding: 30px;}
}
@media (max-width:1000px) {
    .title {font-size: 50px;}
    .automotopark {padding: 75px 0;}
    .automoto-card {margin-top: 20px;}
    .disiplinat-section .title {
        padding: 30px 0;
        margin: 0;
    }
    .partneret-logo {
        display: grid !important;
        grid-template-columns: repeat(3,1fr);
    }
}
@media (max-width:991px) {
    .kontakt-col,
    .adresa-col,
    .social-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;   
    }
    .adresa-col {margin: 50px 0;}
    .adresa-footer {align-items: center;}
    .video-modal iframe {
        min-width: 100%;
        width: 100% !important;
        height: 500px !important;
    }
}
@media (max-width:800px) {
    header img {height: 55px;}
    .title {font-size: 40px;}
    .automotopark {padding: 50px 0;}
    .automoto-info p {
        font-size: 20px;
        line-height: 1.5;
    }
    .galeria-col {height: 600px;}
    .galeria-col-img h4 {
        padding: 15px;
        line-height: 1.5;
        letter-spacing: 2.5px;
    }
    .seria-video-section {padding: 50px;}
}
@media (max-width:600px) {
    .title {font-size: 35px;}
    .seria-video-section h2 {
        font-size: 30px;
        text-align: center;}
    .galeria-col-img h4 {font-size: 16px;}
    .seria-video-section {padding: 50px 25px;}
    .partneret-logo {
        padding: 50px 0;
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width:450px) {
    header.header {padding: 15px 0;}
    .title {letter-spacing: 5px;}
    .automoto-info p {font-size: 16px;}
    .pista-card {gap: 20px;}
    .pista-list li {font-size: 14px;}
    .pista-list li:last-child {
        margin: 0;
        padding: 0;
    }
    .galeria-col {height: 550px;}
    .galeria-col-img h4 {font-size: 12px;}
    .seria-video-section {padding: 50px;}
    .footer-copyright p {font-size: 12px;}
}