@tailwind base;
@tailwind components;
@tailwind utilities;



body > div.w-screen.flex.justify-center.bg-black.flex-col.items-center > p{
    width: 50%;
    text-align: center;
    padding: 10px;
}

body > div.w-screen.flex.justify-center.bg-black.flex-col.items-center > h1 {
    margin-top: 70px;
    font-size: 24px;
}

body > div.h-\[100vh\].bg-black.w-full.flex.justify-center.items-center > div > div:nth-child(1) > div:nth-child(1){
    background-image: url('/images/services.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border: solid;
    border-color: rgb(16, 1, 16);
}
body > div.h-\[100vh\].bg-black.w-full.flex.justify-center.items-center > div > div:nth-child(1) > div:nth-child(2){
    background-image: url('/images/innovation.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border: solid;
    border-color: rgb(16, 1, 16);
}

body > div.h-\[100vh\].bg-black.w-full.flex.justify-center.items-center > div > div:nth-child(2) > div:nth-child(1){
    background-image: url('/images/industries.gif');
    background-repeat: no-repeat;
    background-size: cover;
    border: solid;
    border-color: rgb(16, 1, 16);
}
body > div.h-\[100vh\].bg-black.w-full.flex.justify-center.items-center > div > div:nth-child(2) > div:nth-child(2){
    background-image: url('/images/about.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    border: solid;
    border-color: rgb(16, 1, 16);
}
body > div.h-\[100vh\].bg-black.w-full.flex.justify-center.items-center > div > div:nth-child(2) > div:nth-child(3){
    background-image: url('/images/contact.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border: solid;
    border-color: rgb(16, 1, 16);
}


body > div.h-\[100vh\].bg-black.w-full.flex.justify-center.items-center.mt-10 {
    margin-top: 50px;
}

.font-oswald {
    font-family: Oswald;
}


.zooming-div {
    /* width: 300px;
    height: 300px; */
    overflow-x: hidden;
    background-image: url('/images/bgpurple.png');
    background-size: cover;
    animation: zoomAnimation 5s ease-in-out infinite;
}

@keyframes zoomAnimation {
    0% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1.1);
    }
}


::-webkit-scrollbar {
    width: 10px;
    height: 16px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #edf2f7;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #8c8c88;
    border-radius: 100vh;
    border: 2px solid #edf2f7;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
  }
  
  @supports (-webkit-touch-callout: none) {
    .h-screen {
      height: -webkit-fill-available;
    }
  }


  /* PROGRESS BAR */

  @property --progress-value {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
  }
  
  @keyframes html-progress {
    to { --progress-value: 92; }
  }
  
  @keyframes css-progress {
    to { --progress-value: 87; }
  }
  
  @keyframes js-progress {
    to { --progress-value: 73; }
  }
  
  .progress-bar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 100px;

    
    /* to center the percentage value */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .progress-bar::before {
    counter-reset: percentage var(--progress-value);
    content: counter(percentage) '%';
  }
  
  .html {
    background: 
      radial-gradient(closest-side, black 80%, transparent 90% 100%),
      conic-gradient(rgb(183, 14, 213) calc(var(--progress-value) * 1%), rgb(44, 40, 44) 0);
    animation: html-progress 2s 1 forwards;
  }
  
  .html::before {
    animation: html-progress 2s 1 forwards;
  }
  
  .css {
    background: 
    radial-gradient(closest-side, black 80%, transparent 90% 100%, black 0),
    conic-gradient(rgb(183, 14, 213) calc(var(--progress-value) * 1%), rgb(44, 40, 44) 0);
    animation: css-progress 2s 1 forwards;
  }
  
  .css::before {
    animation: css-progress 2s 1 forwards;
  }
  
  .js {
    background: 
      radial-gradient(closest-side, black 80%, transparent 90% 100%, black 0),
      conic-gradient(rgb(183, 14, 213) calc(var(--progress-value) * 1%), rgb(44, 40, 44) 0);
    animation: js-progress 2s 1 forwards;
  }
  
  .js::before {
    animation: js-progress 2s 1 forwards;
  }
  
  .bar_progress{
    /* margin-top: 100px; */
    font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
    margin: 30px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    max-width: 800px;
    color: white;
  }
  
  h2 {
    text-align: center;
  }
  
  progress {
    visibility: hidden;
    width: 0;
    height: 0;
  }


  .arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid white;
    /* Adjust color as needed */
    cursor: pointer;
}

body {
  animation: fadeInAnimation ease-in 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}


@-webkit-keyframes fadeInLeft {
  from {
      opacity:0;
      -webkit-transform: translatex(-10px);
      -moz-transform: translatex(-10px);
      -o-transform: translatex(-10px);
      transform: translatex(-10px);
  }
  to {
      opacity:1;
      -webkit-transform: translatex(0);
      -moz-transform: translatex(0);
      -o-transform: translatex(0);
      transform: translatex(0);
  }
}
@-moz-keyframes fadeInLeft {
  from {
      opacity:0;
      -webkit-transform: translatex(-10px);
      -moz-transform: translatex(-10px);
      -o-transform: translatex(-10px);
      transform: translatex(-10px);
  }
  to {
      opacity:1;
      -webkit-transform: translatex(0);
      -moz-transform: translatex(0);
      -o-transform: translatex(0);
      transform: translatex(0);
  }
}
@keyframes fadeInLeft {
  from {
      opacity:0;
      -webkit-transform: translatex(-100px);
      -moz-transform: translatex(-100px);
      -o-transform: translatex(-100px);
      transform: translatex(-100px);
  }
  to {
      opacity:1;
      -webkit-transform: translatex(0);
      -moz-transform: translatex(0);
      -o-transform: translatex(0);
      transform: translatex(0);
  }
}
.in-left-menu {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.35s;
  -moz-animation-duration: 0.35s;
  -o-animation-duration: 0.35s;
  animation-duration: 0.35s;
  -webkit-animation-delay: 0.35s;
  -moz-animation-delay: 0.35s;
  -o-animation-duration:0.35s;
  animation-delay: 0.34s;
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: white;
color : black}