/*
 Theme Name: Divi Child
 Theme URI: https://elegantthemes.com
 Description: Ett barntema för Divi
 Author: Provectus
 Template: Divi
 Version: 1.0.0
*/

html {
    scroll-behavior: smooth;
}

/* =====================================
   PORTFOLIO SLIDER
   ===================================== */

.portfolio-slider {
    position: relative;
    width: 100%;
    display: block;
}


/* =====================================
   VIEWPORT
   ===================================== */

.portfolio-slider__viewport {
    width: 100%;
    overflow: hidden;
}


/* =====================================
   TRACK
   ===================================== */

.portfolio-slider__track {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* =====================================
   SLIDE
   ===================================== */

.portfolio-slider__slide {
    flex: 0 0 auto;
	width: fit-content;
    max-width: 100%;
	/*width: auto;*/
}


/* =====================================
   IMAGE
   ===================================== */

.portfolio-slider__image-wrapper {
    height: 45vh;

    display: flex;
    align-items: center;
}


.portfolio-slider__image {
    display: block;

    width: auto;
    height: 100%;

    max-width: none;

    object-fit: contain;
}


/* =====================================
   TITLE
   ===================================== */

.portfolio-slider__title {
    margin-top: 10px;

    text-align: center;

    color: #141443;

    font-size: 20px;
    line-height: 1.4;
	
	white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
	
	font-family: "bebas neue";
}


/* =====================================
   ARROWS – OVANPÅ BILDERNA
   ===================================== */

.portfolio-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    z-index: 10;

    width: 50px;
    height: 70px;

    padding: 0;

    border: none;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    cursor: pointer;

    font-size: 0;

    transition: opacity 0.2s ease;
}


/* Vänster < */

.portfolio-slider__arrow--prev {
    left: 0;
}

.portfolio-slider__arrow--prev::before {
    content: "<";

    font-size: 32px;
    font-weight: 300;
    line-height: 1;

    color: #fff;
}


/* Höger > */

.portfolio-slider__arrow--next {
    right: 0;
}

.portfolio-slider__arrow--next::before {
    content: ">";

    font-size: 32px;
    font-weight: 300;
    line-height: 1;

    color: #fff;
}


.portfolio-slider__arrow:hover {
    opacity: 0.5;
}

/* =====================================
   MOBILE
   ===================================== */

@media (max-width: 767px) {

    .portfolio-slider__track {
        gap: 5px;
    }

    /*.portfolio-slider__image-wrapper {
        height: 55vh;
    }*/

    .portfolio-slider__arrow {
        width: 38px;
        height: 55px;
    }

    .portfolio-slider__arrow--prev::before,
    .portfolio-slider__arrow--next::before {
        font-size: 25px;
    }

    .portfolio-slider__title {
        margin-top: 6px;
        font-size: 16px;
    }

}

@media (max-width: 850px) {

	.portfolio-slider__track {
        gap: 5px;
    }
	
    .portfolio-slider__image-wrapper {
        height: 35vh !important;
    }
	
	.portfolio-slider__image {
		display: block;

		width: auto;
		height: 60%;

		max-width: none;

		object-fit: contain;
	}

}

@media (max-width: 1150px) {
	
	.portfolio-slider__title {
		margin-top: 6px;

		text-align: center;

		color: #000;

		font-size: 14px;
		line-height: 1.4;
	}

	.portfolio-slider__track {
        gap: 5px;
    }
	
    .portfolio-slider__image-wrapper {
        height: 30vh !important;
    }
	
	.portfolio-slider__image {
		display: block;

		width: auto;
		height: 100%;

		max-width: none;

		object-fit: contain;
	}

}

/* =====================================
   PORTRAIT SLIDER
   ===================================== */

.portrait-slider {
    position: relative;
    width: 100%;
    display: block;
}


/* =====================================
   VIEWPORT
   ===================================== */

.portrait-slider__viewport {
    width: 100%;
    overflow: hidden;
}


/* =====================================
   TRACK
   ===================================== */

.portrait-slider__track {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* =====================================
   SLIDE
   ===================================== */

.portrait-slider__slide {
    flex: 0 0 auto;

    width: 25vw;
    max-width: 355px;

    aspect-ratio: 3 / 4;

    position: relative;
}


/* =====================================
   IMAGE WRAPPER
   ===================================== */

.portrait-slider__image-wrapper {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* =====================================
   IMAGE
   ===================================== */

.portrait-slider__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =====================================
   DARK TINT
   ===================================== */

.portrait-slider__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background: rgba(0, 0, 0, 0.45);

    pointer-events: none;
}


/* =====================================
   CONTENT
   ===================================== */

.portrait-slider__content {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 2;

    width: calc(100% - 40px);

    text-align: center;

    color: #fff;

    pointer-events: none;
}


/* =====================================
   TITLE
   ===================================== */

.portrait-slider__title {
    font-weight: 400;

    font-size: 26px;
    line-height: 1.3;
	font-family: "bebas neue";
}


/* =====================================
   TEXT
   ===================================== */

.portrait-slider__text {
    margin-top: 10px;

    font-size: 16px;
    line-height: 1.5;
}


/* =====================================
   ARROWS
   ===================================== */

.portrait-slider__arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    width: 50px;
    height: 70px;

    padding: 0;

    border: none;

    background: transparent;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    cursor: pointer;

    font-size: 0;

    transition: opacity 0.2s ease;
}


/* =====================================
   PREV
   ===================================== */

.portrait-slider__arrow--prev {
    left: 0;
}

.portrait-slider__arrow--prev::before {
    content: "<";

    font-size: 32px;
    font-weight: 300;

    line-height: 1;

    color: #fff;
}


/* =====================================
   NEXT
   ===================================== */

.portrait-slider__arrow--next {
    right: 0;
}

.portrait-slider__arrow--next::before {
    content: ">";

    font-size: 32px;
    font-weight: 300;

    line-height: 1;

    color: #fff;
}


.portrait-slider__arrow:hover {
    opacity: 0.5;
}


/* =====================================
   DISABLED ARROWS
   ===================================== */

.portrait-slider__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}


/* =====================================
   MOBILE
   ===================================== */

@media (max-width: 767px) {

    .portrait-slider__track {
        gap: 5px;
    }


    .portrait-slider__slide {
        width: 70vw;
        max-width: none;

        aspect-ratio: 3 / 4;
    }


    .portrait-slider__content {
        width: calc(100% - 30px);
    }


    .portrait-slider__title {
        font-size: 20px;
    }


    .portrait-slider__text {
        margin-top: 8px;

        font-size: 14px;
        line-height: 1.45;
    }


    .portrait-slider__arrow {
        width: 38px;
        height: 55px;
    }


    .portrait-slider__arrow--prev::before,
    .portrait-slider__arrow--next::before {
        font-size: 25px;
    }

}

@media (min-width: 767px) and (max-width: 1150px) {

    .portrait-slider__track {
        gap: 5px;
    }


    .portrait-slider__slide {
        width: 40vw;
        max-width: none;

        aspect-ratio: 3 / 4;
    }


    .portrait-slider__content {
        width: calc(100% - 30px);
    }


    .portrait-slider__title {
        font-size: 20px;
    }


    .portrait-slider__text {
        margin-top: 8px;

        font-size: 14px;
        line-height: 1.45;
    }


    .portrait-slider__arrow {
        width: 38px;
        height: 55px;
    }


    .portrait-slider__arrow--prev::before,
    .portrait-slider__arrow--next::before {
        font-size: 25px;
    }

}

/* Container och rad-layout */
.cf7-custom-row {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

@media (min-width: 600px) {
    .cf7-custom-row {
        flex-direction: row;
    }
    .cf7-custom-col {
        flex: 1;
    }
}

.cf7-custom-field-wrapper {
    margin-bottom: 0.5rem;
}

/* Labels */
.cf7-custom-row label,
.cf7-custom-field-wrapper label {
    display: block;
    font-family: sans-serif;
    font-size: 1rem;
    color: #333333;
    font-weight: 400;
}

/* Inmatningsfälten (Förnamn, Efternamn, Mail) */
.cf7-input {
    width: 100%;
    height: 34px;
    padding: 1rem 1rem !important;
    border: 1.5px solid #333333;
    border-radius: 50px; /* Helt kapselformad */
    font-size: 0.8rem;
    box-sizing: border-box;
    background-color: #ffffff;
    outline: none;
    -webkit-appearance: none; /* Tar bort standard iOS-styling */
}

/* Meddelanderutan (Textarea) */
.cf7-textarea {
    width: 100%;
    height: 70px;
    padding: 1rem 1rem;
    border: 1.5px solid #333333;
    border-radius: 15px; /* Balanserad rundning för en stor ruta */
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    background-color: #ffffff;
    outline: none;
    resize: none; /* Låser storleken */
    -webkit-appearance: none;
}

/* Skicka-knappen */
.cf7-custom-submit-wrapper {
    margin-top: 1rem;
}

.cf7-custom-submit {
    width: 100%;
    height: 34px;
    background-color: #111642; /* Mörk marinblå från bilden */
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-appearance: none;
}

.cf7-custom-submit:hover {
    background-color: #1a215e;
}

.cf7-custom-row br,
.cf7-custom-field-wrapper br,
.cf7-custom-submit-wrapper br {
    display: none;
}

.custom-line { 
	width: 60px; 
	height: 0.5px; 
	background-color: #000; 
	margin: 30px 0; 
}

@media (max-width: 767px) {
	.custom-line {
		display: none !important;
	}
}