@font-face{
      font-family: Kufi; 
      src: url(../fonts/DroidKufi-Regular.woff2);
    }
    .Kufi{
        font-family: Kufi;
        font-weight: 300;    
    }

    @font-face{
      font-family: Montserrat; 
      src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
    }

    .Montserrat{
        font-family: Montserrat;
        font-weight: 300;    
    }


    :root {
      --font-default: "Raleway";
      --font-primary: "Raleway";
      --font-secondary: "Raleway";
    }

    /* Colors */
    :root {
      --color-default: #222222;
      --color-primary: #008374;
      --color-secondary: #f85a40;
    }

    /* Smooth scroll behavior */
    :root {
      scroll-behavior: smooth;
    }

    body{        
        background: url(../images/bg_2.jpg);
        background-size:cover;
        background-position:top;
        background-repeat: no-repeat;
        font-family: var(--font-default), Montserrat;
        color: var(--color-default);
        min-height: 400px;
    } 
    /*   
    .body-bg{
        position: absolute;
        z-index: -1;
        display: block;
        width: 100vw;
        height: 100vh;
    }
    */
    .splash{
        max-width: 500px;
        background-color: teal;
        opacity: .8;
        border-radius: 7px;
        border: 1px solid darkturquoise;
        padding: 40px;
    }

    .cool{
        opacity: .7;
        border-radius: 7px;
        border: 1px solid;
    }

    .bg-teal{
        border-color: darkturquoise;
        background-color: teal;
    }

    .bg-ghost{
        border-color: ghostwhite;
        background-color: ghostwhite;
    }

    .bg-honey{
        border-color: honeydew;
        background-color: honeydew;
    }

    .bg-current{ 
        border-color: currentColor; 
        background-color: currentColor; 
 }


    .logo{
        max-width: 170px;
        height: auto;
    }

    .btn{
        padding: 12px 30px;
        border-width: 1px;
        box-shadow: none; 
        transition: all 0.3s ease;
    }

    .btn-cool{
        border-radius: 0 40px 0 40px;
    }

    .btn-up{
        border-radius: 0px  0px 40px 40px;
    }

    .btn:hover, 
    .btn:focus {
        -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .7);
        -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .7);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .7);
        padding-right: 50px; /* Expand button to the right */
    }

    .funny-cow{
        opacity: 1;
        display: inline-block;
        width: 199px;
        position: absolute;
        bottom: 1px;
        right: 1px;
        -moz-transition: 0.50s ease-in-out;
        transition: 0.50s ease-in-out;    
    }
    .funny-cow:hover{
        width: 250px;
        -moz-transition: 0.10s ease-in-out;
        transition: 0.10s ease-in-out;
    }

    .funny-man{
        opacity: 1;
        display: inline-block;
        width: 115px;
        position: absolute;
        bottom: 1px;
        right: 1px;
        -moz-transition: 0.50s ease-in-out;
        transition: 0.50s ease-in-out;    
    }

    .funny-face{
        opacity: 1;
        display: inline-block;
        width: 250px;
        position: absolute;
        bottom: 1px;
        left: -35px;
        -moz-transition: 0.50s ease-in-out;
        transition: 0.50s ease-in-out;    
    }
    .laptop{
        display: none;
    }
    .app-title, .app-desc{
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        box-shadow: 1px 0px 11px rgba(228, 228, 237, 0.37);
        border: 1.5px solid rgba(255, 255, 255, 0.18);
        
        width: fit-content;
        padding: 7px 13px;
        border-radius: 7px;
        color: floralwhite;
    }
    .bg-blur{
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        box-shadow: 1px 0px 11px rgba(228, 228, 237, 0.37);
        border: 1.5px solid rgba(255, 255, 255, 0.18);
    }
    .nav-mini{
        margin-bottom: 20px;
    }
    .pay-by img{
        max-width: 120px;
        height: auto;
    }

    .txt-term{
        margin-top: -50px;
        margin-left: 10px;
        position: relative;
        font-size: .7rem;
    }

    .img-leather{
        display: block;
        margin: 10px auto;
    }
    @media (max-width: 580px) {
        body{        
            background: url(../images/online_qurbani_app_bg_mobile.jpg);
        }
        table{
            font-size: .7rem;
        }
        .splash{
            padding: 30px 10px;
            margin: 10px 15px;
        }
        h6{
            font-size: .9rem;
        }
        .mobile{
            display: none !important;
        }
        .laptop{
            display: block !important;
            margin: 10px auto;
        }
        .app-title, .app-desc{
            text-align: center;
            background-color:transparent;
            width: auto;
            padding: 3px 3px;
            border-radius:unset;
            color: darkolivegreen;
        }
        .nav-mini{
            display: inline-block;
            margin-bottom: 0px;
            font-size: .7rem;
            padding: 10px 5px;
        }
        .nav-mini p{
            padding: 0; 
            margin: 0;
        }
        .fa-3x {
            font-size: 1.7em;
        }
        .funny-face{
            width: 110px;
        }
        .pay-by img{
            max-width: 50px;
        }
        .pay-by p{
            font-size: .9rem;
        }    
        
        .img-leather{
            max-width: 300px;
        }



    }