*{
  margin: 0;
  padding: 0; 
}
#div1{
   /* border: 2px solid red; */
   margin-top:7%;
   display: flex;
   height:320px;
   box-sizing: border-box;
   box-shadow: 1px 0px 1px black;

}
.text-area{
  width:65%;
  box-sizing: border-box;
  /* border: 2px solid green; */
  padding: 42px 0px 5px 116px;
}
 .text-area>h2{
   font-size: 30px;
   /* color: inherit; */
   font-weight:500;
   line-height: 40px;
   margin-bottom: 16px;
 }
.site{
  width: 35%;
  /* border: 2px solid green; */
  overflow: hidden;
}
.site > img{
 width: 150%;
 margin: auto;
 object-fit: cover;
 object-position: 0 -220px;
}
.text-area > #div2 img {
  width: 20px;
  border-radius: 50px
}
.text-area > #div2 > p{
  font-family: Arial, Helvetica, sans-serif;
}

.text-area > #div2{
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.strt-free{
   background-color:#1c6da3;
   color: #fff;
   width: 22%;
   padding: 15px;
   font-weight: 600;
   border-radius:2px;
   /* box-sizing: border-box; */
   text-align: center;
   margin-bottom:19px;
}
.strt-free:hover{
  cursor: pointer;
  background-color: #004b7c;
}
.learn{
  color: #004b7c;
  font-weight: 600;
}
.learn:hover{
  cursor: pointer;
  text-decoration: underline;
}
/* ---- footer start here ---- */

#footer{
   bottom: 0;
   position: relative;
   height:120px;
   background-color: #fff;
   width: 100%;
   box-shadow: 0 0 0 1px rgb(0 0 0 / 15%),
               0 6px 9px rgb(0 0 0 / 20%);
}
#footer > ul{
  display: flex;
  gap: 30px;
  /* margin-top: 10px; */
  padding: 35px 35px 10px;
  margin-left:17%;
}
#footer > ul > li{
  font-size:13px;
}
#footer > ul > li {
  display: flex;
} 
#footer > ul > li:hover{
  cursor: pointer;
  text-decoration: underline;
}
#last-line{
  align-items: center;  
  justify-content:center;
  margin-bottom:60px;
  display: flex;
}
#last-line > h1{
  font-size: 20px;
}
#last-line > span{
  font-size: 12px;
  margin-left: 14px;
}
#last-line > img{
   width:20px;
   height:20px;
}
.strt-free > a{
   color: white;
}

/* mid part css strt*/
.main1 {
  width: 100%;
  /* height: 428px; */
  /* margin: 200px auto; */
  /* overflow: hidden; */
  overflow: visible;
  position: relative;
  /* background: #d4e2fa; */
  height: 400px;
}





.section1 {
  width: 98%;
  height: 253px;
 
  margin: -10px auto;
  display: flex;
  justify-content: left;
  overflow-x: auto;
  border: none;
  position: relative;
  top: -6px;
  overflow: visible;
  
  
}

.section1::-webkit-scrollbar {
  visibility: hidden;
}

.div1 {
display: flex;
  flex-direction: column;
  min-width: 250px;
  height: 213px;
  position: relative;
 
  text-align: center;
 
  font-weight: bold;
  margin: 11px 11px;
  /* color: white; */
  background: white;
  transition: 0.5s;
  border-radius: 7px;
  cursor: pointer;
  /* border: 2px solid rgba(0, 0, 0, 0.2); */
}

.div1:hover{
 
  border: 2px solid rgba(0, 0, 0, 0.2);
  min-width: 300px;
  height: 400px;
 
  overflow: visible;

  transform:scaleY(1.2)

}
.a7{
  display: none;
  color: black;
  text-align: center;
}
.div1:hover .a7{
display: block;
color: black;

}
/* ---------------for first div----------------- */

.div1_inner_box{
  display: flex;
  text-align: center;
  margin: 20px;
  color: black;
}
.div1_offer{
  display: flex;
  width: 100%;
  height: 60px;
  /* background-color: blue; */
  justify-content: space-between;
}
.div1_offer1{
  display: flex;
  text-align: center;
  height: 60px;
  margin-left: 2%;
  /* background-color:orange; */
  font-weight: bold;
  font-family: Open Sans, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: black;
  justify-content:space-between;
  align-items: center;
}

.carousal_1{
  width:80%;
  height: 365px;
  /* background-color: #f3f2ee; */
  margin-bottom: 20px;
  overflow: hidden;
  margin:auto;
 
}

.div1 .a1{
  /* background-color:green; */
   width: 100%;
   height: 140px;
  
}
.a1 img{
  width: 100%;
  height: 100%;
 
 
}
.a2{
  /* left:0; */
  margin-right: 200px;
 color: black;
 font-family: Open Sans, sans-serif;
   font-size: 12px;
   font-weight: 50;
   /* position: relative; */
}
.div1 .a3{
  margin-top: 10px;
   width: 100%;
  text-align: left;
  margin-bottom: 10px;
}
.a3 ,.a6{
 margin-right: 113px;
 color: black;
 font-family: Open Sans, sans-serif;
   /* font-size: 12px; */
   font-weight: 50;
   font-size: 12px;
   /* position: relative; */
}
.a4{
 margin-right: 113px;
 color: black;
 font-family: Open Sans, sans-serif;
   /* font-size: 12px; */
   font-weight: 50;
   /* position: relative; */
   font-size: 12px;
}
.a5{
  align-items: baseline;
  display: flex;
  flex-direction: column;
}
/* mid style 2 */
.main2 {
  width: 100%;
  /* height: 428px; */
  /* margin: 200px auto; */
  /* overflow: hidden; */
  overflow: visible;
  position: relative;
  /* background: #d4e2fa; */
  height: 400px;
}




.section2 {
  width: 98%;
  height: 253px;
 
  margin: -10px auto;
  display: flex;
  justify-content: left;
  overflow-x: auto;
  border: none;
  position: relative;
  top: -6px;
  overflow: visible;
  
}

.section2::-webkit-scrollbar {
  visibility: hidden;
}

.div2 {
display: flex;
  flex-direction: column;
  min-width: 250px;
  height: 213px;
  position: relative;
 
  text-align: center;
 
  font-weight: bold;
  margin: 11px 11px;
  /* color: white; */
 
  transition: 0.5s;
  border-radius: 7px;
  cursor: pointer;
  /* border: 2px solid rgba(0, 0, 0, 0.2); */
}

.div2:hover{
 
  border: 2px solid rgba(0, 0, 0, 0.2);
 min-width: 300px;
  height: 400px;
  background-color: white;
  overflow: visible;
  transform:scaleY(1.2)
}
.a7{
  display: none;
  color: black;
  text-align: center;
}
.div2:hover .a7{
display: block;
color: black;
}
/* ---------------for first div----------------- */

.div2_inner_box{
  display: flex;
  text-align: center;
  margin: 20px;
  color: black;
}
.div2_offer{
  display: flex;
  width: 100%;
  height: 60px;
  /* background-color: blue; */
  justify-content: space-between;
}
.div2_offer1{
  display: flex;
  text-align: center;
  height: 60px;
  margin-left:2%;
  /* background-color:orange; */
  font-weight: bold;
  font-family: Open Sans, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: black;
  justify-content:space-between;
  align-items: center;
}

.carousal_2{
  width: 80%;
  height: 365px;
  /* background-color: #f3f2ee; */
  margin-bottom: 20px;
  overflow: hidden;
  margin:auto;
 
}

.div2 .a1{
  /* background-color:green; */
   width: 100%;
   height: 140px;
  
}
.a1 img{
  width: 100%;
  height: 100%;
 
 
}
.a2{
  /* left:0; */
  margin-right: 200px;
 color: black;
 font-family: Open Sans, sans-serif;
   font-size: 12px;
   font-weight: 50;
   text-align: left;
   /* position: relative; */
}
.div3 .a3{
  margin-top: 10px;
   width: 100%;
  text-align: left;
  margin-bottom: 10px;
}
.a3 ,.a6{
 margin-right: 113px;
 color: black;
 font-family: Open Sans, sans-serif;
   /* font-size: 12px; */
   font-weight: 50;
   font-size: 12px;
   /* position: relative; */
}
.a4{
 margin-right: 113px;
 color: black;
 font-family: Open Sans, sans-serif;
   /* font-size: 12px; */
   font-weight: 50;
   /* position: relative; */
   font-size: 12px;
}
.a5{
  align-items: baseline;
  display: flex;
  flex-direction: column;
}
 /* mid style 3 strt */

 .main3 {
  width: 100%;
  /* height: 428px; */
  /* margin: 200px auto; */
  /* overflow: hidden; */
  overflow: visible;
  position: relative;
  /* background: #d4e2fa; */
  height: 400px;
}




.section3 {
  width: 98%;
  height: 253px;
 
  margin: -10px auto;
  display: flex;
  justify-content: left;
  overflow-x: auto;
  border: none;
  position: relative;
  top: -6px;
  overflow: visible;
  
}

.section3::-webkit-scrollbar {
  visibility: hidden;
}

.div3 {
display: flex;
  flex-direction: column;
  min-width: 250px;
  height: 213px;
  position: relative;
 
  text-align: center;
 
  font-weight: bold;
  margin: 11px 11px;
  /* color: white; */
  background: white;
  transition: 0.5s;
  border-radius: 7px;
  cursor: pointer;
  /* border: 2px solid rgba(0, 0, 0, 0.2); */
}

.div3:hover{
 
  border: 2px solid rgba(0, 0, 0, 0.2);
  min-width: 300px;
  height: 400px;
  
  overflow: visible;
  transform:scaleY(1.2)
}
.a7{
  display: none;
  color: black;
  text-align: center;
}
.div3:hover .a7{
display: block;
color: black;
}
/* ---------------for first div----------------- */

.div3_inner_box{
  display: flex;
  text-align: center;
  margin: 20px;
  color: black;
}
.div3_offer{
  display: flex;
  width: 100%;
  height: 60px;
  /* background-color: blue; */
  justify-content: space-between;
}
.div3_offer1{
  display: flex;
  text-align: center;
  height: 60px;
 margin-left:2%;
  /* background-color:orange; */
  font-weight: bold;
  font-family: Open Sans, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: black;
  justify-content:space-between;
  align-items: center;
}

.carousal_3{
  width: 80%;
  height: 365px;
  /* background-color: #f3f2ee; */
  margin-bottom: 20px;
  overflow: hidden;
  margin:auto;
  margin-top:60px;
 
}

.div3 .a1{
  /* background-color:green; */
   width: 100%;
   height: 140px;
  
}
.a1 img{
  width: 100%;
  height: 100%;
 
 
}
.a2{
  /* left:0; */
  margin-right: 200px;
 color: black;
 font-family: Open Sans, sans-serif;
   font-size: 12px;
   font-weight: 50;
   /* position: relative; */
}
.div3 .a3{
  margin-top: 10px;
  width: 100%;
  text-align: left;
  margin-bottom: 10px;
}
.a3 ,.a6{
 margin-right: 113px;
 color: black;
 font-family: Open Sans, sans-serif;
   /* font-size: 12px; */
   font-weight: 50;
   font-size: 12px;
   /* position: relative; */
}
.a4{
 margin-right: 113px;
 color: black;
 font-family: Open Sans, sans-serif;
   /* font-size: 12px; */
   font-weight: 50;
   /* position: relative; */
   font-size: 12px;
}
.a5{
  align-items: baseline;
  display: flex;
  flex-direction: column;
}
 /* mid style 4 strt */

 .main4 {
  width: 80%;
  /* height: 428px; */
  /* margin: 200px auto; */
  /* overflow: hidden; */
  overflow: hidden;
  position: relative;
  /* background: #d4e2fa; */
  height: 400px;
  margin:auto;
}


#span_7,#span_8 ,#span_1,#span_2 ,#span_3,#span_4 ,#span_5,#span_6 {
  cursor: pointer;
   float:left;
  z-index: 1;
  border-radius: 50%;
   padding:2px 7px;
  border: 1px solid black;
  transition: .5s;
  margin:5px;
  font-size:20px;
}
#span_7:hover,#span_8:hover,#span_1:hover,#span_2:hover,#span_3:hover,#span_4:hover,#span_5:hover,#span_6:hover{
  background-color: rgb(194, 189, 189);
}


.section4 {
  width: 98%;
  height: 253px;
 
  margin: -10px auto;
  display: flex;
  justify-content: left;
  overflow-x: auto;
  border: none;
  position: relative;
  top: -6px;
  overflow: visible;
  
}

.section4::-webkit-scrollbar {
  visibility: hidden;
}

.div4 {
display: flex;
  flex-direction: column;
  min-width: 250px;
  
  position: relative;
 
  text-align: center;
 
  font-weight: bold;
  margin: 11px 11px;
  /* color: white; */
 
  transition: 0.5s;
  border-radius: 7px;
  cursor: pointer;
  /* border: 2px solid rgba(0, 0, 0, 0.2); */
}

.div4:hover{
 
  border: 2px solid rgba(0, 0, 0, 0.2);
 min-width: 300px;
  height: 400px;
  background-color:white;
  overflow: visible;
  transform:scaleY(1.2);
  z-index:99;
}
.a7{
  display: none;
  color: black;
  text-align: center;
}
.div4:hover .a7{
display: block;
color: black;
text-align: left;
}
/* ---------------for first div----------------- */

.div4_inner_box{
  display: flex;
  text-align: center;
  margin: 20px;
  color: black;
}
.div4_offer{
  display: flex;
  width: 100%;
  height: 60px;
  /* background-color: blue; */
  justify-content: space-between;
}
.div4_offer1{
  display: flex;
  text-align: center;
  height: 60px;
  margin-left:2%;
  /* background-color:orange; */

  font-family: Open Sans, sans-serif;
  font-size: 15px;
 
  color:black;
  justify-content:space-between;
  align-items: center;
}

.carousal_4{
  width: 100%;
  height: 365px;
  background-color: #f3f2ee;
  margin-bottom: 20px;
  overflow: hidden;
  margin: auto;
 
}
.div4 .a1{
  /* background-color:green; */
   width: 100%;
   height: 140px;
 
  
}
.a1 img{
  width: 100%;
  height: 100%;
 
 
}
.a2{
  /* left:0; */
 
 margin:2%;
 color:black;


   font-size: 12px;
   width:100%;
  
   /* position: relative; */
}
 .a3{
  
   width: 100%;
  text-align: left;
  margin-bottom: 10px;
  text-align:left;
  margin-top:0;
 color: black;
 font-family: Open Sans, sans-serif;
   /* font-size: 12px; */
   font-weight: 400;
   font-size: 14px;
   margin-left:2%;
   
}
.a6 {
  text-align: justify;
 opacity: .7;
  width:95%;
  margin:2%;
  
}

.a4{
  text-align: left;
font-weight: 100;
 color: rgb(110, 108, 108);

 margin-left:2%;
   /* font-size: 12px; */
  
   /* position: relative; */
   font-size: 12px;
   margin-bottom:0;
}
.a5{
  align-items: baseline;
  display: flex;
  flex-direction: column;
 
}
.carousal_3 .a3,.carousal_1 .a3{
  margin-top:0;
  
}

.carousal_4 h2,.carousal_3 h2,.carousal_2 h2,.carousal_1 h2{
  font-weight: 500;
  color: black;
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Fira Sans",Ubuntu,Oxygen,"Oxygen Sans",Cantarell,"Droid Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Emoji","Segoe UI Symbol","Lucida Grande",Helvetica,Arial,sans-serif;
}
#span_7,#span_8{
  margin-top:10px;
 
}