html {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
		background-color:#1C1D21;
       background-color: black;
       width: 90%;
	margin: auto;

}

chrome-extension://pmnhcgfcafcnkbengdcanjablaabjplo/src/assets/logo-dark-background.svg

canvas{
  display: block;
}



/*-------------------------------------------------------------------------------------------------------------------------------------------nav section start--*/


.logo {
	width: 12%;
	height: 70px;
	border-width: 1px;
	border-color: black;
	border-style: solid;
		
}
.logo img {
	width:100%;
	height:100%;
}


.menu {
	width: 100%;
	height: auto;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	padding-top: 10px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin-bottom:150px;
}

.menu-1 {
	border-width: 1px;
	border-color: black;
	border-style: solid;
	color: white;
	font-size: 17px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
        text-shadow: 8px 8px 2px silver;
}

.menu-1 a {
	color: white;
	font-size: 17px;
	text-decoration: none;
	text-shadow: 8px 8px 2px silver;
}
.menu-2 {
	border-width: 1px;
	border-color: black;
	border-style: solid;
	color: white;
	font-size: 17px;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
        text-shadow: 8px 8px 2px silver;
        
}
.menu-2 a {
	color: white;
	font-size: 17px;
	text-decoration: none;
	text-shadow: 8px 8px 2px silver;
}
.menu-3 {
	border-width: 1px;
	border-color: black;
	border-style: solid;
	color: white;
	font-size: 17px;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
        text-shadow: 8px 8px 2px silver;
        
}

.menu-4 {
	border-width: 1px;
	border-color: black;
	border-style: solid;
	color: white;
	font-size: 17px;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	text-shadow: 8px 8px 2px silver;
	text-align: center;
	
}

.menu-5 {
	border-width: 1px;
	border-color: black;
	border-style: solid;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-shadow: 8px 8px 2px silver;
	text-align: center;
}

.menu-5 a {
      font-size: 20px;
	color: white;
	transition: all 0.5s ease-in-out;
}

.social-categori a: hover {
	color: red;
}

/*--------------------------------------------------------------------------------------------------------------------------------------------nav section end--*/






/*------------------------------------------------------------------------------------------------------------------------------------------Home-1--about section start-*/
.robi {
	width: 100%;
	height: 800px;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.robi-link {
	border-width: 1px;
	border-color: black;
	border-style: solid;
	text-align: center;
	font-size: 20px;
        color: white;
	margin: auto;
}

/*--------------------------------------------------------button section start*/
.btn {
  border: none;
padding: 12px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 4px;
  cursor: pointer;
   background-color: white; 
  color: #8C8A8C;
  text-decoration: none;
}


.btn:hover {
  background-color: #04AA6D;
  color: white;
  text-decoration: none;
}

/*--------------------------------------------------------button section end*/
.robi-ceo {

        background-color: white;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	background-image: url("../img/robi.webp");
	background-position: center right;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: auto;
        display: grid;
	grid-template-columns: repeat(1, 1fr);	
 display: flex;
    align-items: center;
      justify-content: center;
}

#canvas{
        background-color: transparent;
        width:100%;
      width:100%;
     
      
}


/*------------------------------------------------------------------------------------------------------------------------------------------Home-1--about section end-*/



.gap {
	width: 100%;
	height: 300px;
}

/*------------------------------------------------------------------------------------------------------------------------------------------------Home-2----- section start-*/


.robi-description {
  
  color: var(--color-dark);
  font-size: var(--size-font);
   background-color: white;
}


.cloneable {
  padding: var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height:800px;
  display: flex;
  position: relative;
}

.looping-words {
  height:800px;
  padding-left: .1em;
  padding-right: .1em;
  font-size: 2vw;
  line-height: 1.5;
  position: relative;
}

.looping-words__list {
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  flex-flow: column;
  align-items: center;
  margin: 0;
  padding: 0;
  font-family: PP Neue Corp, sans-serif;
  font-weight: 500;
  list-style: none;
  display: flex;
  position: relative;
}

.looping-words__list.is--primary {
  color: var(--color-primary);
}

.looping-words__list.is--gray {
  color: var(--color-neutral-500);
}

.looping-words__fade {
  background-image: linear-gradient(180deg, var(--color-neutral-300) 5%, transparent 40%, transparent 60%, var(--color-neutral-300) 95%);
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.looping-words__fade.is--radial {
  background-image: radial-gradient(circle closest-side at 50% 50%, transparent 64%, var(--color-neutral-400) 93%);
  width: 140%;
  display: block;
  left: -20%;
}

.looping-words__selector {
  pointer-events: none;
  width: 100%;
  height: .9em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.looping-words__edge {
  border-top: .035em solid var(--color-primary);
  border-left: .035em solid var(--color-primary);
  width: .135em;
  height: .125em;
  position: absolute;
  top: 0;
  left: 0;
}

.looping-words__edge.is--2 {
  left: auto;
  right: 0;
  transform: rotate(90deg);
}

.looping-words__edge.is--3 {
  inset: auto 0 0 auto;
  transform: rotate(180deg);
}

.looping-words__edge.is--4 {
  top: auto;
  bottom: 0;
  transform: rotate(270deg);
}

.looping-words__containers {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.looping-words__p {
  margin: 0;
}

@font-face {
  font-family: 'PP Neue Corp';
  src: url('https://cdn.prod.website-files.com/6717aac16c9ea22eeef1e79e/6717de2d56e40b921572d2d9_PPNeueCorp-TightUltrabold.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/*------------------------------------------------------------------------------------------------------------------------------------------------Home-2----- section end-*/





/*------------------------------------------------------------------------------------------------------------------------------------------------Home-3---- section start--*/


/* Flip start*/


.flip-box-inner {
  position: relative;
  width: 100%;
  height:800px;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height:800px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color:white;
  color: black;
  	display:flex;
	align-items:center;
	justify-content:center;
}

.flip-box-back {
  background-color:white;
  transform: rotateY(180deg);
  
  	display:flex;
	align-items:center;
	justify-content:center;
}
.flip-box img{
	
    width:100%;
	height:auto;

}

/* Flip end*/




.flip-box-back p{
padding-left:50px;
    padding-right:50px;
    font-size:35px;
 color:white;
  text-shadow: 2px 2px 4px #000000;
text-align:center;
}

glow {
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}


/*------------------------------------------------------------------------------------------------------------------------------------------------Home-3------ section end--*/

/*------------------------------------------------------------------------------------------------------------------------------------------------Home-4------ section end--*/

.robi-seo {
display: flex;
align-items: center;
justify-content: center;

  font-size: 1em;
  background: radial-gradient(#999,#000);
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
 border-width: 3px;
	border-style: solid;
	border-color: white;
 box-sizing: border-box;
}

.container {
width:.01em;
  height: 11em;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  perspective: 1000px;
 position: relative;
  .carousel {
    width:100%;
    height: 100%;
    left: .01em;
    top: 2em;
   position: absolute;
    transform-style: preserve-3d;
    animation: spin 40s infinite linear;
    figure {
      display: block;
     position: absolute;
      width: 8em;
      height: 6.750em;
      left: 0px;
      top: 0px;
      border: 2px solid black;
      opacity: 0.75;
      color: aqua;
      text-align: center;
      line-height: 6.750em;
      box-shadow: 0px 0px 5em #fff;
      &:nth-child(1) {
        transform: rotateY(0deg) translateZ(200px);
        background: black;
      }
      &:nth-child(2) {
        transform: rotateY(40deg) translateZ(200px);
        background: violet;
      }
      &:nth-child(3) {
        transform: rotateY(80deg) translateZ(200px);
        background: indigo;
      }
      &:nth-child(4) {
        transform: rotateY(120deg) translateZ(200px);
        background: green;
      }
      &:nth-child(5) {
        transform: rotateY(160deg) translateZ(200px);
        background: yellow;
      }
      &:nth-child(6) {
        transform: rotateY(200deg) translateZ(200px);
        background: orange;
      }
      &:nth-child(7) {
        transform: rotateY(240deg) translateZ(200px);
        background: pink;
      }
      &:nth-child(8) {
        transform: rotateY(280deg) translateZ(200px);
        background: red;
      }
      &:nth-child(9) {
        transform: rotateY(320deg) translateZ(200px);
        background: silver;
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}


/*------------------------------------------------------------------------------------------------------------------------------------------------Home-4------ section end--*/
/*-------------------------------------------------------------------------------------------------------------------------------------------Home-5------ carousel start--*/

.slide{
	background-color:white;
	border-width: 1px;
       border-style: solid;
	border-color:black;
	margin:6px;	
}

.slide-content{
	border-width: 1px;
        border-style: solid;
	border-color:black;
	background-color:transparent;	
	
	
	
	
	display:flex;
	align-items:center;
	justify-content:center
			
}
.slide-content p{
       background-color:transparent;
	text-decoration: none ;
	color:black;
	padding: 10px 0;
	margin: auto;
	font-size: 20px;
	text-align:center;
	

}
.slide-content {
	margin: 8px;
	width: 250px;
	height: 120px;
	background-color: lightgray;
        border-radius: 12px;
	overflow: hidden;
	position: relative;
}

img {
	background-color:transparent;
	width: 100%;
}


.slid-er {
	border-width: 1px;
	border-color: lightgray;
	border-style: solid;
	height: 156px;
	margin: auto;
	overflow: hidden;
	width: 100%;
	margin-bottom: 40px;
	box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.3);
}

.slid-er .slides {
	display: flex;
}

.button-container {
	 position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	background-color: rgba(0, 0, 0, 0.4);
	cursor: pointer;
	transition: opacity 0.15s;
}

.button-container:hover {
	opacity: 1;
}

.button-container:hover .button {
	transform: translate(-50%, -50%);
	
}

.button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 12px));
	background-color: rgba(0, 0, 0, 0.7);
	transition: all 0.15s;
	padding: 0 8px;
	border-radius: 12px;
	color: white;
	outline: 2px solid transparent;
	
}

.button:after {
	content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
	margin: 0 3px 0 5px;
	filter: invert(1);

}

.button:hover {
	background-color: rgba(0, 0, 0, 0.9);
	box-shadow: 0 0 0 2px gray;
		
}

/*-------------------------------------------------------------------------------------------------------------------------------------------Home-5-------- carousel end--*/


/*--------------------------------------------------------------------------------------------------------------------------------------------Home-6-----glow section start--*/


.i {
	color: black;
	font-size: 20px;
        text-decoration: none;
	border: none;
	outline: none;
	color: #;
	background: #;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 5px;
}

.i:before {
	content: '';
	background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
	position: absolute;
	top: -2px;
	left: -2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 0;
	transition: opacity .3s ease-in-out;
	border-radius: 5px;
}

.i:before {
	opacity: 1;
}

@keyframes glowing {
	0% {
		background-position: 0 0;
	}

	50% {
		background-position: 600% 0;
	}

	100% {
		background-position: 0 0;
	}
}

i:before {
	color: white;
	background: black;
}


/*--------------------------------------------------------------------------------------------------------------------------------------------Home-6-----glow section end--*/
/*--------------------------------------------------------------------------------------------------------------------------------------------Home-7----- section start--*/

footer { 
  background: #222; 
  color: #fff; 
  padding: 20px; 
  text-align: center; 
    box-shadow: 5px 10px 8px #888888;
    
    margin-top:30px
}
footer .social a { 
  color: #fff; 
  margin: 0 10px; 
  font-size: 24px; 
}
footer .social a: hover { 
  color: #0073e6; 
}
/*--------------------------------------------------------------------------------------------------------------------------------------------Home-7----- section end--*/

/*------------------------------------------------------------------------------------------------------------------------------------------




/*..................................................................................CSS media query start.......................................................................*/

 
  
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

.logo {
display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}
.menu{
 display: flex;
flex-direction: column;
 margin: auto;
  width: 100%;
 padding: 5px;
}
.menu-1{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
text-align: center;
}
.menu-2{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
text-align: center;
}
.menu-3{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
text-align: center;
}
.menu-4{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
text-align: center;
}
.menu-5{
  margin: auto;
  width: 50%;
  padding: 5px;
font-size: 15px;
text-align: center;

}
.menu-5 a {
font-size: 15px;
text-align: center;
}

.robi{
 display: flex;
flex-direction: column;
align-item: center;
  width: 100%;
height: auto;
  }

.robi-link{
height: auto;
  }
  
.robi-link h2{
font-size: 21px;
  }
.robi-link h4{
font-size: 16px;
  }

.robi-ceo{
   height:800px;
  }

.robi-description{
height:800px;
  }
 
.cloneable {
  min-height:800px;
}
.looping-words {
  height:800px;
  font-size: 6vw;
  line-height: 1.5;
}
  
 
.flip-box-inner{
  height:800px;
  }
.flip-box-back p{
padding-left:5px;
    padding-right:5px;
    font-size:25px;
}  
.robi-seo{
  height:800px;
  }

.gap{
  width: 100%;
  height: 50px;
}


.signature{
 display: flex;
flex-direction: column;
align-item: center;
  width: 100%;
height: auto;
  }

.signature-2{
 height:300px;
  }

.signature-2 img{
	
 width:80%;
  height: auto;
  
}


.container {
transform: rotate(-90deg);
width:.01em;
  height: 11em;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  perspective: 1000px;
 position: relative;
  .carousel {
    width:100%;
    height: 100%;
    left: .01em;
    top: 2em;
   position: absolute;
    transform-style: preserve-3d;
    animation: spin 40s infinite linear;
    figure {

      display: block;
     position: absolute;
      width: 8em;
      height: 6.750em;
      left: 0px;
      top: 0px;
      border: 2px solid black;
      opacity: 0.75;
      color: aqua;
      text-align: center;
      line-height: 6.750em;
      box-shadow: 0px 0px 5em #fff;
      &:nth-child(1) {
        transform: rotateY(0deg) translateZ(200px);
        background: black;
      }
      &:nth-child(2) {
        transform: rotateY(40deg) translateZ(200px);
        background: violet;
      }
      &:nth-child(3) {
        transform: rotateY(80deg) translateZ(200px);
        background: indigo;
      }
      &:nth-child(4) {
        transform: rotateY(120deg) translateZ(200px);
        background: green;
      }
      &:nth-child(5) {
        transform: rotateY(160deg) translateZ(200px);
        background: yellow;
      }
      &:nth-child(6) {
        transform: rotateY(200deg) translateZ(200px);
        background: orange;
      }
      &:nth-child(7) {
        transform: rotateY(240deg) translateZ(200px);
        background: pink;
      }
      &:nth-child(8) {
        transform: rotateY(280deg) translateZ(200px);
        background: red;
      }
      &:nth-child(9) {
        transform: rotateY(320deg) translateZ(200px);
        background: silver;
      }
    }
  }
}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)and (max-width: 768px){
.logo {
display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}
.menu{
 display:flex;
flex-direction:column;
 margin: auto;
  width: 100%;
 padding: 5px;

}

.menu-1{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
text-align: center;
}
.menu-2{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
text-align: center;
}
.menu-3{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
   display: flex;
  justify-content: center;
}
.menu-4{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
    display: flex;
  justify-content: center;
}
.menu-5{
  margin: auto;
  width: 50%;
  padding: 5px;
font-size: 15px;
text-align: center;

}
.menu-5 a {
font-size: 15px;
text-align: center;
}


.robi{
 display: flex;
flex-direction: column;
align-item: center;
  width: 100%;
height: auto;
  }

.robi-link{
height: auto;
  }
  
.robi-link h2{
font-size: 21px;
  }
.robi-link h4{
font-size: 16px;
  }

.robi-ceo{
   height:800px;
  }

.robi-description{
height:800px;
  }

.cloneable {
  min-height:800px;
}
.looping-words {
  height:800px;
  font-size: 4vw;
  line-height: 1.5;
} 

flip-box-inner{
  height:800px;
  }
.robi-seo{
  height:800px;
  }

.gap{
  width: 100%;
   height: 80px;
}


.signature{
 display: flex;
flex-direction: column;
align-item: center;
  width: 100%;
height: auto;
  }

.signature-2{
 height:300px;
  }


}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)and (max-width:992px){




.logo {
display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
.menu{
 display: flex;
flex-direction: column;
 margin: auto;
 margin-bottom:100px;
  width: 100%;
 padding: 5px;
}

.menu-1{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
text-align: center;
}
.menu-2{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
text-align: center;
}
.menu-3{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
   display: flex;
  justify-content: center;
}
.menu-4{
  margin: auto;
  width: 70%;
  padding: 5px;
font-size: 15px;
    display: flex;
  justify-content: center;
}
.menu-5{
  margin: auto;
  width: 40%;
  padding: 5px;
font-size: 15px;
text-align: center;

}
.menu-5 a {
font-size: 15px;
text-align: center;
}



.cloneable {
  min-height:800px;
}
.looping-words {
  height:800px;
  font-size: 3.5vw;
  line-height: 1.5;
} 
  

}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px)and (max-width:1200px){
    
   
    
 
.cloneable {
  min-height:800px;
}
.looping-words {
  height:800px;
  font-size: 3.5vw;
  line-height: 1.5;
} 

}

/* Extra large devices (large laptops and desktops, 1200px and up) */

/* @media only screen and (min-width: 1200px) {



}*/







/*...................................................................CSS media query end..................................................................................*/