/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 22 2025 | 13:27:50 */
/* Reset and section base */
.hover-section {
  position: relative;
  height: 90vh;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: background-image 0.8s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #fff;
}

/* Dark overlay */
.hover-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 0;
}

/* Box container */
.box-container {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 3px;
  width: 100%;
  justify-content: center;
 
}

/* Boxes */
.box {
  width: 25%;
  height: 200px;
  background: #384979;
 
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: left;
  text-align: center;
  cursor: pointer;
	padding:30px;
  transition: all 0.4s ease;
  backdrop-filter: blur(4px);
	margin-bottom:-50px;
}

.box:hover {
  transform: translateY(-50px);
  background: #2C395B;
}

/* Text */
.box h3 {
  font-size: 35px;
  margin-bottom: 6px;
}
.box p {
  font-size: 13px;
  opacity: 0.85;
}

/* Responsive */
@media(max-width:700px){
  .box-container {
    flex-wrap: wrap;
  }
  .box {
    width: 45%;

  }
}






.elementor-button-text{
	vertical-align: middle;
    display: flex
;
    justify-content: center;
    align-items: center;
}

/* SVG icon wrapper */
.elementor-button svg {
  background-color: #2C395B;
color:#fff !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 100%;
padding:10px;
	 fill: #fff;
  transform: rotate(-45deg);
  transition: all 0.4s ease;
 
}

/* Hover effects */
.elementor-button:hover {
  background-color: #2C395B;
  color: #ffffff;
}

.elementor-button:hover svg {
  background-color: #2C395B; /* Arrow background becomes blue */
  fill: #ffffff; /* Arrow turns white */
  transform: rotate(0deg) translate(4px, -4px); /* Arrow straightens to top-right */
}


 .word {
      display: inline-block;
      margin: 0 0.4rem;
      transform: translateY(100%);
      opacity: 0;
    }


.float-btn {
  animation: floatUpDown 1.5s ease-in-out infinite;
}

/* Keyframes for smooth up–down motion */
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}



 .skill-bar {
      background: #e0e0e0;
      border-radius: 30px;
      overflow: hidden;
      height: 14px;
    }

    .skill-fill {
      height: 14px;
      width: 0;
      background: linear-gradient(90deg, #384979, #384979);
      border-radius: 30px;
      transition: width 1.2s ease-in-out;
    }

.skill span{
	font-weight:bold;
	font-size:17px
	float:right;
	
}

.skill p{
	font-weight:bold;
	font-size:25px;
}


.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 2px solid #384979;
  border-radius: 50%;
  pointer-events: none;
  transition: all 0.5s ease;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
 
  font-family: sans-serif;
  font-size: 14px;
  z-index: 9999;
}



.hover-active .custom-cursor {
  width: 100px;
  height: 100px;
  background: #fff;
  border: none;
}

.hover-active .custom-cursor::after {
  opacity: 1;
}

.hover-active .custom-cursor::before {
  content: 'View';
  position: absolute;
  color: #384979;
  
  letter-spacing: 1px;
  transform: translateY(3px);
}

/* Example trigger element */
.hover-trigger {
  cursor: pointer;
}


.flip-box {
 
  width: 100%;
  height: 300px;
  perspective: 1000px; /* 3D effect */
}

/* Inner wrapper */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

/* Flip on hover */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Front & Back sides */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  overflow: hidden;
 
}

/* Front side */
.flip-box-front {

 
  display: flex;
  
 
}

/* Back side */
.flip-box-back {
  background: white;
 
  transform: rotateY(180deg);
  display: flex;
 
 
}



.marquee-wrapper {
      overflow: hidden;
      position: relative;
    height:100px;
      display: flex;
      align-items: center;
    }

    /* Top marquee */
   

    .marquee-track {
      display: flex;
      white-space: nowrap;
      will-change: transform;
    }

    .marquee-text {
     
      padding-right: 60px; /* equal spacing after each dot */
    }

    .marquee-text span {
      display: inline-block;
      padding-right: 60px; /* consistent gap after each phrase */
    }

    @media (max-width: 768px) {
      .marquee-text {
        font-size: 36px;
      }
      .marquee-wrapper {
        height: 80px;
      }
    }


.forminator-field input{
	border-radius:40px !important;
	padding:15px 25px !important;
		border:none !important;
}

.forminator-field textarea{
	border-radius:20px !important;
	padding:15px 25px !important;
		border:none !important;
}

.forminator-field button{
	background:#fff !important;
	color:#25283E !important;
	border-radius:30px !important;
}