html{
    background-color: black;
}
/* full screen image */
.full{
    width: 100vw;
    height: 100vh;
    top:0;
}

.intro-header{
    padding: 0 6%;
}

/* Head Title */
.head-title{
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Icon Images */
.icon{
    width: 120px;
    height: auto;
}

/* white background */
.bg-white{
    background-color: white;
    width: 100vw;
    height: 100vh;
    top:0;
}

.bg-black{
    background-color: black;
    width: 100vw;
    height: 100vh;
    top:0;
}

/* center div */
.all-center{
    display: flex;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.all-center-middle{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

/* black text */
.text-black{
    color: black;
}

.center-item{
    width: 100vw;
    place-content: center;
}

.text-center{
    text-align: center;
}
.last-pattern{
    position: absolute;
    z-index: -1;
}

@media screen and (max-width: 1024px) and (min-width: 481px) {
    .fit{
        object-fit: contain;
    }
}
@media screen and (max-width: 900px) and (min-width: 600px) {

}
.fit{
    
    object-fit: contain;
}

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
    .other-sectors{
        display: flex;
        justify-content: center;
        width: 100%;
        font-weight: bold;
        font-size: 22px;
        letter-spacing: 4px;
    }
}
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ 
    .other-sectors{
        display: flex;
        justify-content: center;
        width: 100%;
        font-weight: bold;
        font-size: 22px;
        letter-spacing: 4px;
    }
}
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
    .last-text{
        display: none !important;
    }
    .last-grid img{
        width: 80px;
        height: 80px;
    }
    .last-sec{
        position: relative;
        overflow-x: hidden;
        background-image: url('https://bugiris.com/80/images/last-pattern.jpeg') !important;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        display: none;
        grid-template-columns: repeat(5 , 1fr);
        place-content: center;
        width: 100vw;
        height: 100vh;
        padding: 30px 20px;
        grid-gap: 1em;
    }
    .other-sectors{
        position: absolute;
        display: flex;
        justify-content: center;
        width: 100%;
        top: 25%;
        font-weight: bold;
        font-size: 45px;
        letter-spacing: 4px;
    }
}


@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
    .last-text{
        display: none !important;
    }
    .other-sectors{
        position: absolute;
        display: flex;
        justify-content: center;
        width: 100%;
        top: 25%;
        font-weight: bold;
        font-size: 45px;
        letter-spacing: 4px;
    }
    .last-grid img{
        width: 100px;
        height: 100px;
    }
    .last-sec{
        position: relative;
        overflow-x: hidden;
        background-image: url('https://bugiris.com/80/images/last-pattern.jpeg') !important;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        display: none;
        grid-template-columns: repeat(5 , 1fr);
        place-content: center;
        width: 100vw;
        height: 100vh;
        padding: 50px 250px;
        grid-gap: 1em;
    }
    
}
@media (min-width:1281px) { /* hi-res laptops and desktops */
    .last-text{
        display: none !important;
    }
    .other-sectors{
        position: absolute;
        display: flex;
        justify-content: center;
        width: 100%;
        top: 25%;
        font-weight: bold;
        font-size: 45px;
        letter-spacing: 4px;
    }
    .last-grid img{
        width: 100px;
        height: 100px;
    }
    .last-sec{
        position: relative;
        overflow-x: hidden;
        background-image: url('https://bugiris.com/80/images/last-pattern.jpeg') !important;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        display: none;
        grid-template-columns: repeat(5 , 1fr);
        place-content: center;
        width: 100vw;
        height: 100vh;
        padding: 50px 250px;
        grid-gap: 1em;
    }
}




.last-grid{
    display: grid;
    place-content: center;
    justify-items: center;
    color: #8c8a8a;
    padding: 20px 0;
    border: 1.5px solid #474646;
    border-radius: 15px;
}
.last-text{
    display: grid;
    align-content: baseline;
    justify-content: center;
    padding: 20px 0;
}
.last-text h4{
    font-size: 20px;
    color: #d6d6d6;
}
.last-text h2{
    font-size: 50px;
    color: white;
}

.last-grid:hover{
    background-color: #0b1319;
    letter-spacing: 2px;
    font-weight: bold;
    color:white;
    cursor: pointer;
}

.contain{
    object-fit: contain !important;
}

.gif {
	position: relative;
}
.play-gif{
	display: none;
}
.container {
	padding: 0;
    scroll-snap-type: y mandatory;
    -webkit-scroll-snap-type: y mandatory;


}

.child {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
}

#scroller {
	position: fixed;
	bottom: 0px;
	left: 50%;
	width: 100%;
	z-index: 2;
	display: flex;
	justify-content: center;
	-webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, -10%);    
    color: #fff;
	font: normal 400 20px/1 'Josefin Sans', sans-serif;
	letter-spacing: .1em;
	text-decoration: none;
	transition: opacity .3s, bottom 0.5s;
	cursor: pointer;
}

#scroller .arrow {
	position: relative;
	height: 46px;
	border-radius: 100%;
	box-sizing: border-box;
}


@-webkit-keyframes sdb03 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb03 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#scroller .arrow::before {
    position: absolute;
    left: 0;
    content: '';
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 10%);
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: sdb03 3s infinite;
    animation: sdb03 3s infinite;
    box-sizing: border-box;
}

#scroller .arrow::after {
    position: absolute;
    top: 50%;
    right: -30px;
    content: '';
    width: 16px;
    height: 16px;
    margin: -12px 0 0 -8px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(
	-45deg
	);
		transform: rotate(
	-45deg
	);
		box-sizing: border-box;
}

.scroller-text{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    opacity: 0.4;
}