*{
    margin:0;
    padding: 0;
}
body
{
    font-family: sans-serif;
}


/*nav bar*/
#nav-bar
{
    position: sticky;
    top: 0;
    z-index: 10;
}
.navbar{
    background-image: linear-gradient(to right,white,white);
    padding: 0 !important;
}
.navbar-brand img
{
    height: 70px;
    width: 100px;
    padding-left: 20px;
    margin-left: 2rem;
}
.navbar-nav li
{
    padding: 0 10px;
}
.nav-link {
    margin-top: 1.7rem;
    
  }
.nav-link.active,
.nav-link:hover {
  color: black!important;
}
.navbar-nav a
{
    color: #1f5a9e !important;
    font-weight: 700;
    float: right;
    text-align: left;
}
.dropdown-menu
{
    background-image: linear-gradient(to right,#1104cc,#0c59e7);
}
.dropdown-menu a{
    color: black !important;
    float: right;
    text-align: right;
}
.fa-bars
{
    font-size: 30px !important;
}
.navbar-toggler
{
    outline: none !important;
}
/*  END OF NAV */

/*==========BANNER SECTION=*/
#banner
{
    background-image: linear-gradient(to right, #2c9747,#0c59e7);
    color: white;
    padding-top: 5%;
}
#box-sec
{
    background-image: linear-gradient(to right,#cdcecf, #4d4780);
    
   
}
.location-title
{

    background-color: #1f5a9e;
    margin-top: 20px;
    font-size: 21px;
    font-weight: 300;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
   width: 200px;
    color: white;
}
.location-title p{
    text-align: center;
}
.date-c
{
    text-align: center;
    color: white;
}
.img-logo
{
    padding-top: 20%;
    width: 5rem;
    height: 5rem;
    margin-left: 2rem;
}
.p-name
{
    padding-top: 20%;
    font-size:20px;
    font-weight: 1000;
}
.p-para
{
    padding-top: 20%;
    font-size: 20px;
    font-weight: 700;
    margin-top: 25px;
    color: #1f5a9e;
}
.image-fader img {
    width: 14rem;
    height: 17rem;
    padding-top: 20%;
}


#program
{
    background-image: linear-gradient(to right,rgb(221, 221, 221), rgb(231, 231, 231));
    height: 3rem;
    margin-top: 40px;
}
.prog
{
    margin-top: 30px;
    font-family: sans-serif;
    font-size: large;
}
.btnprog a
{
    margin-top: 15px;
}
#tables
{
    margin-top: 40px;
}
.image-table img{
    width: 17rem;
    height: 17rem;
    border: 5px solid white;
    object-fit: cover;
}

.btn-success
{
    margin: 20px;
}
.img-fluid
{
    width: 120rem;
    height: 110rem;
    margin-top: 50px;
}

/* about banner*/
#aboutbanner
{
    background-image: linear-gradient(to right, rgb(82, 82, 82),#383175);
    color: white;
    padding-top: 5%;
    height: 80%;
   
}
.about-title
{
    font-size: 50px;
    font-weight: 800;
    margin-top: 22%;
    margin-left: 15%;;
}
.about-title1
{
    font-size: 50px;
    font-weight: 800;
    margin-top: 22%;
}

.img-about
{
    width: 15rem;
    height: 15rem;
    margin-top: 1rem;
    margin-right: 0px;
    object-fit: cover;
}
/* Assuming you want to reduce horizontal spacing */


/*======blog======================*/
#blog
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.blog-heading
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.blog-heading h2
{
color: #1f5a9e;
font-weight: bold;
}
.blog-container
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0px;
    flex-wrap: wrap;
}
.blog-box
{
    width: 21.7rem;
    background-color: #ffffff;
    border: 1px solid #ececec;
    margin: 20px;
}
.blog-img
{
    width: 100%;
    height: auto;
}
.blog-img img
{
   width: 21.7rem;
   height: 15rem;
   object-fit: cover;
   object-position: center; 
}
.blog-text
{
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.blog-text span
{
    color: black;
    font-size: 0.9rem;
    margin: 0;
}
.blog-text .blog-title
{
    font-size: 1.3rem;
    font-weight: 500;
    color: #044aa5;
}

.blog-text p 
{
    color: grey;
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 20px 0px;
}
.blog-text a
{
    color: #0f0f0f;
    font: bold;
    font-size: large;
}
.blog-text a:hover
{
    color: #0870f8;
    transition: all ease 0.3s;
}



/*=========event section=========*/
.event
{
    margin: 100px auto ;
    margin-top: -20px !important;
    margin-left: -60px !important;
}
.event-content
{
    box-shadow: 10px 10px 10px -10px rgba(0,0,0,0.3), 
    10px 10px 10px -10px rgba(0,0,0,0.5); 
    padding: 10px;
    cursor: pointer;
    background: #fff !important;
    margin-top: -70px;
    margin-left: 20px !important;
    position: absolute;
}
.event-content h4
{
    font-weight: bold;
    font-style: italic;
    font-size: 20px;
    margin-bottom: 5px;
}
.event-content span
{
    font-style: italic;
    font-size: 15px;
}
.event-content a
{
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 10px !important;
}
.event img
{
    transition: 0.6s;
}
.event img:hover
{
    transition: scale(1.1);
    cursor: pointer;
}
.event .col-sm-5
{
    margin-bottom: 60px !important;
   
    
}

/*==========partners=============*/
#partners
{
    margin: 20px 0;

}
.partners
{
    border-left: 4px solid #1f5a9e; 
    margin-top: 50px;
    margin-bottom: 50px;
}
.partners img
{
    width: 140px;
    height: 140px;
    border-radius: 6px;
    margin: 0 10px;
    object-fit: contain;
    background: #ffffff;
    padding: 8px;
    box-sizing: border-box;
}
.partner-detais
{
    display: inline-block;
    font-size: 12px;
}
.a-detais
{
    display: inline-block;
    font-size: 18px;
    font-style: italic;
}

/*============= FOOTER =============*/
#sec-footer
{
    top: 0;
    z-index: 10;
    position: sticky;
    margin-top: 20px;
}
footer{
    background-image: linear-gradient(to right, #dedceb,#b6bfd1);
    padding: 1rem 2rem 3rem;
    height: 12rem;
    width: 100%;
    color: black !important;
    
  }
  footer img{
    height: 3.5rem;
    margin: 1.5rem auto;
  }
  footer p, footer a,
  .socket{
      text-decoration: none;
      color: white;
      color: black !important;
  }
  
  ul.social {
    list-style-type: none;
    display: flex;
    max-width: 25rem;
    margin: 0 auto;
  }
  
  ul.social li{
    margin: 0 auto;
    color: black !important;
  }
  
  footer .svg-inline--fa{
    font-size: 2.3rem;
  }
  
  footer .svg-inline--fa:hover{
    color: rgb(113, 113, 117);
  }
  #aboutfooter
{
    background-image: linear-gradient(to right, black,#050220);
    color: white;
    padding-top: 5%;
}
.footerimg
{
    height: 7rem;
    width:9rem;
    margin-top: -10px;
}
.h5text
{
    color: white;
}
.ptext
{
    color: white;
    font-size: smaller;
}

@media only screen and (max-width: 600px) {
    /* Styles for small screens */
    .footer {
        font-size: 14px;
        padding: 10px;
    }
}



  
  /*============= SOCKET =============*/
  .socket{
    background-image: linear-gradient(to right, #f1f0f8,#b6bfd1);
    border-top: .1rem solid #231885;
    height: 2rem;
  }


    .read-more-btn {
        background-color: #007bff;
        color: #fff;
        border: none;
        width: 7rem;
        height: 2rem;
        cursor: pointer;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
    }

    #more-content {
        display: none;
        text-align: left;
    }

    /* Styles for all screen sizes */
.my-heading {
    color: #1f5a9e;
}
/* Styles for screens smaller than 600px */
@media (max-width: 600px) {
    .my-heading {
        color: red;
    }
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
}

.testiM{
    color: #1f5a9e;
}

.testimonial
{
    background: #fff;
    padding: 50px;
}
.testimonial img{
    width:100px;
    height: 100px;
    justify-content: center;
    border-radius: 50%;
}
.name{
    font-size: 30px;
    text-transform: uppercase;
}

.social-icons-row {
    display: flex;
    gap: 20px; /* Adjust the spacing between icons */
    justify-content: center;
}

.social-icon {
    justify-content: center;
    font-size: 24px; /* Adjust the icon size */
}

 /*banner */
.header
{
    margin: 0;
    padding: 0;
}
.header .img-parent
{
    position: relative;
}
.header img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.header .img-overlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    z-index: 1;
    opacity: 0.5;
}
.header .img-content{
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    color: #fff !important;
}

.promo-title
{
    font-size: 45px;
    font-weight: 900;
    margin-top: 20px;
    color: white;
}
.title
{
    font-size: 25px;
    font-weight: 500;
    color: white;
    margin-left: 15%;
}
.title1
{
    font-size: 25px;
    font-weight: 500;
    color: white;
}

/*bootcamp*/
.jumbotron {
    background-color: #1f5a9e;
    color: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
  }
  .containerb {
    max-width: 1000px;
    margin: 0 auto;
  }
  .phamp{
    margin-top: 30px;
    font-family: sans-serif;
    font-size: 25px;
  }


  /* fotr mobiles */

/* Devices under 1199px (xl) */
@media (max-width: 1199.98px) {

}
/* Devices under 768px (md) */
@media (max-width: 767.98px) {

}


/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/

/*-- Bootstrap Mobile Gutter Fix --*/
.row, .container-fluid {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/*-- Fixed Background Image --*/
.fixed-background {
  position: relative;
  width: 100%;
  z-index: 1000!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999 !important;
}
.fixed {
  z-index: -999!important;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}