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

#triangle {
         border-radius: 2%;
         clip-path: polygon(0 0, 100% 30%, 0 100%);
}
#triangledva {
    border-radius: 2%;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

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/bgred.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;
    }
  }


  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 {
    -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.8 s;
    -moz-animation-duration: 0.8s;
    -o-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -o-animation-duration:0.8s;
    animation-delay: 0.8s;
}


/*  */

@-webkit-keyframes fadeInRight {
    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);
    }
}
@-moz-keyframes fadeInRight {
    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);
    }
}
@keyframes fadeInRight {
    from {
        opacity:0;
        -webkit-transform: translatex(100px);
        -moz-transform: translatex(100px);
        -o-transform: translatex(200px);
        transform: translatex(200px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
.in-right {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;
}


/*  */


@-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}