/*--------------------------------------------------------------
Hero
--------------------------------------------------------------*/
body{
    overflow-x: hidden;
}
.page-we-do-websites .container-front-page-main{
padding: var(--space-8) var(--leading-6) var(--space-4) var(--space-4);
}

.page-we-do-websites .row-front-page-main.row-first{
    display: block;
}

.page-we-do-websites .row-front-page-main.row-first h1{
    font-family: var( --spectral-font);
    font-size: var(--text-4xl);
    line-height: var(--leading-4);
}
.page-we-do-websites .row-front-page-main.row-first  h2{
    max-width: 20ch;
    font-size: var(--text-xxl);
    line-height: var(--leading-6);
}

@media screen and (max-width: 1024px) {
    .page-we-do-websites.section-front-page-main{
     margin-bottom: var(--space-12);
    }
    
}
@media screen and (max-width: 800px) {
    .page-we-do-websites .row-front-page-main.row-first h1{
        font-size: var(--text-2xl);
    }
    .page-we-do-websites .row-front-page-main.row-first h2{
        font-size: var(--text-lg);
    }
}

/*--------------------------------------------------------------
Descripton
--------------------------------------------------------------*/
.izdelava-spletnih-strani-descripton{
    margin-top: 280px;
    max-width: var(--container-xl);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    margin-inline: auto;
}
.izdelava-spletnih-strani-descripton .container{
    max-width: 800px;
    margin-inline: unset;
}
@media screen and (min-width: 1180px) {
    .izdelava-spletnih-strani-descripton .container p:first-child{
        padding-left: 115px;
    }
}

.izdelava-spletnih-strani-descripton .container p{
    font-size: var(--text-xl);
    color: var(--color-text);
}
.izdelava-spletnih-strani-descripton .container h3{
    padding: var(--space-32) 0 var(--space-16) 0;
    font-size: var(--text-2xl);
    line-height: var(--leading-5);
}
.izdelava-spletnih-strani-descripton .container p:empty{
    display: none;
}
@media screen and (max-width: 1280px) {
    .izdelava-spletnih-strani-descripton .container h3{
        padding: var(--space-6) 0 var(--space-4) 0; 
    }
}
@media screen and (max-width: 1024px) {
    .izdelava-spletnih-strani-descripton{
     margin-top: unset;
    }

}

/*--------------------------------------------------------------
Grid cards
--------------------------------------------------------------*/
.izdelava-spletnih-strani-grid .container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-16);
    margin-block: var(--space-24) var(--space-32);
}
.izdelava-spletnih-strani-grid  .grid-item-wrapper{
    padding: var(--space-10) var(--space-6);
    box-shadow: 0px 3px 6px #00000029;
    transition: all ease-in 250ms;
}
.izdelava-spletnih-strani-grid .grid-item-wrapper h2{
    /* min-height: 120px; */
    color: var(--color-primary);
    font-size: var(--text-xxl);
    font-weight: 900;
    line-height: var(--leading-6);
    padding-block: var(--space-8) var(--space-4);
}
.izdelava-spletnih-strani-grid .grid-item-wrapper p:not():empty{
    font-size: var(--text-base);
    max-width: 95%;
    margin-bottom: var(--space-16);
}
.izdelava-spletnih-strani-grid  .grid-item-wrapper:hover{
    background-color: var(--color-gray-95);
}
@media screen and (max-width:1024px) {
    .izdelava-spletnih-strani-grid .container{
        margin-block: var(--space-16) var(--space-16);
        gap: var(--space-8);
    }
}
/*--------------------------------------------------------------
Slider - Projekti
--------------------------------------------------------------*/

.container-projects-wrapper{
    max-width: var(--container-5xl);
    margin-bottom: var(--space-16);
}
.project-inner-wrapper img{
    margin-left: -60px;
}
.project-content{
  margin-right: var(--space-20);
  margin-right: var(--space-16);
}
.project-inner-wrapper h3{
    margin-top: 60px;
    padding-left: 36px;
    font-size: var(--text-xxl);
}
.project-inner-wrapper p{
    padding-left: 36px;
    font-size: var(--text-sm);
}
@media screen and (max-width: 800px) {
    .project-content{
        margin-right: var(--space-6);
        margin-right: var(--space-6); 
    }
    .project-inner-wrapper h3{
        margin-top: var(--space-8);
        padding-left: 0;
        font-size: var(--text-xl);
    }
    .project-inner-wrapper p{
        padding-left: 0;
    }
}
/*--------------------------------------------------------------
CTA
--------------------------------------------------------------*/

.container-cta-projects{
    max-width: var(--container-5xl);
    margin-inline: auto;

}

/**/
/* url('/wp-content/uploads/2024/02/cta-projects.jpg ') */

.cta-projects-bg-with-img{
    min-height: 300px;
    max-width: 85%;
    background: var(--color-primary)  0% 0% no-repeat padding-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-left: var(--space-4);
    padding-right: var(--space-4);

}

/* .cta-projects-bg-with-img::before{
    content: "";
    display: block;
    width:100%;
    height: 100%;
    background-color: ;
} */

.cta-projects-bg-with-img h2{
    max-width: 470px;
    font-family: var(  --spectral-font);
    font-size: var(--text-xxl);
    line-height: var(--leading-6);
    color: var(--color-white);
}
.cta-projects-bg-with-img a{
    padding: var(--space-3) var(--space-6);
    border: 2px solid transparent;
    border-radius: 32px;
    background: var(--color-white);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-align: center;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-time);
    text-decoration: none;
}
.cta-projects-bg-with-img a:hover{
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
}
@media screen and (max-width: 1280px) {
    .cta-projects-bg-with-img{
        max-width: 100%;
    }
    .cta-projects-bg-white{
        display: none;
    }
}
@media screen and (max-width: 800px) {
    .cta-projects-bg-with-img{
        flex-direction: column;
        align-items: flex-start;
    }
    .cta-projects-bg-with-img h2{
        font-size: var(--text-lg);
    }
}
/*--------------------------------------------------------------
Why website
--------------------------------------------------------------*/
.why-webtim {
 margin: var(--space-32) auto;
}
.why-webtim-zig-zag .zig-zag-wrapper{
    display: flex;
    justify-content: space-between;
    position: relative;
}
.section-title-wrapper,.why-webtim-zig-zag .zig-zag-wrapper{
    margin-bottom: var(--space-16);
}
.zig-zag-img{
    flex: 0 60%;
}
.zig-zag-content{
    align-self: center;
    max-width: 800px;
    flex: 1 1 40%;
    padding: var(--space-8) var(--space-16) var(--space-16) var(--space-16);
    box-shadow: var(--box-shadows);
    margin-left: -25%;
    background-color: var(--color-white);
}
.why-webtim-zig-zag .zig-zag-wrapper:nth-child(even){
    flex-direction: row-reverse;
    
}
.why-webtim-zig-zag .zig-zag-wrapper:nth-child(even) .zig-zag-content{
    margin-left: unset;
    margin-right: -400px;
    text-align: right;
}
.why-webtim-zig-zag .zig-zag-wrapper:nth-child(even) .zig-zag-content__description{
    margin-right: 0;
    margin-left: auto;
}
.zig-zag-content__number{
    font-size: var(--text-2xl);
    line-height: var(--leading-6);
    color: var(--color-secondary);
}
.zig-zag-content__title{
    font-size: var(--text-xxl);
    line-height: var(--leading-5);
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.zig-zag-content__description{
    max-width: var(--container-sm);
    font-size: var(--text-lg);
    line-height: var(--leading-6);
    color: var(--color-gray-10);
    padding-bottom: unset;
}
@media screen and (max-width: 1280px) {
    .why-webtim {
        margin: var(--space-16) auto;
       }
       .zig-zag-img{
        flex:  0 50%;
       }
       .zig-zag-content{
        flex: 1 50%;
       }
    .why-webtim .zig-zag-content{
        margin-left: unset;
        padding: var(--space-8) var(--space-8) var(--space-4) var(--space-8);
    }
    .why-webtim-zig-zag .zig-zag-wrapper:nth-child(even) .zig-zag-content{
        margin-right: unset;
    }
}
@media screen and (max-width: 800px) {
    .zig-zag-wrapper,
    .why-webtim-zig-zag .zig-zag-wrapper:nth-child(even){
        flex-direction: column;
    }
    .why-webtim-zig-zag .zig-zag-wrapper:nth-child(even) .zig-zag-content{
        text-align: left;
    }
    .why-webtim .zig-zag-content{
        padding: var(--space-4);
    }
}
/*--------------------------------------------------------------
CTA Analysis
--------------------------------------------------------------*/
.cta-website-analysis .container{
    padding: var(--space-24) var(--space-32);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background: url('/wp-content/uploads/2024/02/ozadje.jpg') no-repeat center/cover;
}
.cta-website-analysis h2{
    font-family: var(--spectral-font);
    font-size: var(--text-2xl);
    color: var(--color-white);
    margin-bottom: var(--space-6);
}
.cta-website-analysis h3{
    max-width: 350px;
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    color: var(--color-white);
    margin-bottom: var(--space-8);
}
.cta-website-analysis a{
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    border-radius: 32px;
    color: var(--color-primary);
    padding: var(--space-5) var(--space-10);
    background-color: var(--color-white);
    text-decoration: none;
    transition: all linear 250ms;
}
.cta-website-analysis a:hover{
    color: var(--color-white);
    background-color: var(--color-secondary);
}
@media screen and (max-width: 800px) {
    .cta-website-analysis .container{
        padding: var(--space-12) var(--space-8);
    }
    
}
/*--------------------------------------------------------------
FAQ 
--------------------------------------------------------------*/
.wordpress-faq{
    background : linear-gradient(90deg, var(--color-gray-95) 75%, var(--color-white) 30%);
    margin-top:  var(--space-32) ;
    padding-top: var(--space-28) ;
    padding-bottom: var(--space-28)  ;
    position: relative;
}
.wordpress-faq .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-image-wrapper{
    position: absolute;
    top: -100px;
    right: 100px;
}
.wordpress-faq-inner-image{
    position: absolute;
    left: calc(75% + 200px);
    top: 50%;
    transform: translate(-75%, -50%);
}
.wordpress-faq h2{
    font-size: 32px;
    line-height: var(--leading-5);
    margin-bottom: var(--space-2);
}
.wordpress-faq h3{
    font-size: var(--text-xl);
    color: var(--color-secondary);
    line-height: var(--leading-5);
    margin-bottom: var(--space-6);
}
.wordpress-faq p{
    max-width: 420px;
    color: var(--color-text);
    font-size: var(--text-xxl);
    line-height: var(--leading-6);
}


.faq-section{
    max-width: var(--container-xl);
    margin-inline: auto;
    margin-bottom: var(--space-24);
    transform: translateY(-25px);
    position: relative;
    z-index: 2;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
.faq-section .faq-sub-title{
    font-size: var(--text-sm);
    color: var( --color-gray-10);
}

.faq-section .faq-title{
    font-size: var(--text-xxl);
    color: var(--color-primary);
}
.faq-content{
    display: grid;
    opacity: 0;
    font-size: var(--text-lg);
    color: var(--color-text);
    padding-top: var(--space-8);
    padding: 0 var(--space-12) var(--space-12) var(--space-12) ;
    transition: all linear 150ms;
}
details{
    max-width: 820px;
    box-shadow: 0px 3px 6px #00000029;
    margin-bottom: var(--space-6);
    background-color: #fff;
    overflow: hidden;
}
summary::marker{
   content: ""; 
}
summary{
    cursor: pointer;
    padding: var(--space-12);
    display: flex;
    justify-content: space-between;
}
.icon{
    align-self: flex-end;
    padding-bottom: 10px;
}
.icon::after,
.icon::before{
    content: "";
    display: block;
    height: 3px;
    width: 15px;
    background-color: var(--color-secondary);
    transition: all ease-in 150ms;
}
.icon::before{
    opacity: 1;
    rotate: 90deg;
    margin-bottom: -3px;
    
}
details[open] .icon::before{
   opacity: 0;
}
details[open] .faq-content{
    opacity: 1;
}
@media screen and (max-width: 1360px) {
    .faq-image-wrapper{
        position: static;
    }
}
@media screen and (max-width: 1280px) {

    .wordpress-faq{
        margin-top: var(--space-16);
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }
}
@media screen and (max-width: 800px) {
    .wordpress-faq{
        background: linear-gradient(90deg, var(--color-gray-95) 100%, var(--color-white) 0%);

    }

    .faq-content,
    summary{
        padding: var(--space-4);
    }
    .faq-image-wrapper{
       display: none;
    }
}
/*--------------------------------------------------------------
PACKAGES
--------------------------------------------------------------*/
.webtim-paketi{
 padding-bottom: var(--space-32);
}
.webtim-paketi-title-wrapper{
    text-align: center;
    margin-bottom: 140px;
}
.webtim-paketi-title-wrapper h2{
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-5);
    color: var(--color-secondary);
}
.webtim-paketi-title-wrapper h3{
    font-size: var(--text-2xl);
    line-height: var(--leading-5);

}
.webtim-paketi-wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    /* gap: var(--space-4); */
}
.webtim-paketi-wrapper :is(.small-packet ,.medium-packet ,.premium-packet){
    max-width: 450px;
    background: url(../../img/red.svg) no-repeat top/contain;
    position: relative;
 }
 .webtim-paketi-wrapper :is(.small-packet ,.medium-packet ,.premium-packet)::after{
    content: "";
    width: 90%;
    min-height: 240px;
    height: 100%;
    background-color: var(--background-color);
    position: absolute;
    top: 10px;
    left: 25px;
    z-index: -1;
    
    box-shadow: var(--box-shadows);
 }
.packet-price{
 width: 170px;
 height: 170px;
 background-color: var(--color-white);
 color: var(--color-primary);
 border-radius: 50%;
 border: 1px solid var(--color-primary);
 display: grid;
 place-content: center;
 place-items: center;
 font-size: var(--text-sm);
 font-weight: var(--font-bold);
 margin-inline: auto;
 transform: translateY(-80px);
}
.packet-price span{
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
}

.packet-title{
    font-family: var(--spectral-font);
    font-size: var(--text-2xl);
    text-align: center;
    color: var(--color-white);
    transform: translateY(-40px);
}
.packet-description{
    font-size: var(--text-lg);
  padding: var(--space-18) var(--space-16) var(--space-6)  var(--space-16);
  text-align: center;
}

.webtim-paketi-wrapper .medium-packet::after{
    background-color: var(--color-primary);
 } 
 .medium.packet-price{
    background-color: var(--color-primary);
    color: var(--color-white);
 }
 .webtim-paketi-wrapper .medium-packet .packet-description{
    color: var(--color-white);
 }

 @media screen and (max-width: 1280px) {
    .webtim-paketi{
        padding-bottom: var(--space-16);
    }
    .webtim-paketi-wrapper{
        place-items: center;
        gap: 80px;
    }
    .packet-price{
        transform: translateY(-60px);
    }
    .packet-title{
        font-size: var(--text-2xl);
    }
 }
 @media screen and (max-width: 800px) {
    .webtim-paketi{
        padding-bottom: var(--space-8);
    }
    .webtim-paketi-wrapper{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        /* gap: var(--space-4); */
    }
    .packet-title{
        font-size: var(--text-xxl);
        transform: translateY(-30px);
    }
    .packet-description{
        padding: var(--space-12) var(--space-4);
    }
 }