@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montaga&display=swap');

@font-face {
  font-family: 'AngryBirds';
  src: url('../fonts/angrybirds-regular.ttf') format('truetype'); /* Adjust the path if needed */
  font-weight: normal;
  font-style: normal;
}


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

body {
    background-color: white;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
}


.name-container {
  height: 30px;
  overflow: hidden;
}

.logo-name {
  color: #fff;
  font-size: 10px;
  letter-spacing: 12px;
  text-transform: uppercase;
  margin-left: 20px;
  font-weight: bolder;
  text-align: center;
}
/* Navbar */
/* Navbar */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0px 30px;
  display: flex;
  justify-content: center;
  transition: 0.4s;
  z-index: 100;
  background: transparent;
}

/* Navbar Glassmorphism on Scroll */
.nav-glass {
  background: rgba(0, 0, 0, 0.565);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Navbar Container */
.nav-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

/* Logo */
.logo img {
  height: 120px;
  
}

/* Navigation Links */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  

}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-size: 18px;
  transition: 0.3s;
  font-family: "Montserrat", sans-serif;
}

.nav-links a:hover {
  color: #25D366;
  font-family: "Montserrat", sans-serif;
}

/* Open Box Button */
.open-box {
  background-color: #c146ff;
  background-size: 400% 400%;
  color: rgb(0, 0, 0);
  font-size: 23px;
  font-weight: bold;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  clip-path: polygon(10% 0%, 100% 0%, 100% 80%, 90% 100%, 0% 100%, 0% 20%);
  transition: all 0.3s ease-in-out;
  font-family: 'AngryBirds', sans-serif;
  letter-spacing: 5px;
  position: relative;
  overflow: hidden;
}

@keyframes gradient {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.open-box:hover {
  transform: scale(1.05);
}

.open-box::after {
  content: "";
  display: block;
  width: 1rem;
  height: 100%;
  background: #ffffff8f;
  opacity: 0.9;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 1;
  transform: rotate(45deg) scale(2);
  animation: animation-blink 3s linear infinite;
}

@keyframes animation-blink {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 200%;
  }
}


/* Hamburger Menu */
.menu-toggle {
  display: none;
  width: 35px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 4px;
  background: white;
  position: absolute;
  left: 0;
  transition: 0.3s ease-in-out;
}

.menu-toggle span:nth-child(1) {
  top: 0;
}

.menu-toggle span:nth-child(2) {
  top: 12px;
}

.menu-toggle span:nth-child(3) {
  bottom: 0;
}

/* Toggle Animation */
.menu-toggle.active span:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.nav-social-links{
  display: none;
}

/* Social-links */
.Social-links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
  gap: 23px;
  position: fixed;
  right: 25px;
  top: 25%;
  height: 280px;
  width: 50px;
  background-color: #000000;
  border-radius: 50px;
  filter: drop-shadow(0 0 0.75rem #000000);
  padding: 10px;
  padding-top: 15px;
  z-index: 3;
}

.Social-links a {
  position: relative; /* Needed for positioning the tooltip */
  color: #000000; /* Ensure the text is visible */
}


.tooltip {
  display: none; /* Initially hide the tooltip */
  position: absolute;
  right: 40px; /* Position it to the right of the icon */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for vertical centering */
  color: #000000c4; /* Text color */
  padding: 5px 10px; /* Padding around the text */
  border-radius: 5px; /* Rounded corners */
  font-size: 14px; /* Font size */
  white-space: nowrap; /* Prevent text wrapping */
  z-index: 10; /* Ensure it appears above other elements */
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}

.Social-links a:hover .tooltip {
  display: block; /* Show the tooltip on hover */
}

/* Fullscreen Video */
.video-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #000000;
}

/* Audio Toggle Button */
.audio-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.audio-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Dots Navigation */
/* Dots Navigation - Left-aligned & Connected */
/* Dots Navigation - Left-aligned, Connected, and Spaced */
.dots-container {
    position: absolute;
    bottom: 20px;
    left: 20px; /* Align to the left */
    display: flex;
    align-items: center;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(108, 108, 108, 0.5);
    border-radius: 50%;
    margin-right: 100px; /* Space between dots */
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
}

/* Connecting Line */
.dot::before {
    content: "";
    position: absolute;
    width: 100px; /* Line width */
    height: 2px;
    background-color: rgba(255, 255, 255, 0.236);
    top: 50%;
    left: 100%; /* Position it between dots */
    transform: translateY(-50%);
}

/* Remove line from last dot */
.dot:last-child::before {
    display: none;
}

/* Active dot */
.dot.active {
    background-color: rgb(255, 255, 255);
}
.audio-bt{
  display: none;
}

/*card section linear-gradient(to bottom,#00000074, #000000), */
/* Card section */
.films {
  min-height: 135vh;
  display: grid;
  place-items: center;
  font-weight: 400;
  overflow-x: hidden;
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.uc{
  margin-top: 2rem;
  font-size: 3rem;
  text-align: right;
  color: #0A66C2;
  font-weight: bolder;
  display: flex;
  justify-content: center; /* Aligns text to the right */
  width: 100%;
  padding-right: 5rem; /* Adjust padding for positioning */
  margin-left: 5rem;
}

.left-container {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 500px;
  gap: 10px;
}

.left-container > div {
  flex: 0 0 120px;
  border-radius: 0.5rem;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  box-shadow: 1px 5px 15px #1e0e3e;
  position: relative;
  overflow: hidden;
}

.left-container > div:nth-of-type(1) {
  background: url("../assets/uc1.png") no-repeat 50% / cover;
}
.left-container > div:nth-of-type(2) {
  background: url("../assets/Varanasi.png") no-repeat 50% / cover;
}
.left-container > div:nth-of-type(3) {
  background: url("../assets/Yellow.png") no-repeat 50% / cover;
}
.left-container > div:nth-of-type(4) {
  background: url("../assets/commingsoon.jpg") no-repeat 50% / cover;
}

.left-container > div:hover,
.left-container > div.active {
  flex: 0 0 320px;
  box-shadow: 1px 3px 15px #000000;
}

/* Right films */
.rf {
  margin-top: 2rem;
  font-size: 3rem;
  text-align: right;
  color: #0A66C2;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-right: 5rem;
  margin-left: 5rem;
}

.right-container {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 500px;
  gap: 10px;
}

.right-container > div {
  flex: 0 0 120px;
  border-radius: 0.5rem;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  box-shadow: 1px 5px 15px #000000;
  position: relative;
  overflow: hidden;
  
  
}

.right-container > div:nth-of-type(1) {
  background: url("../assets/Bottle Radha.jpg" ) no-repeat 50% / cover;
  
}
.right-container > div:nth-of-type(2) {
  background: url("../assets/film1.png") no-repeat 50% / cover;
}
.right-container > div:nth-of-type(3) {
  background: url( "../assets/LWW.png") no-repeat 50% / cover;
}
.right-container > div:nth-of-type(4) {
  background: url( "../assets/madameweb.jpeg" ) no-repeat 50% / cover;
}

.right-container > div:hover,
.right-container > div.right-active {
  flex: 0 0 320px;
  box-shadow: 1px 3px 15px #000000;
  
  
}

/* Content styling */
.content, .right-content {
  font-size: 1.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 15px;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  
}

.content span, .right-content span {
  display: block;
  margin-top: 5px;
  font-size: 1.2rem;
}

.content h2, .right-content h2 {
  white-space: nowrap;
  transition: transform 0.5s ease-in-out;
}

/* Vertical text in shrunk state */
.left-container > div:not(.active) .content h2,
.right-container > div:not(.right-active) .right-content h2 {
  transform: rotate(90deg); /* Rotate text 90 degrees */
  transform-origin:  top; /* Set rotation origin */
  margin-bottom: 5rem;
  transition: transform 0.5s ease-in-out;
  
}

/* Horizontal text in expanded state */
.left-container > div.active .content h2,
.left-container > div:hover .content h2,
.right-container > div.right-active .right-content h2,
.right-container > div:hover .right-content h2 {
  transform: rotate(0deg); /* Reset rotation to 0 degrees */
  transform-origin: right top; /* Set rotation origin */
  visibility: hidden;
}


/* Open box section */
.open-box-section {
  height: 15rem;
  background: linear-gradient(to right, #AD4831, #2B2F73, #2B2F73, #384699, #557AEE);
  clip-path: polygon(20% 0%, 100% 0, 100% 20%, 100% 100%, 18% 100%, 11% 80%, 0% 80%, 0 0);
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem; /* Spacing between elements */
  padding: 0 5%;
  position: relative;
  overflow: visible; /* Allow globe to go beyond */

}

/* Globe images */
.globe1, .globe2 {
  max-width: 15%;
  height: auto;
  position: absolute;
}

.globe1 {
  left: -2%;
  transform: translateY(-50%);
  top: 60%;
  animation: globeMoveUpDown 3s infinite ease-in-out;
}

.globe2 {
  right: -3%; /* Adjust right spacing */
  top: -6rem; /* Move beyond the top */
  position: absolute;
  z-index: 1000; /* Ensure it's above the section */
  animation: globeMoveOpposite 3s infinite ease-in-out;
}


/*loop animation*/
@keyframes globeMoveUpDown {
  0%, 100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(-40%);
  }
}

@keyframes globeMoveOpposite {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.box-outline{
  position: relative;
  height: 100px;
  width: 200px;
  background: url(../assets/box-outline.png);
  background-repeat: no-repeat;
  background-size: contain;
  transition: .2s all;
}
.open-text{
  color: white;
  position: relative;
  top: 30%;
  right: 15%;
  text-align: center;
  font-size: 1.5rem;
  transition: .2s all;
  font-family: 'AngryBirds', sans-serif;
  letter-spacing: 5px;
}
.box-text{
  color: white;
  position: relative;
  left: 20.5%;
  top: -25%;
  text-align: center;
  font-size: 1.5rem;
  transition: .2s all;
  font-family: 'AngryBirds', sans-serif;
  letter-spacing: 5px;
}
.box-outline:hover{
  cursor: pointer;
  position: relative;
  height: 100px;
  width: 200px;
  background: url(../assets/box.png);
  background-repeat: no-repeat;
  background-size: contain;
  transition: .2s all;
}
.box-outline:hover >.open-text{
  color: #000000;
  top: 13%;
  transition: .2s all;
}
.box-outline:hover >.box-text{
  color: #000000;
  top: -15%;
  font-size: bold;
  transition: .2s all;
}
/* Text & Button */
.open-box-section h1 {
  font-size: 2rem;
  font-weight: bold;
  color: white;
  text-align: center;
  flex-shrink: 0; /* Prevents shrinking */
}

.open-box-btn{
  position: relative;
  top: 0%;
  background-color: transparent;
  font-size: 1.2rem;
  height: 70px;
  width: 10%;
  padding: 5px;
  border: 2px solid #25D366;
  text-align: center;
  color: whitesmoke;
  cursor: pointer;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50%;
  transition: .3s ease-in-out; 
}
.box{
  position: relative;
  top: -58%;
  color: white;
  z-index: 1;
  transition: .3s ease-in-out;
}
.open-box-btn:hover{
  background-color: #25D366;
  color: black;
  top: -4%;
  clip-path: polygon(10% 0%, 100% 0%, 100% 80%, 90% 100%, 0% 100%, 0% 20%);
  transition: .3s ease-in-out;
}
.open-box-btn:hover>.box{
  top: 0%;
  color: black;
  transition: .3s ease-in-out;
}

/*.open-box-btn {
  background-color: transparent;
  color: white;
  font-size: 1.2rem;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.3s ease-in-out;
  
  clip-path: polygon(10% 0%, 100% 0%, 100% 80%, 90% 100%, 0% 100%, 0% 20%);

}

.open-box-btn:hover {
  background-color: #25D366;
  color: rgb(0, 0, 0);
}

.open-box-btn{
  background-image: url(../assets/btn1.png);
  background-repeat: no-repeat;
  background-size: auto;
  height: 100px;
  width: 200px;
  transition: .2s ease-in;
}
.open-box-btn:hover{
  background-image: url(../assets/btn2.png);
  transition: .2s ease-in;
}*/

/*about us*/
.About-us {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Title Box */
.a-titlebox {
  position: relative;
  width: 100%;
  height: 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Foreground Title */
.A-title {
  position: absolute;
  font-size: 2rem;
  color: #384699;
  font-weight: bold;
  text-align: center;
  z-index: 2;
  font-family: "Montserrat", sans-serif;
}

/* Background Moving Text */
.marq {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
  
}

.ts-au {
  font-size: 8rem;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #dedede;
  padding-right: 2rem;
}

/* About Content Layout */
.about-content {
  display: flex;
  width: 80%;
  max-width: 1200px;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
}

/* Left and Right Side */
.about-left,
.about-right {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Vertical Divider */
.about-divider {
  width: 2px;
  background-color: #ccc;
  height: 100%;
}

/* Individual Box Styling */
.about-box h3 {
  font-size: 1.2rem;
  color: #000000;
  margin-bottom: 0.5rem;
  font-family: "Montserrat", sans-serif;
}

.about-box ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  color: #333;
}

.about-box p {
  font-size: 1rem;
  color: #444;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  text-align: justify;
  text-justify: inter-word;
}

/*footer*/
.footer {
  height: 100vh;
  background: linear-gradient(to right, #343D89, #1D164A);
  clip-path: polygon(0 0, 72% 0, 82% 9%, 100% 9%, 100% 100%, 20% 100%, 0 100%, 0% 20%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.container {
  display: flex;
  width: 80%;
  max-width: 1200px;
  gap: 40px;
}

/* Left Column */
.left-column {
  width: 60%;
  margin-top: 2rem;
}

.left-column h1 {
  font-size: 40px;
  margin: 0;
  margin-left: 20px;
  
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}

.contact-box {
  background: rgba(0, 0, 0, 0.507);
  padding: 3rem 1rem;
  text-align: center;
  backdrop-filter: blur(10px);
  margin-top: 20px;
  width: 60%;
}
.contact-box .title{
  text-align: center;
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.instagram-btn {
  display: flex;
  align-items: center;
  background: black;
  border: none;
  padding: 1rem;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin: 10px auto;
  border-radius: 50px;
  box-shadow: #ff543e65 0px 2px 1px, rgba(192, 44, 255, 0.41) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  font-family: "Montaga", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  transition: .2s all;
}

.instagram-btn:hover{
  scale: .9;
  transition: .2s all;
}
.instagram-btn img {
  width: 20px;
  margin-right: 10px;
}
.ig-note{
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.note{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #CBCBCB;
  text-align: justify;
  text-justify: inter-word;
  margin-top: 20px;
}

.contact-info-div{
  display: flex;
  margin-top: 20px;
}

.contact-info p{
  margin-top: 10px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #FFFFFF;
  margin-left: 50px;
  
}

hr {
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  margin-top: 10px;
  width: 70%;
}

.copyright {
  margin-top: 20px;
  font-size: 14px;
}

/* Right Column */
.right-column {
  width: 40%;
  margin-top: 2rem;
}

/* Form Tabs */
.form-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  height: 65px;
  
  
}

.tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 8px;
  background: transparent;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.5rem;
}

.tab-btn.active {
  background: white;
  color: black;
  clip-path: polygon(10% 0%, 100% 0%, 100% 80%, 90% 100%, 0% 100%, 0% 20%);
  box-shadow: rgba(255, 255, 255, 0.1) 0px 4px 16px, rgba(255, 255, 255, 0.05) 0px 8px 32px;
}

/* Form */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.703);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  outline: none;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Hide number input arrows in Chrome, Safari, Edge, and Opera */
#mobile::-webkit-outer-spin-button,
#mobile::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide number input arrows in Firefox */
#mobile {
  -moz-appearance: textfield;
}


.contact-form textarea {
  height: 100px;
  resize: none;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.file-upload {
  display: block;
  margin: 10px 0;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: lighter;
}

.file-upload a {
  color: #0A66C2;
  background: rgba(0, 0, 0, 0.703);
  padding: 10px;
  text-decoration: none;
  border-radius: 5px;
}

/* File name display */
.file-name {
  margin-top: 5px;
  font-size: 14px;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-weight: normal;
}


.brief-label {
  display: block;
  margin-bottom: 5px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: lighter;
  font-style: normal;
  margin-top: 3rem;
}

/* Send Button */
/* Centering Container */
.send-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* Send Button */
.send-btn {
  height: 50px;
  width: 20%;
  padding: 10px;
  border: none;
  background: black;
  color: white;
  font-size: 16px;
  border-radius: 50px;
  cursor: pointer;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  box-shadow: #cdcdcdcb 0px 2px 1px, rgba(196, 196, 196, 0.794) 0px 4px 2px, 
              rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, 
              rgba(0, 0, 0, 0.09) 0px 32px 16px;
  transition: .2s all;
  position: relative;
  overflow: hidden;
}


/* Send Button Hover */
.send-btn:hover {
  scale: 0.9;
  transition: .2s all;
}

/* Loading Dots Animation */
.send-btn .dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.send-btn .dots span {
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  animation: bounce 1.2s infinite ease-in-out;
}

.send-btn .dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.send-btn .dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

/* Success Checkmark */
.send-btn .success {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.send-btn .success svg {
  width: 25px;
  height: 25px;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17px;
  stroke-dashoffset: 17px;
  animation: checkmark 0.5s ease-in-out forwards;
}

@keyframes checkmark {
  from { stroke-dashoffset: 17px; }
  to { stroke-dashoffset: 0; }
}


.hr{
  display: none;
}
.copyright-ph{
  display: none;
}