@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');

 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html{
   scroll-behavior: smooth;
}

body{
   font-family: poppins;
}

.nav-logo{
  position: absolute;
  margin-left: -150px; 
}

.nav-logo img{
    max-width: 120px;
}



 header{
   height: 90px;
   max-width: 100%;
   z-index: 1000;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 200px;
   transition: 0.5s;
     background: linear-gradient(to right, white,white,blueviolet,
    blueviolet,blueviolet,blueviolet,blueviolet,blueviolet,darkorange);
 }

  .brand{
   color: #ffffff;
   font-size: 1.5em;
   font-weight: 700;
   text-transform: uppercase;
   text-decoration: none;
   margin-top: 10px;
 }

 .brand img{
   position: absolute;
   margin-top: -30px;
   
 }

 header nav a{
    color: #ffffff;
    margin-left: 5px;
    padding: 5px 20px;
    font-size: 16px;
    font-weight: bolder;
    transition: 0.2s;
    text-decoration: none;
 }

 a.active{
    background: #a0fbfc;
    border-radius: 3px;
    box-shadow: 0 0 5px #a0fbfc,
     0 0 10px #a0fbfc;
    color: #141f53;
    font-weight: 600;
 }

nav a:hover {
    background: darkorange;
    color: #141f53;
    border-radius: 50px;
    box-shadow: 0 0 5px #a0fbfc,
     0 0 10px #a0fbfc;
    color: #141f53;
    font-weight: 600;
 }

 section{
   padding: 100px 200px;
 }

 .imgs {
  width: 100vw;
  height: 100vh;
  margin-top: -50px;
  position: relative;
 }

 .imgs .imgslist .item{
   width: 180px;
   height: 250px;
   position: fixed;
   top: 90%;
   left: 70%;
   transform: translateY(-70%);
   border-radius: 20px;
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3),
   0 25px 90px rgba(0, 0, 0, 0.3),
   0 0px 70px rgba(160, 251, 252, 0.5);
   background-position: top;
   background-size: cover;
   cursor: pointer;
   z-index: 100;
   transition: 1s;
 }

 .imgs .imgslist .item:nth-child(1),
 .imgs .imgslist .item:nth-child(2){
   top: 0;
   left: 0;
   transform: translate(0,0);
   border-radius: 0;
   width: 100%;
   height: 100vh;
 }

 .imgs .imgslist .item:nth-child(3){
   left: 47%;
 }

 .imgs .imgslist .item:nth-child(4){
   left: calc(47% + 200px);
 }

 .imgs .imgslist .item:nth-child(5){
   left: calc(47% + 400px);
 }

 .imgs .imgslist .item:nth-child(6){
   left: calc(47% + 600px);
 }

 .imgs .imgslist .item:nth-child(n + 7){
   left: calc(47% + 800px);
   opacity: 0;
   overflow: hidden;
 }

 .item .content{
   position: absolute;
   top: 50%;
   left: 100px;
   transform: translateY(-50%);
   width: 600px;
   text-align: left;
   color: #ffffff;
   display: none;
 }

 .imgslist .item:nth-child(2)
  .content{
   display: block;
 }

 .item .title{
   font-size: 65px;
   text-transform: uppercase;
   color: blueviolet;
   font-weight: bold;
   line-height: 1;
   text-shadow: 3px 4px 4px #a0fbfc;
     
   opacity: 0;
   animation: animate 1s ease-in-out 0.3s 1 forwards;
 }

 .item .name{
   font-size: 65px;
   text-transform: uppercase;
   font-weight: bold;
   line-height: 1;
   color: darkorange;
   text-shadow: 3px 4px 4px rgba(255, 255, 255, 0.8);

   opacity: 0;
   animation: animate 1s ease-in-out 0.6s 1 forwards;
 }
 
 .item .des{
   margin-top: 10px;
   margin-bottom: 20px;
   font-size: 20px;
   margin-left: 5px;

   opacity: 0;
   animation: animate 1s ease-in-out 0.9s 1 forwards;
 }

 .item button{
   padding: 10px 20px;
   border: none;
   cursor: pointer;
   font-size: 16px;
   border: 2px solid #ffffff;
 }

 .item .btn{
   margin-left: 15px;
   
   opacity: 0;
   animation: animate 1s ease-in-out 1.2s 1 forwards;
 }

 .item button:nth-child(1){
   margin-right: 15px;
   border-radius: 5px;
 } 

 .item button:nth-child(2){
   background: transparent;
   color: #a0fbfc;
   border: 2px solid #ffffff;
   border-radius: 5px;
   transition: 0.3s;
 }

.item button:nth-child(2):hover{
   background: #a0fbfc;
   color: #141f53;
   border: 2px solid #a0fbfc;
}

.ib:hover{
   background: #a0fbfc;
   color: #141f53;
}

@keyframes animate {
   from{
      opacity: 0;
      transform: translate(0,100px);
      filter: blur(33px);
   }

   to{
      opacity: 1;
      transform: translate(0);
      filter: blur(0);
   }
}

/* DARK OVERLAY */
.imgs .imgslist .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.5); /* adjust darkness here */

    z-index: 1;
    border-radius: inherit;
}

/* KEEP TEXT ABOVE OVERLAY */
.item .content {
    position: absolute;
    z-index: 2;
}










/* next or previous arrows */
.arrows{
   position: absolute;
   top: 80%;
   right: 52%;
   z-index: 100;
   width: 300px;
   max-width: 30%;
   display: flex;
   gap: 10px;
   align-items: center;
}

.arrows button{
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #a0fbfc;
   border: none;
   outline: none;
   font-size: 24px;
   color: #141f53;
   font-weight: bold;
   box-shadow: 0 0 20px #a0fbfc;
   transition: 0.5s;
   cursor: pointer;
}

.arrows button:hover{
   color: #141f53;
   background: #ffffff;
}

/* time running  */
.imgs .timeRunning{
position: absolute;
z-index: 1000;
width: 0%;
height: 4px;
background: linear-gradient(90deg, lightgreen,brown, white, blue,red);
left: 0;
top: 0;
animation: runningTime 7s linear 1 forwards;
} 

@keyframes runningTime {
   from{
      width: 0%;
   }
   to{
      width: 100%;
   }
   
}

/* Responsiveness */
@media (max-width: 1040px){
section{
   padding: 100px 20px;
}
}

/* banner area  */

section{
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 110px 100px;
}
@media(max-width: 1000px){
   section{
       padding: 100px 50px;
   }
}
@media(max-width: 600px){
   section{
       padding: 125px 30px;
   }
}

section p{
max-width: 800px;
text-align: center;
margin-bottom: 35px;
padding: 0 20px;
line-height: 2;
} 

.banner-area{
   position: relative;
   justify-content: center;
   min-height: 100vh;
   color: #ffffff;
   text-align: center;
}

.text{
   margin-top: 260px;
}

.banner-area .banner-img{
   background: linear-gradient(rgb(27,27,27,0.3),rgb(27,27,27,0.3)), url(../images/cci1.png);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   z-index: -1;
   background-position: center center;
}

.banner-area .banner-img::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 0;
   background: #000;
   opacity: .7;
}

.banner-area h1{
   margin-bottom: 15px;
   font-size: 65px;
   text-transform: uppercase;
}

.banner-area h1 span{
   color: yellow;
}

.banner-area h3{
   font-size: 25px;
   font-weight: 100;
   text-transform: uppercase;  
}

.banner-area a.banner-btn{
   padding: 15px 35px;
   background:linear-gradient(90deg, lightgreen,#a0fbfc, white, blue,yellow);
   text-transform: uppercase;
   text-decoration: none;
   border-radius: 50px;
   color: black;
   font-weight: bold;
}

.banner-area  a.banner-btn:hover{
   color: #ffffff;
   background: transparent;
}

@media (max-width:800px){
   .banner-area{
      min-height: 600px;
   }
   .banner-area h1{
      font-size: 27px;
   }
   .banner-area h3{
      font-size: 20px;
   }
   .banner-area a.banner-btn{
   padding: 8px 20px;
   }
}

/* about area  */
 
ul.about-content{
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   list-style-type: none;
}

.about-content li{
padding: 20px;
height: 500px;
background-clip: content-box;
background-size: cover;
background-position: center;
border-radius: 20px;
}

.about-left{
   flex-basis: 30%;
   background-image: url(../images/rect-img-6.jpg);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5),
   0 15px 20px rgba(0, 0, 0, 0.5),
   0 0px 70px rgba(160, 251, 252, 0.9);  
}

.about-right{
   flex-basis: 70%;
}

.about-right h2{
   font-size: 30px;
   margin-bottom: 3%;
   background: url(../images/about.JPG);
   color: #ffffff;
   border-radius: 8px;
   text-align: center;
}

.about-area p{
   max-width: 800px;
   margin-bottom: 35px;
   line-height: 1.5;
   text-align: left;
   font-weight: bold;
   padding-left: 0;
   font-size: 18px;
   font-family:Georgia, 'Times New Roman', Times, serif;
}
.about-area p.p{
   background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url(../images/about.JPG);
   color: #ffffff;
   text-align: center;
   margin-left: 40px;
}
.section-title{
   text-transform: uppercase;
   font-size: 40px;
   margin-bottom: 5%;
}

.about-btn{
   padding: 0 40px;
   background: blue;
   border-radius: 35px;
   text-transform: uppercase;
   color: #ffffff;
}

@media (max-width: 1000px){
   .section-title{
      font-size: 35px;
   }
   .about-left, .about-right{
      flex-basis: 100%;
   }
   .about-content li{
      padding: 8px;
   }
   .about-right h2{
      font-size: 28px;
   }
}

@media (max-width: 700px){
   .about-right p{
      font-size: 16px;
   }
   .about-area p.p{
      margin-left: 0;
   }
}

/* Message Area */

.msg-area{
   background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../images/bib.jpg);
   background-size: cover;
   background-position: center center;
   background-attachment: fixed;
   height: 50vh;
}

.achivement{
width: 400px;
background: linear-gradient( rgba(1,1,1,0.2), rgba(1,1,1,0.2)), url(../images/achivement.jpg);
margin: 0 580px 20px;
box-shadow: 0 5px 10px yellow,
0 15px 20px rgba(0, 0, 0, 0.5),
0 0px 70px rgba(160, 251, 252, 0.9);
display: block;
border-radius: 20px;
justify-content: center;
text-align: center;
color: #fff;
background-size: cover;
height: 305px;
font-size: 14px;
transition: .5s;
}

.achivement span{
   font-size: 30px;
   font-weight: bold;
}

.achivement:hover{
   transform: scale(1.1) rotate(-3deg);
   }

.vision{
width: 400px;
background: linear-gradient( rgba(1,1,1,0.2), rgba(1,1,1,0.2)), url(../images/vision.JPG);
margin: 0 370px 5px;
box-shadow: 0 5px 10px rgba(2, 255, 56),
0 15px 20px rgba(0, 0, 0, 0.5),
0 0px 70px rgba(160, 251, 252, 0.9);
display: block;
border-radius: 20px;
justify-content: center;
text-align: center;
background-size: cover;
color: #ffffff;
font-size: 14px;
height: 305px;
transition: .5s;
}

.vision span{
   font-size: 30px;
   font-weight: bold;
}
.vision:hover{
   transform: scale(1.1) rotate(-3deg);
   }
.mission{
width: 400px;
background: linear-gradient( rgba(1,1,1,0.3), rgba(1,1,1,0.3)), url(../images/mission.JPG);
margin-top: 0px;
margin-left: 790px;
margin-bottom: 30px;
box-shadow: 0 5px 10px rgb(255, 2, 78),
0 15px 20px rgba(0, 0, 0, 0.5),
0 0px 70px rgba(160, 251, 252, 0.9);
display: block;
border-radius: 20px;
justify-content: center;
text-align: center;
color: #ffffff;
background-size: cover;
font-size: 14px;
height: 305px;
transition: .5s;
}

.mission span{
   font-size: 30px;
   font-weight: bold;
}
.mission:hover{
transform: scale(1.1) rotate(-3deg);
}
.mi{
margin-top: -310px;
}

@media (max-width: 1000px){
   .vision{
      font-size: 14px;
      margin-left: 14%;
      margin-bottom: 10px;
      width: 350px;
      height: 300px;
      font-size: 13px;
      }
      .vision span{
         font-size: 27px;
         font-weight: bold;
      }
   .mission{
      font-size: 14px;
      margin-left: 51%;
      width: 350px;
      height: 300px;
      font-size: 13px;
      }
      .mission span{
         font-size: 27px;
         font-weight: bold;
      }
   .achivement{
      font-size: 14px;
      margin-left: 33%;
      width: 350px;
      height: 300px;
      font-size: 13px;
      }

      .achivement span{
         font-size: 27px;
         font-weight: bold;
      }
}

@media (max-width: 700px){
   .vision{
      font-size: 12px;
      margin-left: 13%;
      margin-bottom: 60px;
      width: 250px;
      height: 250px;
      font-size: 11px;
      }
      .vision span{
         font-size: 23px;
         font-weight: bold;
      }
   .mission{
      font-size: 12px;
      margin-left: 51%;
      width: 250px;
      height: 250px;
      font-size: 11px;
      }
      .mission span{
         font-size: 23px;
         font-weight: bold;
      }
   .achivement{
      margin-bottom: 14px;
      font-size: 12px;
      margin-left: 35%;
      width: 250px;
      height: 250px;
      font-size: 11px;
      }

      .achivement span{
         font-size: 23px;
         font-weight: bold;
      }

}

@media (max-width: 600px){
   .vision{
      width: 230px;
      height: 210px;
      font-size: 9px;
      margin-left: 65px;
      margin-bottom: 100px;
      }
      .vision span{
         font-size: 20px;
         font-weight: bold;
      }
   .mission{
      width: 230px;
      height: 210px;
      font-size: 9px;
      margin-left: 309px;
      }
      .mission span{
         font-size: 20px;
         font-weight: bold;
      }
   .achivement{
      width: 230px;
      height: 210px;
      font-size: 9px;
      margin-left: 180px;
      }

      .achivement span{
         font-size: 20px;
         font-weight: bold;
      }
}

.text-changer{
   height: 40px;
   padding: 10px;
   border-radius: 8px;
   display: flex;
   color:chartreuse;
   font-family: "Poooins", sans-serif;
   font-weight: bold;
   font-size: 25px;
   box-sizing: content-box;
}

.intro-text{
   margin-top: -2px;
}

.roles-container{
   overflow: hidden;
   position: relative;
}

.role {
   display: block;
   height: 100%;
   padding-left: 6px;
   color: white;
   font-weight: bolder;
   margin-top: -1px;
   animation: role-change 5s infinite;
}

@keyframes role-change{
10% {
   transform: translateY(-102%);
}
   25%{
      transform: translateY(-100%);
   }
   35% {
      transform: translateY(-202%);
   }
   50% {
      transform: translateY(-200%);
   }
   60% {
      transform: translateY(-302%);
   }
   75% {
      transform: translateY(-300%);
   }
   85% {
      transform: translateY(-402%);
   }
   100% {
      transform: translateY(-400%);
   }
}

.for{
position: absolute;
margin-left: 600px;
margin-top: 150px;
}

@media (max-width:1000px){
   .for{
      margin-left: 300px;
      }
}
@media (max-width:700px){
   .for{
      margin-left: 155px;
      }
}
@media (max-width:600px){
   .for{
      margin-left: 100px;
      }
}

section.sec{
   display: flex;
  justify-content: center; 
  align-items: center;
  background: linear-gradient(rgb(27,27,27,0.3),rgb(27,27,27,0.3)), url(../images/cover_sem.jpg);
  background-attachment: fixed;
}

.conts{
   display: flex;
   }
   
.card{
height: 350px;
margin: 30px;
box-shadow: 5px 5px 20px blue;
overflow: hidden;

}

.card img{
   height: 350px;
   width: 400px;
   border-radius: 3px;
}

.introo{
   height: 70px;
   width: 400px;
   padding: 6px;
   box-sizing: border-box;
   margin-top: -74px;
   position: absolute;
   background: rgb(27,27,27,0.6);
   color: #ffffff;
   transition: .5s;
}

.introo h1{
font-size: 30px;
text-align: center;
}

.introo p{
   font-size: 20px;
   visibility: hidden;
   opacity: 0;
}

.introo span{
   font-weight: bold;
   color: chartreuse;
}

.introo a{
   position: absolute;
   margin-top: -19px;
   margin-left: -50px;
}

.introo button{
   font-size: 16px;
   border-radius: 8px;
   border: solid transparent;
   background: blue;
   color: #ffffff;
   font-weight: bold;
}

.card:hover{
   cursor: pointer;
}

.card:hover .introo{
   height: 240px;
   margin-top: -244px;
}

.card:hover h3{
   visibility: hidden;
}
.card:hover p{
   opacity: 1;
   visibility: visible;
}

.card:hover img{
   transform: scale(1.1) rotate(-3deg);
}

section .h1{
   font-size: 50px;
   color: bisque;
}

@media(max-width:1000px){
 .card{
   height: 250px;
 }
   .card img{
      height: 250px;
      width: 250px;
   }
   
   .introo{
      height: 70px;
      width: 250px;
   }
   
   .introo h1{
   font-size: 25px;
   }
   
   .introo p{
      font-size: 14px;
   }
   
   .introo button{
      font-size: 14px;
   }
   .card:hover .introo{
      height: 216px;
      margin-top: -220px;
   }
   .introo a{
      margin-top: -8px;
      margin-left: -40px;
   }
   section .h1{
      font-size: 40px;
   }
}

@media(max-width:700px){
 .card{
   height: 200px;
   width: 180px;
   margin: 15px;
 }
   .card img{
      height: 200px;
      width: 180px;
   }
   
   .introo{
      height: 70px;
      width: 180px;
   }
   
   .introo h1{
   font-size: 15px;
   }
   
   .introo p{
      font-size: 10px;
      position: absolute;
      margin-top: -10px;
   }
   
   .introo button{
      font-size: 9px;
   }
   .card:hover .introo{
      height: 146px;
      margin-top: -150px;
   }
   .introo a{
      margin-top: -3px;
      margin-left: -25px;
   }
   .card h3{
      font-size: 15px;
   }
   section .h1{
      font-size: 30px;
   }
}

@media(max-width:600px){
 .card{
   height: 200px;
   margin: 11px;
   width: 176px;
 }
   .card img{
      height: 200px;
      width: 176px;
   }
   
   .introo{
      height: 70px;
      width: 176px;
   }
   
   .introo h1{
   font-size: 15px;
   }
   
   .introo p{
      font-size: px;
      position: absolute;
      margin-top: -20px;
   }
   
   .introo button{
      font-size: 9px;
   }
   .card:hover .introo{
      height: 146px;
      margin-top: -150px;
   }
   .introo a{
      margin-top: -3px;
      margin-left: -25px;
   }
   section .h1{
      font-size: 25px;
   }
}

@media(max-width:999px){
   .index-mbtn{
      z-index: 999;
      background: url(../images/menu.png)no-repeat;
      background-size: 30px;
   background-position: center;
   width: 40px;
   height: 40px;
   cursor: pointer;
   transition: 0.3s ease;
   }
   .index-mbtn.active{
      z-index: 999;
      background: url(../images/close.png)no-repeat;
      background-size: 25px;
      background-position: center;
      transition: 0.3s ease;
   }
   header {
      padding-left: 50px;
   }
   header nav{
      display: none;
   }
   .header{
      padding: 10px 20px;
   }
   .item .content{
      left: 20px;
   }
   .content .title, .content .name{
     font-size: 50px;
   }
   
   .content .des{
       font-size: 16px;
      margin-right: 20px;
   }

   header nav.active{
      position: fixed;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(1, 1, 1, 0.9);
    }
   
   header nav  a{
      color: #ffffff;
      font-size: 1.2em;
      margin: 10px;
   }
   
   header nav {
     background: rgba(1, 1, 1, 1);
      width: 600px;
      max-width: 600px;
      margin: 20px;
      padding: 40px;
      display: relative;
      flex-direction: column;
      align-items: center;
      border-radius: 5px;
      box-shadow: 0 5px 25px rgb(1 1 1 / 100%);
   }
}

@media(max-width:600px){
   .index-mbtn{
   background: url(../images/menu.png)no-repeat;
   background-size: 25px;
   width: 30px;
   height: 30px;
   margin-left: 500px;
   margin-top: -7px;
   position: absolute;
   }

   .brand{
      margin-left: -500px;
   }
   .brand img{
      width: 40px;
      margin-top: -23px;
   }
   header {
      padding-left: 200px;
   }
   header nav{
      display: none;
   }
   .header{
      padding: 10px 20px;
   }
   .item .content{
      left: 20px;
   }
   .content .title, .content .name{
     font-size: 50px;
   }
   
   .content .des{
       font-size: 16px;
      margin-right: 20px;
   }

   header nav.active{
      width: 80%;
      height: 60vh;
    }
   
   header nav  a{
      color: #ffffff;
      font-size: 1.2em;
      margin: 10px;
   }
   
   header nav {
      width: 400px;
      max-width: 400px;
      margin: 20px;
      padding: 40px;
      border-radius: 5px;
      margin-left: 130px;
   }  
}
@media(max-width:690px){
   header nav a{
      font-size: 14px;
      margin-right: 0;
   }
   .item .content, .content h1{
      top: 40%;
      width: 100%;
   }
   .content .title, .content .name{
      font-size: 45px;
      line-height: 1.3; 
   }

   .content button{
      padding: 10px 15px;
      font-size: 14px;
   }
}

/* About Us Page  */
.about-1{
   width: 600px;
   text-align: center;
   
}

@media(max-width: 900px){
  .nav-logo{
  margin-left: -350px;
  top: -5px; 
}

.nav-logo img{
    max-width: 100px;
}
}

@media(max-width: 1000px){
   header{
       padding: 20px 50px;
   }

     .nav-logo{
  margin-left: -20px;
}

.nav-logo img{
    max-width: 100px;
}
}

@media(max-width: 700px){
   header{
       flex-direction: column;
   }
   header h2{
       margin-bottom: 15px;
   }
}


.gallery img{
   transition: 1s;
   padding: 15px;
   width: 300px;
   height: 200px;
}

.gallery img:hover{
   filter: grayscale(100%);
   transform: scale(1.1);
}


@media(max-width:999px){
   .index-mbtn{
      z-index: 999;
      background: url(../images/menu.png)no-repeat;
      background-size: 30px;
   background-position: center;
   width: 40px;
   height: 40px;
   cursor: pointer;
   transition: 0.3s ease;
   }
   .index-mbtn.active{
      z-index: 999;
      background: url(../images/close.png)no-repeat;
      background-size: 25px;
      background-position: center;
      transition: 0.3s ease;
   }
   header {
      padding-left: 50px;
   }
   header nav{
      display: none;
   }
   .header{
      padding: 10px 20px;
   }
   .item .content{
      left: 20px;
   }
   .content .title, .content .name{
     font-size: 50px;
   }
   
   .content .des{
       font-size: 16px;
      margin-right: 20px;
   }

   header nav.active{
      position: fixed;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(1, 1, 1, 0.9);
    }
   
   header nav  a{
      color: #ffffff;
      font-size: 1.2em;
      margin: 10px;
   }
   
   header nav {
     background: rgba(1, 1, 1, 1);
      width: 600px;
      max-width: 600px;
      margin: 20px;
      padding: 40px;
      display: relative;
      flex-direction: column;
      align-items: center;
      border-radius: 5px;
      box-shadow: 0 5px 25px rgb(1 1 1 / 100%);
   }
}

@media(max-width:600px){
   .index-mbtn{
   background: url(../images/menu.png)no-repeat;
   background-size: 25px;
   width: 30px;
   height: 30px;
   margin-left: 500px;
   margin-top: -7px;
   position: absolute;
   }

   .brand{
      margin-left: -500px;
   }
   .brand img{
      width: 40px;
      margin-top: -23px;
   }
   header {
      padding-left: 200px;
   }
   header nav{
      display: none;
   }
   .header{
      padding: 10px 20px;
   }
   .item .content{
      left: 20px;
   }
   .content .title, .content .name{
     font-size: 50px;
   }
   
   .content .des{
       font-size: 16px;
      margin-right: 20px;
   }

   header nav.active{
      width: 80%;
      height: 60vh;
    }
   
   header nav  a{
      color: #ffffff;
      font-size: 1.2em;
      margin: 10px;
   }
   
   header nav {
      width: 400px;
      max-width: 400px;
      margin: 20px;
      padding: 40px;
      border-radius: 5px;
      margin-left: 130px;
   }  
}
@media(max-width:690px){
   header nav a{
      font-size: 14px;
      margin-right: 0;
   }
   .item .content, .content h1{
      top: 40%;
      width: 100%;
   }
   .content .title, .content .name{
      font-size: 45px;
      line-height: 1.3; 
   }

   .content button{
      padding: 10px 15px;
      font-size: 14px;
   }
}

/* About Us Page  */
.about-1{
   width: 600px;
   text-align: center;
   
}

@media(max-width: 1000px){
   header{
       padding: 20px 50px;
   }
}

@media(max-width: 700px){
   header{
       flex-direction: column;
   }
   header h2{
       margin-bottom: 15px;
   }
}