:root {

    /* color variables  */
    --white: #FFFFFF;
    --black: #000000;
    --pink: #FEF4F7;
    --grey: #F9F5FC;
    --purple: #002548;
    --yellow: #FFE03F;
    --purple-gradient: linear-gradient(45deg, #ff2782 0%, #ff2782 100%);
    --giant: #ff2782;

    /* color variables end */

    /* typo varibale end */
    --inter: 'Exo 2', sans-serif;

    --trans-dur: 0.5s;
    --body-padding: 10px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--inter);
    
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  background-color: #164648;
  

}


/* utilities */

.nopadding-nill {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}

.nomargin-nill {
    margin-left: 0rem !important;
    margin-right: 0rem !important;
}

.padding-top {
    padding-top: 5.25rem;
    
}
.padding-bottom {
    
    padding-bottom: 5.25rem;
}
.margin-bw {
    margin-top: 4rem;
   
}

.heading-1 {
    font-family: var(--inter);
    font-size: 5rem;
    font-weight: 800;
    line-height: 75px;
    letter-spacing: 0em;
    /* text-align: center; */
    color: var(--white);
    margin-top: 6rem;
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .heading-1 {
    font-family: var(--inter);
    font-size: 3.1rem;
    font-weight: 800;
    line-height: 75px;
    letter-spacing: 0em;
    text-align: center;
    color: var(--white);
    margin-top: 0rem;
  }
}
.heading-2{
    font-family: var(--inter);
    font-size: 2rem;
    font-weight: 800;
    line-height: 24px;
    letter-spacing: 0em;
    color: var(--white);
  }
  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .heading-2{
        font-family: var(--inter);
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 30px;
        letter-spacing: 0em;
        color: var(--white);
      }
    
  }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .heading-2 {
      font-size: 1.2rem;
      line-height: 24px;
  }
    }
  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .heading-3{
        text-align: center !important;
      }
  }
.heading-3{
  font-family: var(--inter);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0em;
  color: var(--white);
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
    .heading-3{
        font-family: var(--inter);
        font-size: 0.8rem;
        font-weight: 300;
        line-height: 24px;
        letter-spacing: 0em;
        color: var(--white);
        text-align: center;
      }
  }
.heading-4{
  font-family: var(--inter);
  font-size: 1rem;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0em;
  color: rgb(110, 106, 106);
}
.heading-5{
  font-family: var(--inter);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0em;
  color: rgb(110, 106, 106);
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
    .heading-5{
        font-family: var(--inter);
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0em;
        color: rgb(110, 106, 106);
      }
    
  }





/* navbar starts from here */

@media only screen and (min-width: 320px) and (max-width: 768px) {
    .d-md-block {
      display: none;
    }
  }
  .navbar{
    /* background: transparent; */
    background: #164648;
  }
  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .navbar{
        /* background: transparent !important; */
        background: #164648;
      }
      
  }
  .navbar-brand img{
    width: 9rem;
  }
  .navbar-toggler{
    border: 0.12rem solid #FBBF10;
  }

  .navbar-toggler-icon{
    background-color: white;
    border-radius: 0.2rem;
    border: 0.12rem solid #FBBF10;
  }
  .nav-animation li {
    display: inline-block;
    list-style: outside none none;
    margin: .5em 0em;
    padding: 0;
  }
  
  .nav-animation a {
    padding: .5em .8em;
    color: #FBBF10;
    position: relative;
    text-decoration: none;
    /* font-size: 20px; */
  }
  
  .nav-animation a::before,
  .nav-animation a::after {
    content: '';
    height: 14px;
    width: 14px;
    position: absolute;
    transition: all .35s ease;
    opacity: 0;
  }
  
  .nav-animation a::before {
    content: '';
    right: 0;
    top: 0;
    border-top: 3px solid #FBBF10;
    border-right: 3px solid #FBBF10;
    transform: translate(-100%, 50%);
  }
  
  .nav-animation a:after {
    content: '';
    left: 0;
    bottom: 0;
    border-bottom: 3px solid #FBBF10;
    border-left: 3px solid #FBBF10;
    transform: translate(100%, -50%)
  }
  
  .nav-animation a:hover:before,
  .nav-animation a:hover:after{
    transform: translate(0,0);
    opacity: 1;
  }
  /* navbar ends here */




/* hero starts from here */

.hero img{
  margin-top: 2rem;
    border-radius: 2rem;
    border-radius: 50px;
    background: #164648;
    box-shadow:  20px 20px 60px #133c3d,
                 -20px -20px 60px #195153;

                
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
    .hero img {
      margin-top: 3rem;
      display: flex;
      justify-content: center;
      /* padding: 0rem 1rem 0rem 1rem; */
    }
  }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .hero img {
      margin-top: 1rem;
    }
    }
 
  .animated-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 36px;
    border: 4px solid;
    border-color: transparent;
    font-size: 16px;
    background-color: inherit;
    border-radius: 100px;
    font-weight: 600;
    color: #F8C92F;
    box-shadow: 0 0 0 2px #F8C92F;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button svg {
    position: absolute;
    width: 24px;
    fill: #F8C92F;
    z-index: 9;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button .arr-1 {
    right: 16px;
  }
  
  .animated-button .arr-2 {
    left: -25%;
  }
  
  .animated-button .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: #F8C92F;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button .text {
    position: relative;
    z-index: 1;
    transform: translateX(-12px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .animated-button:hover {
    box-shadow: 0 0 0 12px transparent;
    color: #212121;
    border-radius: 12px;
  }
  
  .animated-button:hover .arr-1 {
    right: -25%;
  }
  
  .animated-button:hover .arr-2 {
    left: 16px;
  }
  
  .animated-button:hover .text {
    transform: translateX(12px);
  }
  
  .animated-button:hover svg {
    fill: #212121;
  }
  
  .animated-button:active {
    scale: 0.95;
    box-shadow: 0 0 0 4px #F8C92F;
  }
  
  .animated-button:hover .circle {
    width: 220px;
    height: 220px;
    opacity: 1;
  }

  .learn{
    text-decoration: none;
    color: white;
  }
  
  
  /* .hero-item {
   background-image: url(./hero/bg1.png);
   background-repeat: no-repeat;  
   background-size: cover;       
  } */
  
  
  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .btn-item {
      
      display: flex !important;
      justify-content: center !important;
    }
  }

/* hero ends here */

/* services starts from here */



   .services {
    width: 170px;
    height: 111px;
    padding: 0.5rem;
    background: rgba(198, 198, 198, 0.34);
    border-radius: 8px;
    backdrop-filter: blur(5px);
    border-bottom: 3px solid rgba(255, 255, 255, 0.440);
    border-left: 2px  rgba(255, 255, 255, 0.545) outset;
    box-shadow: -40px 50px 30px rgba(0, 0, 0, 0.280);
    transform: skewX(10deg);
    transition: .4s;
    overflow: hidden;
    color: white;
  }
  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .services{
      width: 170px;
      }
  }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .services {
      width: 160px;
  }
    }

 
  
  .services:hover {
    height: 205px;
    transform: skew(0deg);
  }
  
  .align {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-self: flex-start;
  }
  
  .red {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ff605c;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
  }
  
  .yellow {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffbd44;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
  }
  
  .green {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #00ca4e;
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
  }
  
  .services h1 {
    text-align: center;
    margin: 1.3rem;
    color: rgb(218, 244, 237);
    text-shadow: -10px 5px 10px rgba(0, 0, 0, 0.573);
  }
  
  /* @media only screen and (min-width: 320px) and (max-width: 768px) {
    .services-item {
      
      
      display: block;
      margin-left: 6.5rem;
    }
   
  } */
 
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .services-img img{
      margin-top: 5rem;
    }
    }

/* services ends here */

/* web starts from here */

.flip-card {
    background-color: transparent;
    width: 190px;
    height: 254px;
    perspective: 1000px;
    font-family: sans-serif;
  }
  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .flip-card{
      width: 170px;
      height: 230px;
      }
      .flip-card-front {
        width: 170px !important;
    }
  }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .flip-card {
      width: 130px !important;
      height: 176px;
  }
    .flip-card-front {
      width: 130px !important;
  }
    }
  
  .title {
    font-size: 1.5em;
    font-weight: 900;
    text-align: center;
    margin: 0;
    color: #164648;
  }
  a:link{
    text-decoration: none;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front {
    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 190px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* border: 1px solid #FF8946; */
    border-radius: 1rem;
  }
  .flip-card-back {
    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid #FF8946;
    border-radius: 1rem;
  }

  .flip-card-back p {
    
    text-decoration: none;
  }
  
  .flip-card-front img {
    
    border-radius: 1rem;
  }
  
  /* .flip-card-front {
    background: linear-gradient(120deg, #BEFCFE 60%, #BEFCFE 88%,
    #BEFCFE 40%, rgba(255, 127, 80, 0.603) 48%);
    color: coral;
  } */
  
  .flip-card-back {
    background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
       bisque 40%, rgb(255, 185, 160) 78%);
    color: white;
    transform: rotateY(180deg);
  }
  .web-1{
    margin-top: 2rem;
  }

  .web-2{
    margin-top: 9rem;
  }
  .web-3{
    margin-top: 4rem;
  }
  .web-4{
    margin-top: 6rem;
  }
  .web-5{
    margin-top: 0rem;
  }
  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .web-12{
        margin-top: 8rem;
      }
    .web-13{
        margin-top: -3rem;
      }
    .web-14{
        margin-top: 9rem;
      }
    .web-15{
        margin-top: -7rem;
      }
    .web-16{
        margin-top: 6rem;
      }
  }


  .Btn {
    position: relative;
    width: 70px;
    height: 30px;
    border-radius: 45px;
    border: none;
    background-color: #ffbd44;
    color: white;
    box-shadow: 0px 10px 10px #ffbd44 inset,
    0px 5px 10px rgba(5, 5, 5, 0.212),
    0px -10px 10px #ffbd44 inset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--inter);
    font-weight: 700;
  }
  
  .Btn::before {
    width: 70%;
    height: 2px;
    position: absolute;
    background-color: #ffbd44;
    content: "";
    filter: blur(1px);
    top: 7px;
    border-radius: 50%;
  }
  
  .Btn::after {
    width: 70%;
    height: 2px;
    position: absolute;
    background-color: #ffbd44;
    content: "";
    filter: blur(1px);
    bottom: 7px;
    border-radius: 50%;
  }
  
  .Btn:hover {
    animation: jello-horizontal 0.9s both;
  }
  
  @keyframes jello-horizontal {
    0% {
      transform: scale3d(1, 1, 1);
    }
  
    30% {
      transform: scale3d(1.25, 0.75, 1);
    }
  
    40% {
      transform: scale3d(0.75, 1.25, 1);
    }
  
    50% {
      transform: scale3d(1.15, 0.85, 1);
    }
  
    65% {
      transform: scale3d(0.95, 1.05, 1);
    }
  
    75% {
      transform: scale3d(1.05, 0.95, 1);
    }
  
    100% {
      transform: scale3d(1, 1, 1);
    }
  }
  

/* web ends here */

/* digi starts from here */

.digi-4, .digi-5, .digi-6{
  margin-top: 3rem;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .digi-3{
    margin-top: 2rem;
  }
  .digi-4{
    margin-top: 2rem;
  }
  .digi-5{
    margin-top: 2rem;
  }
  .digi-6{
    margin-top: 2rem;
  }
  
}

/* digi ends here */

/* java starts from here */

.java-1 img, .java-2 img, .java-3 img, .java-4 img, .java-5 img, .java-6 img{
 border-radius: 18px;
}

.java-5, .java-6{
  margin-top: 3rem;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .java-3{
    margin-top: 2rem;
  }
  .java-4{
    margin-top: 2rem;
  }
  .java-5{
    margin-top: 2rem;
  }
  .java-6{
    margin-top: 2rem;
  }
  
}

/* java ends here */


/* python starts from here */

.python-5, .python-6{
  margin-top: 3rem;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .python-3{
    margin-top: 2rem;
  }
  .python-4{
    margin-top: 2rem;
  }
  .python-5{
    margin-top: 2rem;
  }
  .python-6{
    margin-top: 2rem;
  }
  
}

/* python ends here */

/* excel starts from here */

.excel {
    position: relative;
    width: 100%;
    overflow: hidden;
    filter: drop-shadow(-3px -5px 4px #000000);
  }
  
  .excel-img {
    display: block;
    width: 100%;
    height: auto;
    transition: 2s ease;
    backface-visibility: hidden;
    
    transition: transform 2s ease;
  }
  
  .excel-img:hover{
    transform: scale(1.1);
  }
  
  .excel-po {
    transition: 1s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .excel:hover .excel-img {
    opacity: 0.5;
  }
  
  .excel:hover .excel-po {
    opacity: 1;
  }
  
  .excel-text {
    background-color: #FB8202;
    color: white;
    font-size: 16px;
    padding: 3px 16px;
    border-radius: 1.5rem;
  }

  .card-2 {
    width: 600px;
    height: 400px;
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
  }
  
  .card-inner {
    width: inherit;
    height: inherit;
    background: rgba(255,255,255,.05);
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
    border-radius: 8px;
  }
  
  .card-2:hover {
    transform: scale(1.04) rotate(1deg);
  }
  
  .circle {
    width: 100px;
    height: 100px;
    background: radial-gradient(#b0e633, #53ef7d);
    border-radius: 50%;
    position: absolute;
    animation: move-up6 2s ease-in infinite alternate-reverse;
  }
  
  .circle:nth-child(1) {
    top: -25px;
    left: -25px;
  }
  
  .circle:nth-child(2) {
    bottom: -25px;
    right: -25px;
    animation-name: move-down1;
  }
  
  @keyframes move-up6 {
    to {
      transform: translateY(-10px);
    }
  }
  
  @keyframes move-down1 {
    to {
      transform: translateY(10px);
    }
  }
  
  .excel-item {
    position: relative;
    text-align: center;
    color: white;
  }
  .excel-item-3 {
    position: relative;
    text-align: center;
    color: white;
  }
 
  .excel-item img {
   width: 10rem;
   height: 44px;
  }
  .excel-item-3 img {
   width: 9rem;
   height: 2rem;
  }
 
  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .excel-item img {
      width: 8rem;
      height: 3rem;
     }
   
    
  }
  
  .excel-item-2 {
    position: relative;
    text-align: center;
    color: white;
  }
  .excel-item-2 img {
   width: 2rem;
  }

  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .excel-3, .excel-4{
        margin-top: 5rem;
      }
      .excel-1, .excel-2{
        margin-top: 2rem;
      }
    
  }

  


/* excel ends here */

/* fun starts from here */

.swiper-slide img {
    display: block;
    width: 16rem;
    height: 10rem;
    border-radius: .8rem;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .swiper-slide img {
      
    display: block;
    width: 16rem;
    height: 8rem;
    border-radius: .8rem;
  }
  .new-2 {
   padding: 0rem 0rem;
  }
}


.swap img {
    display: block;
    width: 60rem;
    height: 25rem;
    border-radius: 1rem;
}
.swap-2 img {
    display: block;
    width: 100%;
    height: 17rem;
    border-radius: 1rem;
    margin-top: 3rem;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .swap-2 img {
    display: block;
    width: 60rem;
    height: 10rem;
    border-radius: 1rem;
    margin-top: 3rem;
}
}

.new-img{
  width: 2rem;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .new-img{
    width: 1.2rem;
  }
}

.new-img-more{
  margin-top: 17px;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .new-img-more{
    margin-top: 9px;
  }
}

.d-md-block{
    display: none;
  }

 

/* fun ends here */

/* background starts from here */

.background{
    background-image: url(./hero/bg2.png);
    background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 70vh;
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
    .background{
        background-image: url(./hero/bg3.png);
        background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      height: 40vh;
    }
  }

/* background ends here */




/* loader starts from here */

#preloader{
    background: #164648 url(./hero/edu3.gif) no-repeat center center;
    background-size: 10%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
  }

  .gif{
    width: 2rem;
    
  }
 
  @media only screen and (min-width: 320px) and (max-width: 768px) {
    #preloader{
      background: #164648 url(./hero/edu3.gif) no-repeat center center;
      background-size: 50%;
      height: 100vh;
      width: 100%;
      position: fixed;
      z-index: 100;
    }
  }
  
  
  /* loader ends here */

  /* footer starts from here */

  .footer{
    margin-top: 5rem;
  }

  /* footer ends here */


  /* myaccount starts from here */

  .swap-2 img {
    display: block;
    width: 100%;
    height: 27rem;
    border-radius: 1rem;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .swap-2 img {
    display: block;
    width: 60rem;
    height: 10rem;
    border-radius: 1rem;
}
}

.enter{
    padding: 0rem 25rem;
  }
  @media only screen and (min-width: 320px) and (max-width: 768px) {
  .enter {
    padding: 0rem 3rem;
  }
  }

.custom-btn-2 {
    width: 80px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 25px 100px;
    font-family: var(--inter);
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
                -4px -4px 6px 0 rgba(116, 125, 136, .5), 
      inset -4px -4px 6px 0 rgba(255,255,255,.2),
      inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
    outline: none;
    font-size: 2rem;
    text-decoration: none;
  }
  
  .btn-2 {
    background: #004dff;
    background: linear-gradient(0deg, #ffbd44 0%, #ffbd44 100%);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }
  
  .btn-2:before {
    height: 0%;
    width: 2px;
  }
  
  .btn-2:hover {
    box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
                -4px -4px 6px 0 rgba(116, 125, 136, .5), 
      inset -4px -4px 6px 0 rgba(255,255,255,.2),
      inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
  }
  
/* myaccount ends here */

/* breadcrumb starts from here */

.centered-2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-family: var(--inter);
  font-weight: 800;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .centered-2 {
    top: 60%;
    font-size: 1.3rem;
  }
  }

  .space-item{
    margin-top: 6rem;
  }

  @media only screen and (min-width: 320px) and (max-width: 768px) {
    .space-item{
      margin-top: 4rem;
    }
    }


/* breadcrumb ends here */