@charset "UTF-8";
/*
Project Name: Roto-transitions Concept
Version: 1.0
Author: Abdellatif Ahammad 
Author Github: https://github.com/abdellatifAhammad
Description: Roto-transitions Concept
*/
/*  Google fonts  : Amiri,poppins   */
@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Poppins:wght@300;400;500;700&display=swap');


/*=================================================================*/
/*                      BASE                              
/*=================================================================*/

:root {
  --primary-bg-color: #F25050;
  --primary-text-color: #050511;
  --body-bg-color: #FFFFFF;
  --bg-warning: #FEB12E;
  --bg-success: #20BF43;
  --bg-danger: #F25050;
  --button-bg-color: #F25050;
}

* {
  margin: 0;
  padding: 0;
}

html {
  margin: 0 !important;
  overflow: auto !important;
  scroll-behavior: smooth;
}

body {
  background-color: var(--body-bg-color);
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  scale: 1.1;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.row {
  display: flex;
  flex-direction: row;
}

.justify-center {
  justify-content: center;
  align-items: center;
}

li {
  list-style: none;
}

/*=================================================================*/
/*                      TYPOGRAPHY                              
/*=================================================================*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-text-color);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  margin: 20px 0;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

a {
  color: var(--primary-text-color);
  text-decoration: none;
  font-style: normal;
  font-weight: 400;
}

blockquote {
  padding: 20px 20px;
  margin: 0 0 20px;
  font-size: 16px;
  background: #F7F7F7;
  border-radius: 10px;
}

blockquote p {
  line-height: 1.6;
}

p {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 1.1em;
  color: #3e3e46;
  line-height: 30px;
}


/*=================================================================*/
/*                      INPUTS                              
/*=================================================================*/


input {
  text-transform: uppercase;
  color: white;
  border-style: none;
  outline: none;
  background-color: transparent;
  border-bottom: 1px solid white;
  height: 30px;
  margin-right: 25px;
}

input::placeholder {
  color: white;
}


/*=================================================================*/
/*                      CUSTOM                              
/*=================================================================*/


/* Section Styles */
.section-container {
  width: 100%;
  overflow: hidden;
  height: 100vh;
  position: relative;
}

/* Div Styles */
.div-container {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

/* Common Image Styles */
.img-container {
  width: 120%;
  height: 120%;
  object-fit: cover;
  object-position: center;
  position: absolute;
}

[id$="-img1"] {
  z-index: 5;
}

[id$="-img2"] {
  z-index: 4;
}


[id$="-img3"] {
  z-index: 3;
}

[id$="-img4"] {
  z-index: 2;
}

[id$="-img5"] {
  z-index: 1;
}



/* Slice-1 Styles */
.slice-1 {
  top: -10%;
  left: -10%;
  z-index: 0;
}

/* Slice-2 Styles */
.slice-2 {
  top: -10%;
  left: -10%;
  z-index: 2;
  clip-path: circle(70vh at center);
}

.slice-2-overlay {
  width: 120%;
  height: 120%;
  background: rgba(36, 36, 36, 0.31);
  position: absolute;
  z-index: 10;
}

/* Slice-3 Styles */
.slice-3 {
  top: -10%;
  left: -10%;
  z-index: 4;
  clip-path: circle(38vh at center);
}


.overlay-container {
  position: absolute;
  overflow: hidden;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.212);
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header {
  color: white;
  position: absolute;
  top: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.menu-icon {
  width: 33%;
}

.menu-icon ion-icon {
  margin-left: 15%;
  font-size: 28px;
  cursor: pointer;
}

.header-text {
  color: white;
  min-width: 33%;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
}

.search-form {
  position: relative;
  width: 33%;
  height: 30px;
  justify-content: end;
}

.search-wrapper {
  position: absolute;
  top: 0;
  right: 15%;
  display: flex;
  align-items: center;
}

.search-icon {
  font-size: 22px;
  text-align: center;
  cursor: pointer;
}

.horizontal-line {
  width: 25%;
  background-color: white;
  border-style: none;
  height: 1px;
}

.navigation-icons {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  min-width: 200px;
  margin-top: 1.5em;
}

.nav-icon {
  cursor: pointer;
}

.nav-icon-right {
  transform: rotateY(-180deg);
}

.divider {
  width: 1px;
  height: 50px;
  background-color: white;
}


.share-content {
  position: absolute;
  bottom: 80px;
  left: 0;
  display: flex;
  align-items: center;
  transform: rotate(90deg);
}

.share-text {
  color: white;
  text-transform: uppercase;
}

.share-divider {
  border: none;
  background: white;
  width: 50px;
  height: 1px;
  margin-left: 10px;
  margin-right: 10px;
}

.share-icon {
  color: white;
  font-size: 30px;
  rotate: -90deg;
}

.discover-more {
  position: absolute;
  bottom: 20px;
}

.discover-text {
  color: white;
  position: relative;
  cursor: pointer;
}

.discover-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 100%;
  height: 1px;
  background-color: white;
}


.switch-icon {
  font-size: 22px;
  transform: rotate(90deg);
}


/*=================================================================*/
/*                      FOOTER                          
/*=================================================================*/

footer {
  margin: 50px 0px 10px 0px;
  text-align: center;
}

/*=================================================================*/
/*                     BUTTONS
/*=================================================================*/


.switch-btn {
  display: grid;
  place-items: center;
  background: #CBD764;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  z-index: 15;
  bottom: 20px;
  right: 5%;
  transition: 500ms all;
}


@keyframes ro {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}


.switch-btn-circle:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.39);
  border: 1px solid white;
  z-index: -10;
  scale: 0;
  opacity: 1;
  top: calc(-25px-10px);
  animation: growing-circle 500ms ease-in-out alternate;
}

/*=================================================================*/
/*                      ANIMATIONS                            
/*=================================================================*/


#slice-1 .zoomed-in {
  animation: 1300ms ease-in-out zoom-effect;
}

#slice-1 .disappear-out {
  opacity: 0;
  animation: 900ms ease-in-out 0ms 1 normal none running disappear-out;
}

#slice-2 .zoomed-in {
  animation: 1200ms ease-in-out 0ms 1 normal none running zoom-effect;
}

#slice-2 .disappear-out {
  opacity: 0;
  animation: 800ms ease-in-out 0ms 1 normal none running disappear-out;
}

#slice-3 .zoomed-in {
  animation: 1100ms ease-in-out 0ms 1 normal none running zoom-effect;
}

#slice-3 .disappear-out {
  opacity: 0;
  animation: 700ms ease-in-out 0ms 1 normal none running disappear-out;
}



.text-spin-animation-wrapper {
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  height: 6.5em;
  overflow: hidden;
  text-align: center;
}

.text-cube-spin-animation-wrapper {
  box-sizing: content-box;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  height: 1.5em;
  overflow: hidden;
  margin-top: 1.5em;
  text-align: center;
}

.text-cube-spin-animation-wrapper span {
  color: white;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  height: 1.5em;
  transition: 1000ms all;
}


.text-spin-animation-wrapper span {
  height: 6.5em;
  font-family: amiri;
  text-transform: uppercase;
  color: white;
  font-weight: 200;
  letter-spacing: 1.4em;
  font-size: 3.4em;
  text-indent: -1.4em;
  direction: rtl;
  text-align: center;
  transition: 1000ms all;
}


@keyframes zoom-effect {
  0% {
    scale: 5;
    rotate: 0deg;
  }

  100% {
    scale: 1.1;
    rotate: 360deg;
  }
}

@keyframes disappear-out {
  0% {
    scale: 1.1;
    rotate: 0deg;
    opacity: 1;
  }

  100% {
    rotate: 360deg;
    opacity: 0;
    scale: 5;
  }
}


@keyframes growing-circle {
  to {
    scale: 1;
    opacity: 0.6;
    background: transparent;
  }
}




/*=================================================================*/
/*                      RESPONSIVE SETTINGS
/*=================================================================*/
/* // X-Small devices (portrait phones, less than 576px) */
/* // No media query for `xs` since this is the default in Bootstrap */

/* // Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
  .menu-icon {
    display: none;
  }

  .search-form {
    display: none;
  }

  .text-spin-animation-wrapper {
    height: 3.5em;
  }

  .text-spin-animation-wrapper span {
    letter-spacing: 0.7em;
    text-indent: -0.7em;
    height: 1.5em;
    font-size: 2em;
  }

  .share-content {
    left: -40px;
  }

}
/* // Large devices (desktops, 992px and up) */
@media (max-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {}