/*------------------------------------------
        Media Query
    ------------------------------------------*/
    
    @media (max-width: 1200px) {
        .navbar {
            height: 100px;
        }
        .navbar-collapse{
			position: fixed;
            z-index: 9;
        }
		.navbar-collapse.collapsing .navbar-nav {
			display: block;
			position: fixed;
			top: 0;
			bottom: 0;
			left: -300px;
			transition: all 0.2s ease; 
			justify-content: start !important;  
			height: 100%;
			overflow-y: scroll;
		} 
		.navbar-collapse.show .navbar-nav{
			background-color: #fff;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			flex-direction: column;
			height: auto;
			width: 270px; 
			padding: 1rem;
			transition: left 0.35s ease;
			box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
			z-index: 99999999;
            overflow-y: scroll;
            gap: 0;
		}
		[dir="rtl"] .navbar-collapse.collapsing .navbar-nav{
			left: auto;
			right: -300px;
		} 
		[dir="rtl"] .navbar-collapse.show .navbar-nav{
			left: auto;
			right: 0;
			transition: right 0.35s ease;
		} 

		.navbar-collapse.show .navbar-nav .nav-link{
            font-weight: 800;
            height: 60px;
            line-height: 55px;
            padding: 1rem;
			border-bottom: 1px solid #f1f1f1;
		} 
		.navbar-collapse.show .navbar-nav .nav-link::before{
            display: none;
		}
		.navbar-collapse.show .navbar-nav li:last-child .nav-link{
			border-bottom: none;
		}
        .member-label-box .btn {
            width: 240px;
        }
        .licenses-content .title{
            font-size: 24px;
            line-height: 42px;
        }
        .licenses-content .info{
            font-size: 14px;
            line-height: 28px;
        }
    }

    @media (max-width: 1024px){
        .member-label-box {
            padding: 50px;
            text-align: center;
        }
        .footer{
            text-align: center;
        }
        .footer-links{
            margin: 1.5rem 0;
        }
        .login-section .login-form{
            padding: 3rem 0;
        }
        .form-card{
            padding: 40px 80px;
        }
        .subscribe-member-box .action{
            margin: 0;
        }
        .subscribe-member-box{
            padding: 20px;
        }
    }

    @media (max-width: 786px){
        .nav-action{
            gap: 30px;
        }
        .saudi-federation-container .saudi-federation-pic { 
            min-width: 270px;
            width: auto;
            overflow: hidden;
            margin-inline-start: 0;
        }
        .section-title .title,
        .member-label-box .title,
        .saudi-federation-container .saudi-federation-content .title,
        .about-container .about-content .title{
            font-size: 24px;
        }
        .member-label-box .info,
        .saudi-federation-container .saudi-federation-content .info,
        .about-container .about-content .info {
            font-size: 14px;
            line-height: 28px;
        }
        .member-label-box{
            min-height: 203px;
        }
        .copyright {
            margin-bottom: 1rem;
        }
        .member-box .title{
            margin-bottom: 30px;
        }
        .player-box .content{
            padding: 15px;
        }
        .form-card{
            padding: 30px 60px;
        }
        .profile-sidebar{
            padding: 20px;
            margin-bottom: 2rem;
        }
    }

    @media (max-width: 420px){
        .nav-action{
            gap: 20px;
        }
        .member-label-box {
            padding: 30px;
            text-align: center;
        }
        .login-section .login-form{
            padding: 3rem 1.5rem;
        }
        .login-section .login-form .head {
            margin-bottom: 1.5rem;
        }
        .login-section .login-form .head .logo{
            margin-bottom: 1.5rem;
        }
        .login-section .head .title-box .title{
            font-size: 24px;
        }
        .form .form-group {
            margin-bottom: 1rem !important;
        }
        .form .form-control {
            min-height: 45px;
        } 
        .form-card{
            padding: 20px;
        }
        .form-card .title {
            font-size: 20px;
        }
        .subscribe-member-box {
            text-align: center;
        }
        .subscribe-member-box .action{
            margin: 1rem auto 0;
        }
    }

    @media (min-width: 768px){
        .animate {
          animation-duration: 0.3s;
          -webkit-animation-duration: 0.3s;
          animation-fill-mode: both;
          -webkit-animation-fill-mode: both;
        }
    }
    @keyframes slideIn {
        0% {
          transform: translateY(2rem);
          opacity: 0;
        }
      
        100% {
          transform: translateY(0rem);
          opacity: 1;
        }
      
        0% {
          transform: translateY(2rem);
          opacity: 0;
        }
      }
      
      @-webkit-keyframes slideIn {
        0% {
          -webkit-transform: transform;
          -webkit-opacity: 0;
        }
      
        100% {
          -webkit-transform: translateY(0);
          -webkit-opacity: 1;
        }
      
        0% {
          -webkit-transform: translateY(2rem);
          -webkit-opacity: 0;
        }
    }
    .slideIn {
        -webkit-animation-name: slideIn;
        animation-name: slideIn;
    }
    .upDown { 
        -webkit-animation: upDown-animation 2s infinite  alternate;
        animation: upDown-animation 2s infinite  alternate;
    } 
    @keyframes upDown-animation {
        0% { transform: translateY(0); }
        100% { transform: translateY(-1rem); }
    }

    .heartbit{
        position: absolute; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
        height: 80px;
        width: 80px;
        z-index: 10;
        border: 5px solid  rgb(var(--theme-color));
        border-radius: 50%;
        -moz-animation: heartbit 1s ease-out;
        -moz-animation-iteration-count: infinite;
        -o-animation: heartbit 1s ease-out;
        -o-animation-iteration-count: infinite;
        -webkit-animation: heartbit 1s ease-out;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    @-moz-keyframes heartbit {
        0% {
            -moz-transform: translate(-50%, -50%) scale(0);
            opacity: 0;
        }
        25% {
            -moz-transform: translate(-50%, -50%) scale(0.1);
            opacity: 0.1;
        }
        50% {
            -moz-transform: translate(-50%, -50%) scale(0.5);
            opacity: 0.3;
        }
        75% {
            -moz-transform: translate(-50%, -50%) scale(0.8);
            opacity: 0.5;
        }
        100% {
            -moz-transform: translate(-50%, -50%)scale(1);
            opacity: 0;
        }
    }
    @-webkit-keyframes heartbit {
        0% {
            -webkit-transform: translate(-50%, -50%) scale(0);
            opacity: 0;
        }
        25% {
            -webkit-transform: translate(-50%, -50%) scale(0.1);
            opacity: 0.1;
        }
        50% {
            -webkit-transform: translate(-50%, -50%) scale(0.5);
            opacity: 0.3;
        }
        75% {
            -webkit-transform: translate(-50%, -50%) scale(0.8);
            opacity: 0.5;
        }
        100% {
            -webkit-transform: translate(-50%, -50%) scale(1);
            opacity: 0;
        }
    }