@media (max-width: 991px){

    body,td,div {font-size:18px;}

    /* MOBILE NAVBAR */
    .navbar{position: relative;padding: 0;z-index: 9999; margin-top:30px;}
    /* HEADER */
    .navbar .navbar-header{position: relative;display:flex;justify-content:space-between;align-items:center;width:100%;z-index:10002;}
    /* LOGO */
    .navbar .navbar-brand{ width:170px; display:inline-block; position:relative; z-index:10002;transition:opacity .25s ease;}
    .navbar .navbar-brand img{width:100%;display:block;}
    /* hide logo when menu is open */
    .navbar:has(.navbar-collapse.show) .navbar-brand{opacity:0;visibility:hidden;}
    /* TOGGLER */
    .navbar .navbar-toggler{position:absolute;top:-15px; right:0;width:56px;height:56px;border:none;border-radius:50%; background:var(--green-bg); display:flex; align-items:center; justify-content:center; padding:0; z-index:10003; transition:all .35s ease;}
    .navbar .navbar-toggler:focus{ box-shadow:none;}
    /* hamburger */
    .navbar-toggler-icon{background-image:none;position:relative; width:22px; height:2px; background:#fff; transition:all .3s ease;}
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after{ content:"";position:absolute;left:0;width:22px;height:2px; background:#fff; transition:all .3s ease;}
    .navbar-toggler-icon::before{top:-7px;}
    .navbar-toggler-icon::after{ top:7px;}
    /* OPEN STATE */
    .navbar-toggler:not(.collapsed){background:#f4f1ea;}
    .navbar-toggler:not(.collapsed) .navbar-toggler-icon{ background:transparent;}
    .navbar-toggler:not(.collapsed) .navbar-toggler-icon::before{ transform:rotate(45deg); top:0; background:var(--black);}
    .navbar-toggler:not(.collapsed) .navbar-toggler-icon::after{ transform:rotate(-45deg); top:0; background:var(--black);}
    /* COLLAPSE PANEL */
    .navbar .navbar-collapse{position:absolute;inset:0;width:100%; min-height:100vh; padding:110px 32px 60px; background:#dcd7e8; border-radius:28px 28px 0 0; z-index:10001; opacity:0; visibility:hidden; transform:translateY(-10px); transition: opacity .35s ease,transform .35s ease,visibility .35s ease;}
    .navbar .navbar-collapse.collapsing{display:block;height:auto !important;}
    .navbar .navbar-collapse.show{ opacity:1; visibility:visible; transform:translateY(0);}
    /* NAV */
    .navbar-nav{ width:100%;display:flex;flex-direction:column;align-items:center;height:auto;}
    .navbar-nav .nav-item{width:100%;margin-bottom:28px;}
    /* BUTTONS */
    .navbar-nav a.nav-link,
    .navbar-expand-lg .navbar-nav a.nav-link{  width:100%; max-width:270px; height:60px; line-height:60px; margin:0 auto; padding:0 20px; text-align:center; font-size:18px; font-weight:700; color:var(--white); transition:all .3s ease;}
    .navbar-nav a.nav-link.oprojektu{ background:var(--orange-bg); border-bottom-left-radius:28px;}
    .navbar-nav a.nav-link.vprasalnik{ background:var(--violet);border-top-left-radius:28px;}
    /* EMAIL */
    .navbar-nav .nav-item-contacts{margin-top:18px; }
    .navbar-nav .nav-item-contacts a{ width:64px; height:64px; line-height:64px;  background:var(--green-bg); border-radius:50%; transition:all .3s ease;}
    /* collapse panel */
    .navbar .navbar-collapse{position:absolute;top:0;left:0;width:100%;min-height:100vh;padding:110px 32px 60px;
    /* gradient background */
    background-image:linear-gradient(to top,#e2f3ee,#faf9f6,#e2e0f6);
    border-radius:28px; z-index:10001; opacity:0; visibility:hidden;transform:translateY(-10px);transition: opacity .35s ease, transform .35s ease, visibility .35s ease;}
    /* opened state */
    .navbar .navbar-collapse.show{opacity:1; visibility:visible;transform:translateY(0);}


    p.intro{font-weight:bold; font-size:26px; line-height:36px;}

    /*BANNER*/
    section.banner{height:auto; margin-top:10px;}
    section.banner .container {width:96%; max-width:96%; height:auto; margin:0 auto 100px auto; padding-bottom:60px; background-image:linear-gradient(to top, #e2f3ee, #faf9f6, #e2e0f6); border-radius:20px;  position:relative;}
    section.banner .container .row {width:96%; max-width:96%; height:auto;}
    section.banner .img{padding:0;}
    section.banner .btxt{width:100%;}
    section.banner h1{font-size:36px; line-height:44px; margin:40px 0 30px;}

    section.banner .survey-button.mobile,.survey-button.mobile{display:block;}
    section.banner .survey-button.desktop{display:none;}
    section.banner .survey-button p{text-align:left; padding:40px 0; font-size:14px;}
    section.banner .survey-button a,.survey-button a{width:100%; height:60px; line-height:60px; font-size:18px; border-top-left-radius:20px; margin:0 auto;}

    section.banner .survey-button a::after,.survey-button a::after{content:"\f178";margin-left:17px;}

    section.banner .txtblock.desktop{display:none;}
    section.banner .txtblock.mobile{display:flex; font-size:14px; max-width:100%; gap:20px; margin-top:30px;}
    section.banner .txtblock .content {padding: 30px 20px 0px 25px; font-size: 1rem; line-height: 1.5;}
    
    section.banner .illustration1{display:none;}
    section.banner .illustration2{display:none;}
    section.banner .illustration3{display:none;}
    section.banner .illustration4{display:none;}

    section.banner .millustration1{display:block;}
    section.banner .millustration2{display:block; position:absolute; bottom:-110px; right:10px; width:auto;}
    section.banner .millustration3{display:block; position:absolute; bottom:-132px; left:10px; width:auto;}
    section.banner .millustration4{display:block; position:absolute; bottom:-32px; left:135px; width:auto;}

    /*INTRO BLOCK 1, BLOCK 2*/
    section.block{padding:90px 0;}
    section.imgtxt .container {width:100%; max-width:100%;}


    /*INTRO BLOCK 1, BLOCK 2*/
    section.block{padding:40px 0;}
    section.imgtxt .container {width:96%; max-width:96%;}
    section.imgtxt .container .row {width:96%; max-width:96%;}
    section.txtimg .container {width:96%; max-width:96%;}
    section.txtimg .container .row {width:96%; max-width:96%;}
    section.block.imgtxt .img{ height:320px; background-size:274px 322px;}
    section.block.txtimg .img{ height:350px; background-size:274px 322px;}
    section.block.txtimg .img{/*background-position:top right;*/margin-top:50px; }
    section.block.txtimg .img img{}
    section.block.block .img img.photo{position:absolute; border-radius:30px; width:215px;}
    section.block.imgtxt .img img.photo{left:20px; top:14px;}
    section.block.txtimg .img img.photo{right:15px; top:24px;}
    section.block.imgtxt .img img.illustration{position:absolute; left:170px; bottom:-30px; width:189px; }
    section.block.txtimg .img img.illustration{position:absolute; left:0; bottom:-15px; width:230px;}
    section.block.imgtxt .txt{padding:40px 0 0 0;}
    section.block.txtimg .txt{padding:0px 0 0 0;}

    /*INNER - o projektu*/
    section.banner.inner{height:auto;}
    section.banner.inner .container {height:auto;}
    section.banner.inner .container .row {height:auto;}
    section.banner.inner .illustration5{position:static; width:100%;}  

    section.cilji{padding:0;}
    section.cilji .container {width:98%; max-width:98%; position:relative;}
    section.cilji .container .row {width:98%; max-width:98%;}
    section.cilji .illustration{position:static; margin-top:20px;}

    /*polygons*/
    .shape-border {width:90%; height:320px;}
    .shape-inner {padding:50px;}


    section.block.imgtxt.inner .img{height:300px; background:none; position:relative;}
    section.block.imgtxt.inner .txt{padding:70px 0 0 0;}
    section.block.imgtxt.inner .txt p{font-size:18px; line-height:26px;}
    section.block.txtimg.inner .img{ background:none; height:auto;}
    section.block.imgtxt.inner .img img.illustration{position:absolute; left:170px; bottom:-70px; width:170px; }

    section.block.consumerdemand{padding:0;}
    section.block.consumerdemand .illustration,section.block.txtimg.consumerdemand .img img.illustration{position:static; width:100%;}

    /*INNER SURVEY*/
    section.banner.inner.survey{height:auto;}
    section.banner.inner.survey .container{height:auto;}

    /*SURVEY*/
    section.banner p.label{display:none;}
    .icon { width:25px;height:25px; font-size:0;}
    .icon::before{content:"";}
    .text {margin-left:5px;}
    .text strong {font-size:16px;}
    .text small {font-size:12px;}
    .options input:checked + .card .icon::before {font-size: 14px;} 
    .other-label {width:100%;}
    textarea {width:100%; height:100px; margin:0 auto; display:block;  border-radius: 16px;  border: none;  padding: 16px;  background: var(--white); font-size: 14px;  resize: none;}
    /* button */
    .submit-btn{width:100%; height:60px; line-height:60px; font-size:18px; border-top-left-radius:20px; padding:0; margin-top:40px;}

    div.cdculeu.mobile{display:block; font-size:16px; text-align:center; margin-top:20px;}
    div.cdculeu.mobile a{color:var(--gray);}

    /*PODPORNIKI*/
    section.podporniki .container{width:100%; max-width:100%;}
    section.podporniki .row{width:100%; max-width:100%;}

    /*SMALLFOOT*/
    section.smallfoot{height:auto; margin-bottom:40px;}
    section.smallfoot .container{width:100%; max-width:100%;}
    section.smallfoot .row{width:100%; max-width:100%''; background:var(--lightgreen-bg); border-radius:20px; height:auto; line-height:40px; padding:0 20px;}
    section.smallfoot p, section.smallfoot a, section.smallfoot span{color:var(--gray); line-height:40px; display:inline; padding:0; width:auto;font-size:16px;}
    section.smallfoot .copyright {text-align:center;}
    section.smallfoot .cdculeu {display:none;}
    section.smallfoot .production {text-align:center;}

    /*banner boxes*/
    section.banner .txtblock {flex-direction: column; align-items: center;}
    section.banner .custom-box {width: 100%; max-width: 450px;}
    /* CRTICE MED KROGCI */
    .steps {padding: 40px 0;}
    .steps span {width: var(--m-circle);height: var(--m-circle);margin-right: var(--m-line); /* Prostor za mobilno črtico */}
    .steps span:last-child {margin-right: 0;}
    .steps span::before { font-size: 0; /* Skrijemo številke */}
    .steps::before {width: var(--m-tail);height: 2px;}
    .steps span::after {width: var(--m-line);height: 2px;}
    .steps span:last-child::after { width: var(--m-tail);}

    /*INNER SURVEY*/
    .options {grid-template-columns: 1fr;}

    .my-swiper-wrapper {gap:20px;}

    section.banner.inner.survey .vprasalnik11,section.banner.inner.survey .vprasalnik12,section.banner.inner.survey .vprasalnik13,
    section.banner.inner.survey .vprasalnik21,section.banner.inner.survey .vprasalnik22,section.banner.inner.survey .vprasalnik23,
    section.banner.inner.survey .vprasalnik31,section.banner.inner.survey .vprasalnik32,
    section.banner.inner.survey .vprasalnik41,section.banner.inner.survey .vprasalnik42,
    section.banner.inner.survey .vprasalnik51,section.banner.inner.survey .vprasalnik52{display:none;}


}


/*XS phones mini*/
@media (max-width: 320px) {

}

/*XS phones*/
@media (min-width: 321px) and (max-width: 767px) {
    section.block.imgtxt.inner{padding:0;}


}

/*SM tablets*/
@media (min-width: 768px) and (max-width: 991px) {
    /*BANNER*/
    section.banner .survey-button p{text-align:center; padding:40px 25%; font-size:14px;}
    section.banner .millustration1{width:420px; margin: 0 auto;}

    /*banner boxes*/
    section.banner .txtblock {display:flex; flex-direction:row; align-items:flex-start; gap: 10px; max-width: 7100%; width: 100%; }
    section.banner .custom-box {position: relative; flex: 1; padding: 20px; /* Prostor za strlese robove okvirja */}
    section.banner .content { background-color: var(--white); border-radius: 30px; padding: 30px 25px 0px 35px; z-index: 1; position: relative; color: var(--black); font-size: 1.125rem; line-height: 1.6;}
    section.banner .content strong{color:var(--orange); font-weight:500;}
    /*SVG frames */
    section.banner .outline-svg { position: absolute; top: 0; left: 0;width: 100%;height: 100%; pointer-events: none;z-index: 2;}
    section.banner .outline-svg path {fill: none;stroke-width: 2px; vector-effect: non-scaling-stroke;}

    section.banner .millustration4{display:block; position:absolute; bottom:-32px; left:260px; width:auto;}
    
    /*INTRO BLOCK 1, BLOCK 2*/
    section.block.imgtxt .txt{padding:0px 0 0 0;}
    .survey-button.mobile.phone{display:none;}

    /*CILJI*/
    .shape-border { height: 180px; }
    .shape-inner {padding:30px 50px;}

}

/*MD tablet landscape*/
@media (min-width: 992px) and (max-width: 1199px) {
    body {font-size:18px;}
    p.intro{font-weight:bold; font-size:24px; line-height:34px;}
    /*BANNER*/
    section.banner{margin-top:15px;}
    section.banner .container {width:98%; max-width:98%;}
    section.banner .container .row {width:98%; max-width:98%;}
    section.banner h1{font-size:46px;}
    section.banner .illustration1{top:250px; right:40px; width:500px;}
    section.banner .illustration2{bottom:160px; right:40px; width:160px;}
    section.banner .illustration3{bottom:125px; left:60px; width:150px;}
    section.banner .illustration4{bottom:-58px; right:40px; width:200px;}
    /*banner boxes*/
    section.banner .content {font-size: 1rem;}
    section.banner .survey-button p{font-size:16px;}
    section.banner .survey-button a,.survey-button a{width:420px; height:70px; line-height:70px; font-size:20px; margin:0 auto 80px auto;}
    /*NAVBAR*/
    .navbar-nav a.nav-link, .navbar-expand-lg .navbar-nav a.nav-link{ font-size:18px; height:50px; line-height:50px; padding: 0 40px; margin:0px 8px;}
    .navbar-nav .nav-item-contacts a{width:50px; height:50px; line-height:50px;}
    .navbar-nav .nav-item-contacts a.email::before{font-size:18px;}
    /*INTRO BLOCK 1, BLOCK 2*/
    section.block{padding:90px 0;}
    section.imgtxt .container {width:98%; max-width:98%;}
    section.imgtxt .container .row {width:98%; max-width:98%;}
    section.txtimg .container {width:98%; max-width:98%;}
    section.txtimg .container .row {width:98%; max-width:98%;}

    /*INNER - o projektu*/
	section.banner.inner .illustration5{position:absolute;top:320px; right:20px; width:480px;}
    section.cilji .container {width:98%; max-width:98%;}
    section.cilji .container .row { gap: 30px;}
    .shape-border { height: 340px; }

    section.block.imgtxt.inner .img{ height:600px; background:none; position:relative;}
    section.block.imgtxt.inner .txt{padding:0px 0 0 112px;} 
    section.block.imgtxt.inner .img img.illustration{width:300px; }

    /*SURVEY*/
    section.banner.inner.survey .vprasalnik11{width:100px; top:250px; left:120px;}
    section.banner.inner.survey .vprasalnik12{width:110px; top:250px; right:120px;}
    section.banner.inner.survey .vprasalnik13{bottom:125px; left:20px; width:320px;}
    section.banner.inner.survey .vprasalnik21{top:290px; right:40px;width:80px;}
    section.banner.inner.survey .vprasalnik22{bottom:220px; left:50px; width:100px;}
    section.banner.inner.survey .vprasalnik23{bottom:90px; right:40px; width:300px;}
    section.banner.inner.survey .vprasalnik31{top:455px; left:20px; width:160px;}
    section.banner.inner.survey .vprasalnik32{top:830px; right:5px; width:250px;}
    section.banner.inner.survey .vprasalnik41{top:600px; right:20px; width:210px;}
    section.banner.inner.survey .vprasalnik42{top:1050px; left:20px; width:190px;}
    section.banner.inner.survey .vprasalnik51{top:520px; left:10px; width:200px;}
    section.banner.inner.survey .vprasalnik52{bottom:20px; right:20px; width:320px;}
	
    .submit-btn {height:70px;font-size:20px; margin:80px auto 0 auto; }

}

/*LG desktops*/
@media  (min-width: 1200px) and (max-width: 1799px) { 
    body {font-family: Epilogue,sans-serif; font-weight:500; font-size:20px; color: var(--black);}

    p.intro{font-weight:bold; font-size:30px; line-height:40px;}
    /*BANNER*/
    section.banner{margin-top:15px; height:auto;}
    section.banner .container {width:98%; max-width:98%; border-radius:30px;}
    section.banner .container .row {width:90%; max-width:90%; }
    section.banner .btxt{width:55%;}
    section.banner h1{font-size:42px; line-height:60px; /*height:60px;*/ margin:90px 0 50px;}

    section.banner .survey-button p{ padding:60px 32% 45px; font-size:16px;}
    section.banner .survey-button a{width:400px; height:60px; line-height:60px; font-size:20px; margin:0 auto 80px auto; border-top-left-radius:30px;}
    section.banner .illustration1{position:absolute;top:330px; right:100px; width:500px;}

    /*INTRO BLOCK 1, BLOCK 2*/
    section.block{padding:90px 0;}
    section.imgtxt .container {width:98%; max-width:98%;}
    section.imgtxt .container .row {width:98%; max-width:98%;}
    section.txtimg .container {width:98%; max-width:98%;}
    section.txtimg .container .row {width:98%; max-width:98%;}

    /*INNER - o projektu*/
    section.banner.inner{height:auto;}
    section.banner.inner .container {height:auto;}
    section.banner.inner .container .row {height:auto; padding-bottom:60px;}
    section.banner.inner .illustration5{top:280px; right:80px; width:450px;}

    section.cilji{padding:90px 0;}
    section.cilji .container {width:98%; max-width:98%; position:relative;}
    section.cilji .container .row {width:98%; max-width:98%;}
    section.cilji .illustration{position:absolute;bottom:-80px; left:90px; width:auto;}
    /*polygons*/
    .shape-border {height:340px;}

    /*SURVEY*/
    section.banner.inner.survey .vprasalnik11{width:120px;}
    section.banner.inner.survey .vprasalnik12{width:130px;}
    section.banner.inner.survey .vprasalnik13{bottom:125px; left:20px; width:320px;}
    section.banner.inner.survey .vprasalnik21{top:290px; right:140px;width:110px;}
    section.banner.inner.survey .vprasalnik22{bottom:290px; left:50px; width:140px;}
    section.banner.inner.survey .vprasalnik23{bottom:90px; right:70px; width:390px;}
    section.banner.inner.survey .vprasalnik31{top:455px; left:30px; width:200px;}
    section.banner.inner.survey .vprasalnik32{top:830px; right:5px; width:300px;}
    section.banner.inner.survey .vprasalnik41{top:530px; right:20px; width:300px;}
    section.banner.inner.survey .vprasalnik42{top:1030px; left:40px; width:250px;}
    section.banner.inner.survey .vprasalnik51{top:520px; left:30px; width:250px;}
    section.banner.inner.survey .vprasalnik52{bottom:20px; right:20px; width:400px;}


    /*SMALLFOOT*/
    section.smallfoot{height:80px; margin-bottom:40px;}
    section.smallfoot .container{width:98%; max-width:98%;}
    section.smallfoot .row{width:98%; max-width:98%; margin:0 auto 40px auto; padding:0 20px;}


}