body{
  -webkit-tap-highlight-color: transparent;
  background :#fff;
  margin:0px;
  padding:0px;
overflow-x: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
ul{
  list-style: none;
}
.a{
  outline: none;
  text-decoration: none;
  color: #757575;
  
}
.li1{
  margin-bottom: 2vh;
  display: flex;
  align-items: center;
  transition: 0.5s;
  padding:10px;
}
.li1:hover{
  background-color: rgb(132, 193, 255);
  margin-right:20px;
}

.a{
  margin-left:20px
}
#h1 ,#h2{
  font-weight: 400;
  color: dodgerblue;
  margin-left:20px
}
#div2{
  max-width:220px;
  min-width:220px;

  display: flex;
  flex-direction: column;
  margin-left: 20px;
  margin-top:40px;
  border-radius: 5px;
  margin-bottom: 50px;
}
#h1{
  margin-bottom : -5px;
  margin-left:27px;
  color:white
  
}
#h2{
  margin-left:62px
}
.sidebar{
  max-width:40vh;
  min-width:18.2rem;
}


.btn1{

  cursor:pointer;
  transition: 0.6s;
  background-color: dodgerblue;
  outline: none;
  border : 0;
  color:white;
  padding:18px;
  border-style:solid;
  border-width:1px;
  border-color: dodgerblue;
  border-width: 2px;
  font-weight: 500;
  border-radius: 5px;
}
.btn1:hover, .btn1:active{

  color: gray;
  background: white;
}

#head1{

  margin-left:50px;
  color : #757575;
  font-weight: 500;
  position: relative;
  left:10%
}
#div4{
  border-radius: 100px;
  border-style: solid;
  width:50px;
  padding:10px;
  border-color: dodgerblue;
  justify-self: end;
  border-width:1px;
  font-weight: 500;
  margin-top:-120px;
  margin-left:90%;
  
}

#img11{
  position: relative;
  top:-60px;
  left:76%
}

.sidebar{
  position: fixed;
  bottom:0;
  top:0;
  min-height: 100vh;
  background-color: white;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.a{
  color:#000000
}
.a{
  color:#757575;
}
#h1{
  color:#757575
}
.topbar{
  
  background-color :rgb(121, 188, 255);
  max-height: 6vh;
  min-height: 50px;
  padding:12px;
  margin-left:-13px;
}
/* #s1{
  position: relative;
  left:46%
} */
.sidebar{
  margin-top:-100px
}
#h1{
  margin-top:100px
}
#chart1,#chart2,#chart3,#chart4{
  width:80%;
  margin-top: 20px;
}
#card1,#card2,#card3,#card4{
  background-color: white;;
  width:20%;
  height:30vh;
  min-height: 200px;
  
  display: flex;
  flex-direction: column;
  padding:12px;
  position: relative;
  transition: 0.6s;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

  border-bottom: dodgerblue solid 5px;
  margin-right:30px
}
.p1{
  font-size: 250%;
  margin-left:30px;
  margin-top:20px
}
.p2{
  margin-top: -40px;
  margin-left:20px
}
#main{
  display: flex;
 
 margin-left: 2%;
}
#card2{
  border-color: #0bd771;
}
#card3{
  border-color: #ff547f;
}
#card4{
  border-color: #fdb100;
}
.sidebar{
  background: linear-gradient(dodgerblue,#8E3FFF);
}
.a{
  color:white
}
#h1{
  color:white
}
#line1{
  border-bottom : gray solid
}
#con{
  background-color: white;
  width:34%;
  max-height: 70vh;
  min-height: 500px;
  padding: 20px;
  border-radius: 4px;
  margin-left: 21rem;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.flex2{
  display: flex;
  flex-direction:column;
  margin-top: 100px;
  align-items: center;
  justify-content: center

}
#chart5{
  width:100%;
}
.sidebar{
  position: fixed;
}
.j{
  color : gray;
  font-size: 120%;
  position: relative;
  left:5%;
  top:20px
}
#line1{
  border-width: 1px;
}
.o{
  color:dodgerblue;
  font-weight: 500;
  font-size:250%;
  position: relative;
  left:5%;
  margin-bottom:-10px
}
#p6{
  font-weight: 500;
  color:gray;
  position: relative;
  left:5%;
  top:20px
}
#p7{
  font-size: 220%;
  position: relative;
  left:5%;
  color:#0bd771;
  font-weight: 600;
}
.prev, .next {
  cursor: pointer;
  position: relative;
  top:-350px;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  
  font-size: 22px;
  left:-50px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: dodgerblue;
  color:white;
  border-radius: 500px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-color: dodgerblue;
border-style: solid;
border-width:2px
}

/* Position the "next button" to the right */
.next{
  left:93%
}
.prev:hover , .next:hover{

background-color: transparent;
color :black;
}
/* Fading animation */
.fade {
  animation-name: fade;
  transition: 2s;
  animation-duration: 2.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
#su{
  background-color: white;
  padding:12px;
  margin-left: 5rem;
  width:30%;
  max-height:650px;
  margin-right: 4rem;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.next{
  z-index: 2;
}
#his{
  max-height: 400px;
  overflow-y: auto;
}
.p13{
  font-size: 150%;
  color:dodgerblue
  ;font-weight: 500;
}
.track1,.cancel1{
  transition: 0.7s;
  padding:15px;
  width:27%;
  cursor:pointer;
  outline: none;
 
}
#c{
  margin-left:20px;
  background-color: #00c562;
  color:white;
  outline: none;
  padding:19px;
  font-weight: 600;
  border-style: solid;
  border-color: #00c562;
  border-width: 2px;
  width:40%
}
#t{
  margin-left:20px;
  background-color: dodgerblue;
  color:white;
  padding:19px;
  width:40%;
  font-weight: 600;
  border-style: solid;
  border-color: dodgerblue;
  border-width: 2px;
}
#t:hover{
 
  background :transparent;
  color:gray
}
#c:hover{

  background :transparent;
  color:gray;
  
}
.p14{
  font-weight: 500;
  color:gray
}
#footer{
  
width:101%;
margin-top:250px;
margin-left:-16px;
background-color: dodgerblue;
}
#last{
  color :white;
  text-align: center;
}
.a{
  font-weight : 300 ;
}
.sidebarcoll{
  position: absolute;
  left: -400px;
}
#div1.small {
  transition: 5s;
 
    margin-left:50px
}

.sidebar{
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  z-index: 111;
}
#exit{
  position: absolute;
 left:85%;
 top:10%; 
  padding: 0px;

  font-size: 4em;
  color: white;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.25s;
  -webkit-transition: all 0.25s;
}
#exit:hover{
  opacity: 0.5;
}
#fflex1{
  display: flex;
}
.ld{
  margin-bottom:30px;
  font-size: 120%;
  cursor: pointer
}
.dd, #fl2{
  outline: none;
  text-decoration: none;
  color: dodgerblue
}
.ld{
  color:gray;
}

#footer{
  background-color: white;
  padding:30px
}
#fl1,#fl3{
  font-size: 250%;
}
#fl2{
  margin-top:40px
}
#company2{
  margin-left:150px
}
#fl3{
  font-size: 220%;
}
#fl4{
  margin-top:30px;
  
}














/* CSS MEDIA QUERIES */
#oneand{
  left: 20px;
  font-size: 180%;
  font-weight: 400;
  z-index: 111;
  cursor: pointer;
  transform: rotate(90deg);
  transition: all 0.5s;
  -webkit-transition: all 0.25s;
  position: absolute;
}

#oneand:hover{
  color: dodgerblue;
}
#div1{
  height:100vh
}

#div3a{

  position: relative;
  margin-left:auto;
  margin-right: auto;
  margin-top: 50px;
  -webkit-user-select: none;
  user-select: none;
  margin-bottom:39rem

}
#pps{
  background-color: dodgerblue;
  color: white;
  width:50px;
  min-width:50px;
  padding:25px;
  text-align: center;;
  font-size: 350%;
  border-radius: 100px;
  margin-right: auto;
  margin-left: auto;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: 0.15s;
}
#pps:hover,#pps:active{
  opacity: 0.5;
  
}

#pps:active{
  transform: scale(0.9);
}
#footer{
  position: relative;
 top:-40rem;
 margin-bottom:-1000px
}
#main{
  margin-left: 20rem;
  margin-top: -2rem;
  height: unset;
}
#main2{
  margin-top: 5rem;
    background-color: #fff;
    width: 100%;
    display: flex;


}
#div3a{
  margin-left: 36rem;
    margin-bottom: 0rem;

}
html{
  background: #fff;
}
#grp1{
margin: auto;
display: block;
align-items: center;

}
#s1{
  text-align: center;
}
#btn1{
  position: absolute;
  right: 0;
  top :0;
  margin-top:0.5rem;
  margin-right: 0.8rem;
}
@media only screen and (max-width : 1300px)
{
  #footer{
    position: relative;
   top:0px;
   margin-bottom:0px
  }
  /* #s1{
    left:47%
  } */
  .sidebar{
    position: absolute;
    left:-500px;
      border-bottom-right-radius: 1rem;
    
  }
  #div1{
    overflow-x: hidden;
    transition: 5s;
    
  }
  #main, #con{
    transition: 1s;
  }
  #main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly
  }
  #card1, #card2, #card3, #card4 {
    width: 40%;
    margin: 10px;
  }
  #oneand{
    display: block;
  }
  #exit{
    display: block;
  }
  #sidebar.anc{
    position: fixed;
    left : 0;
    z-index: 111;
  }
  #con{
    width:60%;
    position: relative;
    left:14%
  }
  #su{
    top:4%;
    left:18%;
    width:62%
  }
  
  #main,#main2{
    margin-left: auto;
  }
  #main2{
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  #su,#con{
    margin:auto;
  }
  #con{
    margin-top: 10rem;
    margin-left: 3rem;
  }
  #su{
    margin-top: 5rem;
  }
  #div3a{
    margin: auto;
    display: block;
    margin-top: 5rem;
  }
}
@media only screen and (max-width : 1175px){
  #con{
    width:60%;
    position: relative;
    left:14%
  }
  #su{
    top:4%;
    left:21%;
    width:62%
  }
}
@media only screen and (max-width : 1055px){
  
  /* #s1{
    left:47%
  } */
  
}
@media only screen and (max-width : 950px){
  #con{
    width:65%;
    position: relative;
    left:14%
  }
  #su{
    top:4%;
    left:19%;
    width:68%
  }
}
@media only screen and (max-width : 914px){
 
}
@media only screen and (max-width : 850px){
  #con{
    width:67%;
    position: relative;
    left:9%
  }
  #su{
    top:4%;
    left:14%;
    width:72%
  }
  .next{
    position: absolute;
    top:38%;
    margin-left:20px
  }
}
@media only screen and (max-width : 850px){
 
}
@media only screen and (max-width : 746px){
  
}
@media only screen and (max-width : 680px){
  #div3a{
    margin-top:100px
  }
  /* #s1{
    left:45%
  } */
  #con{
    width:74%;
    left:10px
  }
  #fflex1{
    flex-direction: column;
    
  }
  #company2{
    position: relative;
    left:-150px
  }
  #main,#main2,#footer{
    position: relative;
    top:100px
  }
  #btn1{
    position: unset;
    width:140%;
    margin-left: -1.5rem;
  }
 #grp1{
  display: flex;
  flex-direction: column;
  align-items:center;
  gap: 2rem;
 }
  /* #btn1{
    margin-top: 6rem;
    width:60%
  } */
  .btn1:hover,.btn1:active{
    background-color: transparent;
  }
}
@media only screen and (max-width : 580px){
  #con{
    width:72%;
    position: relative;
    left:0%
  }
  #su{
    top:4%;
    left:8%;
    width:76%
  }
  .next{
    position: absolute;
    top:32%;
    margin-left:10px
  }
  
}
@media only screen and (max-width : 507px){
  #card1,#card2,#card3,#card4{
    width:80%;
  left:-0px
  }
  .btn1{
    top:100px;
    margin: auto;
    width:60%
  }
  #img1{
  width:400px
  }
}
.prev,.next{
  position: relative;
  top:0px;
  left:0px;
  right:0px
}
#flexx{
  display: flex;
  flex-direction: row;
  position: relative;
  top:-300px;
  left:-50px
}
.next{
  position: relative;
 left:100%
}

@media only screen and (max-width : 460px){
 
  #con{
    width:72%;
    position: relative;
    left:-20px
  }
  #su{
    top:4%;
    left:8%;
    width:76%
  }
  
  .next{
    left:0px;
  }
  #flexx{
    top:-50px;
    left:50%
  }
}
@media only screen and (max-width : 430px){
  #img1{
    width:350px
    }
  #card1,#card2,#card3,#card4{
    
   width:auto;
   margin-left: 20px;
  }
 
  #con{
    margin-top: 0px;
    width:80%;
    left:-25px
  }
  #p3,#p13{
    text-align: center;
  }
  #su{
    width:85%;
    left:20px;
    padding-bottom: 2rem;
  }
  .btn1{
    top:100px;
    width:60%
  };
  
}
#p14{
  position: relative;
  left:30px;
  cursor: pointer;
  width:35%;
  transition: 0.14s;
  color:dodgerblue
}
@media only screen and (max-width : 400px){
  
  #p14{
    width:50%
  }
  
}
@media only screen and (max-width : 299px){
  #div1, body{
    overflow-x:visible;
  }
}
#c:hover{
  color: gray
}

.loader  {
  animation: rotate 1s infinite;  
  height: 50px;
  width: 50px;
}

.loader:before,
.loader:after {   
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;  
  width: 20px;
}
.loader:before {
  animation: ball1 1s infinite;  
  background-color: #cb2025;
  box-shadow: 30px 0 0 #f8b334;
  margin-bottom: 10px;
}
.loader:after {
  animation: ball2 1s infinite; 
  background-color: dodgerblue;
  box-shadow: 30px 0 0 #97bf0d;
}

@keyframes rotate {
  0% { 
    -webkit-transform: rotate(0deg) scale(0.8); 
    -moz-transform: rotate(0deg) scale(0.8);
  }
  50% { 
    -webkit-transform: rotate(360deg) scale(1.2); 
    -moz-transform: rotate(360deg) scale(1.2);
  }
  100% { 
    -webkit-transform: rotate(720deg) scale(0.8); 
    -moz-transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 #f8b334;
  }
  50% {
    box-shadow: 0 0 0 #f8b334;
    margin-bottom: 0;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #f8b334;
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 #97bf0d;
  }
  50% {
    box-shadow: 0 0 0 #97bf0d;
    margin-top: -20px;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 #97bf0d;
    margin-top: 0;
  }
}
#loader{
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: auto;
  margin-top:18rem;
  z-index: 11111;
 }
.p21{
  color:rgb(100, 100, 100);
  font-weight: 500;
}
#p13{
  font-size: 150%;
  position: relative;
  left:30px
}

#p14:active{
 
  transform: scale(0.96);
}
.s1{
  position: relative;
  top:-10px
}

#oneand,#exit{
  -webkit-tap-highlight-color: transparent;

  transition: 0.14s;
}
#oneand:active,#exit:active{
  transform: scale(0.82);
}
#btn1{
  font-weight: 600;
}
.li1{
  cursor:pointer
}
#btn1:hover{
  color:dodgerblue
}
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
  z-index: 1000000000001;
}
#aa{
  color: dodgerblue;
  cursor: pointer;
}

#snackbar.showwm{
  visibility: visible;
  -webkit-animation: fadeinn 0.5s, fadeoutt 1.5s 2.5s;
  animation: fadeinn 0.5s, fadeoutt 1.5s 2.5s;
}
#snackbarr{
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 90px;
  font-size: 17px;
  z-index: 1000000000001;
}
#snackbarr.showwm{
  visibility: visible;
  -webkit-animation: fadeeinn 0.5s;
  animation: fadeeinn 0.5s
}

@-webkit-keyframes fadeeinn {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 90px; opacity: 1;}
}

@keyframes fadeeinn {
  from {bottom: 0; opacity: 0;}
  to {bottom: 90px; opacity: 1;}
}

@-webkit-keyframes fadeinn {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadeinn {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}















@-webkit-keyframes fadeoutt {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeoutt {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
#li7{
  position: absolute;
  bottom: 2rem;

}
#pf{
  border-radius: 10rem;
  width:5rem
}
#a7{
  font-size: 120%;
  color:dodgerblue;
  font-weight: 500;
}
#li7{
  background-color: white;
  padding:18px;
  border-radius: 2rem;
  transition: 0.7s;
  width:70px
  }
#li7.anc {
  width:165px
}
#li7:hover{
  opacity:0.8 ;
}
body{
  -webkit-font-smoothing: antialiased;
}
.li1:hover{
border-radius:0.9rem;
padding:1rem
}
#div1{
  background-color : #fff;
}
#blurr{
  background: rgba( 255, 255, 255, 0.55 );
  backdrop-filter: blur( 20.0px );
-webkit-backdrop-filter: blur( 20.0px );
border-bottom: 0.01rem solid rgba(255, 255, 255, 0.2);

max-height: 6vh;
  min-height: 50px;
  padding:12px;
  width : 100%;
  margin-left: -0.5rem;
  margin-top:-0.7rem;

}
#oneand{
  margin-left: 1rem;
  margin-top:0.5rem
}
#s1{
  font-weight: 500;
  color:#494949
}
#cust{
  text-align: center;
}
#line{
  margin-top:2rem;
  border-top:0.2px white solid;
}
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#000000
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}
#cust{
   color: black;
}
#footer{
  background-image: url(ai4.jpeg);
  background-size:cover;
  background-position: center; 
  background-repeat:no-repeat;
  max-height: 25rem;
  width: 110%;
padding: 0px;
}
#fflex1{
  background: rgba( 255, 255, 255, 0.8 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 24px );
-webkit-backdrop-filter: blur( 24px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );

}
#popup{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 22rem;
  height: 15rem;
  padding:28px;
  z-index: 5555;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
  border-radius: 10px;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;

}
@keyframes yopen{
  from{
    visibility: hidden;
    opacity: 0;
  }
  to{
    visibility: visible;
    opacity: 1;
  }
}
/* @keyframes yclose{
  from{
    visibility: visible;
    opacity: 1;
  }
  to{
    visibility: hidden;
    opacity: 0;
  }
} */
.fcopen{
  filter: blur(50px); /* Blur effect */
  transition: 0.8s;
}
.fcclose{
filter: blur(0px);
transition: 0.8s;
}
#h1p{
  text-align: center;
}
.no-scroll {
  overflow: hidden;
  height: 100%; 
  user-select: none;
  z-index: -1111;
}
#cd{
  font-size: 150%;
transition: 0.5s;
cursor: pointer;
}
#cd:hover{
  transform: scale(1.4);
}
#cd:active{
  transition: 0.05s;
  transform: scale(0.9);
}
#h1p{
  margin-top: -1.4rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#h2p{
  margin-top: 4rem;
  font-weight: 400;
  font-size: 120%;
}
#sp{
  color: dodgerblue;
  cursor: pointer;
}
#p13{
  font-size: 240%;
}
#footer{
  background-color: #e8e8e8;
  border-radius: 4rem;
  width:50%
}
.footer {
  background:#eeeeee;
  padding: 80px 20px 30px;
  margin-top: 10rem;
  margin-left: 18.1rem;
  color:black
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.footer-brand {
  max-width: 360px;
}

.footer-brand .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: black;
  margin-bottom: 14px;
}

.footer-brand img {
  width: 40px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  color: black;
  margin-bottom: 16px;
}

.socials {
  display: flex;
  gap: 14px;
}

.socials a {
  color: black;
  font-size: 18px;
  text-decoration: none;
  opacity: 0.8;
}

.socials a:hover {
  opacity: 1;
  color: #38bdf8;
}

.footer-col {
  min-width: 160px;
}

.footer-col h4 {
  font-size: 15px;
  font-weight: 600;
  color: black;
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: black;
  text-decoration: none;
  margin-bottom: 10px;
}

.footer-col a:hover {
  color: dodgerblue;
}

.footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: black;
  flex-wrap: wrap;
  gap: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}


#footeri{
    width:7rem;
    border-radius: 0.5rem;
}
.primary-btn.large, .primary-btn{
    transition: 0.25s;
}
.primary-btn.large:hover, .primary-btn:hover{
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.2);
}
@media only screen and (max-width : 1300px){
  .footer{
    margin-left: 0px;
    width: 100%
  }
}

#card1,#card2,#card3,#card4,#su,#con{
transition: 0.5s;
}