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

    -webkit-tap-highlight-color: transparent;
}
html {
    scroll-behavior: smooth;
}
body {
    scroll-behavior: smooth;
    
}

.av-all {
    display: none;
    flex-direction: column;
}
.contact-main {
    display: none;
    margin-top: 3rem;

}
#main-slider-div-all{
    max-height: 0rem;
    overflow: hidden;
    
}



/* Import font  */
@font-face {
    font-family: redressed ;
    src: url(fonts/Redressed-Regular.ttf);
}
@font-face {
    font-family: poppins;
    src: url(fonts/Poppins-SemiBold.ttf);
}
@font-face {
    font-family: poppinsBold;
    src: url(fonts/Poppins-Bold.ttf);
}
@font-face {
    font-family:roedies;
    src: url(fonts/Rowdies-Regular.ttf);
}

/* counter */



/* main div */


#linkedinfa {
    color: white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bolder;
    font-size: 20px;
    text-decoration: none;
}

.about-me {
    font-size: 40px;
    font-family: poppins;
    color: #003459;
    font-weight: 900;
    text-align: center;
    margin-top: 2rem;
}

.in-second {
    
    width: 100%;
    min-height: 18rem;
margin-left: auto;
margin-right: auto;
    background-color: transparent;
    justify-content: space-evenly;
    display: flex;
    
    flex-direction: column;
}

.in-02 {
    width: 100%;
    min-height: 18rem;
    border-radius: 0px;
    margin-left: auto;
    margin-right: auto;
   
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-evenly;
    align-items: center;


}
#c-all {
    width: 13rem;
    height: 15rem;
    
}

.counter-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #003459;
    font-size: 50px;
    font-family:roedies ;
    font-weight:00;
    width: 100%;
    height: 5rem;
    
}
.PortMy {
    color: #003459;
    font-family: poppinsBold;
    text-align: center;
    margin-top: 3rem;
    font-size: 35px;
    margin-bottom: 2rem;
}

.counter-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #003459;
    font-size: 50px;
    font-family:roedies ;
    font-weight: 00;
    width: 100%;
    height: 5rem;
    
}
.counter-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #003459;
    font-size: 50px;
    font-family:roedies ;
    font-weight: 00;
    width: 100%;
    height: 5rem;
    
}
.counter-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #003459;
    font-size: 50px;
    font-family:roedies ;
    font-weight: 00;
    width: 100%;
    height: 5rem;
    
}
.iconc {
    height: 5rem;
    width: 100%;
    color: #003459c8;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    
}

.c1text {
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;

}
.c1texth {
    color: #003459c8;
    font-family: poppins;

}
.in-03 {
    width: 100%;
    min-height: 0rem;
    display: flex;
    justify-content: center;


}
.in-03-1 {
    display: none;
    width: 48.8%;
    height:17rem ;
    background-color: rgb(255, 255, 255);
box-shadow: 0 0 5px 1px rgb(231, 231, 231) ;
border-radius: 8px;



}

.edabout {
    color: #003459;
    font-family: poppins;
    margin-top: 1rem;
    margin-left: 2rem;
    padding-bottom: 1rem;
}
.edp {
    width: 90%;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    
}
.ed1 {
    color: #003459;
    font-size: 15px;
    font-family: poppins;
    margin: 6px;
}
.worksabout {
    color: #003459;
    font-family: poppins;
    margin-top: 1rem;
    margin-left: 2rem;
    padding-bottom: 1rem;

}
.n1about {
    
    font-family: poppins;
    color: #003459;
}

.pabout {
    
color: #003459be;
font-family: poppins;
font-size: 14px;
max-width: 20rem;
text-align: center;

}


/* navigation bar*/
.logo {
    font-family: roedies;
    font-size: 36px;
    font-weight: 100;  color: #003459;
text-decoration: none;
}
nav {
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: space-around;
     align-items: center;
}

.nav-links {
    width: 19%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.nav-links li {
    list-style: none;
    padding: 5px;
}
.nav-links li a {
    position: relative;
    color: #003459;
    padding: 5px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    text-decoration: none;

}
 .nav-links li a::after {
    content: "";
    position: absolute;
    background-color: #003459;

    height: 2px;
    width: 0%;
    left: 0;
    bottom: -5px;
    transition: 0.3s ease;
}

 .nav-links li a:hover::after {
     width: 100%;
 }
.nav-links li .cm1 {
     color: #003459;
     padding: 6px 15px 10px 15px;
     background-color: transparent;
     border-radius: 20px;
    transition: 0.2s ease;
    }
.nav-links li .cm1:hover {
    background-color:#003459;
    color: white;
     
    }
  
.nav-links li .cm1:hover::after {
   width: 0;
     
}
  /* maindiv for pc/laptop */
.main-div-over {
    width: 100%;
    height: 38rem;
    background-image: url(images/p1.jpg);
    background-size: 100% 133%;

}
  .main-div {
    width: 100%;
    height: 38rem;
    display: flex;
    flex-direction: column;
    background-color:   white ;
    align-items: center;
    justify-content: space-evenly;
    background-color: rgba(243, 243, 243, 0.89);
    
}
.picturemain {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background-image: url(images/8c.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.ih1 {
color: #003459;
font-size: 38px;
font-family: poppins;
font-weight: bolder;
}
.po-p1 {
color: #003459;
font-size: 35px;
font-family: poppins;
font-weight: bolder;
text-align:center;
}

.infop
{color: #003459be;
font-family: poppins;
font-size: 16px;
max-width: 590px;
text-align: center;
}
.findonabout {
    width: 100%;
    display: flex;
    height: 18%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

}
.smedia {
    width: 20rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    min-height: 4rem;
}
.smab {
    font-size: 35px;
    color: #003459;
    transition: 0.15s ease;

}

.ftect {
    font-family: poppins;
    color: #003459;
    font-size: 23px;
    font-weight: bolder;
    margin-right: -1rem;
}
.smab:hover {
    transform: scale(1.2);
}
.infotexts {
display: flex;
flex-direction: column;
min-height: 33%;
justify-content: space-evenly;
align-items: center;
}



/* PRODUCTS */


.product {
    position: relative;
    overflow: hidden;
    padding: 20px;
    background-color: white;
  }
  
  .product-category {
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    font-family: poppinsBold;
    color: #003459;
    margin-top:2rem;
    margin-bottom: 3rem;

  }
  
  .product-container {
    padding: 0 10vw;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
  }
  
  .product-container::-webkit-scrollbar {
    display: none;
  }
  
  .product-card {
    flex: 0 0 auto;
    width: 360px;
    min-height: 300px;
    margin-right: 40px;
    border-radius: 3px;
    transition: 0.2s;
    transition-timing-function: linear;
	
  }
 
  
  .product-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-left: 1px solid #f5f5f5;
    border-right: 1px solid #f5f5f5;
    border-top: 1px solid #f5f5f5;
  }
  
  .product-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  
  
  .card-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    width: 90%;
    text-transform: capitalize;
    border: none;
    outline: none;
    background: #000309;
    border-radius: 3px;
    transition: 0.5s;
    cursor: pointer;
    color: #cccdce;
    opacity: 0;
    font-size: 12px;
    font-family: poppins;
    transition: 0.2s;
    transition-timing-function: linear;
  }
  .product-card:hover {
      transform: scale(1.02);
      
  }
  .product-card:hover .card-btn {
    opacity: 1;
  }
  
  
  .product-info {
    width: 100%;
    min-height: 150px;
    padding-top: 10px;
  background-color: #f5f5f7;
  padding-bottom: 15px;
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f7;
  position: relative;
  }
  
  .product-brand {
    font-family: poppins;
    font-size: 17px;
    color: #003459;
    text-decoration: none;
    margin-left: 1.1rem;
  
    margin-bottom: 0.2rem;
  }
  .buy-main {
    width: 20rem;
    height: 2.5rem;
    display: flex;
    margin: auto auto;
    justify-content: center;
    align-items: center;
    margin-top: 0.6rem;
    background-color: #003459;
    padding-bottom: 1px;
    border-radius: 3px;
    transition: 0.2s;
    transition-timing-function: linear;
	position: absolute;
	bottom: 10px;
    left: 0;
    right: 0;
  }
  .buy-main:hover  {
      background-color: #003459cc;
  }
  .buy-a-main {
    
    font-size: 13px;
    font-family: poppins;
    letter-spacing: 0.4px;
    color: white;
    text-decoration: none;
  }
  
  
  .price {
    font-size: 12px;
    font-style: italic;
    color: #003459;
    font-family: poppins;
   
    margin-left: 1.1rem;
  }
  
 
  
  .pre-btn,
  .nxt-btn {
    border: none;
    width: 10vw;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    cursor: pointer;
    z-index: 8;

  }
  
  .pre-btn {
    left: 0;
    transform: rotate(180deg);

  }
  
  .nxt-btn {
    right: 0;
    

  }
  
  .pre-btn img,
  .nxt-btn img {
    opacity: 0.2;
  }
  
  .pre-btn:hover img,
  .nxt-btn:hover img {
    opacity: 1;
  }
  
  .collection-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
  
  .collection {
    position: relative;
  }
  
  .collection img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

  
  .collection:nth-child(3) {
    grid-column: span 2;
    margin-bottom: 10px;
  }



/* contact */

.contact-div {
width: 100%;
height: 25rem;
background-color: rgb(255, 255, 255);


}
.cont {
font-family: poppinsBold;
font-size: 35px;
color: #003459;
text-align: center;
transform: translateY(2rem);

}
.contact-list {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 100% ;
display: flex;
justify-content: center;
align-items: center;


}
/* mail */
.maildiv{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
height: 8rem;
justify-content: space-between;
}
.mail {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #003459;
display: flex;
justify-content: center;
align-items: center;

}
#env1 {
color: white;
font-size: 30px;
}
.email1 {
font-family: poppins;
color: #003459;
font-size: 13px;
}
/* phone */
.phonediv{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
height: 8rem;
justify-content: space-between;
}
.phoe {
width: 80px;
height:80px;
border-radius: 50%;
background-color: #003459;
display: flex;
justify-content: center;
align-items: center;

}
#phonefa {
color: white;
font-size: 30px;
}
.phone1 {
font-family: poppins;
color: #003459;
font-size: 13px;
}
/* linkedin */
.linkedindiv{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
height: 8rem;
justify-content: space-between;
}
.linked {
width: 80px;
height:80px;
border-radius: 50%;
background-color: #003459;
display: flex;
justify-content: center;
align-items: center;

}
#linkedinfa {
color: white;
font-size: 30px;
}
.linked1 {
font-family: poppins;
color: #003459;
font-size: 13px;
text-decoration: none;

}
/* address */
.homediv{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
height: 8rem;
justify-content: space-between;
}
.homed {
width: 80px;
height:80px;
border-radius: 50%;
background-color: #003459;
display: flex;
justify-content: center;
align-items: center;

}
#home1 {
color: white;
font-size: 30px;
}
.ho1 {
font-family: poppins;
color: #003459;
font-size: 13px;
text-align: center;
transform: translateY(1.3rem);
}

/* banner */

.bannerlanding {
width: 100%;
margin-top: 0rem;
height: 4rem;
background-color: #003459;
justify-content: center;
display: flex;
align-items: center;
}

.copyright {
color: white;
font-family: poppins;
font-weight: light;
font-size: 14px;

}

/* for time line for pc */

.timeline-top {
    width: 90%;
    margin: auto auto;

    text-align: center;
    font-size: 35px;
    font-weight: 600;
    font-family: poppinsBold;
    color: #003459;
    margin-top:2rem;
    background-color:#F2F2F2 ;
    padding-bottom: 4rem;
    padding-top: 2rem;
}
.main-timeline {
    width: 90%;
    margin: auto auto;
    display: flex;
    justify-content: center;
    background-color: #F2F2F2;
    padding-bottom: 2rem;
    overflow: hidden;
background-image: url(images/back-timeline.jpg);
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;


}
/* left one */
.main-timeline-01 {
    width: 16rem;
    min-height: 40rem ;
    display: flex;
    flex-direction: column;
    
}
.div-2005 {
    width: 100%;
    color: #003459;
    font-family: roedies ;
    font-size: 30px;
    display: flex;
    justify-content: end;
transform: translateX(-100%);
transition: 0.3s;
transition-timing-function: linear;
opacity: 0;

}
.div-2021 {
    width: 100%;
    color: #003459;
    font-family: roedies ;
    font-size: 30px;
    display: flex;
    justify-content: end;
    margin-top: 2.7rem;
    transform: translateX(-100%);
transition: 0.3s;
transition-timing-function: linear;
opacity: 0;

}
.div-2017-info {
    width: 100%;
    display: flex;
    flex-direction: column;
   margin-top: 14.7rem;
   transform: translateX(-100%);
   transition: 0.3s;
   transition-timing-function: linear;
   opacity: 0;

}

.div-2017-info-h3 {
    color: #003459;
    font-family: poppinsBold;
    font-size: 20px;
    text-align: end;
}
.div-2017-info-p {
    color: #003459be;
    font-family: poppins;
    font-size: 13px;
    text-align: end;

}
.div-2022-info {
    width: 100%;
    display: flex;
    flex-direction: column;
   margin-top: 5.7rem;
   transform: translateX(-100%);
   transition: 0.3s;
   transition-timing-function: linear;
   opacity: 0;
    
}
.div-2022-info-h3 {
    color: #003459;
    font-family: poppinsBold;
    font-size: 20px;
    text-align: end;
}
.div-2022-info-p {
    color: #003459be;
    font-family: poppins;
    font-size: 13px;
    text-align: end;
    

}

/* middle one */
.main-timeline-02 {
    width: 6rem;
    min-height: 40rem ;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.circle-timeline-01 {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #003459;
    border-radius: 50%;
}
.circle-timeline-02 {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #003459;
    border-radius: 50%;
transform: translateY(-10px);

}
.circle-timeline-03 {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #003459;
    border-radius: 50%;
transform: translateY(-20px);

}
.circle-timeline-04 {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #003459;
    border-radius: 50%;
transform: translateY(-30px);

}
.line-timeline-01  {
width: 0.55rem;
height: 15rem;
background-color: #003459;
border-radius: 5px;
transform: translateY(-5px);
}
.line-timeline-02  {
width: 0.55rem;
height:6rem;
background-color: #003459;
border-radius: 10px;
transform: translateY(-15px);

}
.line-timeline-03  {
width: 0.55rem;
height:6rem;
background-color: #003459;
border-radius: 10px;
transform: translateY(-25px);

}

/* right one */
.main-timeline-03 {
    width: 16rem;
    min-height: 40rem ;
}
.div-2005-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
   transition: 0.3s;
   transition-timing-function: linear;
   opacity: 0;

}
.div-2005-info-h3 {
    color: #003459;
    font-family: poppinsBold;
    font-size: 20px;

}
.div-2005-info-p {
    color: #003459be;
    font-family: poppins;
    font-size: 13px;
    max-width: 13rem;

}
.div-2017 {
    width: 100%;
    color: #003459;
    font-family: roedies ;
    font-size: 30px;
    display: flex;
    justify-content: start;
   margin-top: 13.6rem;
   transform: translateX(100%);
   transition: 0.3s;
   transition-timing-function: linear;
   opacity: 0;

}
.div-2022 {
    width: 100%;
    color: #003459;
    font-family: roedies ;
    font-size: 30px;
    display: flex;
    justify-content: start;
   margin-top: 1.6rem;
   transform: translateX(100%);
   transition: 0.3s;
   transition-timing-function: linear;
   opacity: 0;

}

.div-2021-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 5.7rem;
    transform: translateX(100%);
   transition: 0.3s;
   transition-timing-function: linear;
   opacity: 0;
    
}
.div-2021-info-h3 {
    color: #003459;
    font-family: poppinsBold;
    font-size: 20px;

}
.div-2021-info-p {
    color: #003459be;
    font-family: poppins;
    font-size: 13px;
    max-width: 10rem;

}





/*responsive ipad*/

@media (max-width: 1100px) {
    
    .logo {
        font-size: 35px;
    }
    nav{
        justify-content: space-around;
        transition: 0.3s ease;
        overflow: hidden;
        height: 8vh;
    }
    
    .nav-links {
        width: 32%;
        
    }
   
    nav .nav-links li .aME1 
     {
        
        font-size: 13px;
    
    }
    nav .nav-links li .wo1 
     {
      
        font-size: 13px;
    
    }
    nav .nav-links li .cm1 
     {
        
        font-size: 13px;
    
    }
    .nav-links li a::after {
        content: "";
        width: 0%;
    }
    
     .nav-links li a:hover::after {
         width: 0;
     }

      /* maindiv for ipad */
      .main-div-over {
        width: 100%;
        height: 38rem;
        background-image: url(images/p1.jpg);background-size: cover;
    
    }

    .main-div {
        width: 100%;
        height: 38rem;
        display: flex;
        flex-direction: column;
        background-color:   white ;
        align-items: center;
        justify-content: space-evenly;
        background-color: rgba(243, 243, 243, 0.753);
        
    }
    .picturemain {
        width: 230px;
        height: 230px;
        border-radius: 50%;
        background-image: url(images/8c.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
.ih1 {
    color: #003459;
    font-size: 40px;
    font-family: poppins;
    font-weight: bolder;
}

.infop
{color: #003459be;
    font-family: poppins;
    font-size: 17px;
    max-width: 600px;
    text-align: center;
}
.lmore {
    color: white;
    background-color: #003459;
    font-family: poppins;
    border-radius: 20px;
    font-size: 15px;
    text-decoration: none;
    padding: 12px 20px 12px 23px;
    transform: translatey(-15px);

}
.lmore:hover {
    background-color: #003459;
    color: white;
    
}
.viewall:hover {
color: #003459;
}
.work-1:hover{
    transform: scale(1);
}
.work-2:hover{
    transform: scale(1);
}
.work-3:hover{
    transform: scale(1);
}
.work-4:hover{
    transform: scale(1);
}
.infotexts {
    display: flex;
    flex-direction: column;
    min-height: 35%;
    justify-content: space-evenly;
    align-items: center;
}

/* recent works */

.main-recentdiv 
{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    height: 35rem;
    margin-top: 5%;
}
.topic {
    width: 100%;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem ;
    

}
.recent {
    color: #003459;
    font-family: poppins;
    font-size: 30px;


}
.viewall {
    color: #003459;
    font-size: 16px;
    font-family: poppins;
    text-decoration: none;
}

.main-collection {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

}

/* single box of work */
.work-1 {
    width: 90%;
height: 80px;
background-color: rgb(243, 243, 243);
border-radius: 12px;
overflow: hidden;
display: flex;
transform: translateY(0);
opacity: 1;


}
.work-2 {
    width: 90%;
height: 80px;
background-color: rgb(243, 243, 243);
border-radius: 12px;
overflow: hidden;
display: flex;
transform: translateY(0);
opacity: 1;


}
.work-3 {
    width: 90%;
height: 80px;
background-color: rgb(243, 243, 243);
border-radius: 12px;
overflow: hidden;
display: flex;
transform: translateY(0);
opacity: 1;

}
.work-4 {
    width: 90%;
height: 80px;
background-color: rgb(243, 243, 243);
border-radius: 12px;
overflow: hidden;
display: flex;
transform: translateY(0);
opacity: 1;

}
.dates{
    width: 20%;
display: flex;
flex-direction: column;
justify-content: center;

align-items: center;
height: 100%;
background-color: #003459;

}
.month {
    color: white;
    font-family: poppins;
    font-size: 13.5px;
    letter-spacing: 1px;

}
.date{
    color: white;
    font-family: poppins;
    font-size: 21px;
    letter-spacing: 1px;
}
.year{
    color: white;
    font-family: poppins;
    font-size: 11px;
}
.topics {

    width: 80% ;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;
    
}
.topi {
    text-decoration: none;

    font-size: 20px;
    color: #003459;
    padding-left: 5%;
    font-family: poppins;
}
.genre {
    font-size: 15px;
    color: #003459;
    padding-left: 5%;
    font-family: poppins;
}

/* contact */

.contact-div {
    width: 100%;
    height: 23rem;
    margin-top: 3rem;
   
    
}
.cont {
    font-family: poppins;
    font-size: 35px;
    color: #003459;
    text-align: center;

}
.contact-list {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 100% ;
    display: flex;
    justify-content: center;
    align-items: center;


}
/* mail */
.maildiv{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 8rem;
    justify-content: space-between;
}
.mail {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #003459;
    display: flex;
    justify-content: center;
    align-items: center;

}
#env1 {
    color: white;
    font-size: 30px;
}
.email1 {
    font-family: poppins;
    color: #003459;
    font-size: 13px;
}
/* phone */
.phonediv{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 8rem;
    justify-content: space-between;
}
.phoe {
    width: 80px;
    height:80px;
    border-radius: 50%;
    background-color: #003459;
    display: flex;
    justify-content: center;
    align-items: center;

}
#phonefa {
    color: white;
    font-size: 30px;
}
.phone1 {
    font-family: poppins;
    color: #003459;
    font-size: 13px;
}
/* linkedin */
.linkedindiv{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 8rem;
    justify-content: space-between;
}
.linked {
    width: 80px;
    height:80px;
    border-radius: 50%;
    background-color: #003459;
    display: flex;
    justify-content: center;
    align-items: center;

}
#linkedinfa {
    color: white;
    font-size: 30px;
}
.linked1 {
    font-family: poppins;
    color: #003459;
    text-decoration: none;
    font-size: 13px;
}
/* address */
.homediv{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 8rem;
    justify-content: space-between;
}
.homed {
    width: 80px;
    height:80px;
    border-radius: 50%;
    background-color: #003459;
    display: flex;
    justify-content: center;
    align-items: center;

}
#home1 {
    color: white;
    font-size: 30px;
}
.ho1 {
    font-family: poppins;
    color: #003459;
    font-size: 13px;
    text-align: center;
    transform: translateY(1.3rem);
}

/* banner */

.bannerlanding {
    width: 100%;
    height: 4rem;
    background-color: #003459;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top: 0rem;
}

.copyright {
    color: white;
    font-family: poppins;
    font-weight: light;
    font-size: 14px;
}

 
    


}

/*responsive mobile menu*/


.bar-menu {
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: flex-end;
    height: 10vh;
    width: 50px;
    display: none;
}
.bar1 {
    width: 25px;
    height: 3px;
    background-color: #003459;
border-radius: 4px;
margin-bottom: 5px;
}
.bar2 {
    width: 18px;
    height: 3px;
    border-radius: 5px;
    margin-bottom: 5px;

    background-color: #003459;
}
.bar3 {
    width: 22px;
    height: 3px;
border-radius: 5px;
    background-color: #003459;
}


/*for mobile responsive*/

@media (max-width: 420px) {
    .bodyAfter {
        height: 100%;
        overflow: hidden;
    }
    .bodyAfterCom {
        height: 100%;
        overflow: hidden;
    }
    nav{
        justify-content: space-around;
        transition: 0.3s ease;
        overflow: hidden;
        height: 10vh;
    }
    
    .nav-links {
        position: fixed;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 91VH;
        top: 9vh;
        right: 0;
        background-color:#003459;
        transform: translateX(100%);
        transition: 0.25s ease;
        z-index: 1111;
        
    }
    
    .bar-menu {
        display: flex;
        
    }
    .logo {
        font-size: 25px;
        transition: 0.3s ease;

    }
    .nav-links li {
        list-style: none;
        width: 100%;
        background-color: #003459;
        height: 50px;
        display: flex;
        justify-content: center;
        margin-top: 10px;
        margin-bottom: 10px;
        align-items: center;
        transform: translateY(-100px);
    
    }
    nav .nav-links li .aME1 
     {
        color: #ffffff;
        padding: 5px;
        font-family: poppins;
        letter-spacing: .5px;
        font-size: 28px;
    
    }
    nav .nav-links li .wo1 
     {
        color: #ffffff;
        padding: 5px;
        font-family: poppins;
        letter-spacing: .5px;
        font-size: 28px;
    
    }
    nav .nav-links li .cm1 
     {
        color: #ffffff;
        padding: 5px;
        font-family: poppins;
        letter-spacing: .5px;
        font-size: 28px;
    
    }
     .nav-links li a::after {
        content: "";
        width: 0%;
    }
    
     .nav-links li a:hover::after {
         width: 0;
     }
    .nav-links li .cm1 {
         color: white;
         padding: 0px;
         border-radius: 10px;
        transition: 0s ;
        }
    .nav-links li .cm1:hover {
         color: white;
         background-color: transparent;
        }
      
    .nav-links li .cm1:hover::after {
       width: 0;
         
    }

    /*for mobile javascript classes active*/
.afterlinks {
    transform: translateX(0%);
    }
    .backgn{
        background-color: #003459;
    }
    .logocolorchange{
        color: white;
        font-size: 31px;
    }
    
    
    .barcolorchange{
        background-color: white;
        transform: rotate(-45deg) translate(-5px,6.5px);
        transition: 0.2s ease;
        width: 30px;

    }
    .barcolorchangetwo{
        background-color: white;
        opacity: 0;

    }
    .barcolorchangeth{
        background-color: white;
        width: 30px;
        transition: 0.2s ease;
        transform: rotate(45deg) translate(-5px,-6px);

    }

    /* maindiv for mobile */
    .main-div-over {
        width: 100%;
        height: 32.9rem;
        background-image: url(images/p1.jpg);background-size: cover;
    
    }
    .main-div {
        width: 100%;
        height: 33rem;
        display: flex;
        flex-direction: column;
        background-color:   white ;
        align-items: center;
        justify-content: space-evenly;
        background-color: rgb(243, 243, 243);
        
    }
    .in-second {
    
        width: 100%;
        min-height: 18rem;
    margin-left: auto;
    margin-right: auto;
        background-color: transparent;
        justify-content: space-evenly;
        display: flex;
        
        flex-direction:column;
    }
   
    
    .in-02 {
        width: 100%;
       
        min-height: 18rem;
        border-radius: 0px;
        margin-left: auto;
        margin-right: auto;
        background-color: rgb(255, 255, 255);
        display:flex;
        justify-content: space-evenly;
        align-items: center;
    
    }
    .ftect {
        font-size: 19px;
    }
    .picturemain {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background-image: url(images/8c.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
.ih1 {
    color: #003459;
    font-size: 30px;
    font-family: poppins;
    font-weight: bolder;
}


.infop
{color: #003459be;
    font-family: poppins;
    font-size: 13px;
    max-width: 300px;text-align: center;
}
.main-div .lmore {
    color: white;
    background-color: #003459;
    font-family: poppins;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    padding: 10px 15px 10px 18px;
    
}
.lmore:hover {
    background-color: #003459;
    color: white;
    
}
.viewall:hover {
color: #003459;
}
.work-1:hover{
    transform: scale(1);
}
.work-2:hover{
    transform: scale(1);
}
.work-3:hover{
    transform: scale(1);
}
.work-4:hover{
    transform: scale(1);
}
.infotexts {
    display: flex;
    flex-direction: column;
    min-height: 33%;
    justify-content: space-evenly;
    align-items: center;
}
.PortMy {
    color: #003459;
    font-family: poppinsBold;
    text-align: center;
    margin-top:2.5rem;
    font-size: 28px;
    margin-bottom: 0rem;

    
}

/* PRODUCTS */


.product {
    position:relative;
    overflow: hidden;
    padding: 20px;
    background-color: white;
  
  }
  
  .product-category {
    padding: 0 3vw;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 40px;
    font-family: poppinsBold;
    color: #003459;
    text-transform: capitalize;
    margin-top: 1rem;
    margin-bottom: 2rem;

  }
  
  .product-container {
    padding: 0 5.5%;
    display: flex;
    overflow-x: auto;
    scroll-behavior:smooth;
  }
  
  .product-container::-webkit-scrollbar {
    display: none;
  }
  
  .product-card {
    flex: 0 0 auto;
    width: 100%;
    min-height: 330px;
    margin-right: 40px;
    border-radius: 3px;
    transition: 0.2s;
    transition-timing-function: linear;
  }
  
  .product-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-left: 1px solid #f5f5f5;
    border-right: 1px solid #f5f5f5;
    border-top: 1px solid #f5f5f5;
  }
  
  .product-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  
  
  .card-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    width: 90%;
    text-transform: capitalize;
    border: none;
    outline: none;
    background: #000309;
    border-radius: 3px;
    transition: 0.5s;
    cursor: pointer;
    color: #cccdce;
    opacity: 0;
    font-size: 12px;
    font-family: poppins;
    transition: 0.2s;
    transition-timing-function: linear;
  }
  .product-card:hover {
      transform: scale(1.02);
      
  }
  .product-card:hover .card-btn {
    opacity: 1;
  }
  
  
  .product-info {
    width: 100%;
   min-height: 170px;
    padding-top: 10px;
  background-color: #f5f5f7;
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f7;
  }
  
  .product-brand {
    font-family: poppins;
    font-size: 16px;
    color: #003459;
    text-decoration: none;
    margin-left: 1.1rem;
  
    margin-bottom: 0.2rem;
  }
  .buy-main {
    width: 15.5rem;
    height: 2.5rem;
    display: flex;
    margin: auto auto;
    justify-content: center;
    align-items: center;
    margin-top: 0.6rem;
    background-color: #003459;
    padding-bottom: 1px;
    border-radius: 3px;
    transition: 0.2s;
    transition-timing-function: linear;

  }
  .buy-main:hover  {
      background-color: #003459cc;
  }
 
  
  
  .price {
    font-size: 12px;
    font-style: italic;
    color: #003459;
    font-family: poppins;
   
    margin-left: 1.1rem;
  }
  
 
  
  .pre-btn,
  .nxt-btn {
    border: none;
    width: 10vw;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    cursor: pointer;
    z-index: 8;
  }
  
  .pre-btn {
    left: 0;
    transform: rotate(180deg);
  }
  
  .nxt-btn {
    right: 0;
  }
  
  .pre-btn img,
  .nxt-btn img {
    opacity: 0.2;
  }
  
  .pre-btn:hover img,
  .nxt-btn:hover img {
    opacity: 1;
  }
  
  .collection-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
  }
  
  .collection {
    position: relative;
  }
  
  .collection img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

  
  .collection:nth-child(3) {
    grid-column: span 2;
    margin-bottom: 10px;
  }


  /* for time line for mobile */

.timeline-top {
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-family: poppinsBold;
    color: #003459;
    margin-top:1.3rem;
    background-color:#F2F2F2 ;
    padding-bottom: 3rem;
    padding-top: 2rem;
}
.main-timeline {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #F2F2F2;
    padding-bottom: 3rem;
    background-image: none;



}
/* left one */
.main-timeline-01 {
    width: 13rem;
    min-height: 40rem ;
    display: flex;
    flex-direction: column;
    
}
.div-2005 {
    width: 100%;
    color: #003459;
    font-family: roedies ;
    font-size: 30px;
    display: flex;
    justify-content: end;
}
.div-2021 {
    width: 100%;
    color: #003459;
    font-family: roedies ;
    font-size: 30px;
    display: flex;
    justify-content: end;
    margin-top: 4.7rem;

}
.div-2017-info {
    width: 100%;
    display: flex;
    flex-direction: column;
   margin-top: 14rem;
   align-items: flex-end;


}

.div-2017-info-h3 {
    color: #003459;
    font-family: poppinsBold;
    font-size: 17px;
    text-align: end;
}
.div-2017-info-p {
    color: #003459be;
    font-family: poppins;
    font-size: 11px;
    text-align: end;
    max-width: 8rem;
    

}
.div-2022-info {
    width: 100%;
    display: flex;
    flex-direction: column;
   margin-top: 5.1rem;
   align-items: flex-end;

    
}
.div-2022-info-h3 {
    color: #003459;
    font-family: poppinsBold;
    font-size: 17px;
    text-align: end;
}
.div-2022-info-p {
    color: #003459be;
    font-family: poppins;
    font-size: 11px;
    text-align:end;
    
    max-width: 8rem;

}

/* middle one */
.main-timeline-02 {
    width: 4.5rem;
    min-height: 40rem ;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.circle-timeline-01 {
    width: 2rem;
    height: 2rem;
    background-color: #003459;
    border-radius: 50%;
}
.circle-timeline-02 {
    width: 2rem;
    height: 2rem;
    background-color: #003459;
    border-radius: 50%;
transform: translateY(-10px);

}
.circle-timeline-03 {
    width: 2rem;
    height: 2rem;
    background-color: #003459;
    border-radius: 50%;
transform: translateY(-20px);

}
.circle-timeline-04 {
    width: 2rem;
    height: 2rem;
    background-color: #003459;
    border-radius: 50%;
transform: translateY(-30px);

}
.line-timeline-01  {
width: 0.55rem;
height: 15rem;
background-color: #003459;
border-radius: 5px;
transform: translateY(-5px);
}
.line-timeline-02  {
width: 0.55rem;
height:8.4rem;
background-color: #003459;
border-radius: 10px;
transform: translateY(-15px);

}
.line-timeline-03  {
width: 0.55rem;
height:6rem;
background-color: #003459;
border-radius: 10px;
transform: translateY(-25px);

}

/* right one */
.main-timeline-03 {
    width: 13rem;
    min-height: 40rem ;
}
.div-2005-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    
}
.div-2005-info-h3 {
    color: #003459;
    font-family: poppinsBold;
    font-size: 17px;

}
.div-2005-info-p {
    color: #003459be;
    font-family: poppins;
    font-size: 11px;
    max-width: 9rem;

}
.div-2017 {
    width: 100%;
    color: #003459;
    font-family: roedies ;
    font-size: 30px;
    display: flex;
    justify-content: start;
   margin-top: 12.6rem;
}
.div-2022 {
    width: 100%;
    color: #003459;
    font-family: roedies ;
    font-size: 30px;
    display: flex;
    justify-content: start;
   margin-top: 2.1rem;
}

.div-2021-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 7.74rem;
    
}
.div-2021-info-h3 {
    color: #003459;
    font-family: poppinsBold;
    font-size: 17px;

}
.div-2021-info-p {
    color: #003459be;
    font-family: poppins;
    font-size: 11px;
    max-width: 7.6rem;

}



/* contact */
.contact-main {
    display: none;
    margin-top: 0.8rem;

}
.contact-div {
    width: 100%;
    min-height: 48rem;
    margin-top: 0rem;
    background-color: transparent;
    
}
.cont {
    font-family: poppins;
    font-size: 25px;
    color: #003459;
    text-align: center;
    margin-bottom: 1.5rem;

transform: translateY(1rem);

}
.contact-list {
    width: 100%;
    height: 100% ;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

}
/* mail */
.maildiv{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 11rem;
    justify-content: space-around;
}
.mail {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #003459;
    display: flex;
    justify-content: center;
    align-items: center;

}
#env1 {
    color: white;
    font-size: 40px;
}
.email1 {
    font-family: poppins;
    color: #003459;
    font-size: 15px;
}
/* phone */
.phonediv{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 11rem;
    justify-content: space-around;
}
.phoe {
    width: 90px;
    height:90px;
    border-radius: 50%;
    background-color: #003459;
    display: flex;
    justify-content: center;
    align-items: center;

}
#phonefa {
    color: white;
    font-size: 40px;
}
.phone1 {
    font-family: poppins;
    color: #003459;
    font-size: 15px;
}
/* linkedin */
.linkedindiv{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 11rem;
    justify-content: space-around;
}
.linked {
    width: 90px;
    height:90px;
    border-radius: 50%;
    background-color: #003459;
    display: flex;
    justify-content: center;
    align-items: center;

}
#linkedinfa {
    color: white;
    font-size: 40px;
}
.linked1 {
    font-family: poppins;
    color: #003459;
    font-size: 15px;
}
/* address */
.homediv{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 11rem;
    justify-content: space-around;
}
.homed {
    width: 90px;
    height:90px;
    border-radius: 50%;
    background-color: #003459;
    display: flex;
    justify-content: center;
    align-items: center;

}
.po-p1 {
    color: #003459;
    font-size: 32px;
    margin-top: 4rem;
    font-family: poppins;
    font-weight: bolder;
    text-align:center;
    }
#home1 {
    color: white;
    font-size: 40px;
}
.ho1 {
    font-family: poppins;
    color: #003459;
    font-size: 15px;
    transform: translateY(0rem);

}

/* counter formobile */
.in-second {
    width: 100%;
    min-height: 66rem;
margin-top:0rem;
    background-color: transparent;
    justify-content: space-around;
    display: flex;
    flex-direction: column;
    
}

.in-02 {
    width: 100%;

    min-height: 18rem;
    border-radius: 0px;
    margin-left: auto;
    margin-right: auto;
   
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;


}
#c-all {
    width: 13rem;
    height: 15rem;
}

.counter {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #003459;
    font-size: 50px;
    font-family: poppins;
    width: 100%;
    height: 4rem;
    
}
.iconc {
    height: 5rem;
    width: 100%;
    color: #003459;
    font-size: 37px;
    display: flex;
    justify-content: center;
    align-items: center;

    
}

.c1text {
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;

}
.c1texth {
    color: #003459;
    font-family: poppins;

}
.in-03 {
    width: 100%;
    min-height: 17rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

align-items: center;
}
.in-03-1 {
    width: 90%;
    height:17rem ;
    background-color: rgb(255, 255, 255);
box-shadow: 0 0 5px 1px rgb(231, 231, 231) ;
border-radius: 10px;
display: block;



}
.in-03-2 {
    width: 90%;
    height:17rem ;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 5px 1px rgb(231, 231, 231) ;

border-radius: 10px;



}
.edabout {
    color: #003459;
    font-family: poppins;
    margin-top: 1rem;
    margin-left: 2rem;
    padding-bottom: 1rem;
}
.edp {
    width: 90%;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    
}
.ed1 {
    color: #003459;
    font-size: 15px;
    font-family: poppins;
    margin: 6px;
}
.worksabout {
    color: #003459;
    font-family: poppins;
    margin-top: 1rem;
    margin-left: 2rem;
    padding-bottom: 1rem;

}
.n1about {
    
    font-family: poppins;
    color: #003459;
}
.findonabout {
    
    width: 100%;
    min-height: 6.5rem;
    font-family: poppins;
    color: #003459;
    display: flex;
    flex-direction: column;
align-items: center; 
justify-content: space-between;
}
.pabout {
    
color: #003459be;
font-family: poppins;
font-size: 15px;
max-width: 20rem;
text-align: center;

}


/* banner */

.bannerlanding {
    width: 100%;
    height: 3rem;
    background-color: #003459;
    margin-top: 5rem;
    justify-content: center;
display: flex;
align-items: center;
}

.copyright {
    color: white;
    font-family: poppins;
    font-weight: light;
    font-size: 14px;
    
    
}
   
}




@font-face {
    font-family: guy ;
    src: url(fonts/LuckiestGuy-Regular.ttf);
}

.main-div-01 {
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: rgb(219, 230, 235);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    animation-name: loaderBack;
    animation-duration: 7s;
    animation-fill-mode: forwards;
    z-index: 111111111111;
    
}
#hello {
    opacity: 0;
}
#namaste{
    opacity: 0;
}
.load {
    width: 100px;
    height: 100px;
    background-image: url(/Images/Pulse-1.2s-200px.gif);
    background-repeat: none;
    background-size: cover;
    transform: translateY(-10px);
    animation-name: loader;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    display: block;
}
.hello {
    font-family: guy;
    color: white;
    font-size: 70px;
    font-weight: 200;
    letter-spacing: 5px;
    display: block;
    animation-name: hello;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    display: block;
    opacity: 0;
    transform: translateY(-70px);
    animation-delay: 3s;
    
}
.Namaste {
    font-weight: 200;

    font-family: guy;
    color: white;
    font-size: 70px;
    letter-spacing: 5px;
    display: block;
    animation-name: Namaste;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    display: block;
    opacity: 0;
    transform: translateY(-150px);
    animation-delay: 4.5s;

}

@keyframes loader{
    0% {
        opacity: 1;
        display: block;
    }
    80% {
        opacity: 1;
        display: block;
    }
    100%{
        opacity: 0;
        display: none;
    }

}
@keyframes loaderBack{
    0% {
        opacity: 1;

        background-color:rgb(219, 230, 235) ;
        display: flex;
    }
    40% {
        opacity: 1;

        background-color:rgb(219, 230, 235) ;
display: flex;
    }
    50% {
        opacity: 1;

        background-color:rgb(39, 152, 204) ;
display: flex;
    }
    95% {
        opacity: 1;

        background-color:rgb(39, 152, 204) ;
display: flex;
    }
       
    100%{
        opacity: 0;
        display: none;
        background-color:rgb(39, 152, 204) ;

    }

}
@keyframes hello{
    0% {
        opacity: 1;
        display: block;

    }
    90% {
        opacity: 1;
        display: block;
    
    }
       
    100%{
        opacity: 0;
        display: none;
    }

}
@keyframes Namaste{
    0% {
        opacity: 1;
        display: block;

    }
    90% {
        opacity: 1;
        display: block;
    
    }
       
    100%{
        opacity: 0;
        display: none;
    }

}


/* animation */

.img-2 {
    width: 500px;
    height: 300px;
}
.img-3 {
    max-width: 600px;
    height: 300px;
}
.img-1 {
    max-width: 600px;
    height: 300px;
}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 700px;
  position: relative;
  margin: auto;

}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 20px;
  letter-spacing: 1px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-family: poppins;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 420px) {
  .prev, .next,.text {font-size: 11px}
}


/* for animation in timeline */


/* for left */


.after-2017-info {
transform: translateX(0%);
opacity: 1;

}
.after-2022-info {
transform: translateX(0%);
opacity: 1;

}


.after-2005-year {
 transform: translateX(0%);
opacity: 1;

 }
    .after-2021-year {
    transform: translateX(0%);
opacity: 1;

    }

/* for right */


.after-2005-info {
    transform: translateX(0%);
opacity: 1;

    }
    .after-2017-year {
    transform: translateX(0%);
opacity: 1;

    }
    .after-2022-year {
    transform: translateX(0%);
opacity: 1;

    }

    .after-2021-info {
        transform: translateX(0%);
opacity: 1;

        }