body{
    padding: 0;
    margin: 0;
    font-size: 15px;
    overflow-x: hidden;
}
.header-title h2{
    font-size: 25pt;
font-weight: 700;

}
.header-title.masal h2{
    font-size: 25pt;
    font-weight: 700;
    letter-spacing: -1px;
}

.text-color{
    color: #9a46e2 !important;
}
.text-color-masal{
    color: #09c1be !important;
}
.text-color-kalite{
    color: #ffc000 !important;
}
.text-color-kopek{
    color: #ff7e00 !important;
}
.text-color-robotik{
    color: #03d112 !important;
}
.btn-color{
    background-color: #f5e9ff;
}
.btn-text-color{
    color:#fe4628;
}
.btn-color-masal{
    background-color: #e8ffff;
}
.btn-text-color-masal{
    color:#f3455f;
}
.btn-color-kalite{
    background-color: #fff7df;
}
.btn-text-color-kalite{
    color:#7966c7;
}
.btn-color-robotik{
    background-color: #e3f9e4;
}
.btn-text-color-robotik{
    color:#ff7e00;
}
.btn-color-kopek{
    background-color: #fff3e8;
}
.btn-text-color-kopek{
    color:#2661cf;
}
.image-relative .bg{
    background-color:#fff7de ;
}
.image-relative .bg-masal{
    background-color:#f7f7f7 ;
}
.image-relative .bg-robotik{
    background-color:#f2f6ff ;
}
.image-relative .bg-kopek{
    background-color:#f5f5f5 ;
}
.image-relative .bg-kalite{
    background-color:#f9f8ff ;
}
.click .btn:hover {
    color: #fe4628;
    text-decoration: none;
}
.click .btn.btn-color-masal:hover {
    color: #f3455f;
    text-decoration: none;
}
.click .btn.btn-color-robotik:hover {
    color: #ff7e00;
    text-decoration: none;
}
.click .btn.btn-color-kopek:hover {
    color: #2661cf;
    text-decoration: none;
}
.click .btn.btn-color-kalite:hover {
    color: #7966c7;
    text-decoration: none;
}
.tick.masal img{
    transform: rotate(40deg);
    filter: invert(34%) sepia(58%) saturate(2386%) hue-rotate(329deg) brightness(104%) contrast(92%);
    margin-top: 10px;
}
.click-color{
    filter: invert(54%) sepia(77%) saturate(5464%) hue-rotate(342deg) brightness(99%) contrast(108%);
}
.click-color.masal{
    filter: invert(34%) sepia(58%) saturate(2386%) hue-rotate(329deg) brightness(104%) contrast(92%);
}
.click-color.kopek{
    filter: invert(27%) sepia(85%) saturate(1615%) hue-rotate(203deg) brightness(98%) contrast(86%);
}
.click-color.kalite{
    filter: invert(47%) sepia(19%) saturate(1631%) hue-rotate(211deg) brightness(90%) contrast(86%);
}
.click-color.robotik{
 filter: invert(47%) sepia(71%) saturate(1604%) hue-rotate(0deg) brightness(103%) contrast(105%);
}
.bg-image{
    background-color: #fff7de;
}
.property-ogrenci img{
    filter: invert(33%) sepia(90%) saturate(1233%) hue-rotate(248deg) brightness(89%) contrast(100%);
    width: 42px;
}
.property-masal img{
    filter: invert(59%) sepia(34%) saturate(4454%) hue-rotate(140deg) brightness(100%) contrast(93%);
    width: 42px;
}
.property-robotik img{
    filter: invert(71%) sepia(41%) saturate(6424%) hue-rotate(83deg) brightness(98%) contrast(110%);
     width: 42px;
}
.property-kopek img{
    filter: invert(46%) sepia(67%) saturate(1216%) hue-rotate(1deg) brightness(103%) contrast(104%);
    width: 42px;
}
.property-kalite .svg img{
    filter: invert(65%) sepia(94%) saturate(555%) hue-rotate(358deg) brightness(101%) contrast(106%);
    width: 42px;
}
.property-kalite .img img{
     width: 42px;
     height:41px;
}

.property.property-ogrenci .bg{
    background-color:#f5e9ff ;
      height: 120px;
}
.property.property-masal .bg-masal{
    background-color:#e8ffff ;
    height: 120px;
}
.property.property-kalite .bg-kalite{
    background-color:#fff7df ;
      height: 120px;
}
.property.property-kopek .bg-kopek{
    background-color:#fff3e8 ;
      height: 120px;
}
.property.property-robotik .bg-robotik{
    background-color:#e3f9e4 ;
      height: 120px;
}

.header p{
    font-size: 14pt;
    color: #313131;
    letter-spacing: -1px;
    line-height: 1.3;
    font-weight: 300;
}
.header h3{
    color: #313131;
    font-size: 16pt;
    font-weight: 300;
    margin-bottom: 0;
}
.header h4{
    font-size: 14pt;
    font-weight: 500;
    letter-spacing: -1px;
}
.header-text p{
font-size: 22pt;
font-style: italic;
font-weight: 300;
letter-spacing: 0.2px;
}
.click .btn{
padding: 22px 48px 22px 48px;
line-height: 1;
font-size: 14pt;
font-weight: 700;
position: relative;
max-width: 548px;
}
.click.robotik .btn {
 padding: 23px 32px 22px 32px;
line-height: 1;
font-size: 14pt;
font-weight: 700;
position: relative;
max-width: 548px;
}
.property .iso h5{
line-height: 1;
}
.property .iso span{
    font-weight: 600;
}
.click.masal .btn{
    padding: 31px;
    line-height: 1;
    font-size: 30px;
    font-weight: 700;
    position: relative;
    max-width: 745px;
}
.click.kopek .btn{
    padding: 31px;
    line-height: 1;
    font-size: 30px;
    font-weight: 700;
    position: relative;
    max-width: 745px;
}
.click.kalite .btn {
  padding: 23px 32px 22px 32px;
line-height: 1;
font-size: 14pt;
font-weight: 700;
position: relative;
max-width: 548px;
}
.click .btn:hover {
    color: #fe4628;
    text-decoration: none;
}
.click .btn:hover img{
    width:60px;
}
.image-relative a:hover .play-icon img{
    width: 74px;
}
.click img{
    position: absolute;
    right: -28px;
    top: 72%;
    width: 50px;
}
.relative{
    position: relative;
}
.quote-text p{
    font-size: 25pt;
    font-style: italic;
    font-weight: 600 !important;
}
.detail{
    background-color:#fe4628 ;
    padding: 18px;
}
.detail h1{
    letter-spacing: -0.5px;
    font-size:20pt;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,span {
    font-family: 'Poppins', sans-serif;
}
@media only screen and (min-width: 471px) and (max-width: 767px){
    .text-two-robotik h2{
        font-size: 16pt !important;
    }
    .text-robotik h2{
        font-size: 20pt !important;
    }
    .header-title h2{
        font-size: 22pt !important;
    }
    .tick h1{
        font-size: 22pt !important;
    }
    

}
@media only screen and (max-width: 471px){
    .image-bg {
        top: 46% !important;
    }
    .image-teaser-bg{
        top: 33% !important;
    }
    .tick.kopek i,.tick.masal i,.tick i{
        line-height: 1 !important;
        font-size: 16pt !important;
    }
    
    .tick.puzzle img{
        position: relative;
    width: 41px;
    top: 2px;
    }
    .tick.puzzle span{
        line-height: 2;
    }
    .header h3{
        font-size: 14pt;
    }
    .header h4{
        font-size: 13pt;
    }
    .click.kopek .btn{
        font-size: 18px !important;
        padding: 15px;
    }
    .image h1{
        font-size: 14pt !important;
        }
    .tick.kalite h1{
        font-size: 20pt !important;
    }
    .tick.robotik h1{
        font-size: 19pt !important;
    }
    .text-two-robotik h2{
        font-size: 14pt !important;
    }
    .text-robotik h2{
        font-size: 16pt !important;
    }
    .pt-20 {
        padding-top: 4rem !important;
    }
    .image-relative img {
        margin-bottom: 110px !important;
    }
    .header-text p{
        font-size: 20pt;
    }
    .play-icon{
        top: 20% !important;
    }
    .play-icon img{
        width: 50px !important;
    }
 
    .tick span{
        font-size: 16px !important;
    }
    .detail h1{
        font-size: 22px;
    }
    .click.masal .btn, .click.kalite .btn,.click.robotik .btn{
        font-size: 18px !important;
    }
    .click .btn{
        font-size: 18px;
        padding:20px;
    }
    .quote-text p{
        font-size: 16pt !important;
    }
    .tick i {
        font-size: 16pt !important;
    }
    .header-title h2{
        font-size: 18pt !important;
    }
    .tick h1{
        font-size: 20pt !important;
    }
}


.image h1{
font-size: 24pt;
font-style: italic;
letter-spacing: -0.5px;
}
.block{
    position: absolute;
    bottom: 0;
    left: 0;
    top: 41%;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.block-two{
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.play-icon{
    position: absolute;
    left: 0;
    top: 21%;
    width: 100%;
    height: 0%;
    z-index: 1;
}
.play-icon img{
    width: 68px;
}
.tick h2{
    font-size:27pt ;
    font-weight: 700;
    color:#ff7e00 ;
    border-bottom: 3px solid currentColor;
    display: inline-block;
    line-height: 1.2;
}
.text-robotik h2{
font-weight: 600;
font-size: 25pt;
letter-spacing: -0.5px;
}
.text-two-robotik h2{
    font-weight: 500;
    font-size: 19.5pt;
    letter-spacing: -0.5px;
    }
    .text-two-robotik span{
        font-weight: 600;
    }
@media only screen and (min-width: 1199px) {
.property .col-md-3{
    padding-left: 24px !important;
    padding-right: 24px !important;
}
.property .col-md-4{
    padding-left: 36px !important;
    padding-right:36px !important;
}
}

.property h4{
    font-weight: 600;
    margin-bottom: 0;
    font-size: 12pt;
}
.property h5{
    font-size: 12pt;
    font-weight: 300;
}
.tick i{
   font-size: 25px;
    color: #fe4628;
    line-height: 1.3;
}
.tick.kopek i{
    font-size: 25px;
    color: #2661cf;
    line-height: 1.3;
}
.tick.kalite i{
   font-size: 25px;
    color: #7966c7;
    line-height: 1.3;
}
.tick.robotik i{
    font-size: 25px;
    color: #ff7e00;
    line-height: 1.1;
}
.tick.masal i{
    font-size: 25px;
    color: #f3455f;
    line-height: 1.3;
}
.tick span{
    color: #313131;
    padding-left: 15px;
    font-size: 16pt;
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 2;
}
.kopek-image-relative{
    position: relative;
    height: auto;
    padding-bottom: 50px;
    padding-top: 50px;
   }
   .kopek-image-bg{
       position: absolute;
       top: 51%;
       height: 43%;
       width: 100%;
       left: 0;
       background-color: #f5f5f5;
       z-index: 0;
   }
   .image-teaser-bg{
    position: absolute;
    top: 27%;
    height: 43%;
    width: 100%;
    left: 0;
    background-color: #f5f5f5;
    z-index: 0;
}
  .image-teaser-bg-ogrenci{
    position: absolute;
    top: 27%;
    height: 43%;
    width: 100%;
    left: 0;
    background-color: #fff7de;
    z-index: 0;
}
  .image-teaser-bg-robotik{
    position: absolute;
    top: 27%;
    height: 43%;
    width: 100%;
    left: 0;
    background-color: #e3f9e4;
    z-index: 0;
}
.image-bg{
    position: absolute;
    top: 38%;
    height: 43%;
    width: 100%;
    left: 0;
    background-color: #f5f5f5;
    z-index: 0;
}
.image-bg-ogrenci{
        position: absolute;
    top: 38%;
    height: 43%;
    width: 100%;
    left: 0;
    background-color: #fff7de;
    z-index: 0;
}
.image-relative{
    position: relative;
    height: auto;

}
.image-relative img{
    margin-bottom: 170px;
}
.ce{
    position: relative;
    height: 42%;
}
.ce-two{
    position: relative;
    height: 58%;
    top: 35%;
}
.tick h1{
    font-size: 27pt;
    font-weight: 700;
    letter-spacing: -1px;
}
.pt-20{
    padding-top: 7rem ;
}

.modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
.modal-dialog iframe{
    margin: 0 auto;
    display: block;
}
.teaser .modal-body{
    padding: 0 !important;
}
.teaser .modal-content{ 
    background: transparent;
    border: 0;
}
.teaser .modal-header{
    border: 0;
}
.teaser .close{
    color: #ffffff;
    font-size: 2.5rem;
    opacity: 1;
}
.teaser .close:hover, .close:focus, .close:active{
    color: #f4f4f4;
    border: 0;
    box-shadow: none;
}
.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
}
button:focus{
    outline: none;
}
.teaser .btn:hover {
    color: transparent;
}
.teaser .modal-header .close{
    padding: 0;
    padding-bottom: 10px;
}