@import url('https://fonts.googleapis.com/css2?family=Anton&family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Francois+One&family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /*pop*/
@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');/* award font*/
 
body {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #888 #f1f1f1; /* thumb and track color */
}

/* WebKit */
::-webkit-scrollbar {
    width: 8px;
 }

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555; 
}
body{
    background: rgb(8,7,43);
background: -moz-linear-gradient(148deg, rgba(8,7,43,1) 0%, rgba(10,12,41,1) 37%, rgba(54,7,15,1) 100%);
background: -webkit-linear-gradient(148deg, rgba(8,7,43,1) 0%, rgba(10,12,41,1) 37%, rgba(54,7,15,1) 100%);
background: linear-gradient(148deg, rgba(8,7,43,1) 0%, rgba(10,12,41,1) 37%, rgba(54,7,15,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#08072b",endColorstr="#36070f",GradientType=1);
background-repeat: no-repeat;
min-height: 100vh;
}
   /* Media query for tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    html, body {width: auto!important; overflow-x: hidden!important} 
}
.navbar{
    background-color: transparent !important;
}
.navbar-brand{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: gold !important;
    @media only screen and (max-width: 768px) {
        font-size: 15px !important;
    }
}
.navbar-toggler-icon {    
    color: white !important;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28 255, 255, 255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
}
.navbar-nav .nav-link{
    font-family: "Francois One", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgba(255, 255, 255, 0.929) !important;
}
 
footer .col-lg-4:first-child{
    opacity: 0.9;
    color: #c7acac !important;
  }
  footer a{
    color: #c7acac !important;
    text-decoration: none;
    font-size: 26px;
  }
  footer .col-lg-4:last-child{
    opacity: 0.9;
    color: #c7acac !important;
  }
  footer .col-lg-4:last-child a{
    font-size: 16px;
    text-decoration: underline;
  }
  main{
    min-height: 500px;
  }
  main .flex img{
    width: 300px;
    height: 240px;
    float: right;
    object-fit: cover;
   }
   .flex{
    width: 1000px;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    color: white;
    @media only screen and (max-width: 768px) {
        flex-direction: column;
        width: auto;
    }
     
   }
    .box{
    width: 450px;
    @media only screen and (max-width: 768px) {
        width: auto;

    }
   }
   .box1{
    width: 310px;
    @media only screen and (max-width: 768px) {
        width: auto;
    }
    /*laptop*/
 @media only screen and (min-width: 1024px) {
    width: 45%!important;
   }
   }
   .box1 img{
    width: 700px !important;
     /* Media query for tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 700px !important;
}
 
}
   .box2{
    border-right: 3px solid white;
    padding: 10px;
      /* Media query for tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    width: 100% !important;
}
 /*laptop*/
 @media only screen and (min-width: 1024px) {
    width: 40%!important;
   }
   }
   .box p{
     font-family: Poppins;
        height:145px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 6; /* Number of lines to show */
            -webkit-box-orient: vertical;
            height: calc(1.5 * 4); /* Line height * Number of lines */
            line-height: 1.5; /* Line height */    
            @media only screen and (max-width: 768px) {
                font-size: 16px;
                padding: 5px;
                height:150px;
                word-spacing: -1px;
            } 
   }
   .box h5{
    white-space: nowrap;        
    overflow: hidden;           
    text-overflow: ellipsis;    
    max-width: 400px;      
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
     font-style: normal;  
     
     @media only screen and (max-width: 768px) {
        max-width: 300px; 
        white-space:wrap;   
        overflow: none;       
        text-overflow: none;    
        text-align: center;
    } 
   }