* {
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  scroll-behavior: smooth;
}

html {
  font-size: 62.5%;
}

:root {
  --head-color: #37517e;
  --main-color: #47b2e4;
  --p-color: rgb(77, 77, 77);
  --p-font: 1.6rem;
  --h-font: 3.2rem;
}

body {
  font-family: jost, sans-serif;
  scroll-behavior: smooth;
  /* position: fixed ; */
}
p{
  font-size: var(--p-font);
  letter-spacing: 0.6px;
  line-height: 20px;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 9rem;
  height: auto;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 12vh;
  align-items: center;
  z-index:99;
}
section{
  background-color: white ;
  padding: 5rem 9rem;
}
header .logo a {
  color: white;
  font-size: 3rem;
  font-weight: 600;
  text-decoration: none;
}

header nav {
  display: flex;
  align-items: center;
  font-size: 1.7rem;
}

header nav ul {
  list-style: none;
  display: flex;
  flex-direction: row;
}

header nav ul li {
  margin-right: 3rem;
  transition: 0.5s ease;
}

header nav li a {
  text-decoration: none;
  color: white;
  font-size: var(--p-font);
  display: flex;
  align-items: center;
}

header nav li a>i {
  font-size: 2rem;
}

header nav li a:hover {
  color: var(--main-color);
  cursor: pointer;
}
header nav i{
  display: none;
  visibility: collapse;
}
.main-container .section1 .contentText a.button,
header nav button {
  padding: 1rem 2.5rem;
  background: var(--main-color);
  border-radius: 2rem;
  border: none;
  outline: none;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: var(--p-font);
  transition: 1s ease;
}
.main-container .section1 .contentText a.button:hover,
header nav button:hover {
  cursor: pointer;
 background-color:#40a0cc;
}

.main-container .section1 {
  padding: 0 9rem;
  background: #37517e;
}

.main-container .section1 .container {
  padding: 13vh 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

.main-container .section1 .contentText {
  flex : 1 0 50%;
  /* width: 50%; */
}

.main-container .section1 .contentText h2 {
  text-transform: capitalize;
  color: white;
  font-size: 4.5rem;
  word-wrap: break-word;
}

.main-container .section1 .contentText p {
  color: rgb(162, 162, 162);
  margin-top: 2rem;
  font-size: 2.2rem;
  word-wrap: break-word;
  margin-bottom: 2rem;
}

.main-container .section1 .contentText .buttons {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin-top: 3rem;
}

.main-container .section1 .contentText a#watch {
  background: none !important;
  color: white;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.8rem;
  transition: 0.6s ease;
}

.main-container .section1 .contentText a#watch i {
  font-size: 4rem;
  padding-right: 1rem;
}
.main-container .section1 .contentText a#watch:hover {
  color: #40a0cc;
}
.main-container .section1 .contentimage {
  margin-right: 7rem;
  flex : 1 0 50%;

  /* width: 50%;
   */
}

.main-container .section1 .contentimage img {
  width: 100%;
  scale: 1;
  animation: anim1;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes anim1 {
  to {
    transform: translate(0, 2rem);
  }
}

@media (max-width: 700px) {
  .main-container .section1 {
    flex-direction: column-reverse;
    height: auto;
    padding: 0;
    margin: 0;
  }
}

.section2 {
  padding: 0 11rem;
  overflow: hidden;
  background-color: #f5f6f8;
}

.section2 .clientslogo {
  display: flex;
  justify-content: space-around;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 0;
  gap: 8%;
}
.section2 .clientslogo::-webkit-scrollbar {
  display: none;
}
.section2 .clientslogo img {
  width: 8%;
  aspect-ratio: 4/3;
  object-fit: contain;
  scroll-snap-align: start;
  flex-shrink: 0;
  margin: 0 1%;
}
.section2 .clientslogo img:hover {
  transform: scale(1.1);
}
.section3 {
  padding: 6rem 9rem;
}
.section3 .para-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-size: var(--p-font);
  color: var(--p-color);
}
.section3 .para-container .box {
  padding: 0 1rem;
  margin-top: 2rem;
}
.section3 .para-container .c1 p{
  margin-bottom: 1.5rem;
}
.section3 .para-container .c1 ul{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-left: 16px;
}
.section3 .para-container .c1 ul li::marker{
  content:"✔ " ;
  color: var(--main-color);
}
.section3 .para-container .c2 a{
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--main-color);
border: 2px solid var(--main-color);
padding: 1rem 2.8rem;
margin-top: 2.5rem;
border-radius: 5px;
}
.section3 .para-container .c2 a>i{
font-size: 2.1rem;
transition: 0.5s ease;
}
.section3 .para-container .c2 a:hover{
  background-color: var(--main-color);
  color: white;
}
.section3 .para-container .c2 a:hover i{
 transform: translateX(6px);
}
.section4 {
  padding: 6rem 7rem;
  background-color: #f5f6f8;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  overflow: clip;
  align-items: start; /* Ensure items align at the start to allow flexible height */
  transition: height 1s ease;
}

.section4 .left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section4 .left .d1 h3 {
  font-size: 3.2rem;
  color: var(--head-color);
}

.section4 .left .d1 h3 span {
  font-weight: 400;
}

.section4 .left .d1 p {
  color: rgb(128, 128, 128);
  padding: 1rem 0;
}

.section4 .left .faq-item {
  position: relative;
  background-color: #fff;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--p-font);
}

.section4 .left .faq-item h3 {
  font-size: var(--p-font);
  font-weight: 600;
  color: var(--head-color);
  padding: 1rem;
  width: 100%;
}

.section4 .left .faq-item h3:hover {
  color: var(--main-color);
  cursor: pointer;
}

.section4 .left .faq-item h3 span {
  color: var(--main-color);
  margin-right: 1rem;
  font-weight: 600;
  font-size: 2rem;
}

.section4 .left .faq-item p {
  display: none;
  padding: 1rem;
  color: var(--p-color);
}

.section4 .left .faq-item input {
  display: none;
}

.section4 .left .faq-item .c2 {
  position: absolute;
  right: 1rem;
  top: 1.3rem;
}

.section4 .left .faq-item label i {
  padding: 1rem;
  font-size: 3rem;
  transition: 1s ease;
}

.section4 .left .faq-item label i:hover {
  color: var(--main-color);
}

.section4 .left .faq-item input:checked ~ label ~ p {
  display: block;
}

.section4 .left .faq-item input:checked ~ label > h3 {
  color: var(--main-color);
}

.section4 .left .faq-item input:checked ~ label ~ p ~ label > i {
  transform: rotate(90deg);
  color: var(--main-color);
}

.section4 > .rightt {
  display: flex;
  justify-content: center; /* Center the image */
  align-items: center; /* Center the image vertically */
  padding-top: 4rem;
  height: 100%;
  transition: height 1s ease;
}

.section4 > .rightt img {
  max-height: clamp(45vh, 70%, 80vh);
  width: auto;
  object-fit: contain;
  transition: max-height 1s ease, height 1s ease; 
}
.section5{
  display: grid;
  grid-template-columns: 50% 50%;
  padding: 4rem 10rem;
}
.section5 .right {
  padding-top: 2.5rem;
}
.section5 .right h3{
  font-size: 3.2rem;
  color: var(--head-color);
  font-weight: 600  ;
}
.section5 .right p{
  font-size: var(--p-font);
  font-weight: 100;
  color: rgb(132, 132, 132);
  font-style: italic;
  padding: 1rem 0;
}
.section5 .right .progress{
  margin: 2rem 0;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section5 .right .progress .skill-name{
  display: flex;
  justify-content: space-between;
}
.section5 .right .progress .input{
  width: 100%;
  background-color: #b2b2b2;
  height: 10px;
  color: var(--head-color);
}
.section5 .right .progress .input>.range{
  background-color: #37517e;
  height: 100%;
}
.section5 .right .progress:nth-child(1) .input>.range{
  width: 100%;
}
.section5 .right .progress:nth-child(2) .input>.range{
  width: 80%;
}
.section5 .right .progress:nth-child(3) .input>.range{
  width: 60%;
}
.section5 .right .progress:nth-child(4) .input>.range{
  width: 70%;
}
.section5 .left{
  padding: 1rem;
}
.section5 .left img{
  width: 100%;
  object-fit: contain;
}
.section6{
  /* padding: 6rem 10rem; */
  background-color: #f5f6f8;
}

.section6 .services-container{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 3rem;
}
.section6 .services-container a{
  text-decoration: none;
  transition:all .6s ease;
}
.section6 .services-container a:hover{
  transform: translateY(-5%);
}
.section6 .services-container a:hover h3{
 color: var(--main-color);
}

.section6 .services-container .services{
  background-color: white;
  padding: 5rem 2.5rem;
  box-shadow: 0 0 20px rgb(226, 226, 226);
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
.section6 .services-container .services>div i{
font-size: 4rem;
color: var(--main-color);
}
.section6 .services-container .services h3{
  font-size: 1.8rem;
  color: var(--head-color);
}
.section6 .services-container .services P{
  font-size: var(--p-font);
  color: var(--p-color);
}
.section7{
  padding: 12rem 10rem;
  display: grid;
  grid-template-columns: 75% 25%;
  place-items: center;
  background:rgba(67, 90, 132, 0.546);
  position: relative;
  color: white;
  overflow: hidden;
}
.section7 img{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  display: block;
  z-index: -99;
  background-position: center;
  object-fit: cover;
}
img, svg{
  vertical-align: middle;
}
.section7 .calltoaction h3{
  font-size: 3.2rem;
  padding: 1.6rem 0;
}
.section7 .calltoaction-btn >a{
  font-size: 1.8rem;
  text-transform: capitalize;
  font-weight: 600;
  padding: 1rem 3rem;
  border: 2px solid white;
  border-radius: 30px;
  text-decoration: none;
  color: white ;
}
.section8{
  padding: 6rem 11rem;
}
.section8 .portfolio-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
}
.section8 .portfolio-container ul{
  align-self: center;
  list-style: none;
  display: flex;
  gap: 2rem;
  padding: 3rem 0;
}
.section8 .portfolio-container ul li input{
  display: none;
}
.section8 .portfolio-container ul li input:checked ~label,
.section8 .portfolio-container ul li label:hover
{
  background-color: var(--main-color);
  color: white;
}
.section8 .portfolio-container ul li label{
  font-size: var(--p-font);
  padding: 1rem 2rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; 
}
.section8 .portfolio-container .container{
  background-color: white;
  height: 170vh;
  position: relative;
}
.section8 .portfolio-container .container .items{
  position: absolute;
  width: 32%;
  overflow-y: hidden;
}

.section8 .portfolio-container .container .items:nth-child(1){
  left:0;
  height: 32%;
}
.section8 .portfolio-container .container .items:nth-child(2){
  left: calc(32% + 2%);
  height: 22%;
}
.section8 .portfolio-container .container .items:nth-child(3){
  top: 0;
  right: 0%;
  height: 19%;
}
.section8 .portfolio-container .container .items:nth-child(4){
  top: calc(19% + 2%); 
  right:0;
  height: 21%;
}
.section8 .portfolio-container .container .items:nth-child(5){
  top: calc(22% + 2%);  
  left: calc(32% + 2%);
  height: 53%;
}
.section8 .portfolio-container .container .items:nth-child(6){
  top: calc(32% + 2%);
  left: 0%;
  height: 53%;
}
.section8 .portfolio-container .container .items:nth-child(7){
  top: calc(21% + 19% + 4%);
  right:0;
  height: 21%;
}
.section8 .portfolio-container .container .items:nth-child(8){
  top: calc(19% + 42% + 4% + 2%);
  right: 0%;
  height: 21%;
}
.section8 .portfolio-container .container .items:nth-child(9){
  left: calc(32% + 2%);
  top: calc(53% + 22% + 2% + 2%);
  height: 21%;
}
.section8 .portfolio-container .container .items img{
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.section8 .portfolio-container .container .items .overlay{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center ;
  background: rgba(255, 255, 255, 0.825);
  padding:1.5rem 2rem;
  position: absolute;
  transform: translateY(0);
  transition: 0.3s ease;
  transition-delay: 0.5s;
}
.section8 .portfolio-container .container .items:hover .overlay{
  transform: translateY(-100%);
 }
.section8 .portfolio-container .container .items .overlay h3{
  font-size: 2rem;
  padding-bottom: 1rem;
  color: var(--head-color);
}
.section8 .portfolio-container .container .items .overlay i{
  font-size: 2.5rem;
  cursor:pointer;
  padding: 0 1rem;
  color: var(--p-color);
}
.section8 .portfolio-container .container .items .overlay i:hover{
  color: var(--main-color);
}
.section9 .team-container{
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.section9 .team-container .team-mem{
  flex: 1 0 45%;
  display: flex;
  flex-direction: row;
  min-width: 45%;
  padding: 3rem 1rem 3rem 3rem;
  border-radius: 5px;
  box-shadow: 0 0 20px rgb(211, 211, 211);
  transition:all 0.5s ease;
}
.section9 .team-container .team-mem:hover{
  transform: translateY(-5%);
}
.section9 .team-container .team-mem .pic{
  height: 15rem;
  width: 15rem;
  border-radius: 7.5rem;
  overflow: hidden;
  flex-shrink: 0; 
}
.section9 .team-container .team-mem .pic img{
 height: 100%;
 width: 100%;
 object-fit: cover;
}
.section9 .team-container .about-mem{
  padding: 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.section9 .team-container .about-mem h3{
 font-size: 2.4rem;
 color: var(--head-color);
}
.section9 .team-container .about-mem h4{
 font-size: 1.6rem;
 font-weight: 100;
 letter-spacing: 1px;
 position: relative;
 padding-bottom: 10px; /* Add some padding to make space for the underline */
}
.section9 .team-container .about-mem h4::after{
 content: "";
 height: .5px;
 width: 20%;
 display: block;
 position: absolute;
 bottom: 0; /* Position the underline at the bottom */
 left: 0;
 background-color: #b2b2b2; /* Change color to background-color to make the underline visible */
}
.section9 .team-container .about-mem p{
  color: var(--p-color);
  letter-spacing: 0;
}
.section9 .team-container .about-mem .social-medias a{
  text-decoration: none;
  margin: 5px;
}
.section9 .team-container .about-mem .social-medias a>i{
  font-size: 2rem;
  color: rgb(88, 88, 88);
  padding: 8px;
  border-radius: 50%;
  background-color: #dfdfdfa8;
}
.section9 .team-container .about-mem .social-medias a>i:hover{
  color: rgb(255, 255, 255);
  background-color: var(--main-color);
}
.section10{
  background-color: #f5f6f8;
}
.section10 .pricing-container {
  display: flex;
  gap: 2rem;
}
.section10 .pricing-container .plan{
  padding: 6rem 4.8rem;
  background-color: white;
  width: fit-content;
  border-radius: 5px;
  box-shadow: 0 0 20px rgb(211, 211, 211);
  flex: 1 0 30%;
  position: relative;
  border-top: 4px solid #d9d9d9;
}
.section10 .pricing-container .plan:nth-child(2){
  border-top: 4px solid #47b2e4;
}
.section10 .pricing-container .plan:nth-child(2)>a{
  color: white;
  background-color: var(--main-color);
}
.section10 .pricing-container .plan:nth-child(2)>a:hover{
  background-color: white;
  color: var(--main-color);
}
.section10 .pricing-container .plan h3{
  font-size: 2rem;
  color: var(--head-color);
  padding: 1rem;
}
.section10 .pricing-container .plan h4{
  font-size: 5rem;
  color: var(--main-color);
  font-weight: 100;
}
.section10 .pricing-container .plan h4>sup{
  font-size: 3.2rem;
}
.section10 .pricing-container .plan h4>span{
  font-size: var(--p-font);
  color: var(--p-color);
}
.section10 .pricing-container .plan ul{
 padding: 1.5rem 0 ;
 margin-bottom: 1rem;
 font-size: 1.6rem;
 margin-left: 2rem;
}
.section10 .pricing-container .plan ul li{
  padding: 1.5rem;
  color: #797979;
}
.section10 .pricing-container .plan ul li::marker{
    content:"✔";
    color: green;
    margin-left: 2rem;
}
.section10 .pricing-container .plan ul li:has(del)::marker{
    content:"🗙";
    color: rgb(209, 4, 4);
    margin-left: 2rem;
}
.section10 .pricing-container .plan a{
  text-decoration: none;
  font-size: 1.6rem;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  padding: 1rem 3rem;
  border-radius: 20px;
  transition: 0.5s ease;
}
.section10 .pricing-container .plan a:hover{
  color: white;
  background-color: var(--main-color);
}
.section11 .testimonals-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 2rem 0;
  cursor: pointer;
}

.section11 .testimonals-container:active {
  cursor: pointer;
}
.section11 .testimonals-container::-webkit-scrollbar{
  display: none;
}
.section11 .testimonals-container .tests{
  min-width: 100%;
  display: flex;
  row-gap: 2rem;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: center;
  user-select: none;
}
.section11 .testimonals-container .tests .pic{
 height: 12rem;
 border-radius: 50%;
 overflow: hidden;
 flex-shrink: 0;
}
.section11 .testimonals-container .tests .pic img{
 height: 100%;
 width: 100%;
}
.section11 .testimonals-container .tests h3{
 font-size: 2.0rem;
 color: #37517e;
}
.section11 .testimonals-container .tests p{
 font-size: 1.2rem;
 color: #797979;
 font-weight: 600;
 margin-top: -1rem;
}
.section11 .testimonals-container .tests .rate i{
  color: gold;
  font-size: 2rem;
}
.section11 .testimonals-container .tests .quote{
 font-size: 1.6rem;
 font-weight: 100;
 font-style: italic;
 margin: 0 15% 1rem;
 text-align: center;
}
.section11 .testimonals-container .tests .quote i{
 font-size: 1.6rem;
 color: #4cc6ffb0;
 padding: 0 5px;
}
.section12{
  background-color: #f5f6f8;
}
.section12 .question-container{
  padding: 1rem 10%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.section12 .question-container .question-item{
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: white;
  padding: 2rem;
  font-size: 1.6rem;
  color: var(--head-color);
}
.section12 .question-container .question-item input{
  display: none;
}

.section12 .question-container .question-item p{
  display: none;
  padding-top: 2rem;
}
.section12 .question-container .question-item label .bx-question-mark{
 font-size: 1.6rem;
 border: 2px solid var(--main-color);
 border-radius: 50%;
 padding: 1px;
 color: #47b2e4;
 font-weight: 600;
 margin-right: 1rem;
}
.section12 .question-container .question-item label>.bx-chevron-right{
  position: absolute;
  top: 1.8rem;
  right: 0;
  font-size: 3rem;
  transition: 0.5s ease;
}
.section12 .question-container .question-item .c1:hover h3,
.section12 .question-container .question-item label>.bx-chevron-right:hover{
 color: #47b2e4;
}
.section12 .question-container .question-item input:checked ~label{
 color: #47b2e4;
}
.section12 .question-container .question-item input:checked ~label ~p{
  display: block;
}
.section12 .question-container .question-item input:checked ~label ~p ~label>i{
  transform: rotate(90deg);
}
.section13 .contact-container{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 3rem;
}
.section13 .contact-container> div{
  border-top: 4px solid var(--main-color);
  border-bottom: 4px solid var(--main-color);
  padding: 3rem;
  box-shadow: 0 0 10px rgb(217, 217, 217);
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.section13 .contact-container .contact-left>div{
  display: flex;
  align-items: center;
  gap: 2rem;
}
.section13 .contact-container .contact-left .us:hover i{
  background-color: #47b2e4;
  color: white;
}
.section13 .contact-container .contact-left>div> i{
  font-size: 2.3rem;
  color: #47b2e4;
  background-color: #5f85962a;
  padding: 1rem;
  border-radius: 50%;
}
.section13 .contact-container .contact-left>div h3{
  font-size: 1.8rem;
  color: #37517e;
  padding-bottom: 0.5rem;
}
.section13 .contact-container .contact-left>div p{
  font-size: 1.4rem;
  color: #454545;
}
.section13 .contact-container .contact-right form{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-bottom: 4rem;
}
.section13 .contact-container .contact-right form>div{
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
  color: #454545;
  gap: 1rem;
  margin-bottom: 3rem;
}
.section13 .contact-container .contact-right form>div input{
  height: 40px;
  border: 1px solid #a7a7a786;
  outline: none;
  /* background-color: rgba(142, 159, 235, 0.222); */
  padding: 0 2rem ;
  width: 100%;
}
.section13 .contact-container .contact-right textarea:focus,
.section13 .contact-container .contact-right form>div input:focus{
  border-color: #47b2e4;
}
.section13 .contact-container .contact-right form>div:nth-child(3),
.section13 .contact-container .contact-right form>div:nth-child(4),
.section13 .contact-container .contact-right form>div:nth-child(5){
  grid-column: 1/3;
}
.section13 .contact-container .contact-right textarea{
  height: 20rem;
  resize: vertical;
  border: 1px solid #a7a7a786;
  outline: none;
}
.section13 .contact-container .contact-right .errormessage{
background-color: red;
color: white;
padding: 1.6rem;
display: none;
}
.section13 .contact-container .contact-right input[type="submit"]{
background-color: var(--main-color);
font-size: 1.6rem;
color: white;
padding: 1.2rem 3rem;
border: none;
border-radius: 30px;
align-self: center;
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50% );
}
.section14 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f6f8;
}
.section14 .heading h3{
  font-size: 2.5rem;
  color: var(--head-color);
}
.section14 .heading p{
  letter-spacing: normal;
}
.section14 .container{
  display: flex;
  justify-content: space-between;
  padding: 5px 2rem;
  margin-bottom:3rem ;
  height: 4.5rem;
  width: 50%;
  background-color: white;
  border-radius:30px ;
  box-shadow: 0 0 10px rgb(226, 226, 226);
  position: relative;

}
.section14 .container input{
  border: none;
  outline: none;
  width: 80%;
  padding-right: 5%;
}
.section14 .container button{
  border: none;
  outline: none;
  /* width: 20%; */
  height: 100%;
  background-color: #47b2e4;
  color: white;
  border-radius: 50px;
  font-size: 1.6rem;
  padding: 0 3rem;
  letter-spacing: 1px;
  position: absolute;
  top: 0;
  right: 0;
}
.section14 .errormessage{
background-color: red;
font-size: 1.6rem;
width: 50%;
color: white;
padding: 1.6rem;
display: none;
}
footer{
  padding: 6rem 10rem;
  background-color: white ;
}
footer{
  font-size: 1.4rem;
  color: #646464;
}
footer .footer-top{
  display: grid;
  grid-template-columns:30% 20% 20% 30% ;
padding-bottom: 5rem;
}

footer .footer-top .arsha a{
color: var(--head-color);
font-size: 2.8rem;
text-decoration: none;
}
footer .footer-top .arsha p>span{
  font-weight: 600;
}
footer .footer-top .arsha h3,
footer .footer-top .link h4{
  margin-bottom: 2.5rem;
  color: var(--head-color);
}
footer .footer-top .link ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 0;
}
footer .footer-top .link ul li{
display: flex;
align-items: center;
}
footer .footer-top .link ul li a{
  text-decoration: none;
  color: #797979;
}
footer .footer-top .link ul li a:hover{
  color: #47b2e4;
}
footer .footer-top .link ul li>i{
  font-size: 2rem;
  color: #47b2e4;
  margin-right: 0.4rem;
}
footer .footer-top .follow-us .logos{
  display: flex;
  gap: 1rem;
}
footer .footer-top .follow-us .logos i{
  font-size: 2rem;
  padding: 1rem;
  color:rgb(141, 141, 141); ;
  border: 1px solid rgb(198, 198, 198);
  border-radius: 50%;
}
footer .footer-top .follow-us .logos i:hover{
  color: #47b2e4;
  border-color: #47b2e4;
  box-shadow: inset 0 0 10px #47b2e4;
}
footer .footer-bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.2rem;
  padding-top: 5rem;
}
footer .footer-bottom .up{
  display: flex;
  align-items: center;
  column-gap: 1rem;
}
footer .footer-bottom .down a{
  color: #47b2e4;
  text-decoration: none;
}
section .heading{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom:6rem;
  gap: 1.6rem;
  color: var(--p-color );
}
section .heading p{
 text-align: center;
}
.head {
  font-size: var(--h-font);
  color: var(--head-color);
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.head::before,
.head::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1.6rem;
  height: 1px;
}

.head::before {
  width: 18rem;
  background-color: rgba(128, 128, 128, 0.468);
  left: 50%;
  transform: translateX(-50%);
}

.head::after {
  width: 8rem;
  background-color: var(--main-color);
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  bottom: -1.7rem;
}