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

body,
html {
  font-family: 'Rubik',sans-serif;
  overflow-x: hidden;
  background-color: #12192c;
}
.container {
position: relative;
width: 100%;
min-height: 50vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-image: url(../img/crystal\ Background.webp);
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
border-radius: 30px;
background-color: rgba(243, 240, 240, 0.1);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border-top: 2px solid rgba(255, 255, 255, 0.5);
border-left: 2px solid rgba(246, 232, 232, 0.5);
backdrop-filter: blur(10px);
opacity: 0.7;
}

.content {
font-family: 'Poppins', sans-serif;
display: flex;
align-items: center;
justify-content: center;
color: black;
flex-direction: column;
text-transform: uppercase;
background-size: cover;
font-size: 50px;
margin-top: 70px;
}


.content a:hover {
color: #091921;
background-color: #fff;
}

.cover {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
left: -100vw;
z-index: 10;

}

.transition.slide .cover1 {
background-color: skyblue;
animation: slide 0.3s ease-in-out forwards;
}

.transition.slide .cover2 {
background-color: teal;
animation: slide 0.3s ease-in-out forwards;
animation-delay: 0.3s;
}

.transition.slide .cover3 {
background-color: #094992;
animation: slide 0.3s ease-in-out forwards;
animation-delay: 0.6s;
}

@keyframes slide {
from {
  left: -100vw;
}

to {
  left: 0;
}
}


/* end***********************************88 */

.containerr {
position: relative;
width: 100%;
min-height: 70vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10vw;
}
.form {
width: 100%;
max-width: 820px;
background-color: #fff;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.contact-form {
background-color: rgb(0, 0, 0);
position: relative;
}



.contact-form:before {
content: "";
position: absolute;
width: 26px;
height: 26px;
background-color: #50c878;
transform: rotate(45deg);
top: 50px;
left: -13px;
}

form {
padding: 2.3rem 2.2rem;
z-index: 1;
overflow: hidden;
position: relative;

}

.title {
color: #fff;
font-weight: 500;
font-size: 2rem;
line-height: 1;
width: 100%;
margin-top: 2vw;
display: flex;
justify-content: center;

}

.title1 {
color: #fff;
font-weight: 500;
font-family: 'Rubik',sans-serif;
font-size: 2rem;
line-height: 1;
width: 100%;
margin-top: 2vw;
display: flex;
justify-content: center;

}

.input-container {
position: relative;
margin: 3.5rem 0;

}

.input {
width: 100%;
outline: none;
border: 2px solid #ffffff;
background: none;
padding: 0.6rem 1.2rem;
color: rgb(255, 255, 255);
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.5px;
border-radius: 25px;
transition: 0.3s;

}

textarea.input {
padding: 0.8rem 1.2rem;
min-height: 150px;
border-radius: 22px;
resize: none;
overflow-y: auto;
}

.input-container label {
position: absolute;
top: 40%;
left: 20px;
transform: translateY(-20% );
padding: 0 0.4rem;
color: #ffffff;
font-size: 0.9rem;
font-weight: 400;
pointer-events: none;
z-index: 10;
transition: 0.5s;
}

button.input  {
padding: 0.6rem 1.3rem;
background-color: #fff;
border: 2px solid #fafafa;
font-size: 0.95rem;
color: black;
line-height: 1;
border-radius: 25px;
outline: none;
cursor: pointer;
transition: 0.3s;
margin: 0;

}



.input-container span {
position: absolute;
/* width: 100px; */
left: 25px;
transform: translateY(350%);
font-size: 0.8rem;
padding: 0 0.4rem;
color: rgb(255, 0, 0);
pointer-events: none;
z-index: 1;
}


.input-container span:before {
left: 5%;
}

.input-container span:after {
right: 50%;
}

.input-container.focus label {
top: -7px;
transform: translateY(-100%);
left: 5px;
font-size: 0.7rem;
}

.input-container.focus span:before,
.input-container.focus span:after {
width: 50%;
opacity: 1;
}

.contact-info {

padding: 2.3rem 2.2rem;
position: relative;
background-color: #12192c;
border: whitesmoke 3px solid;


}

.contact-info .title {
  font-family: 'Rubik',sans-serif;
  font-size: 4vw;
color: #50c878;
}

.text {
color: #fff;
margin: 1.5rem 0 2rem 0;
}

.information {
font-family: 'Poppins', sans-serif;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
line-height: 50px;
}

.information :hover{
color: #01c01e;
}
.information a{
color: white;
text-decoration: none;
}

.icon {
width: 28px;
margin-right: 0.7rem;
color: orange;

}

.social-media{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;

}
.social-media p {
color: #fff;
margin-top: 50px;
}

.social-icons {
display: flex;
margin-top: 0.5rem;
}

.social-icons a {
width: 35px;
height: 35px;
border-radius: 5px;
background: linear-gradient(45deg, white, blue);
color: #fff;
text-align: center;
line-height: 35px;
margin-right: 0.5rem;
transition: 0.3s;
position: relative;

}

.social-icons a:hover {
transform: scale(1.05);
}


.krish,img{
margin-top: 20px;
width: 300px;
height: auto;

}

.square {
position: absolute;
height: 400px;
top: 50%;
left: 50%;
transform: translate(181%, 11%);
opacity: 0.2;
}

@media (max-width: 850px) {
.form {
  grid-template-columns: 1fr;
}

.contact-info:before {
  bottom: initial;
  top: -75px;
  right: 65px;
  transform: scale(0.95);
}

.contact-form:before {
  top: -13px;
  left: initial;
  right: 70px;
}

.square {
  transform: translate(140%, 43%);
  height: 350px;
}

.big-circle {
  bottom: 75%;
  transform: scale(0.9) translate(-40%, 30%);
  right: 50%;
}

.text {
  margin: 1rem 0 1.5rem 0;
}

.social-media {
  padding: 1.5rem 0 0 0;
}
}
@media (max-width: 850px) {
.form {
  grid-template-columns: 1fr;
}

.contact-info:before {
  bottom: initial;
  top: -75px;
  right: 65px;
  transform: scale(0.95);
}

.contact-form:before {
  top: -13px;
  left: initial;
  right: 70px;
}

.square {
  transform: translate(140%, 43%);
  height: 350px;
}

.big-circle {
  bottom: 75%;
  transform: scale(0.9) translate(-40%, 30%);
  right: 50%;
}

.text {
  margin: 1rem 0 1.5rem 0;
}

.social-media {
  padding: 1.5rem 0 0 0;
}
}

@media (max-width: 480px) {

.contact-info:before {
  display: none;
}

.square,
.big-circle {
  display: none;
}

form,
.contact-info {
  padding: 1.7rem 1.6rem;
}

.text,
.information,
.social-media p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;

}

.title {
  font-size: 1.15rem;
}

.social-icons a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.icon {
  width: 23px;
}

.input {
  padding: 0.45rem 1.2rem;
}

.btn {
  padding: 0.45rem 1.2rem;
}

}



.credit {
text-align: center;
color: #fff;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.credit a {
text-decoration: none;
color: #FBAB7E;
font-weight: bold;
}



/* General Styles */

.container1 {
position: relative;
width: 100%;
height: auto;

}

.fullwidth-container {
width: 80%;
margin: 2rem 10%;
}

#faqs {
display: block;
}

.line-heading {
font-weight: 600;
line-height: 1.1;
display: flex;
align-items: center;
width: 90%;
margin: 10px 0 40px 10%;
white-space: nowrap;
font-size: 26px;
color: whitesmoke;
}

.line-heading:after {
content: "";
display: block;
position: relative;
width: 530px;
height: 1px;
margin: 0 0 0 20px;
background: rgba(204, 214, 246, 0.2);
text-shadow: none;
transition: all 0.6s ease-in-out 0s;
}

.line-heading:hover:after {
width: 180px;
background: rgba(204, 214, 246, 0.6);
}

h3.large-heading {
margin: 0 0 0 10%;
font-size: 52px;
line-height: 1.1;
letter-spacing: -0.045em;
color: #fff;
text-shadow: 1px 1px 1px rgb(0 0 0);
}

/* FAQ Section Styles */

#faqSection .collapsible {
background-color: #112240;
border: 1px solid hsla(0, 0%, 51.4%, 0.16);
border-radius: 7px;
box-shadow: 0 10px 30px -15px rgb(0 0 0);
transition: box-shadow 0.2s ease 0s;
color: white;
font-weight: 700;
margin: 0 0 8px;
width: 100%;
padding: 12px;
font-size: 15px;
text-align: left;
}

#faqSection .collapsible:hover {
box-shadow: 0 10px 60px -15px rgba(0, 0, 0, 1);
}

#faqSection .collapsible:after {
content: "\002B";
font-weight: bold;
float: right;
margin-left: 5px;
}

#faqSection .active:after {
content: "\2212";
}

#faqSection .faq-content {
overflow: hidden;
width: 100%;
padding: 5px 2%;
transition: all 0.25s ease-in-out 0s;
background-color: #112240;
border: 1px solid hsla(0, 0%, 51.4%, 0.16);
border-radius: 7px;
max-height: 0;
visibility: hidden;
margin-top: 10px; /* Added margin for spacing */
}

#faqSection .faq-content p {
color: rgb(241, 234, 234);
line-height: 140%;
margin: 0 0 12px;
font-weight: 600; /* Adjusted font weight */
}

#faqSection .faq-content a {
color: #00c58e;
font-weight: 600;
letter-spacing: 0.05rem;
}

#faqSection .faq-content li {
color: #bad2e2;
font-size: 0.85rem;
line-height: 160%;
font-weight: 200;
margin: 8px 0;
list-style: none;
width: 100%; /* Adjusted width */
text-shadow: 1px 1px 0 rgb(0 0 0);
}




/* Responsive Adjustments */
@media only screen and (max-width: 768px) {
h2.line-heading {
  font-size: 5vw;
  text-align: center; 
}

h3.large-heading {
  font-size: 20px;
  width: 300px;
  right: 50px;
}

#faqSection div {
  width: 100%;
  height: auto;
  margin: 0;
 

}

#faqSection .collapsible {
  font-size: 14px;
  width: 100%;
  height: auto;


}

#faqSection .faq-content {
  width: 98%;
  height: auto;

}

#faqSection .faq-content p {
  background-size: cover;
  font-size: 10px;

}

#faqSection .faq-content li {
  font-size: 12px;
}
}