* {
   font-family: sans-serif;
   box-sizing: border-box;
   transition: 0.3s;
   color: #383838
 }

 body {
   width: 100%;
   margin: 0;
   padding: 0;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
    /* background-color: #E3E0D7; */
   /* background-color:white; */
   /* background:#F0F2F5; */
   background-color:#F2F4F7;
   animation: fadein 1s linear;
 }
 

 @keyframes fadein{
  from{
    opacity: 0;
  }to{
  opacity: 1;
  }
 }




 /*             =====================       The Main Content      ==================                  */
 main {
   width: 100%;
   margin-top: 30px;
   /* background-color: green; */
 }

 section {
   width: 100%;
   margin-bottom: 50px;
   /* background-color: #E3E0D7; */
   /* background-color:white */
 }.section-header{
  margin-left: 10px;
 }p {
  padding: 10px!important;
 }

 .img-banner {
   width: 100%;
   min-height: 30vh;
   position: relative;
   background-image: url(/asset/media/images/cps-group-pic2.jpg);
   background-size: cover;
   padding: 50px 0px;

 }.img-banner.fixed-bg{
    background-attachment: fixed;
 }

 .img-banner.welcome {
   padding-top: 120px;
   padding-bottom: 50px;
 }

 .img-banner.welcome{
        padding-top: 200px;
        padding-bottom: 100px;
    }

 .img-banner::after {
   content: '';
   background-color: rgba(0, 0, 0, 0.5);
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }

 .img-banner * {
   color: white;
 }

 .img-banner .content {
   width: 100%;
   position: relative;
   color: white;
   height: fit-content;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   padding: 0px 10px;
   z-index: 1;
 }
  .img-banner .content.block{
    display: block;
  }

 .img-banner .container {
   width: calc(50% - 10px);
 }

 .img-banner .container.half-quater {
   width: calc(70% - 10px);
 }

 .img-banner .container.quater {
   width: calc(30% - 10px);
   width: 350px;
 }

 .img-banner .container.full {
   width: 100%;
 }

 .img-banner p {
   font-size: 20px;
   line-height: 30px;
 }

 .surfix-line {
   width: 100px;
   height: 2px;
   background-color: orangered;
   margin-left: 10px;
 }


  /* ===========  Gallery  ============= */
  .img-gallery {
   width: 100%;
   height: fit-content;
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   padding: 10px;
   text-align: center;
   justify-content: center;
  }

  .img-gallery img {
   width: 170px;
   height: 170px;
   object-fit: cover;
  }





 /*  ===============         Page Specific       ============= */
 /*  ====    Home    ==== */
 .flash-container marquee {
   display: flex;
   flex-wrap: wrap;
 }

 .flash-container marquee a {
   margin-bottom: 20px;
 }

 div.cop-container {
   width: 350px;
   height: fit-content;
   margin: auto;
   margin-top: 50px;
 }

 .cop-container img {
   width: 70px;
   border-radius: 50%;

 }


 .cop-container .infor {
   padding: 5px 10px;
   background-color: orangered;
   color: white;
   border-radius: 10px;
   margin-top: 20px;
 }


 /*     ==========================    Our Team    ============================   */

   .team-group-container {
   width: 100%;
  }

  .team-group-container .group {
   width: 100%;
   margin-bottom: 30px;
  }

  .team-group-container .members-container {}

  .members .member {}

  .team-group-container h2 {
   padding: 10px;
  }

  .team-group-container .member .img-container {
   width: 95%;
   margin: auto;
   position: relative;
  }

  .team-group-container .img-container img {
   width: 100%;
  }

  .team-group-container .description {
   width: 300px;
   max-width: 80%;
   padding: 30px;
   background-color: #050D13;
   margin: auto;
   transform: translateY(-50px);
   border-bottom: 3px solid orangered;
   border-radius: 10px;
   text-transform: capitalize;

  }

  .team-group-container .description * {
   color: white
  }

  .team-group-container .description li {
   display: flex;
   font-size: 15px;
   margin-bottom: 15px;
   gap: 10px;
  }

  .team-group-container li.name {
   font-weight: bold;
   font-size: 20px;
  }

 .team-group-container  li.infor {
   font-weight: bold;
   font-size: 15px;
   letter-spacing: 1.5px;
  }

  .team-group-container .overlay {
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 1;
   height: 100%;
   width: 100%;
   display: flex;
   align-items:center;
   text-align: center;
   padding: 0px 10px;
   transform: translateY(100%);
   visibility: hidden;
   opacity: 0;
  }
  .team-group-container .overlay *{
    color:white;
  }.team-group-container .overlay p{
    font-size: 13px;
    line-height: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .team-group-container .icons-container{
    display: flex;
    gap: 5px;
    margin: auto;
    width: fit-content;
  }.team-group-container .icons-container i{
    font-size: 15px;
    color:white;
    padding: 5px;
  }.team-group-container .member:hover .overlay{
    transform: translateY(0%);
   visibility: visible;
   opacity: 1;
  }

  .team-group-container .icons-container a:hover{
    transform: translateY(-5px);
  }
  .team-group-container .view-profile {
    position: absolute;
    top: 5px;
    right: 5px;
    background:royalblue;
    padding: 8px 20px;
    border-radius:3px;
    font-size: 13px;

  }.team-group-container .view-profile:hover .icon{
    transform: translateX(5px);
  }



   /*     ==========================    Events Page    ============================   */


  .box.event-item:hover {
   rotate: 1.5deg;
   scale: 1.02;
  }

  .box.event-item .date {
   background-color: #F0F2F5;
   padding: 10px;
   color: #383838;
   font-size: 13px
  }

  .box.event-item .icon {
   background-color: royalblue;
   padding: 10px;
   color: #383838;
   /* position: absolute;
   bottom: -15px;
   right: -5px; */
   display: flex;
   align-items: center;
   justify-content: center;
    margin-top: 20px!important;
    float: right;
    margin-left: calc(100% - 20px);

  }

  .box.event-item .icon i {
   font-size: 14px;
  }

  .box.event-item .date * {
   color: #383838;
  }


   .event-flash {
   font-size: 25px;
   font-weight: bold;
   margin: auto;
   text-align: center;
   padding: 20px 10px;
   background-color: brown;
   box-sizing: border-box;
   color: white
  }

  .event-infor-container {
   width: 90%;
   height: fit-content;
   display: flex;
   margin: auto;
   margin-top: 30px;
  }

  .event-infor-container>div:nth-child(1) {
    width: calc(70% - 20px);
  }.event-infor-container>div:nth-child(2) {
   width: calc(30% - 20px);
  }

  .event-img img {
   width: 100%;
   max-height: 80vh;
   object-fit: cover;
  }

  .event-infor {
   padding: 20px;
   background: goldenrod;
  }

  .event-infor .item {
   margin-bottom: 20px;
   display: flex;
   gap: 10px;
   font-size: 17px;
   font-weight: 350;
   align-items: center;
  }



  .share-post-container {
   width: fit-content;
   margin-left: 10px;
   margin-top: 10px;
   display: flex;
   gap: 5px;

  }

  .share-post-container .post-btn {
   border: none;
   outline: none;
   padding: 5px 10px;
   border-radius: 5px
  }

  .event-summary {
   margin: 10px 5px;
  }

  .references-container {
   width: calc(100% - 10px);
   margin: auto;
   margin-top: 10px;
   display: flex;
   flex-wrap: wrap;
   gap: 20px;

  }

  .references-container .item {
   width: calc(50% - 20px);
   font-size: 17px;
   color: royalblue;
   font-weight: 500;
   /* padding: 15px 10px; */
   display: flex;
   gap: 10px;
   border-radius: 10px;
   word-break: break-all;
   margin-bottom: 10px;
  }

  .references-container .item:hover{
    transform: translateX(5px);
  }



  .other-event-container {
   width: 98%;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 10px;
   margin-bottom: 10px;
   margin: auto;

  }


  .other-event-container .box {
   border-radius: 7px;
   padding: 20px;
  }

  .other-event-container .box:hover {
   transform: translateY(-5px);
  }

  .other-event-container .box .date {
   display: flex;
   gap: 5px;
  }


  @media only screen and (max-width:720px) {
   .event-infor-container {
    display: block
   }

   




   .references-container .item {
    width: calc(100% - 20px);
    margin: auto;
   }
  }






 /*     =======================         Responsive Design       =========================        */
  @media only screen and (max-width:480px) {
    .cop-container{
      width: 90%;
      margin: auto;
    }
  }
 @media only screen and (max-width:921px) {
   .img-banner .container {
     width: 100% !important;
   }
 }

 @media only screen and (max-width:1200px) {
   .main-header {
     height: 60px;
   }

   .header-logo {
     display: none !important;
   }

   .sidenav-toggler {
     display: block;
   }

   nav {
     position: fixed;
     width: 250px;
     height: calc(100vh);
     left: 0;
     top: 0;
     background: #F2F4F7;
     /* background-color:white; */
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
     transform: translateX(-250px);
     display: block;
     transition: 0.4s ease-in-out;
     overflow: auto;

   }

   nav.active {
     transform: translateX(0px);
   }

   .nav-logo {
     display: block;
     height: 80px;
     display: flex;
     align-items: center
   }

   .nav-logo img {
     width: 150px;
     height: auto;
   }

   .main-nav {
     display: block;
   }

   .main-nav a {
     margin: 20px 0px;
     display: block;
     text-align: left;
     padding-left: 10px;
   }

   .main-nav .name {
     color: #383838;
   }

   .control-nav>a>.name {
     display: none;
   }

   .control-nav {
     gap: 30px;
   }



   /* Events */
   .event-infor-container{
    display: block;
    padding: 0!important;
   }
   .event-infor-container>div {
    width: calc(100% - 10px)!important;
    margin: auto;
    margin-bottom: 10px
   }

   .event-infor {
    padding: 10px 15px;
    font-size: 15px !important
   }

   .event-infor .name {
    font-size: 14px
   }

   .event-infor .value {
    font-size: 16px
   }

 }




 /* =====================================   The Site Searrch Windoe   ================================= */
   .site-search-window,
  .site-search-window * {
   transition: 0.5s;
  }

  .site-search-window {
   position: fixed;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: rgba(0, 0, 0, 0.7);
   transform: scale(0.5);
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   visibility: hidden;
   opacity: 0;
  }

  .site-search-window .close-search-btn {
    padding: 7px 13px;
    color:white;
    position: absolute;
    right:7px;
    top:7px;
    background-color:royalblue;
   transform: translateX(50px);
   opacity: 0;
   cursor:pointer;
  }

  .site-search-window .search-input-group {
   width: 350px;
   max-width: 80%;
   height: fit-content;
   display: flex;
   gap: 10px;
  }

  .site-search-window .search-input-group input {
   border: none;
   outline: none;
   background-color: none !important;
   transform: translateY(50px);
   opacity: 0;
  }

  .site-search-window .search-input-group .icon {
   background-color: orangered;
   font-size: 20px;
   width: fit-content;
   padding: 0px 7px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 7px;
   cursor: pointer;
   color: white;
   transform: translateY(-50px);
   opacity: 0;
  }



  .site-search-window.active {
   visibility: visible;
   opacity: 1;
   transform: scale(1);

  }

  .site-search-window .close-search-btn.active {
   transform: none;
   opacity: 1;
  }

  .site-search-window input.active {
   transform: none;
   opacity: 1;
  }

  .site-search-window .icon.active {
   transform: none;
   opacity: 1;
  }


  /*  ===========================     Icons   ========================== */
   *[class*="ri-linkedin"], *[class*="ri-facebook"]{
      color:white;
      background-color:royalblue;
      color:white;
    }*[class*="ri-twitter"]{
      color:white;
      background-color:black;
      color:white;
    }*[class*="ri-link-m"]{
      color:white;
      background-color:goldenrod;
      color:white;
    }






    /* Scroll button */
     .scroll-to-top-btn {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: white;
   position: fixed;
   bottom: 10px;
   right: 10px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   outline: none;
   cursor: pointer;
   z-index: 2;
   border: 2px solid orangered;
   transform:translateX(100px);
 }.scroll-to-top-btn.active{
  transform: translateX(0);
 }

 .scroll-to-top-btn>* {
   font-size: 18px;
   color:orangered
 }

  header.scroll-active {
   background-color: #F2F4F7;
   /* background-color: white; */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 header.scroll-active * {
   color: #383838 !important
 }

 .social-header.scroll-active {
   margin-top: -50px;
 }

 .main-header.scroll-active {
   background-color: transparent;
 }