/*---------------------------------

FONTOVI

----------------------------------*/


@font-face{

font-family:"Dream";

src:url("../fonts/Dream\ Orphans.otf") format("opentype");

}
@font-face{

font-family:"Timeless";

src:url("../fonts/Timeless.ttf") format("opentype");

}
/*--------------------------------*/

:root{

--plava:#b1bacb;

--krem:#faefe0;

--tekst:#323232;

}

/*--------------------------------*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Timeless";

color:var(--tekst);

background:white;

overflow-x:hidden;

}

/*--------------------------------*/

.container{

width:90%;

max-width:1250px;

margin:auto;

}

/*--------------------------------*/

header{

position:sticky;

top:0;

z-index:1000;

background:rgba(177,186,203,.95);

backdrop-filter:blur(8px);

}

.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo img{

height:70px;

}

.nav-links{

display:flex;

gap:40px;

list-style:none;

}

.nav-links a{

text-decoration:none;

color:#faefe0;

font-size:18px;

transition:.3s;

}

.nav-links a:hover{

opacity:.7;

}

.active{

border-bottom:2px solid white;

}

/*--------------------------------*/

.hero{

background:#b1bacb;

display:flex;

align-items:center;

justify-content:center;

gap:0;

padding:100px 8%;

min-height:90vh;

overflow:hidden;

}

.hero-content{

width:40%;

position:relative;

z-index:3;

margin-left:-40px;

}

.hero h1{

font-family:"Dream";

font-size:110px;

color:#faefe0;

font-weight:normal;

}

.hero h2{

font-size:40px;

font-weight:400;

color:#faefe0;

margin-top:20px;

}

.hero-image{

width:42%;

display:flex;

justify-content:flex-end;

margin-right:-90px;

z-index:2;

}

.hero-image img{

width:100%;

max-width:620px;

animation:float 5s ease-in-out infinite;

}
/*--------------------------------*/

.home-about{

padding:120px 0;

background:white;

}

.about-text{

max-width:700px;

margin:auto;

text-align:center;

}

.about-text h2{

font-size:48px;

margin-bottom:30px;

}

.about-text p{

font-size:20px;

line-height:1.8;

margin-bottom:45px;

}

.button{

display:inline-block;

padding:16px 40px;

background:#b1bacb;

color:white;

border-radius:50px;

text-decoration:none;

transition:.4s;

}

.button:hover{

transform:translateY(-4px);

}
/*==================================================

ANIMACIJE

===================================================*/

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0px);
}

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.fade{

opacity:1;

transform:none;

transition:1s;

}

.fade.show{

opacity:1;

transform:translateY(0);

}

/*==================================================

O NAMA NA POČETNOJ

===================================================*/

.home-about{

background:white;

padding:140px 0;

}

.home-about .container{

display:flex;

justify-content:center;

align-items:center;

}

.about-text{

max-width:760px;

text-align:center;

animation:fadeUp 1.2s ease;

}

.about-text h2{

font-family:"Dream";

font-size:48px;

margin-bottom:35px;

font-weight:700;

color:#323232;

}

.about-text p{

font-size:18px;

line-height:1.9;

color:#323232;

margin-bottom:50px;

}

/*==================================================

GUMB

===================================================*/

.button{

display:inline-block;

padding:18px 46px;

border-radius:40px;

background:#b1bacb;

color:#faefe0;

text-decoration:none;

font-size:17px;

transition:.35s;

font-weight:600;


margin-top:20px;
}

.button:hover{

transform:translateY(-5px);

box-shadow:0 15px 30px rgba(0,0,0,.12);

}

/*==================================================

FOOTER

===================================================*/

footer{

background:#b1bacb;

padding:80px 0;

margin-top:100px;

}

.footer-grid{

display:grid;

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

gap:60px;

align-items:start;

}

.footer-grid h3{

font-family:"Dream";

font-size:52px;

font-weight:normal;

color:#faefe0;

margin-bottom:18px;

}

.footer-grid h4{

font-family:"Dream";

font-size:28px;

margin-bottom:20px;

color:#faefe0;

}

.footer-grid p{

font-size:15px;

line-height:2;

color:#faefe0;

}

.footer-grid a{

text-decoration:none;

color:#faefe0;

font-size:32px;

margin-right:18px;

transition:.3s;

}

.footer-grid a:hover{

opacity:.75;

transform:translateY(-4px);

}

/*==================================================

HAMBURGER

===================================================*/

.hamburger{

display:none;

cursor:pointer;

}

.hamburger span{

display:block;

width:30px;

height:3px;

background:#faefe0;

margin:6px 0;

transition:.4s;

}

/*==================================================

TABLET

===================================================*/

@media(max-width:992px){

.hero{

flex-direction:column;

text-align:center;

padding-top:80px;

}

.hero-content{

width:100%;

}

.hero-image{

width:100%;

margin-top:60px;

text-align:center;

}

.hero h1{

font-size:90px;

}

.hero h2{

font-size:34px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

}

/*==================================================

MOBITEL

===================================================*/

@media(max-width:768px){

.nav-links{

position:fixed;

right:-100%;

top:85px;

background:#b1bacb;

width:100%;

height:calc(100vh - 85px);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:45px;

transition:.5s;

}

.nav-links.active{

right:0;

}

.hamburger{

display:block;

}

.hero{

padding:70px 8%;

}

.hero h1{

font-size:64px;

}

.hero h2{

font-size:28px;

}

.hero-image img{

max-width:330px;

}

.about-text h2{

font-size:40px;

}

.about-text p{

font-size:17px;

}

.button{

padding:15px 35px;

}

.footer-grid h3{

font-size:44px;

}

.footer-grid h4{

font-size:24px;

}

}
/*======================================

O NAMA STRANICA

=======================================*/

.about-page{

background:#faefe0;

padding:120px 0;

min-height:80vh;

}

.about-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image{

text-align:center;

}

.about-image img{

width:100%;

max-width:500px;

border-radius:0;

box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.about-content h1{

font-family:"Dream";

font-size:48px;

color:#323232;

margin-bottom:35px;

}

.about-content p{

font-family:"Timeless";

font-size:18px;

line-height:1.9;

margin-bottom:20px;

color:#323232;

}

.about-content .button{

margin-top:20px;

}

@media(max-width:992px){

.about-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.about-image{

order:1;

}

.about-content{

order:2;

text-align:center;

}

.about-image img{

max-width:420px;

}

}
/*====================================

VIŠE O NAMA

=====================================*/

.more-about{

background:#faefe0;

padding:120px 0;

min-height:80vh;

}

.page-title{

font-family:"Dream";

font-size:48px;

text-align:center;

margin-bottom:70px;

color:#323232;

}

.about-team{

display:grid;

grid-template-columns:1fr 420px 1fr;

gap:50px;

align-items:center;

margin-top:70px;

}

.team-photo img{

width:100%;

display:block;

}

.bio-card{

background:#faefe0;

padding:40px;

border:2px solid #323232;

border-radius:0;

transition:.3s;

display:flex;

flex-direction:column;

justify-content:flex-start;

min-height:360px;

position:relative;

}
.bio-card:hover{

transform:translateY(-5px);

box-shadow:8px 8px 0 #323232;

}

.bio-card:hover::after{

top:20px;

left:20px;

right:-20px;

bottom:-20px;

}

.bio-card h2{

margin-bottom:20px;
font-size:30px;
text-align:center;

}
@media(max-width:900px){

.bio-grid{

grid-template-columns:1fr;

}

.bio-card{

padding:35px;

}

}
/*====================================

USLUGE

=====================================*/

.services-page{

background:#b1bacb;

padding:120px 0;

min-height:85vh;

}

.services-page .page-title{

color:#faefe0;

margin-bottom:70px;

}

.services-grid{

display:grid;

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

gap:35px;

align-items:stretch;

margin-top:50px;

}

.service-card{

background:#faefe0;

padding:40px;

border:2px solid #323232;

border-radius:0;

transition:.3s;

display:flex;

flex-direction:column;

justify-content:flex-start;

min-height:360px;

}

.service-card:hover{

transform:translateY(-5px);

box-shadow:8px 8px 0 #323232;

}

.service-card h2{

font-family:"Dream";
font-size:30px;
margin-bottom:25px;
color:#323232;
text-align:center;

}

.service-card ul{

list-style:none;

padding:0;

}

.service-card li{

font-size:18px;

line-height:2;

color:#323232;

position:relative;

padding-left:22px;

}

.service-card li::before{

content:"•";

position:absolute;

left:0;

color:#b1bacb;

font-size:22px;

}

@media(max-width:900px){

.services-grid{

grid-template-columns:1fr;

}

.service-card{

min-height:auto;

padding:35px;

}

}
.footer-illustration{

display:block;
width:180px;
margin-top:30px;
margin-left:auto;

}

footer{

    position:relative;

    overflow:hidden;

}

/*=======================================
MSK STRANICA
=======================================*/

.msk-page{

background:#faefe0;

padding:120px 0;

min-height:80vh;

}
.msk-first-section{

width:100%;

margin-bottom:100px;

}

.msk-first-section h1{

font-family:"Dream";

font-size:48px;

color:#323232;

margin-bottom:35px;

text-align:center;

}

.msk-first-section p{

font-family:"Timeless";

font-size:18px;

line-height:1.9;

margin-bottom:20px;

color:#323232;

}

.msk-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:start;

}

.msk-image{

text-align:center;

}

.msk-image img{

width:100%;

max-width:500px;

border-radius:0;

box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.msk-content h1{

font-family:"Dream";

font-size:48px;

color:#323232;

margin-bottom:35px;

text-align:center;

}

.msk-content p{

font-family:"Timeless";

font-size:18px;

line-height:1.9;

margin-bottom:20px;

color:#323232;

}


/*=======================================
DRUGI DIO MSK STRANICE
=======================================*/

.msk-second-section{

margin-top:100px;

width:100%;

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:start;

}

.msk-second-section .msk-image{

grid-column:1;

}

.msk-second-section .msk-second-content{

grid-column:2;

}

.msk-second-section h2{

font-family:"Dream";

font-size:42px;

color:#323232;

margin-bottom:35px;

text-align:center;

}

.msk-second-section p{

font-family:"Timeless";

font-size:18px;

line-height:1.9;

color:#323232;

margin-bottom:20px;

text-align:left;

}


/*=======================================
MOBITEL
=======================================*/

@media(max-width:992px){

.msk-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.msk-image{

order:1;

}

.msk-content{

order:2;

text-align:center;

}

.msk-image img{

max-width:420px;

}

.msk-second-section{

grid-template-columns:1fr;

gap:50px;

}

.msk-second-section .msk-image{

grid-column:1;

}

.msk-second-section .msk-second-content{

grid-column:1;

}

}
/*======================================

NADOLAZEĆI DOGAĐAJI

=======================================*/

.events-page{

background:#faefe0;
padding:120px 0;
min-height:85vh;

}

.events-page .page-title{

font-family:"Dream";
font-size:48px;
font-weight:700;
color:#323232;
text-align:center;
margin-bottom:80px;

}

.events-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
align-items:start;

}

/*==============================*/

.event-card{

position:relative;

background:#faefe0;

border:2px solid #323232;

padding:35px;

transition:.35s;

cursor:default;

}

.event-card .button{

display:block;

width:max-content;

margin-left:auto;

margin-right:auto;

}

.event-card::after{

content:"";

position:absolute;

top:12px;

left:12px;

width:100%;

height:100%;

border:2px solid #323232;

z-index:-1;

transition:.35s;

}

.event-card:hover{

transform:translate(-6px,-6px);

}

.event-card:hover::after{

top:20px;

left:20px;

}

/*==============================*/

.event-image{

width:100%;
height:230px;
border:2px dashed #b1bacb;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:28px;
background:white;

}

.event-image img{

width:100%;
height:100%;
object-fit:cover;

}

/*==============================*/

.event-card h2{

font-family:"Dream";
font-size:24px;
font-weight:700;
color:#323232;
margin-bottom:14px;
text-align:center;

}

.event-date{

font-family:"Dream";
font-size:16px;
font-weight:600;
color:#323232;
margin-bottom:18px;

}

.event-card p{

font-family:"Timeless";
font-size:16px;
line-height:1.8;
color:#323232;

}

/*==============================

ANIMACIJA

===============================*/


/*==============================

TABLET

===============================*/

@media(max-width:992px){

.events-grid{

grid-template-columns:1fr 1fr;

}

.event-image{

height:220px;

}

}

/*==============================

MOBITEL

===============================*/

@media(max-width:768px){

.events-page{

padding:90px 0;

}

.events-page .page-title{

font-size:40px;
margin-bottom:55px;

}

.events-grid{

grid-template-columns:1fr;

gap:35px;

}

.event-card{

padding:28px;

}

.event-image{

height:210px;

}

}
/*======================================

CJENIK

=======================================*/

.price-page{

background:#b1bacb;
padding:120px 0;
min-height:85vh;

}

.price-page .page-title{

font-family:"Dream";
font-size:48px;
font-weight:700;
color:#faefe0;
text-align:center;
margin-bottom:80px;

}

/*======================================*/

.price-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
column-gap:60px;
row-gap:45px;
align-items:start;

}

/*======================================*/

.price-card{

position:relative;

background:#faefe0;

padding:40px;

border:2px solid #323232;

transition:.35s;

cursor:default;

min-height:230px;

display:flex;

flex-direction:column;

justify-content:flex-start;

}

/*======================================

ISTI HOVER KAO USLUGE

=======================================*/

.price-card::after{

content:"";

position:absolute;

top:12px;

left:12px;

width:100%;

height:100%;

border:2px solid #323232;

z-index:-1;

transition:.35s;

}

.price-card:hover{

transform:translate(-6px,-6px);

}

.price-card:hover::after{

top:20px;

left:20px;

}

/*======================================*/

.price-card h2{

font-family:"Dream";
font-size:30px;
font-weight:700;
color:#323232;
margin-bottom:24px;
line-height:1.3;
text-align:center;

}

.price-card p{

font-family:"Timeless";

font-size:17px;

line-height:1.9;

color:#323232;

}

/*======================================

TABLET

=======================================*/

@media(max-width:992px){

.price-grid{

column-gap:35px;

row-gap:35px;

}

.price-card{

padding:35px;

min-height:210px;

}

.price-card h2{

font-size:26px;

}

}

/*======================================

MOBITEL

=======================================*/

@media(max-width:768px){

.price-page{

padding:90px 0;

}

.price-page .page-title{

font-size:40px;

margin-bottom:55px;

}

.price-grid{

grid-template-columns:1fr;

gap:35px;

}

.price-card{

min-height:auto;

padding:30px;

}

.price-card h2{

font-size:24px;

}

.price-card p{

font-size:16px;

}

}
.service-card .button{

align-self:center;

width:auto;

padding:14px 28px;

}
/*======================================
STAVKE U CJENIKU
=======================================*/

.price-list{

list-style:none;

padding:0;

margin:0;

}

.price-list li{

position:relative;

padding-left:22px;

margin-bottom:18px;

font-family:"Timeless";

font-size:17px;

line-height:1.7;

color:#323232;

}

.price-list li::before{

content:"•";

position:absolute;

left:0;

font-size:22px;

color:#b1bacb;

}

.price-list strong{

display:block;

font-family:"Timeless";

font-size:18px;

font-weight:700;

margin-bottom:3px;

}

.price-list span{

display:block;

font-family:"Timeless";

font-size:16px;

}
/*======================================
NOVA STRANICA
=======================================*/

.new-page{

background:#b1bacb;

padding:120px 0;

min-height:85vh;

}


/*======================================*/

.new-page-title{

font-family:"Dream";

font-size:48px;

font-weight:700;

color:#faefe0;

text-align:center;

margin-bottom:25px;

}


/*======================================*/

.new-page-intro{

font-family:"Timeless";

font-size:18px;

line-height:1.8;

color:#faefe0;

text-align:center;

margin-bottom:70px;

}


/*======================================*/

.new-page-cards{

display:grid;

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

gap:50px;

}



/*======================================*/

.new-page-card{

position:relative;

background:#faefe0;

padding:40px;

border:2px solid #323232;

transition:.3s;

cursor:default;

}


/*======================================

HOVER EFEKT KAO NA USLUGAMA

=======================================*/

.new-page-card:hover{

transform:translateY(-5px);

box-shadow:8px 8px 0 #323232;

}


/*======================================*/

.new-page-card h2{

font-family:"Dream";

font-size:30px;

font-weight:700;

color:#323232;

margin-bottom:20px;

text-align:center;

}


.new-page-card p{

font-family:"Timeless";

font-size:17px;

line-height:1.9;

color:#323232;

}

/*======================================
MOBITEL
=======================================*/

@media(max-width:768px){

.new-page{

padding:90px 0;

}

.new-page-title{

font-size:40px;

}

.new-page-intro{

font-size:17px;

margin-bottom:50px;

}

.new-page-cards{

grid-template-columns:1fr;

gap:35px;

}

.new-page-card{

padding:30px;

}

.new-page-card h2{

font-size:25px;

}

}

/*====================================
GOVORNO JEZICNE VJEZBE STRANICA

=======================================*/

.govorno-jezicne-vjezbe-page{

background:#faefe0;

padding:120px 0;

min-height:80vh;

}

.govorno-jezicne-vjezbe-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.govorno-jezicne-vjezbe-image{

text-align:center;

}

.govorno-jezicne-vjezbe-image img{

width:100%;

max-width:500px;

border: radius 0px;

box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.govorno-jezicne-vjezbe-content h1{

font-family:"Dream";

font-size:48px;

color:#323232;

margin-bottom:35px;

text-align:center;

}

.govorno-jezicne-vjezbe-content p{

font-family:"Timeless";

font-size:18px;

line-height:1.9;

margin-bottom:20px;

color:#323232;

}

.govorno-jezicne-vjezbe-content .button{

margin-top:20px;

}

@media(max-width:992px){

.govorno-jezicne-vjezbe-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.govorno-jezicne-vjezbe-image{

order:1;

}

.govorno-jezicne-vjezbe-content{

order:2;

text-align:center;

}

.govorno-jezicne-vjezbe-image img{

max-width:420px;

}

}
/*====================================


FOTOGRAFIJA SARE I MATIJE

=====================================*/

.team-photo{

text-align:center;
margin-bottom:70px;

}

.team-photo img{

display:block;
margin:auto;
max-width:650px;
width:100%;
height:auto;

}
@media (max-width:1000px){

    .about-team{

        grid-template-columns:1fr;

    }

    .team-photo{

        order:-1;

        margin-bottom:40px;

    }

}