/*

Theme Name: Drivein Tractari

Author: Drivein

Author URI: https://drivein.ro/

Description: Drivein Tractari

Version: 1.0

Text Domain: drivein-tractari

*/



/*

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/



@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-100-normal0.woff2') format('woff2');
	font-weight: 100;
	font-style: normal0;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-100-normal1.woff2') format('woff2');
	font-weight: 100;
	font-style: normal1;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-200-normal0.woff2') format('woff2');
	font-weight: 200;
	font-style: normal0;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-200-normal1.woff2') format('woff2');
	font-weight: 200;
	font-style: normal1;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-300-normal0.woff2') format('woff2');
	font-weight: 300;
	font-style: normal0;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-300-normal1.woff2') format('woff2');
	font-weight: 300;
	font-style: normal1;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-400-normal0.woff2') format('woff2');
	font-weight: 400;
	font-style: normal0;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-400-normal1.woff2') format('woff2');
	font-weight: 400;
	font-style: normal1;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-500-normal0.woff2') format('woff2');
	font-weight: 500;
	font-style: normal0;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-500-normal1.woff2') format('woff2');
	font-weight: 500;
	font-style: normal1;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-600-normal0.woff2') format('woff2');
	font-weight: 600;
	font-style: normal0;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-600-normal1.woff2') format('woff2');
	font-weight: 600;
	font-style: normal1;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-700-normal0.woff2') format('woff2');
	font-weight: 700;
	font-style: normal0;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-700-normal1.woff2') format('woff2');
	font-weight: 700;
	font-style: normal1;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-800-normal0.woff2') format('woff2');
	font-weight: 800;
	font-style: normal0;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-800-normal1.woff2') format('woff2');
	font-weight: 800;
	font-style: normal1;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-900-normal0.woff2') format('woff2');
	font-weight: 900;
	font-style: normal0;
	font-display: swap;
}

@font-face {
	font-family: 'poppins';
	src: url('https://tractari-platforma-sibiu.ro/wp-content/bcf-fonts/Poppins/poppins-900-normal1.woff2') format('woff2');
	font-weight: 900;
	font-style: normal1;
	font-display: swap;
}
						

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

	font-family: 'Poppins', Arial, sans-serif;

}



html{

	scroll-behavior: smooth;

}



body{

	height: 100svh;

}



* {

    box-sizing: border-box;

}



article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}



ol, ul {

	list-style: none;

}



b, strong{

    font-weight: 500;

}



::-webkit-scrollbar{

	width: 10px;

}

  

::-webkit-scrollbar-track{

	background: #aaaaaa;

}

  

::-webkit-scrollbar-thumb{

	background: #424242;

}



::selection{

    background-color: #181818;

    color: #fff;

}



::-moz-selection{

    background-color: #181818;

    color: #fff;

}

.cmplz-cookiebanner{
    min-width: 526px;
}



/* Navbar */



.navbar{

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: fixed;

    top: 0;

    left: 0;

    box-sizing: border-box;

    opacity: 1;

    height: 65px;

    width: 100%;    

    max-width: 100vw; 

    padding: 0 7%;

    z-index: 10;

    background: #181818;

    text-wrap: wrap;

}



.navbar-logo{

    display: flex;

    flex: 0;

    align-items: center;

}



.navbar-logo .logo img{

    display: block;

    max-height: clamp(40px, 8cqh, 48px);

    min-width: clamp(100px, 20cqw, 170px); 

    object-fit: contain; 

    transition: filter 0.5s ease;

}



.navbar-logo .logo:hover img{

    filter: brightness(1.35);

}



/* Navbar menu items */



.navbar-menu{

    display: flex;

    flex: 1;

    justify-content: flex-end;

    text-wrap: wrap;

}



.navbar-menu a{

    display: inline-block;

    position: relative;

    padding: 1.531rem;

    left: 0;

    top: 0;

    text-decoration: none;

    color: #fff;

    font-size: clamp(16px, 15vw, 19px);

    font-weight: 600;

    letter-spacing: 0.06rem;

    transition: all 0.5s ease;

}  



.navbar-menu a:hover{

    color: #fe7301;

    cursor: pointer;

}



.navbar-menu a::after {

    content: '';

    position: absolute;

    bottom: 0.469rem; 

    left: 0;

    width: 0;

    height: 0.22rem;

    background-color: #fe7301; 

    transition: width 0.3s ease;

}



.navbar-menu a:hover::after {

    width: 100%;

}



.navbar-menu a.active{

    position: relative;

    color: #fe7301;

}



.navbar-menu a.active::after{

    content: '';

    position: absolute;

    bottom: 0.469rem; 

    left: 0;

    width: 100%; 

    height: 0.22rem; 

    background-color: #fe7301; 

}



/* Background landing */



.background-video-container{

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    max-width: 100vw; 

    height: calc(100vh - 65px);

    margin-top: 65px;

}



.background-video{

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



.background-video-mobile{

    display: none;

}



.background-writing{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    position: absolute;

    width: 100%;

    height: calc(100vh - 65px);

    background-color: rgba(0, 0, 0, 0.55);

}



.background-writing-container{

    display: flex;

    justify-content: center; 

    align-items: flex-start; 

    text-align: center; 

    margin-top: 24.5% !important;

}



.background-writing h1{

    line-height: 1.3;

    font-size: clamp(2.5rem, 5vw, 3rem);

    font-weight: 600;

    letter-spacing: 0.07rem;

    color: #fff;

    text-align: center;

    text-shadow: 2px 2px 7px rgba(9,9,9,0.7);

    animation: appearwriting 0.5s ease;

}



.background-writing div{

    display: flex;

    justify-content: center;

    margin-top: 0;

    gap: 50px;

    transition: transform 0.5s ease;

}



/* Background phone buttons */



.background-buttons{

    display: flex;

    flex-direction: row;

    margin-top: 20px !important;

}



.phone-button{

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    gap: 0 !important;

    height: clamp(55px, 6vh, 70px);

    width: clamp(200px, 25vw, 220px);

    min-width: unset;

    background-color: #22872F;

    color: #fff;

    border-radius: 10px;

    cursor: pointer;

    white-space: nowrap;

    text-decoration: none;

    font-size: clamp(1.6rem, calc(6vh * 0.4), 1.9rem);

    font-weight: 500;

    animation: appearwriting 0.5s ease;

    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, filter 0.5s ease, transform 0.5s ease;

}



.phone-button:hover{

    background-color: #1B6C25;

    transform: scale(0.98);

}



.phone-button img{

    margin-right: 15px;

    height: clamp(30px, calc(6vh * 0.45), 42px);

    width: auto;

}



.whatsapp-button{

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    gap: 0 !important;

    height: clamp(55px, 6vh, 70px);

    width: clamp(200px, 25vw, 220px);

    min-width: unset;

    background-color: #22872F;

    color: #fff;

    border-radius: 10px;

    cursor: pointer;

    white-space: nowrap;

    text-decoration: none;

    font-size: clamp(1.6rem, calc(6vh * 0.4), 1.9rem);

    font-weight: 500;

    animation: appearwriting 0.5s ease;

    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, filter 0.5s ease, transform 0.5s ease;

}



.whatsapp-button:hover{

    background-color: #1B6C25;

    transform: scale(0.98);

}



.whatsapp-button img{

    margin-right: 15px;

    height: clamp(30px, calc(6vh * 0.45), 42px);

    width: auto;

}



.mono{

    height: 30px;

    width: auto;

    margin-right: 20px;

}



/* Carousel container */



.carousel-container{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    scroll-margin-top: 80px;

}



.carousel-container h3{

    line-height: 2;

    font-size: clamp(2.4rem, 5vw, 2.7rem);

    font-weight: 700;

    letter-spacing: 0.07rem;

    color: #fe7301;

    text-align: left;

}



.carousel{

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 25px auto;

    width: 70%;

    overflow: hidden;

}



/* Swiper Container */

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-448px * 4));
    }
}
@keyframes scrollmobile {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-294px * 4));
    }
}
.slider {
    background: #fff;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 344px;
}
.slider::before,
.slider::after {
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}
.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}
.slider::before {
    left: 0;
    top: 0;
}
.slide-track {
    animation: scroll 60s linear infinite;
    display: flex;
    width: calc(448px * 8);
}
.slide {
    height: 336px;
    width: 448px;
}
.slide img {
    height: 336px;
    width: 448px;
}
@media (max-width: 768px) {
    .slide {
        height: 221px;
        width: 294px;
    }
    .slide-track {
        animation: scrollmobile 30s linear infinite;
        width: calc(294px * 8);
    }
    .slider {
        height: 221px;
    }
    .slide img {
        height: 221px;
        width: 294px;
    }
}

.swiper-container{

    width: 100%;

    z-index: 0;

}



.swiper-slide{

    text-align: center;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 100;

    flex: 0 0 auto !important;

}



.swiper-slide img{

    width: 100%;

    max-width: 400px;

    height: auto;

    object-fit: cover;

    border-radius: 10px;

    box-shadow: 2px 2px 10px 1px rgb(214, 214, 214);

    -webkit-box-shadow: 2px 2px 10px 1px rgba(214, 214, 214);

    -moz-box-shadow: 2px 2px 10px 1px rgba(214, 214, 214);

}



.swiper-pagination{

    margin-top: 30px;

    position: relative !important;

    z-index: 0 !important;

}



.swiper-pagination-bullet{

    width: 12px;

    height: 12px;

    background: #181818 !important;

    opacity: 0.7 !important;

    transition: all 0.3s ease;

}

  

  .swiper-pagination-bullet-active{

    background: #fe7301 !important; 

    transform: scale(1.2) !important;

}



/* Ce transportam container */



.transport-container{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    margin-top: 7vh;

    margin-bottom: 7vh;

    scroll-margin-top: 80px;

}



.transport-container h2{

    line-height: 2;

    font-size: clamp(2.4rem, 5vw, 2.7rem);

    font-weight: 700;

    letter-spacing: 0.07rem;

    color: #fe7301;

    text-align: left;

}



.transport-container p{

    line-height: 1.8;

    width: 70%;

    padding: 10px 0px 10px 0px;

    font-size: clamp(0.9rem, 5vw, 1.35rem);

    font-weight: 300;

    color: #181818;

    text-align: center;

}



.transport-cards-container{

    width: 70%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 45px;

    padding: 15px auto;

    margin-top: 2vh;

}



.transport-card{

    background-color: #f5f5f5;

    padding: 40px 20px 40px 20px;

    text-align: center;

    border: 0.15rem solid #cdcdcd;

    border-radius: 10px;

    box-shadow: 2px 2px 10px 1px rgb(214, 214, 214);

    -webkit-box-shadow: 2px 2px 10px 1px rgba(214, 214, 214);

    -moz-box-shadow: 2px 2px 10px 1px rgba(214, 214, 214);

    transition: transform 0.5s ease;

}



.transport-card:hover{

    transform: scale(1.02);

}



.transport-card h3{

    line-height: 1;

    font-size: clamp(23px, 5vw, 26px);

    font-weight: 400;

    color: #181818;

    text-align: center;

    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);

    margin-top: 25px;

}



.transport-card img{

    height: 70px;

    width: auto;

}



.page-buttons{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    margin-top: 7vh;

    margin-bottom: 7vh;

}



.page-buttons h3{

    line-height: 2;

    font-size: clamp(2rem, 5vw, 2.3rem);

    font-weight: 500;

    letter-spacing: 0.07rem;

    color: #181818;

    text-align: center;

}



.page-buttons .buttons{

    display: flex; 

    justify-content: center; 

    align-items: center;

    flex-direction: row;

    gap: 25px;

}



.page-buttons .contact-phone-button, .page-buttons .contact-whatsapp-button{

    margin-top: 10px;

}



/* Program banner */



.banner{

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 9.5vh;

    background-color: rgb(254, 115, 1);

    background-image: url('img/stripes.webp');

    background-size: auto;

    background-position: center;

    background-repeat: repeat;

    background-blend-mode: multiply;

}



.banner h3{

    line-height: 2;

    font-size: clamp(1.8rem, 5vw, 2.4rem);

    font-weight: 500;

    color: #ffffff;

    text-align: center;

}



/* Text-image container */



.text-image-container{

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: row;

    width: 70%;

    margin: 0 auto;

    margin-top: 7vh;

    margin-bottom: 7vh;

}



.text-container{

    flex: 1;

    box-sizing: border-box;

}



.text-container h2{

    line-height: 2;

    font-size: clamp(2.4rem, 5vw, 2.7rem);

    font-weight: 700;

    letter-spacing: 0.07rem;

    color: #fe7301;

    text-align: left;

}



.text-container p{

    line-height: 1.8;

    font-size: clamp(0.9rem, 5vw, 1.35rem);

    font-weight: 300;

    color: #181818;

    text-align: justify;

}



.image-container{

    flex: 1;

    display: flex;

    justify-content: flex-end;

    align-items: center;

}



.image-container img{

    max-width: 80%;

    height: auto;

    border-radius: 10px;

    box-shadow: 2px 2px 10px 1px rgb(214, 214, 214);

    -webkit-box-shadow: 2px 2px 10px 1px rgba(214, 214, 214);

    -moz-box-shadow: 2px 2px 10px 1px rgba(214, 214, 214);

}



hr{

    width: 70%;

    border-color:#181818 !important;

}



/* Servicii oferite */



.servicii-container{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    margin-top: 5vh;

    margin-bottom: 7vh;

    scroll-margin-top: 80px;

}



.servicii-container h3{

    line-height: 2;

    font-size: clamp(2.4rem, 5vw, 2.7rem);

    font-weight: 700;

    letter-spacing: 0.07rem;

    color: #fe7301;

    text-align: left;

}



.servicii-container p{

    line-height: 1.8;

    width: 70%;

    padding: 10px 0px 10px 0px;

    font-size: clamp(0.9rem, 5vw, 1.35rem);

    font-weight: 300;

    color: #181818;

    text-align: center;

}



.servicii-cards-container{

    width: 70%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    padding: 15px;

    margin-top: 2vh;

}



.servicii-card{

    display: flex;

    flex-direction: column;

    background-color: #f5f5f5   ;

    text-align: center;

    border: 0.15rem solid #cdcdcd;

    border-radius: 10px;

    padding: 20px 10px 20px 10px;

    box-shadow: 2px 2px 10px 1px rgb(214, 214, 214);

    -webkit-box-shadow: 2px 2px 10px 1px rgba(214, 214, 214);

    -moz-box-shadow: 2px 2px 10px 1px rgba(214, 214, 214);

    transition: transform 0.5s ease;

}



.servicii-card:hover{

    transform: scale(1.02);

}



.servicii-card .writing{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-grow: 1;

    text-align: center;

    flex-direction: column;

}



.servicii-card .writing h3{

    line-height: 1.25;

    font-size: clamp(1rem, 5vw, 1.2rem);

    font-weight: 500;

    color: #181818;

    text-align: center;

    text-shadow: none !important;

}



/* Contact container */



.contact-container{

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: row;

    width: 70%;

    margin: 0 auto;

    margin-top: 9vh;

    margin-bottom: 7vh;

    scroll-margin-top: 80px;

}



.contact-text-container{

    flex: 1;

    box-sizing: border-box;

    padding-right: 2%;

}



.contact-drivein{

    font-size: clamp(2rem, 5vw, 2.3rem) !important;

}



.contact-text-container h3{

    line-height: 2;

    font-size: clamp(2.4rem, 5vw, 2.7rem);

    font-weight: 700;

    letter-spacing: 0.07rem;

    color: #fe7301;

    text-align: left;

    margin-top: -15px;

}



.contact-text-container p{

    line-height: 1.8;

    font-size: clamp(0.9rem, 5vw, 1.35rem);

    font-weight: 300;

    color: #181818;

    text-align: justify;

}



.contact-image-container{

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    padding-left: 2%;

}



.contact-image-container img{

    max-width: 100%;

    height: auto;

    border-radius: 10px;

    box-shadow: 2px 2px 10px 1px rgb(214, 214, 214);

    -webkit-box-shadow: 2px 2px 10px 1px rgba(214, 214, 214);

    -moz-box-shadow: 2px 2px 10px 1px rgba(214, 214, 214);

}



.contact-phone-button{

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    margin-top: 20px;

    height: clamp(55px, 6vh, 70px);

    width: clamp(200px, 25vw, 220px);

    min-width: unset;

    background-color: #22872F;

    color: #fff;

    border-radius: 10px;

    cursor: pointer;

    white-space: nowrap;

    text-decoration: none;

    font-size: clamp(1.6rem, calc(6vh * 0.4), 1.9rem);

    font-weight: 500;

    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, filter 0.5s ease, transform 0.5s ease;

}



.contact-phone-button:hover{

    background-color: #1B6C25;

    transform: scale(0.98);

}



.contact-phone-button img{

    margin-right: 15px;

}



.contact-whatsapp-button{

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    margin-top: 20px;

    height: clamp(55px, 6vh, 70px);

    width: clamp(200px, 25vw, 220px);

    min-width: unset;

    background-color: #22872F;

    color: #fff;

    border-radius: 10px;

    cursor: pointer;

    white-space: nowrap;

    text-decoration: none;

    font-size: clamp(1.6rem, calc(6vh * 0.4), 1.9rem);

    font-weight: 500;

    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, filter 0.5s ease, transform 0.5s ease;

}



.contact-whatsapp-button:hover{

    background-color: #1B6C25;

    transform: scale(0.98);

}



.contact-whatsapp-button img{

    margin-right: 15px;

}



.contact-text-container .buttons{

    display: flex; 

    justify-content: flex-start; 

    gap: 25px;

}



/* Move up icon */



.moveup-icon{

    display: flex;

    align-items: center;

    justify-content: center;

    visibility: hidden;

    position: fixed;

    right: 15px;

    bottom: 15px;

    width: 45px;

    height: 45px;

    border-radius: 10px;

    box-sizing: border-box;

    opacity: 0.4;

    background-color: #5a5a5a;

    transition: transform 0.5s ease;

}

.moveup-icon:hover{

    background-color: #808080;

}



.moveup-icon a{

    display: flex;

    justify-content: center;

    align-items: center;

}



.moveup-icon img{

    width: 80%;

    object-fit: contain;

}



.moveup-icon[x-show="moveUpIcon"] {

    visibility: visible;

}



/* Footer */



.footer {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: auto;

    background-color: #181818;

    padding: 5vh 0;

}



.footer-content {

    display: flex;

    max-width: 86%;

    align-items: start;

    justify-content: center;

    gap: clamp(12rem, 5vw, 16rem);

    color: #fff; 

}



.footer-content ul {

    display: inline-block;

    text-align: left;

    width: auto;

    padding: 0;

    margin: 0;

    white-space: nowrap;

    list-style: none;

}



.footer-content p{

    align-self: flex-start;

}



.tractariauto .logo {

    height: 50px;

    width: auto;

}



.tractariauto h3 {

    line-height: 1;

    font-size: clamp(0.9rem, 5vw, 1.2rem);

    font-weight: 500;

    color: #fff;

    margin-top: 15px;

}



.tractariauto .contact-phone-button, 

.tractariauto .contact-whatsapp-button {

    margin-top: 15px;

    height: clamp(35px, 6vh, 45px);

    width: clamp(185px, 25vw, 200px);

    font-size: clamp(1.1rem, 5vw, 1.4rem);

}



.tractariauto .contact-phone-button img, 

.tractariauto .contact-whatsapp-button img {

    margin-right: 12px;

    height: clamp(25px, 5vw, 27px);

}



#cereajutor{

    margin-top:25px;

}



.drivein{

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;

    max-height: 300px;

    column-gap: 2rem;

}



.drivein h3{

    text-align: center;

}



.drivein h3::before, .socialmedia h3::before{

    content: "";

    display: inline-block;

    width: 4px;

    height: 1em;

    background-color: #fe7301;

    flex-shrink: 0;

}



.cols{

    display: flex;

    gap: 5rem;

}



.col1, .col2{

    display: flex;

    flex-direction: column;

    gap: 0.7rem;

}



.drivein h3,

.socialmedia h3 {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: clamp(1.3rem, 5vw, 1.6rem);

    font-weight: 600;

    margin-bottom: 15px;

}



.drivein a, 

.socialmedia a {

    text-decoration: none;

    color: #ffffff;

    font-size: clamp(0.9rem, 5vw, 1.15rem);

    font-weight: 400;

    line-height: 1.2;

    align-items: flex-start;

    transition: color 0.5s ease;

}



.drivein a:hover, .socialmedia a:hover{

    color: #a8a8a8;

}



.socialmedia {

    display: flex !important;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

}



.mobile-menu, .mobile-menu-overlay{

    display: none;

}



.phone-break{

    display: none;

}



.articol{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    width: 70%;

    margin: 0 auto;

    padding-top: 14vh;

    padding-bottom: 7vh;

}



.articol h4 {

    font-size: clamp(1.7rem, 5vw, 2.3rem);

    font-weight: 700;

    letter-spacing: 0.07rem;

    color: #fe7301;

}



.articol p {

    text-align: justify;

    line-height: 1.8;

    font-size: clamp(0.9rem, 5vw, 1.05rem);

    font-weight: 300;

}



/* Media queries */



@media (max-width: 1280px){



    .navbar-menu{

        display: none;

    }



    .mobile-menu {

        display: flex;

        justify-content: center;

        align-items: center;

        cursor: pointer;

    }



    .mobile-menu img {

        width: 75%;

        height: auto;

        object-fit: contain;

    }



    .mobile-menu-overlay {

        display: flex;

        flex-direction: column;

        align-items: center;

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100vh;

        background-color: #181818;

        z-index: 10;

    }





    .mobile-menu-close {

        position: absolute;

        top: 25px;

        right: 25px;

        width: clamp(30px, 5cqw, 40px);

        height: clamp(30px, 5cqh, 40px);

        cursor: pointer;

    }



    .mobile-menu-close img {

        width: 100%;

        height: 100%;

        object-fit: contain;

    }



    .navbar-menu-mobile .logo{

        display: flex;

        align-items: center;

        justify-content: center;

        margin-bottom: 30px;

        width: 35%;

        height: auto;

        max-height: 14%;

    }



    .navbar-menu-mobile {

        height: 100%;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 3%;

    }



    .navbar-menu-mobile a {

        color: #fff;

        text-decoration: none;

        font-size: clamp(23px, 5vw, 28px);

        font-weight: 700;

    }



    .navbar-menu-mobile a:hover,

    .navbar-menu-mobile a.active {

        color: #fe7301;

    }



    .footer{

        padding: 4vh 0;

    }



    .footer-content{

        display: flex;

        align-items: start;

        justify-content: center;

        flex-direction: column;

        gap: 3rem;

    }



    .footer-content ul:first-child{

        align-self: center;

    }



    .footer-content ul:nth-child(n+2){

        align-self: flex-start;

    }



    .cols{

        gap: 0.7rem;

    }



    .tractariauto{

        display: flex;

        align-items: center;

        justify-content: center;    

        text-align: center;

    }



    .tractariauto h3{

        font-size: clamp(0.85rem, 5vw, 1.15rem);

    }



    .tractariauto li{

        display: flex;

        align-items: center;

        justify-content: center;

    }



    .tractariauto .logo{

        margin-bottom: 10px;

        height: 45px;

        width: auto;

    }



    #cereajutor{

        margin-top: 10px;

    }



    .tractariauto .contact-phone-button, .tractariauto .contact-whatsapp-button{

        height: clamp(40px, 6vh, 45px);

        width: clamp(180px, 25vw, 205px);

        font-size: clamp(1.4rem, calc(6vh * 0.4), 1.75rem);

    }



    .tractariauto .contact-phone-button img, .tractariauto .contact-whatsapp-button img{

        height: 25px;
        width: 25px;

        margin-right: 10px;

    }



    .tractariauto .contact-whatsapp-button{

        margin-bottom: 0px;

    }



    .drivein h3, .socialmedia h3{

        font-size: clamp(0.85rem, 5vw, 1.15rem);

    }



    .drivein a, .socialmedia a{

        font-size: clamp(0.8rem, 5vw, 1.05rem);

    }



    .socials{

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: center;

    }



    .socialmedia li:nth-child(2),

    .socialmedia li:nth-child(3),

    .socialmedia li:nth-child(4){

        flex-direction: row !important;

    }



    .socials li:nth-child(1),

    .socials li:nth-child(2),

    .socials li:nth-child(3),

    .socials li:nth-child(4),

    .socials li:nth-child(5){

        margin-bottom: 0 !important;

    }



    .socials li:nth-child(1),

    .socials li:nth-child(2),

    .socials li:nth-child(3),

    .socials li:nth-child(4){

        margin-right: 15px;

    }

    

    .articol h4{

        font-size: clamp(1.3rem, 5vw, 1.5rem); 

    }

    

    .articol img{

        display: none;

    }



}



@media (max-width: 1024px){

    

    .desktop-break{

        display: none;

    }



    .navbar-menu{

        display: none;

    }



    .mobile-menu{

        display: flex;

        justify-content: center;

        width: clamp(30px, 5cqw, 40px);

        height: clamp(30px, 5cqh, 40px);

    }



    .navbar{

        padding: 0 5%;

        height: 60px;

    }



    .navbar-logo .logo img{

        max-height: clamp(35px, 8cqh, 42px);

        min-width: clamp(80px, 20cqw, 145px); 

    }



    .background-video-container{

        height: calc(100vh - 60px);

        margin-top: 60px;

    }



    .background-video{

        display: none;

    }



    .background-video-mobile{

        display: block;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: right;

    }



    .background-writing{

        height: calc(100vh - 60px);

    }



    .background-writing-container{

        margin-top: 55% !important;

    }



    .background-writing div{

        flex-direction: column;

        gap: 10px !important;

    }



    .background-writing h1{



        font-size: clamp(2rem, 5vw, 2.4rem);

    }



    .phone-button{

        margin-bottom: 15px;

    }



    .phone-button, .whatsapp-button{

        height: clamp(42px, 6vh, 52px);

        width: clamp(180px, 25vw, 205px);

        flex-direction: row !important;

            font-size: clamp(1.45rem, calc(6vh * 0.4), 1.85rem);

    }





    .phone-button img, .whatsapp-button img{

        margin-right: 10px;

        height: clamp(22px, calc(6vh * 0.45), 25px);

    }



    .mono {

        height: 22px;

        margin-right: 15px;

        width: auto;

    }



    .text-container, .transport-container, 

    .servicii-container, .carousel-container{

        justify-content: flex-start;

        padding-right: 0;

    }



    .transport-container p, .text-container p, 

    .servicii-container p, .contact-text-container p{

        font-size: clamp(0.9rem, 5vw, 1rem);

    }



    .carousel-container h3, 

    .transport-container h2, .text-container h2, 

    .servicii-container h3{

        font-size: clamp(1.6rem, 5vw, 2.2rem);

    }

    

    .text-image-container, .contact-container,

    .carousel, .transport-cards-container, 

    .servicii-cards-container, .articol{

        width: 85%;

    }



    .text-image-container{

        flex-direction: column;

    }



    .text-container div, .contact-text-container div{

        justify-content: center !important;

    }



    .text-container p{

        margin-bottom: 20px;

    }



    .image-container img{

        max-width: 100%;

    }

    

    .transport-container p, .servicii-container p{

        width: 85%;

        text-align: justify;

    }



    .transport-container{

        background-image: none;

        margin-top: 0;

        margin-bottom: 3vh;

    }



    .transport-cards-container{

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }



    .transport-card{

        padding: 30px 10px 30px 10px;

    }



    .transport-card h3, .servicii-card h3{

        font-size: clamp(14px, 5vw, 18px);

    }



    .transport-card img, .servicii-card img{

        object-fit: cover;

        height: 45px;

        width: auto;

    }



    .page-buttons{

        margin-top: 3vh;

        margin-bottom: 3vh;

    }



    .page-buttons h3{

        font-size: clamp(1.5rem, 5vw, 1.9rem);

    }



    .page-buttons .buttons{

        flex-direction: column;

        gap: 10px;

    }

e

    .page-buttons .contact-phone-button, .page-buttons .contact-whatsapp-button{

        height: clamp(42px, 6vh, 52px);

        width: clamp(180px, 25vw, 205px);

    }



    .page-buttons .contact-phone-button, .page-buttons .contact-whatsapp-button{

        font-size: clamp(1.45rem, calc(6vh * 0.4), 1.85rem);

    }



    .page-buttons .contact-phone-button img, .page-buttons .contact-whatsapp-button img{

        height: 25px;
        width: 25px;

        margin-right: 10px;

    }



    .page-buttons .contact-whatsapp-button{

        margin-bottom: 0;

    }



    .banner{

        margin-top: 4vh;

        height: 12vh;

    }



    .banner h3{

        font-size: clamp(1.4rem, 5vw, 1.8rem);

        font-weight: 600;

        line-height: 1.7;

    }



    .servicii-cards-container{

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

        padding: 0;

    }



    .servicii-cards-container .servicii-card:nth-last-child(2),

    .servicii-cards-container .servicii-card:nth-last-child(1) {

        grid-column: auto;

    }



    .servicii-card{

        padding: 10px 5px 10px 5px;

    }



    .servicii-card .writing h3{

        font-size: clamp(0.75rem, 5vw, 0.85rem);

    }



    .servicii-card img{

        height: 25vw;

        width: auto;

    }



    .swiper-pagination-bullet{

        margin-left: 7px !important;

    }



    .contact-container{

        margin-top: 4vh;

        flex-direction: column;

    }



    .contact-text-container{

        padding-right: 0;

    }



    .contact-text-container h3{

        font-size: clamp(1.7rem, 5vw, 2.3rem);

        margin-bottom: 0px;

        margin-top: 0;

        justify-content: center;

        text-align: center;

    }



    .contact-drivein{

        font-size: clamp(1.5rem, 5vw, 2rem) !important;

    }



    .contact-text-container .buttons{

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        gap: 5px;

    }



    .contact-phone-button, .contact-whatsapp-button{

        height: clamp(42px, 6vh, 52px);

        width: clamp(180px, 25vw, 205px);

        font-size: clamp(1.45rem, calc(6vh * 0.4), 1.85rem);

    }



    .contact-phone-button img, .contact-whatsapp-button img{

        height: 25px;
        width: 25px;

        margin-right: 10px;

    }



    .contact-whatsapp-button{

        margin-top: 10px;

        margin-bottom: 35px;

    }



    .footer-content{

        grid-template-columns: repeat(1, 1fr);

    }



    .footer-content ul li{

        flex-direction: column !important;

    }



    /* Mobile Menu */



    .mobile-menu {

        display: flex;

        justify-content: center;

        align-items: center;

        cursor: pointer;

    }



    .mobile-menu img {

        width: 110%;

        height: 110%;

        object-fit: contain;

    }



    .mobile-menu-overlay {

        display: flex;

        flex-direction: column;

        align-items: center;

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100vh;

        background-color: #181818;

        z-index: 10;

    }



    .mobile-menu-close {

        position: absolute;

        top: 3%;

        right: 10%;

        width: clamp(30px, 5cqw, 40px);

        height: clamp(30px, 5cqh, 40px);

        cursor: pointer;

    }



    .mobile-menu-close img {

        width: 100%;

        height: 100%;

        object-fit: contain;

    }



    .navbar-menu-mobile .logo{

        display: flex;

        align-items: center;

        justify-content: center;

        margin-bottom: 20px;

        width: 40%;

        height: auto;

        max-height: 14%;

    }



    .navbar-menu-mobile {

        height: 100%;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 3%;

    }



    .navbar-menu-mobile a {

        color: #fff;

        text-decoration: none;

        font-size: clamp(22px, 5vw, 26px);

        font-weight: 700;



    }



    .navbar-menu-mobile a:hover,

    .navbar-menu-mobile a.active {

        color: #fe7301;

    }



    .phone-break{

        display: block;

    }



    .moveup-icon{

        right: 12px;

        bottom: 12px;

        width: 37px;

        height: 37px;

    }



}



/* Appear animations */

@keyframes appearwriting{

    from{

        opacity: 0;

        transform: translateY(15px);

    }

    to{

        opacity: 1;

        transform: translateY(0px);

    }

}


.fade-in {

    opacity: 0;

    transform: translateY(15px);

    transition: opacity 0.4s ease-out, transform 0.4s ease-out;

}



.fade-in.appear {

    opacity: 1;

    transform: translateY(0);

}