html{

        scroll-behavior: smooth;
    }
    body {
        padding: 0;
        margin: 0;
    }

    /*----------------------------Nav Section Start-------------------------------------*/ 
    nav {
        position: fixed;
        z-index: 10;
        left: 0;
        right: 0;
        top: 0;
        font-family: 'Montserrat', sans-serif;
        padding: 0 5%;
        height: 50px;
        background-color: #3e65da;
 
        
        background-color:  #9eda3e;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
        background: linear-gradient(rgba(179, 6, 6, 0.7), rgba(238, 197, 15, 0.7));
   
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent); 

        background-color: #222;
    }
    nav{
        flex: 1;
    text-align: right; 
    }
    nav ul {
        display: inline; /* list-style-type: none; */
        list-style: none;
    }
    nav ul li {
        display: inline-flex;/* display:inline-block; */
        /* margin-right: 20px;
        padding-top: 15px; */

        /* background: #9eda3e; */
        padding: 15px 10px 10px;
    }
    nav ul li a{
        text-decoration: none;
        color: black;
        font-weight: 700;  
        
        color: #fff;
    }
    nav ul li a:hover{
        transform: scale(1.3);
        /* text-decoration: underline;	 */
        /* color:blue; */
    }
    nav .logo {
        float: left;
        width: 40px;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #fff;
        padding-left: 30px;
    }


    #nav-toggle {
        position: absolute;
        top: -100px;
    }
    .icon-burger {
        display: none;
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .icon-burger .line {
        width: 30px;
        height: 5px;
        background-color: #fff;
        margin: 5px;
        border-radius: 3px;
        transition: all .3s ease-in-out;
    }

    /* for the nav image logo and name */
    .img-logo{width: 43px;}
    .logo a{
        background: black;
        text-decoration: none;
        color: #fff;
        padding: 5px;
        margin-top: -3px;
    }
    @media screen and (max-width: 800px) {
         .img-logo{
            width: 34px;
        }

        .logo a{
            background: black;
            margin-top: -5px;
        }
    }

    /* for the nav section */
    @media screen and (max-width: 800px) {
        nav .logo {
            /* float: none;
            width: auto; */
            justify-content: center;
        }
 
        nav .links {
            float: none;
            position: fixed;
            z-index: 9;
            left: 0;
            right: 0;
            top: 100px;
            top: 40px;
            
            bottom: 100%;
            width: auto;
            height: auto;
            flex-direction: column; 
            justify-content: center;
            align-items: center;
            background-color: rgba(97, 78, 15, 0.9);
            overflow: hidden;
            box-sizing: border-box;
            transition: all .5s ease-in;
            display: block;

           background: darkorange;
        }
        nav .links a {
            font-size: 16px;
            color: rgba(01, 7, 09, .9);
        }
        nav ul li{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 11%;
            
        }
        nav ul li a:hover{
            transform: scale(1.5);
            color: gold;
            color: white;
        }

        /* nav :checked */
        :checked ~ .links {
            bottom: 0;
            
            bottom: 30%;
        }
        .icon-burger {
            display: block;
        }
        :checked ~ .icon-burger .line:nth-child(1) {
            transform: translateY(10px) rotate(225deg);
            background: red;
        }
        :checked ~ .icon-burger .line:nth-child(3) {
            transform: translateY(-10px) rotate(-225deg);
        }
        :checked ~ .icon-burger .line:nth-child(2) {
            opacity: 0;
        }

    }


    /*------------ background cover ---------------*/
    .main-header{
        width:100%;
        height: 50vh;
        padding: 20px;
        background-image:url(../../cdn/images/light.jpg);
        margin-top: 0px;


        background-position: center;
        background-size: cover;


        /* position: relative;
        margin-top: 50px;
    width: 100%;
    margin: auto;
        padding-top: 30% ;
        height: 35vh; */
        
    }   
    .defination{
        padding: 10px 20px 5px; background: #222; margin-top: 0px;
        color: white; font-size: 70%; width: 100%; position: fixed;
        display: flex;
    }
    .giv-space{margin-top: 40px;}

    .links-five{
        padding: 5px; border-radius: 5px;
    }
    
    .link-support{
        color:gold; padding: 0px 5px;
    }
    .f-line{
        background: white; height: 2px;
    }

    @media screen and (max-width: 800px) {
        .links li:nth-child(5){
            background: none;
        }
        .main-header{
            /* background-image:url(../../cdn/images/light.jpg); */
            background-position: center;
            background-size: cover;


            /* min-height: 100vh; */
            /* width:100%;
            background-image: url(../../cdn/images/istockphoto8.jpg);
            background-position: center;
            background-size: contain;
        
            position: relative;
            margin-top: 50px;

            padding-top: 20% ;
            min-height: 30vh; */
            
        }
        .f-line{
            margin-top: 40px;
            width: 102%;
            margin-left: -10px;
            background: #000;
            
        }
        .link-support{
            color:white !important; padding: 0px 5px;
        }
        /* .link-support:hover{
            color:white !important; padding: 0px 5px;
        } */
    }
    /*----------------------------Nav Section End-------------------------------------*/ 
    .main-head{
        width:100%;
        padding: 0px;     
        display: flex;
        justify-content: center; 

    }
    .main-head img{
       
        width: 100vw;
        height: 70vh;


    }
    @media screen and (max-width: 1200px) {  
        .main-head{
            width:100%;    
            display: flex;
            justify-content: center;   
        }
        .main-head img{
            width: 100vw;
            height: 70vh;
        }
    }
    @media screen and (max-width: 800px) {
        .main-head{
            width:100%;
            height: 50%;
            padding: 25px 5px 5px 0px;
          
          display: flex;
          justify-content: center; 
          margin: 0px 10px 0px 0pxpx;
            aspect-ratio: 5/3;
        }
        .main-head img{
            width:100%;
            height: 100%;
            padding: 0px 10px;
        }
        .giv-space{margin-top: 40px;}

    }



    /*----------------------------main section 1-------------------------------------*/ 

    /*********** header section ****************/

            .header {
                background-color: #333;
                color: #fff;
                padding: 20px 0;
                background: linear-gradient(rgba(179, 6, 6, 0.7), rgba(238, 197, 15, 0.7));
                margin-top: 0px;
            }
            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
            }
   
            .row {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
            }
            .col-2{
                flex-basis: calc(50% - 20px);
                margin-bottom: -20px;
            }
       
            .col-2-a {
                flex-basis: calc(70%);
                margin-bottom: 20px;
            }
            .left {

                order: 2; 
                /* Change the order for smaller screens */
            }
            .col-2-b{
                flex-basis: calc(25%);
                padding-right: 30px;
            }
            .col-2-b img {
                width: 100%;
                height: auto;
                border-radius: 25%;  
                 
            }
            .col-2 img {
                max-width: 100%;
                height: auto;  
            }

            .header h2 {
                margin-top: 0;
                background-color: #222;
                 width: 80%; 
                 /* padding-left: 10px; */
                 color: white;
            }

            p {margin-bottom: 10px;}

            .btn-main {
                display: inline-block;
                padding: 10px 20px;
                background-color: #fff;
                color: #333;
                text-decoration: none;
                border-radius: 5px;
                margin-top: 40px;
            }
            .btn-main:hover{
                background: radial-gradient(#c50f0f,gold);
                color: white;
            }

            .pointer{background: #dad73e; width: 80%; padding: 10px; color: #000;}
          
            @media (max-width: 768px) {
                .col-2 {
                    flex-basis: 100%;
                   
                }
                .col-2-a {
                    flex-basis: 100%;
                }

                .left {
                    order: 1;
                }
                .btn-main {
                    margin-top: 20px;
                }
                .header h2 {
                    color: white;
                }
                .inside h2 {
                    color: white;
                   
                }
                h2{
                    background: black;
                    padding: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 93%;

                    color: black;
                    /* background: #67696f; */

                    /* font-size: 15px !important; */
                    color: wheat;
                }
                .donating{
                    color: #000;
                }
                .pointer{background: #dad73e; padding: 10px; color: #000;}
            }
	
    /*----------------------------our course section-------------------------------------*/ 

    /*********** course section ****************/
    .course{
        /* width: 80%; */   /* - */
        /*margin: auto; */  /* - */
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        /* margin: 2px 10px 20px;           */
        background-image:linear-gradient(rgba(183, 226, 126, 0.4),rgba(4,9,30,0.7)); /* ,url(../../cdn/images/basketball.png);   */
        background-size: cover;
        /* position: relative; -----*/       /* + */
       
    }
    h1{
        font-size: 36px;    
    }
    .course p{
        /* color: #000; */
        font-size: 16px;
        font-weight: 300; 
        line-height: 22px; /* distance btw the text in row */
        /* padding: 10px;  */
    }
    .rowf{
        display: flex;
        margin-top: 5px;
        justify-content: space-between;
    }
    .course-col{
        margin: auto; /* + */
        flex-basis: 31%;
        background: rgb(190, 186, 178);
        box-sizing: border-box;
        margin-bottom: 10px;
        padding: 20px 12px;
        border-radius: 10px; 
        transition: 0.5s;
        margin: 10px 30px;
        
        /* background: white; */
        /* background: gold */

        background: radial-gradient(rgb(99, 221, 99),rgb(190, 186, 178));
        flex-basis: 50%;
        

    }
    
    h3{
        text-align: center;
        font-weight: 600;
        margin: 10px 0;
    
    }
    /*.course-col:hover{*/
    /*    transform: scale(.99);*/
    
    /*    box-shadow: 10px 15px 20px 30px  rgba(189, 216, 159, 0.7);*/
    /*    background: rgba(10, 5, 14, 0.7);*/
    /*    color: white;*/
    /*}*/
    

/*----------------------------12 slidersection of col-2 right-------------------------------------*/ 
.headerTwo {
    /* background-color: #333; */
    color: #fff;
    margin-top: -30px;
    padding: -10px 0;
    /* background: linear-gradient(rgba(179, 6, 6, 0.7), rgba(4,9,30,0.7)); */

}
    /*********** col-2 right section  only****************/
    .right{
        margin-top: 25px; 
        margin-bottom: 50px;
        margin-bottom: 25px;
    }
    .right p{
        
        width: 70%;
        margin: auto;
    }
    @media screen and (max-width: 800px) {
        .right{
            margin-top: 25px; 
            /* margin-bottom: 32px; */
            margin-bottom: 4px;
            
        }
    }
/*----------------------------our facility section-------------------------------------*/ 

    /*********** facility section ****************/

.facilities{
    /* width: 80%; */ /* - */
    /* margin: auto; */  /* - */
    padding-top: 40px;
    text-align: center;
  
    background-color: #db1153;
}
/* h1{
    font-size: 36px;    
} */
.facilities p{
   color: #000;
   font-size: 16px;
   font-weight: 300; 
   line-height: 22px; /* distance btw the text in row */
   padding: 10px; 
}
/* .rowf{
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
} */
.facilities-col{
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 5%;
    margin-bottom: 2%;
    margin-left: 20px; /* + */
    margin-right: 20px; /* + */
    text-align: left;
}
.facilities-col img{
    width: 100%;
    border-radius: 10px; 
    height: 70%;  
}
.facilities-col p{
    padding: 0;
    text-align: center;
    color:white;
}
.facilities-col h3{
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: center;
}
.facilities h1{
    color: #fff;
    margin-top: -25px;
    padding-top: -5px;
    color:wheat;
}
@media(max-width: 700px){
    .rowf{     
        flex-direction: column; /* turn the row to horizontal */
    }
    .facilities-col img{
        width: 100%;
        height: 70%; 
        aspect-ratio: 5/3; 
    }
}

/*----------------------------our newsletter section-------------------------------------*/ 

    /*********** newsletter section ****************/

.section-p1{
    padding: 40px 80px;
}
.section-m1{
    margin:0px 0;
}
#newsletter{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    background-color: #041e42;
}
#newsletter h4{
    color: #fff;
    font-weight: 700;
    font-size: 22px;
}
#newsletter p{
    color: #818ea0;
    font-weight: 600;
    font-size: 14px;
}
#newsletter p span{
    color: #ffbd27;
}
#newsletter input {
    height: 3.125rem;
    padding: 0 1.25em;
    font-size: 14px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    outline: none;
}
#newsletter button{
    background-color: #088178;
    color: #fff;
    white-space: nowrap;
}
#newsletter .form{
    display: flex;
    width: 40%;
}
 
/*----------------------------our footer section-------------------------------------*/ 

    /*********** footer section ****************/

/* @import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap'); */
*{
    margin: 0;
    padding: 0; 
    /* box-sizing: border-box;
    font-family: 'Spartan', sans-serif; */
}


footer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
footer .col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}
footer .logo{
    margin-bottom: 30px;
}
footer h4{
    font-size: 14px;
    padding-bottom: 20px;
	color: #c51414;
}
footer p{
    font-size: 13px;
    margin: 0 0 8px 0;
}
footer a{
    font-size: 13px;
    text-decoration: none;
    color: #222;
    margin-bottom: 10px;
}
footer .follow{
    margin-top: 20px;
}
footer .follow i{
    color: #465b52;
    padding-right: 4px;
    cursor: pointer;

    padding-right: 40px;
    display: table-cell;
}
footer .install .row img{
    border: 1px solid #088178;
    border-radius: 6px;
}
footer .install img{
    margin: 10px 0 15px 0;
}

footer .follow i:hover,
footer a:hover{
    color: #088178;
}
footer .copyright{
    width: 100%;
    text-align: center;
}






/*----------------start media query- newsletter and footer--------------------*/
@media (max-width:799px) {
    .section-p1{
        padding: 40px 40px;
    }
    #newsletter .form{
        width: 70%;
    }
}

@media (max-width:477px) {

    .section-p1 {
        padding: 15px 40px;      
    }
    #newsletter .form{
        width: 100%;
    }
    #newsletter {
        padding: 40px 20px;
    }
    footer .copyright{
        text-align: start;
    }
}