/*--------------------------------------------------------------------- File Name: responsive.css ---------------------------------------------------------------------*/

html{
    min-width: 270px;
}
/*------------------------------------------------------------------- 991px x 768px ---------------------------------------------------------------------*/
/* animations */

.animate-it-plan{
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: translate(0,50px);
}
.event-step.animate-it-events.seen-animation img {
    animation: shake 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes shake {
    0%, 100% {
        transform: translate(0, 0) rotate(0);
    }
    10%, 90% {
        transform: translate(-2px, -2px) rotate(-1deg);
    }
    20%, 80% {
        transform: translate(2px, -2px) rotate(1deg);
    }
    30%, 50%, 70% {
        transform: translate(-2px, 2px) rotate(0.5deg);
    }
    40%, 60% {
        transform: translate(2px, 2px) rotate(-0.5deg);
    }
}

.animate-it-events{
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: translate(0,-50px) scale(0);
}
.animate-it-sponsors{
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: translate(-60px,0) scale(0.5);
}
.show-animation-1{
    opacity: 1;
    transform: translate(0, 0px);
}
.show-animation-2{
    opacity: 1;
    transform: translate(0, 0px) scale(1);
}
.show-animation-3{
    opacity: 1;
    transform: translate(0, 0px) scale(1);
}
.seen-animation{
    opacity: 1;
    transition: all 0s;
    transform: translate(0, 0px) scale(1);
}

/* scalling */
@media (min-width: 1200px) {
    .banner_main{
        aspect-ratio: 16 / 9;
    }
    .banner_main h1 img{
        /* margin-top: 5rem;
        max-width: 70dvw; */
        width: 300%;
        transform: translate(-0%);
    }
    
    .solutions_img {
        margin-right: 0;
        background-size: 130%;
    }
    .container-plan{
        width: 60%;
    }
    .plan-col h3{
        top: 60%;
        width: 100%;
        max-width: 100%;
        left: -50%;
        padding: 2dvw 8dvw 4dvw 8dvw;
    }
    .plan-col:nth-child(even) h3{
        right: -50%;
    }
    .plan-col-hour{
    aspect-ratio: 4.5/1;
    }
    .service{
        width: 80%;
        margin: auto;
    }
  
   .event-step:nth-child(3){
    
    top: 10%;
    }
    .event-step h3{
        
     font-size: clamp(8px, 1.5dvw, 2.5dvh);
    }
   
.event-schema-grid{
    width: 50%;
   
} .banner_main::after,.banner_main::before{
    /* width: 35%; */
    
    width: 25dvw;
}
}

@media (min-width: 992px) and (max-width: 1199px) {
    .banner_main {
        /* padding-top: 18%;
        background-size: 130%; */
    }
    .container-plan{
        width: 80%;
    }
    .banner_main::after,.banner_main::before{
        width: 35%;
        
        width: 25dvw;
   }
    .text-bg h1 {
        font-size: 66px;
        line-height: 87px;
    }
    .bann_img {
        padding-right: 0;
    }
    .titlepage h2 {
        font-size: 38px;
    }
    .solutions_img {
        margin-right: 0;
    }
    .banner_main .d_flex{
        justify-content: space-around;
    }
    .plan-col h3{
        width: 80%;
        max-width: 70%;
        left: -20%;
        padding: 2dvw 8dvw 4dvw 8dvw;
    }
    .plan-col:nth-child(even) h3{
        right: -20%;
    }
    /* .event-step img{
        
        max-width: 18dvh;
       
   } */
   .event-step:nth-child(3){
 
    top: 5%;
    }
    .event-step h3{
        
        font-size: clamp(8px, 1.5dvw, 2dvh);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    
    .banner_main {
        /* padding-top: 18%;
        background-size: 140%; */
    }
    .banner_main::after,.banner_main::before{
        width: 35%;
        width: 25dvw;
   }
    .text-bg h1 {
        font-size: 47px;
        line-height: 69px;
    }
    .bann_img {
        padding-right: 0px;
    }
    .titlepage h2 {
        font-size: 30px;
        line-height: 41px;
    }
    .multipurpose h3 {
        font-size: 70px;
        line-height: 90px;
    }
    .solutions_img {
        margin-right: 0;
    }
    .contac_detel ul li img {
        margin-right: 27px;
    }
    .contac_detel ul li {
        font-size: 30px;
    }
    .banner_main .d_flex{
        justify-content: space-around;
    }
    /* .event-step img{
        
        max-width: 14dvh;
       
   } */
   .event-step h3{
        
    font-size: clamp(8px, 1.5dvw, 2dvh);
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .banner_main {
        /* background-size: 160%; */
    }
    .banner_main::before, .banner_main::after{
        width: 35%;
        
        width: 25dvw;
   }
  
    .text-bg {
        padding-top: 73px;
    }
    .text-bg h1 {
        font-size: 57px;
        line-height: 81px;
    }
    .text-bg a {
        margin-bottom: 30px;
        max-width: 250px;
    }
    .titlepage h2 {
        font-size: 38px;
    }
    .service .titlepage {
        padding-left: 0;
        padding-top: 40px;
    }
    .service_img {
        padding-left: 0px;
    }
    .sm_none {
        display: none;
    }
    .sm_show {
        display: block;
        padding-top: 30px;
    }
    .multipurpose h3 {
        font-size: 58px;
        line-height: 70px;
    }
    .solutions_img {
        margin-right: 0;
        margin-top: 30px;
    }
    .navigation.navbar {
        float: right;
        display: inherit !important;
        padding: 0;
        width: 100%;
    }
    .navigation .navbar-collapse {
        background: rgb(28, 28, 28);
        border-radius: 10px;
        padding: 20px;
        margin-top: 52px;
        position: absolute;
        right: 0;
        width: auto;
        margin-right: 20px;
        z-index: 999;
    }
    .navigation.navbar-dark .navbar-nav .nav-link {
        padding: 10px 0;
    }
    .navigation.navbar-dark .navbar-toggler {
        border: inherit;
        float: right;
        padding: 0;
    }
    .navigation.navbar-dark .navbar-toggler-icon {

        background: url(../images/menu_icon.png);
        background-repeat: no-repeat;
        width: 30px;
    }
    
    .plan-col h3{
        top: 80% !important;
        }
    /* .event-step img{
        
        max-width: 12dvw;
    } */
    /* .event-step:nth-child(3) img{
        max-width: 14dvw;
    } */
    .bento-grid{
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .work .col-md-6:nth-child(even) > .our_work {
        margin-right: 15dvw;
    }
    .work .col-md-6:nth-child(odd) > .our_work {
        margin-left: 15dvw;
    }
    .our_work figure{
        margin: auto;
        max-width: 60%;
    } 
}

@media (max-width: 575px) {
    .banner_main {
        /* background-size: 180%; */
        
    }
    .banner_main::after,.banner_main::before{
        width: 40%;
        
        width: 25dvw;
   }
   .banner_main::after{
    width: 30%;
   }
    .header {
        padding: 30px 0px;
    }
    .logo {
        text-align: center !important;
        padding-bottom: 6px;
        float: left;
    }
    .text-bg {
        padding-top: 3dvh;
    }
    .text-bg a {
        margin-bottom: 30px;
        max-width: 250px;
    }
    .text-bg h1 {
        font-size: 34px;
        line-height: 53px;
        padding-bottom: 40px;
    }
    .service .titlepage {
        padding-left: 0;
        padding-top: 40px;
    }
    .titlepage h2 {
        font-size: 22px;
        line-height: 37px;
    }
    .about_img {
        padding: 0;
    }
    .multipurpose h3 {
        font-size: 52px;
        line-height: 74px;
    }
    .multipurpose p {
        padding-top: 10px;
    }
    .contac_detel ul li {
        font-size: 24px;
    }
    .contac_detel ul li img {
        margin-right: 13px;
        width: 43px;
    }
    .service_img {
        padding-left: 0px;
    }
    .solutions_img {
        margin-right: 0;
        margin-top: 30px;
    }
    .sm_none {
        display: none;
    }
    .sm_show {
        display: block;
        padding-top: 30px;
    }
    .navigation.navbar {
        float: right;
        display: inherit !important;
        padding: 0;
        width: 100%;
        margin-top: -33px;
    }
    .navigation .navbar-collapse {
        background: rgb(28, 28, 28);
        border-radius: 10px;
        padding: 20px;
        margin-top: 62px;
        position: absolute;
        right: 0;
        width: auto;
        margin-right: 20px;
        z-index: 999;
    }
    .navigation.navbar-dark .navbar-nav .nav-link {
        padding: 10px 0;
    }
    .navigation.navbar-dark .navbar-toggler {
        float: right;
        border: inherit;
        padding: 0;
    }
    .navigation.navbar-dark .navbar-toggler-icon {
        margin-top: 10px;
        background: url(../images/menu_icon.png);
        background-repeat: no-repeat;
    }
    
    .plan-col:nth-child(even) h3{
        top: 100%;
        }
        /* .event-step:nth-child(3) img,
        .event-step:nth-child(6) img{
            max-width: 24dvh;
        } */
    .event-step h3{
        
        font-size: clamp(7px, 1.2dvw, 1.5dvh);
    }
    .event-schema-grid{
        width: 70%;
    }
    .bento-grid > div{
        grid-column: span 3;
        
    }
    .bento-grid div:nth-child(1) {
    }
    
    .bento-grid{
        grid-template-columns: repeat(auto-fit, minmax(50px, 100px));
    }
    .bento-grid a{
        padding: 0.5rem;
    }
    .bento-grid a img{
        width: 90%;
    }
    .our_work figure{
        margin: auto;
        max-width: 60%;
    }    
}