body {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            margin: 0;

            font-family: Arial, sans-serif;

        }



        .container {

            display: flex;

            align-items: center;

            padding-top: 10px;

            margin-bottom: 15px;

            flex-wrap: wrap; /* Ensures layout is responsive */

        }



        .navcontainer {

        }



        .navcontainercell {

padding: 20px;

border-radius: 30px;  

       display: flex;

margin-bottom: 20px;

            align-items: center;

background-color:  #316198; 

            flex-wrap: wrap; /* Ensures layout is responsive */

margin: 0 auto;

        }







@media screen and (max-width: 780px) {

    .only-small-screens {

        display: block; /* Show the content */

    }

}



@media screen and (min-width: 781px) {

    .only-small-screens {

        display: none; /* Hide the content */

    }

}





@media screen and (max-width: 780px) {

    .only-large-screens {

        display: none; /* Show the content */

    }

}



@media screen and (min-width: 781px) {

    .only-large-screens {

        display: block; /* Hide the content */

    }

}







.about {

  width: 100%; 

 display: flex;

}





.aboutleft {

  padding: 20px; /* Padding inside the container */

  width: 60%; 

 font-family: Arial, sans-serif;

  margin: 20px auto; /* Center it and give spacing */

margin-left: 5%;

}



.aboutright {

  width: 25%; 

margin-right: 6%;

margin-left: 3%;

 margin-top: 14%;

}



.aboutrightimage {

  width: 100%; 

margin-bottom: 1%;

}



.aboutrightimage img {

  width: 100%; 

  height: auto;

   border-radius: 20px;       

}



.abouttitle {

  font-size: 40px; 

  font-weight: bold; /* Bold text for emphasis */

  color: white; 

  margin-bottom: 60px; /* Spacing between title and text */

padding: 20px;

border-radius: 30px;  

      

            align-items: center;

background-color:  #316198; 



}



.abouttext {

  font-size: 20px; /* Normal font size for body text */

  color: #555; /* Softer color for easier reading */

  line-height: 1.6; /* Better line spacing for readability */

}



.footer {

  padding: 20px 0;

  text-align: center;

}

       





     .image-containertop {

            width: 30%;

                 margin: 0 auto;

        }



        .image-containertop img {

            width: 100%;

            height: auto;

            margin: 0 auto;

        }



 .mobileheader {

            width: 90%;

                 margin: 0 auto;

padding-top: 10px;

padding-bottom: 10px;

    width: 96%;

    margin: 0 auto; /* Center the div */

    background-color: #316198;

    border-radius: 80px;

    display: flex;

margin-top: 10px;

    justify-content: space-between;

    box-sizing: border-box;

margin-bottom: 10px;

        }



    .mobile-image-containertop {

            width: 50%;

                 margin: 0 auto;

        }



        .mobile-image-containertop img {

            width: 100%;

            height: auto;

            margin: 0 auto;

        }



     .image-container {

            width: 40%;

      margin: 0 auto;

        }





















.indexcontainer {

    display: flex;

    width: 96%;

    margin: 0 auto;



}



.indexleft-div1 {

    width: 69%;

}









.indexdivtitle {

margin: 0 auto;

 background-color: white; 

   font-size: 30px;

text-align: center;

margin-top: 10px;

margin-bottom: 10px;

padding: 25px;

border-radius: 30px; 

color: #E10081;

}



.indexleft-div1title {

    width: 90%;

   font-size: 30px;

font-weight: bold;

}



.indexleft-div1text {

    width: 90%;

   font-size: 20px;

   margin-top: 20px;

color: white;

}



.indexright-div1 {

    width: 28%;

    margin-left: 2%;

border-radius: 40px;

}



.indexright-div1 img {

    width: 100%;

border-radius: 40px;

}





.indexright-div1 img:hover {

    transform: translateY(-10px); /* Move image up by 10px */

}





.indexleft-div2 {

    width: 27%;

margin-left: 1%;

}





.indexleft-div2title {

    width: 90%;

   font-size: 30px;

font-weight: bold;

}



.indexright-div2 {

    width: 69%;

    margin-left: 2%;

}



.indexleft-div2 img {

    width: 100%;

border-radius: 40px;

}



.indexleft-div2 img:hover {

    transform: translateY(-10px); /* Move image up by 10px */

}



























.indexbasecontainer {

    display: flex;

    width: 94%;

margin: 0 auto;

padding: 1%;

margin-top: 20px;

color: #316198;

 border-radius: 20px;

    justify-content: space-between; /* Distributes equal gaps */

   background-color: #EDF4FA; 

}



.indexbasecolumn {

    width: 32%;

    padding: 10px;

}



.indexbasecolumntitle {

    width: 95%;

font-weight: bold;

font-size: 20px;

margin-bottom: 15px;

}



.indexbasecolumntext {

    width: 85%;

font-size: 20px;

margin-bottom: 15px;

}





.indexcustom-divback{

width: 100%;

margin: 0 auto;

background-color: #E10081;

}



.indexcustom-divback1{

width: 100%;

margin: 0 auto;

background-color: #E10081;

}





.indexcustom-div {

    width: 65%;

    height: 100px; /* Adjust height as needed */

    background-color: #EDF4FA; /* Replace with your desired background color */

    border-top-left-radius: 20px;

    border-bottom-left-radius: 20px;

    margin-left: auto; /* Push the div to the right */

}



.indexcustom-divleft {

    width: 65%;

    height:100px; /* Adjust height as needed */

    background-color: #EDF4FA; /* Replace with your desired background color */

    border-top-right-radius: 20px;

    border-bottom-right-radius: 20px;

    margin-right: auto; /* Push the div to the right */

}





.indexdivbox {

            width: 90%;

            padding: 40px;

            background-color: #EDF4FA;

            border-radius: 15px;

            margin-bottom: 30px;

        }



.indexdivboxmiddle {

            width: 96%;

padding-left: 2%;

padding-right: 2%;

            padding-top: 30px;

padding-bottom: 30px;

            background-color: #EDF4FA;

        }



        .indexdivboxtitle {

            width: 90%;

            font-size: 40px;

            font-weight: bold;

            margin-bottom: 20px;

            margin-left: 2%;

            color: #316198;

        }



        .indexdivboxtext {

            width: 90%;

            font-size: 25px;

            margin-bottom: 20px;

            margin-left: 2%;

            color: #316198;

        }



        .colored-divboxtitle {

            width: 96%;

            padding-top: 30px;

         padding-bottom: 30px;

            background-color: #316198;

  border-top-left-radius: 15px;

  border-top-right-radius: 15px;

            display: flex; /* Enable flexbox */

            flex-wrap: wrap; /* Allow wrapping to next line for smaller screens */

            gap: 20px; /* Add spacing between columns */

            justify-content: space-between; /* Distribute space evenly */

        }



        .colored-divbox {

            width: 96%;

margin: 0 auto;

            padding-top: 30px;

         padding-bottom: 30px;

            background-color: #E10081;

  border-radius: 15px;

            display: flex; /* Enable flexbox */

            flex-wrap: wrap; /* Allow wrapping to next line for smaller screens */

            gap: 20px; /* Add spacing between columns */

            justify-content: space-between; /* Distribute space evenly */

        }



        .colored-divbox1 {

              width: 100%;

            padding-top: 30px;

         padding-bottom: 30px;

            background-color: #E10081;

  border-top-right-radius: 15px;

  border-bottom-left-radius: 15px;

            display: flex; /* Enable flexbox */

            flex-wrap: wrap; /* Allow wrapping to next line for smaller screens */

            gap: 20px; /* Add spacing between columns */

            justify-content: space-between; /* Distribute space evenly */

        }



        .colored-divbox2 {

            width: 100%;

            padding-top: 30px;

         padding-bottom: 30px;

            background-color: #E10081;

  border-top-left-radius: 15px;

  border-bottom-right-radius: 15px;

            display: flex; /* Enable flexbox */

            flex-wrap: wrap; /* Allow wrapping to next line for smaller screens */

            gap: 20px; /* Add spacing between columns */

            justify-content: space-between; /* Distribute space evenly */

        }



        .colored-divbox3 {

              width: 100%;

            padding-top: 30px;

         padding-bottom: 30px;

            background-color:#E10081;

  border-top-right-radius: 15px;

  border-bottom-left-radius: 15px;

  border-bottom-right-radius: 15px;

            display: flex; /* Enable flexbox */

            flex-wrap: wrap; /* Allow wrapping to next line for smaller screens */

            gap: 20px; /* Add spacing between columns */

            justify-content: space-between; /* Distribute space evenly */

        }























        .colored-div {

            width: calc(50% - 10px); /* Set each column to half the width, accounting for the gap */

            padding: 20px;

            box-sizing: border-box;

        }



        .middle-container {

            width: 100%;

            margin: 0 auto;

            height: auto;

            border-radius: 25px;

        }



        .middle-container img {

            width: 100%;

            margin: 0 auto;

            height: auto;

            border-radius: 25px;

        }





.indexbaselink {

    text-decoration: underline;

color: #316198;

}



.indexbaselink:hover {

    text-decoration: none;

}







.indexbaselink1 {

    text-decoration: none;

color: white;

}



.indexbaselink1:hover {

    text-decoration: none;

}



.footer {

  padding: 20px 0;

  font-size: 14px;

  text-align: center;

}





.footerlink {

    text-decoration: none;

color: black;

}



.footerlink:hover {

    text-decoration: underline;

}



        .headerlink {

            padding: 20px;

            margin-left: 10px;

            margin-right: 10px;

            text-align: center;

            font-weight: bold;

            transition: background-color 0.3s ease;

            text-decoration: none; /* Added for anchor styling consistency */

            color: white; /* Ensures color matches design */

        }









        #indexmenucell {

           width: 98%;

           margin: 0 auto;

        }



        #indexmenu {

            display: flex;

            justify-content: space-between;

            margin: 0 auto;

            padding: 0;

border-radius: 30px; 

        }



        #indexmenu .menu-item {

            flex: 1;

            margin: 0 1%; 

            box-sizing: border-box;

        }



        #indexmenu .menu-item img {

            width: 100%;

            height: auto;

            display: block;

border-radius: 30px; 

        }













        #indexmenucell1 {

           width: 98%;

           margin: 0 auto;

        }



        #indexmenu1 {

            display: flex;

            justify-content: space-between;

            margin: 0 auto;

            padding: 0;

border-radius: 30px; 

        }



        #indexmenu1 .menu-item {

            flex: 1;

            margin: 0 1%; 

            box-sizing: border-box;

        }



        #indexmenu1 .menu-item img {

            width: 100%;

            height: auto;

            display: block;

border-radius: 30px; 

        }



























.menu-itemgametitle {

       

  font-size: 20px;

color: white;

margin-top: 15px;

text-align: center;

        }





   .menu-item img {

            width: 100%;

    height: auto;

    display: block;

    margin: 0 auto;

 border-radius: 30px; 

}

 .menu-item img:hover {

    transform: translateY(-10px); /* Move image up by 10px */

}





       .menucontainer {

            display: flex;

            margin-bottom: 1%;

 width: 100%;

        }

        .menuleft {

            width: 62%;

        margin-left: 2%;

        }

       .menuleft img {

            width: 100%;

    height: auto;

    display: block;

    margin: 0 auto;

}



        .menuright {

               width: 33%; 

margin-left: 1%;  

             background-color: #4CAEFF; 

          border-radius: 30px; 

color: white;

        }





       .mobilemenucontainer {

          

            margin-bottom: 2%;

 width: 100%;

        }

        .mobilemenuleft {

padding: 2%;

            width: 96%;

        }

       .mobilemenuleft img {

            width: 100%;

    height: auto;

    display: block;

    margin: 0 auto;

 border-radius: 30px; 

}













        .mobilemenuright {

            width: 92%;

       padding: 2%;

margin-left: 2%;

             background-color: #4CAEFF; 

          border-radius: 30px; 

color: white;

        }

















.menubaserightdiv {

    width: 48%;

    box-sizing: border-box; /* Ensures the border is included in the width */

    display: inline-block; /* Allows the divs to sit side by side */

margin-left: 1%;

margin-right: 1%;

}



.menubaserightdiv img{

    width: 100%;

 border-radius: 30px; 

}





.menubaserightcontainer {

    display: flex; /* Ensures the divs are properly aligned side by side */

}





.menurightdiv {

  width: 90%;

  margin: 5%;

}



.menurightdivtitle {

  width: 96%;

margin-top: 5%;

  font-weight: bold;

  font-size: 20px; 

}



.menurightdivtext {

  width: 100%;

margin-top: 1%;

}





        .menubaseleft {

margin-top: 1%;

            width: 33%;

        margin-left: 2%;

       margin-right: 1%;

   background-color: #4CAEFF; 

          border-radius: 30px; 

color: white;



        }



       .menubaseright img {

            width: 100%;

    height: auto;

    display: block;

    margin: 0 auto; 

}



        .menubaseright {

            width: 62%;

margin-top: 1%;

          

        }





        .mobilemenubaseleft {

margin-top: 2%;

margin-left: 2%;

            width: 92%;

        padding: 2%;

   background-color: #4CAEFF; 

          border-radius: 30px; 

color: white;

        }



.mobilemenubaseright {

margin-top: 2%;

}



       .mobilemenubaseright img {

            width: 96%;

    height: auto;

    display: block;

    margin: 0 auto;

 border-radius: 30px; 

}





















  .headerouter-container {

    width: 96%;

    margin: 0 auto; /* Center the div */

    background-color: #316198;

    border-radius: 80px;

    display: flex;

margin-top: 10px;

    justify-content: space-between;

    box-sizing: border-box;

margin-bottom: 1%;

  }



  .headerinner-container {

    width: 100%;

    margin: 0 auto; /* Center the div */  

    display: flex;

    justify-content: space-between;

    padding: 20px; /* Optional padding */

    box-sizing: border-box;

  }



  /* Left div styles */

  .headerleft-div {

    width: 30%;

    box-sizing: border-box;

padding-left: 30px;

padding-right: 30px;

  }



  /* Left div styles */

  .headerleft-div img{

    width: 100%;

  }





  /* Right div styles */

  .headerright-div {

    width: 60%;

 

    color: white;

    padding: 10px;

    box-sizing: border-box;

  }



        .navcontainercellheader {

padding: 20px;

border-radius: 30px;  

       display: flex;

margin-top: 10px;



            align-items: center;

            flex-wrap: wrap; /* Ensures layout is responsive */

        }



.navcontainerheader {

            padding: 15px;

            margin-left: 10px;

            margin-right: 10px;

            text-align: center;

            font-weight: bold;

}



.navcontainerheader a {

            padding: 20px;

            margin-left: 10px;

            margin-right: 10px;

            text-align: center;

            font-weight: bold;

            text-decoration: none; /* Added for anchor styling consistency */

            color: white; /* Ensures color matches design */

}



.navcontainerheader:hover {

  background-color: white;

  border-radius: 30px;

  color: #316198;

}



.navcontainerheader:hover a{



  color: #316198;

}



        .headerlinkheader {

            padding: 20px;

            margin-left: 10px;

            margin-right: 10px;

            text-align: center;

            font-weight: bold;

            transition: background-color 0.3s ease;

            text-decoration: none; /* Added for anchor styling consistency */

            color: white; /* Ensures color matches design */

        }



.headerlinkheader:hover{

  color: #316198;

  border-radius: 30px;



}