/*div{*/
/*    background-color:  purple;*/
/*    justify-content: center;*/
/*    align-items: center;*/
    /*text-align: center;*/
    /*margin: 2rem;*/
/*}*/

/*h1{*/
/*    margin: 2rem;*/
/*    color: white;*/
    /*text-align: center;*/
/*}*/


/* Global and Reset code starts here */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-weight: 500;
  
}
html{
  background-color: #fafafa;
  scroll-behavior: smooth;
  font-family: "Roboto", "san-serif";
}
body{
  background-color: #fff;
  width: 100rem;
  max-width: 100%;
  margin: auto;
  box-shadow: 0.1rem 0.1rem 0.1rem #c4c4c4, -0.1rem 0rem 0.1rem #c4c4c4;
}

.sect_centr{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  min-height: 90vh;
  background: linear-gradient(to top, #ff00f7d7,#e1ff00);
}
.sect_head{
  display:block;
  color: blue;
  font-size: 4rem;
  text-align: center;
  font-family: "Italianno", cursive;
  font-weight:500;
  margin:1.5rem;
  letter-spacing: 3px;
  font-weight: bold;
  transition: all 0.3s;
}

.sect_head:hover{
  border:2px solid blue ;
  border-radius: 15px;
  background-color: aqua;
  transform: scale(1.1);
} 

/* Global and Reset code ends here */

/* Header starts here */
header #navid{
display: flex;
position:sticky;
justify-content:space-between;
align-items:center;
/* left: 0; */
z-index: 10;
top: 0;
min-height: 60px; /* height: 60px; */
background: linear-gradient(to top, #ff00f7d7,#e1ff00);
}
#logodiv{
  display: flex;
  width: 23%;  
}
#imgid{
  width: 60px;
  height: 60px;
  margin-left: 15px;
  border: 2px solid rgb(0, 0, 255);
  border-radius: 8px;
  transition: all 0.3s;
}
#imgid:hover{
  margin-top: 1.5rem;
  margin-left: 2rem;
  transform: scale(1.5);
}
#icondiv{
  display: flex;
  width: 17%;  
}
nav{
    justify-content:space-between;
}
nav #icondiv #responBar{
  display: none;
}
#menudiv{
  display:flex;  
  width: 60%;  
}
#menudiv ul{
  display:flex;
  align-items: center;
  justify-content:right;
}
#menudiv ul li{
  display: flex;
  justify-content:right;
  transition: all 0.5s;
  /* align-content: space-evenly; */
  /* align-items: center; */
}
#menudiv ul li a{

  margin: 0.6rem;
  padding: 0.1rem;
  font-family: "Roboto",sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0428f3ed;
}

#menudiv ul li a:hover{
  background-color: #47f3df;
  padding: 0.4rem;
  border-radius: 9px;
}
/* Header Ends here */

/* Banner Section starts here */
#banerImg{
  height: 480px;
  width: 420px;
  border: 20px solid;
  border-bottom-color: red;
  border-top-color:#a52a2a;
  border-left-color:#a52a2a;
  border-right-color:   red;
  border-radius: 20px;
  transition: all 0.3s;
}
#banerImg:hover{
  transform: scale(1.1);
}
 #bannerSec{
  display:flex;  
  flex-direction: column;
  justify-content: space-evenly;
  
}  
#bannerSec #articldiv{
  display: flex;
  justify-content:space-between;
}
#bannerSec #articldiv article{
  /* flex-direction: column; */
  flex-basis: 60%;
  margin: 1rem 1rem 1rem 1.5rem; 
  
  text-align: justify;
  justify-content: space-evenly;
  padding: 0.6rem 2.1rem 2.1rem 2.1rem;
  transition: all 0.4s;
  /* box-shadow: 0.5rem 0.5rem 0.5rem #f87102e8;   */
  box-shadow: 0.5rem 0.5rem 0.5rem #f87102e8, -0.5rem -0.5rem 0.5rem #f87102e8;
  /* box-shadow: 0.6rem 0.6rem 0.6rem #c4c4c4, -0.6rem 0rem 0.6rem #c4c4c4; */
}
#bannerSec #articldiv #banerArticl p{
font-size: 1.7rem;
font-weight:bold;
font-family: "Roboto", sans-serif;
/* padding: 0.6rem 2.1rem 2.1rem 2.1rem;
transition: all 0.3s; */
}

#bannerSec #articldiv #banerArticl:hover{
  background-color: aqua;
  color: blue;
  border:2px solid blue ;
  border-radius: 15px;
  transform: scale(1.1);
  }
#bannerSec #articldiv aside{
  /* flex-direction: column; */
  justify-content: center;
  align-content:center ;
  align-items: center;
  flex-basis: 40%;
  margin: 1rem 1rem 1rem 3rem;
  padding-left: 3rem;
}
#bannerSec #articldiv aside figure{
  justify-content: center;
  align-content:center ;
  align-items: center;
  padding-top: 0.6rem;
}
#bannerSec #articldiv aside figure #figcapid{
  font-size: 1.4rem;
  text-align: left;
  /* font-family: "Italianno", cursive; */
  font-family: "Roboto", sans-serif;
  font-weight:bold;
  color: #0b0b0bdc;
  padding-left: 0.7rem;  
}

/* Banner Section starts here */

/* About Me Section starts here */
#aboutMeSec #aboutMeh3{
  display: block;
  text-align: center;
  margin-top: -2rem;
  color:#ff0101;
  font-size: 1.8rem;
  font-family:"Merriweather", sans-serif;
  font-weight: bold;
  font-style: italic;
  background-color:#f68cc1;
  padding: 0.3rem;
  border-radius: 10px;
} 
#mediv2nd{
  display: flex;
  
}
#mediv2nd div{
  flex-basis: 50%;
  
}
#mediv2nd #mediv2nd1{
  box-shadow: 0.5rem 0.5rem 0.5rem brown;
  flex-basis: 50%;
  margin-top: 1.5rem;
  margin-right: 1rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s;  
}
#mediv2nd #mediv2nd1:hover{
  background-color: peachpuff;
  transform: scale(1.1);
}

#mediv2nd #mediv2nd1 p{
  font-size: 1.8rem;
  font-weight:bold;
  font-family: "Roboto", sans-serif;
  padding: 0.6rem 2rem 2rem 2rem;
  text-align: justify;
  justify-content: space-evenly;
}
#mediv2nd #mediv2nd2{
  /* box-shadow: 1rem 1rem 0.5rem #f87102e8, -1rem -1rem 0.5rem #f87102e8;   */
  flex-basis: 50%;
  margin-top: 1.5rem;
  margin-right: 0.6rem;
  margin-left: 0.5rem;
  transition: all 0.3s;
}

#mediv2nd2{
  display:flex;
  flex-direction: column;
  padding-bottom: 1rem;
  
  /* width: 60px; */
  /* flex-wrap:wrap;    */
}
#mediv2nd2 div{
  display: flex;
  justify-content: space-between;
  
}
.skilldivcls{  
  flex-direction: column;
  border-radius: 0.8rem;
  border-top: 2px solid transparent ;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 5px solid transparent;
  /* border: 10px solid transparent; */
  /* background-color: blanchedalmond; */
  background-color:peachpuff;
  padding: 0.2rem 0.3rem;
  margin:0.5rem 0.5rem 0.5rem 0.5rem;    
  align-items: center;  
  transition: all 0.4s;
}
.skilldivcls:hover{
  transform: scale(1.1);
}
.skilldivcls h3{
  font-family:"Merriweather", sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: blue;
  text-align: center;
}
.skilldivcls p{
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  color:black;
  text-align: justify;
  justify-content:space-evenly;
}
#skilldiv19{
  width: 48%;
}
#skilldiv18 h3{
  font-size: 1.3rem;
}
#mediv2nd2 h4{
  text-align: center;
  font-size: 2rem;
  font-family: "Merriweather", sans-serif;
  color: blue;
}
#mediv2nd2 h4:hover{
  display: inline-block;
  text-align: center;
  justify-content: center;
  margin-left: 7rem;
  width: 60%;
  border-radius: 12px;
  background-color:aqua;
  transform: scale(1.1);
}
/* About Me Section Ends here */

/* Performance Section Starts here */
.h3class{
  display: block;
  text-align: center;
  margin-top: -1rem;
  margin-bottom: 2rem;
  color:#ff0101;
  font-size: 2rem;
  font-family:"Merriweather", sans-serif;
  font-weight: bold;
  font-style: italic;
  background-color:#f68cc1;
  padding: 0.3rem;
  border-radius: 10px;
} 
#performSec > #sliderContainerDiv1, #sliderContainerDiv2, #sliderContainerDiv3{
  display: flex;
  flex-basis: 50%;
  justify-content:center;
  align-items: center;
  padding: 1rem;
  gap:4rem;
  margin-bottom: 5rem;
}
#performSec > #sliderContainerDiv11, #sliderContainerDiv12, #sliderContainerDiv13{
  flex-basis: 50%;
  justify-content:center;
  align-items: center;
  padding: 1rem;
  gap:4rem;
  margin-bottom: 5rem;
  display:none;
} 

#performSec .slider{
  width: 600px;
  height: 350px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 3px 10px 15px 0px rgba(0, 0, 0, 0.4);
}

#performdiv2nd .imgcls {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
#performdiv3rd .imgcls2nd {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
#performdiv4th .imgcls3rd {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
#performdiv5th .imgcls4th {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
#performdiv6th .imgcls5th {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
#performdiv7th .imgcls6th {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
  /* this is for Load More =>  */
#performdiv12th .imgcls11th {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
#performdiv13th .imgcls12th {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
#performdiv14th .imgcls13th {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
#performdiv15th .imgcls14th {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
#performdiv16th .imgcls15th {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
#performdiv17th .imgcls16th {
  width: 600px;
  height: 350px;
  border-radius: 3px;
}
 /* Till Load More */

#performSec .slidCaptioncls{
  display: block;
  text-align: center;
  color: red;
  font-size: 2rem;
  font-family:"Merriweather", sans-serif;
  font-weight: bold;
  background-color:#e1ff00;
  padding: 1rem;
}
#performdiv2nd1 .ulcls {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
#performdiv2nd2 .ulcls2nd {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
#performdiv2nd3 .ulcls3rd {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
#performdiv2nd4 .ulcls4th {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
#performdiv2nd5 .ulcls5th {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
#performdiv2nd6 .ulcls6th {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
/* This for Load More => */
#performdiv12th1 .ulcls11th {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
#performdiv12th2 .ulcls12th {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
#performdiv12th3 .ulcls13th {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
#performdiv12th4 .ulcls14th {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
#performdiv12th5 .ulcls15th {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}
#performdiv12th6 .ulcls16th {
  display: flex;
  list-style: none;
  transition: all 1s ease;
}

/* Till for Load More */

#loadMoreBtn{
margin-bottom: 2rem;
padding: 1rem;
font-size: 1.5rem;
font-weight: bold;
background-color:#ff0280f9;
color:rgb(246, 255, 0);
border: 2px solid blue;
border-radius: 12px;
}
#websitdivId1st, #websitdivId2nd, #websitdivId3rd, #websitdivId4th, #websitdivId5th, #websitdivId6th{
  display: flex;
  align-items: center;
  justify-content:space-evenly;
  gap:1rem;
}
/* This for Load More => */
#websitdivId11th, #websitdivId12th, #websitdivId13th, #websitdivId14th, #websitdivId15th, #websitdivId16th{
  display: flex;
  align-items: center;
  justify-content:space-evenly;
  gap:1rem;
}
/* Till for Load More */

 #performSec .slidacls{
  padding: 1.1rem;
  margin-top: 1rem;
  margin-right: 1rem;
  display: inline-block;
  background-color: #f9046ee8;
  border: 2px solid #2f2cf5; 
  border-radius: 12px;
  text-align: center;
  color: #f6fe01;
  font-family: "Merriweather", sans-serif;
  font-size: 1.2rem;
  font-weight:bolder;
  align-items: center;
  
} 
#performSec .slidbtncls{
  padding: 1.1rem;
  margin-top: 1rem;
  margin-left: 1rem;
  display: inline-block;
  background-color: lime;
  border: 2px solid #2f2cf5; 
  border-radius: 12px;
  text-align: center;
  color: #2f2cf5;
  font-family: "Merriweather", sans-serif;
  font-size: 1.2rem;
  align-items: center;
  
} 
#popup-window, #popup-window2nd, #popup-window3rd, #popup-window4th, #popup-window5th, #popup-window6th{
  position: fixed;
  width: 300px;
  height: 200px;
  padding: 10px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 11;
  display: none;
  justify-content: center;
  align-items: center;
  
}
/* This for Load More */
#popup-window11th, #popup-window12th, #popup-window13th, #popup-window14th, #popup-window15th, #popup-window16th{
  position: fixed;
  width: 300px;
  height: 200px;
  padding: 10px;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 11;
  display: none;
  justify-content: center;
  align-items: center;
  
}
/* Till for Load More */

#performSec .popupcls{
  background: #03d7f4;
  border: 2px solid #f40404;
  border-radius: 12px;
}
#performSec .popuph1cls{
  text-align: center;
  font-family: "Merriweather", sans-serif;
  font-size: 1.3rem;
  padding: 0.6rem;
  color: #0602fd;
  font-weight: bold;
  text-decoration: underline;
  background-color:#f68cc1;
}

#performSec .popupPcls {
  font-family: "Merriweather", sans-serif;
  font-size: 1rem;
  padding: 0.6rem;
  color: #f80400;
  /* text-align: center; */
  justify-content: space-evenly;
  font-weight: bold; 
}
#performSec .popupBtncls{
  background-color:#f9046ee8;
  border: 2px solid blue;
  border-radius: 10px;
  padding: 0.6rem;
  font-size: 1rem;
  font-weight: bold;
  color: #ffff00;
  justify-content: center;
  margin-left: 6rem;
  

}
/* Performnce section Ends Here */

/* Offered Service section starts here */
#servicSec{
  max-width: 1350px;
  font-family: "Poppins", sans-serif;
  margin-bottom: 2rem;
  padding: 0;
  box-sizing: border-box;
  }

#servicContainerDiv{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #f4f4f4; */
  background: linear-gradient(to top, #ff00f7d7,#e1ff00); 
}

#servicSec .wrapper {
  max-width: 80%;  
}

#servicSec .wrapper .swiper-wrapper {
  width: 100%;
  height: 37em;
  display: flex;
  align-items: center;
  padding-top: 2.5em;  
  
}

#servicSec .wrapper .swiper-wrapper .card {
  width: 27.5em;
  height: 94%;
  background: #fff;
  border-radius: 2em;
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.2);
  padding: 0.5em 0.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.5em 2em;
  transition: all 0.4s;
}

#servicSec .wrapper .swiper-wrapper .card .title{
  color: red;
  font-weight: bold;
  font-size: 2em;
}
#servicSec #ecomTitlId{
  font-size: 1.6em;
}
#servicSec .wrapper .swiper-wrapper .card .name{
  color: rgb(0, 0, 0);
  font-weight: bold;
  font-size: 1.6em;
}
#servicSec .wrapper .swiper-wrapper .card .desc{
  color: rgb(22, 1, 255);
  font-weight: bold;
  font-size: 1.3em;
  text-align:justify;
  margin: 0.5em 0;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-right: 0;
  justify-content: space-evenly;  
}
#servicSec #wocomercP{
  font-size: 1.24em;
}
#servicSec #fbigP{
  font-size: 1.15em;
}
#servicSec #goglP{
  font-size: 1.15em;
}
#servicSec #ecomName{
  font-size: 1.3em;
}
#servicSec #desinSpanName{
  font-size: 1.3em;
}
#servicSec #desinPId{
  font-size: 1.2em;
}
#servicSec .card .image {
  display: flex;
  justify-content: center;
  width: 8em;
  height: 8em;
  /* border-radius: 25%; */
  /* border: 5px solid #4070f4; */
  padding: 4px;
  /* margin-bottom: 1em; */
}

#servicSec .card .image img {
  width: 100%;
  height: 100%;
  /* border-radius: 25%; */
  object-fit: cover;
  margin-right: 6px;
}

#servicSec .card .content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#servicSec .card .content .title {
  font-size: 1.5em;
  font-weight: 600;
  position: relative;
  top: 0.2em;
}

#servicSec .card .content .name {
  color: #4070f4;
}

#servicSec .card .content .btn {
  background: #4070f4;
  color: #fff;
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  cursor: pointer;
  display: none;
}

/* ::-webkit-scrollbar {
  width: 1px;
} */


/* Offered Service section Ends here */

/* Contact Section Starts here */


#contactContainerDiv{
  display: flex;
  flex-basis: 50%;
  justify-content: center;    
}
#contactSectionId iframe{
  width: 670px;
  height: 500px; 
  border: 2px solid red;
}
#mapDivId{
  margin: 1em;  
}
#contactDivId{
  display: flex;
  flex-direction: column;
  justify-content:start;
  gap: 1em;
  margin: 1em;
}
#contactDivId a, address, p{
  font-family: "Poppins", sans-serif;
  font-size: 1.5em;
}
#contactSectionId .contacth4{
  font-family: "Poppins", sans-serif;
  font-size: 1.9rem;
  text-align: center;
  color: #0602fd;
  justify-content: center;
  /* text-decoration: underline; */
  font-weight: bold;
}
#contactSectionId .contacth5{
  font-family: "Poppins", sans-serif;
  display: inline;
  font-size: 1.7rem;
  text-align: center;
  color: #0602fd;
  justify-content: center;
  /* text-decoration: underline; */
  font-weight: bold;
}
#contactSectionId #adresSpan{
  display: flex;
}

#contactSectionId #adresSpan address{
  padding-top: 0.3em;
  margin-left: 0.6em;
}
#contactSectionId #connectDiv{
  display: flex;
  flex-direction: column;
  box-shadow: 3px 10px 15px 0px rgba(0, 0, 0, 0.4);
  padding: 0.3em;  
  /* box-shadow: -2em -2em -3em rgba(0, 0, 0, 0.268) ; */
  /* box-shadow: 2em 2em 3em rgba(0, 0, 0, 0.268); */
  /* box-shadow: 0 0 2em rgba(0, 0, 0, 0.2); */
}
#contactSectionId #webConnectionId{
  display: flex;
  justify-content:space-evenly; 
  gap: 3.5em;
   
}
#contactSectionId .imgConectClas{
width: 4rem;
height: 4rem;
border: 3px solid rgb(237, 3, 3);
background-color: #ffa600;  
border-radius: 50%;
margin-bottom: 1rem;
padding: 0.6rem;

}
form{
  /* box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem #5e505ef3; */
  /* box-shadow: 3px 10px 15px 0px rgba(0, 0, 0, 0.4); */
  box-shadow: 5px 13px 17px 3px rgba(0, 0, 0, 0.4); 
 display: flex;
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 0.4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  margin-left: 1rem;
  margin-right: 1rem;
  /* color: #ffffff; */
  
 }
 
 .formItemClas{
   display: flex;
   margin-bottom: 1.5rem;
   justify-content: center;
   align-items: center;
 
 }
 .formItemClas label{
  font-family: "Poppins", sans-serif;
   font-size: 1.4rem;
   flex: 0.25;
   color: #0602fd;
   font-weight: bold;
   
 }
 .formItemClas input,textarea, select{
   flex: 0.75;
   width:40rem;
   padding: 1.2rem 1rem;
   border: none;
   border-radius: 0.6rem;
 }
 .form-btn-field{
 justify-content:end;

}
.contact_btn{
  width:16%;
  font-family: "Poppins", sans-serif;
  font-size: 1.7rem;
  text-align: center;
  color: #0602fd;
  background-color: #f3ab05;
  font-weight: bold;
  border: 2px solid red;
  border-radius: 10px;
  padding: 0.1rem;
  margin-right: 1rem;
}
/* Contact Section Ends here */


/* footer Starts here */
footer{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;  
  min-height: 6vh;
  padding: 0.6rem;
  background: linear-gradient(to top, #ff00f7d7,#e1ff00);
}
footer #footerdiv1st{
  flex-basis: 34%;
  border: 2px solid red;
  background-image: radial-gradient( farthest-corner at 240px 85px,rgb(255, 0, 0) 46%, transparent 0%, rgba(0, 124, 16, 0.996) 40%);
 }
footer #footerdiv2nd {
  flex-basis: 39%;
  border: 2px solid red;
background-image: radial-gradient( farthest-corner at 270px 95px,rgb(255, 0, 0) 50%, transparent 0%, rgba(0, 124, 16, 0.996) 40%);
 }
footer #footerdiv3rd {
  display: flex;
  justify-content: space-between;
  flex-basis: 27%;
  border: 2px solid red;
background-image: radial-gradient( farthest-corner at 220px 95px,rgb(255, 0, 0) 50%, transparent 0%, rgba(0, 124, 16, 0.996) 40%);
 }


/* background:radial-gradient/* background: linear-gradie(red,green) ; */

#footerImgid{
  width: 80px;
  height: 70px;
  margin-left: 10px;
  border: 2px solid rgb(0, 0, 255);
  border-radius: 8px;
  transition: all 0.3s;
}
#footerdiv1st a, address{
  margin-left: 0.8rem;
  font-family: "Poppins", sans-serif;
  font-size: 1em;
  color: #ffffff;
}
#footerdiv1st .iconImgCls{
 background-color: rgb(255, 196, 0);
 width: 1.2rem;
 height: 1.2rem;
 border-radius: 50%;
 padding: 0.2rem;
 color: black;
 
}

#footerH2Fst{
  margin-top: 0.5rem;
  display:block;
  color: #ffffff;
  font-size: 2rem;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight:900;
  font-weight: bold;
 }
 #footerH2Snd{
  display:block;
  color: #ffd900;
  font-size: 2.8rem;
  text-align: center;
  font-family: "Italianno", cursive;
  font-weight:900;
  word-spacing: 12px;
  letter-spacing: 2px;
  font-weight: bold;
 }
 footer .copyright_text{
  margin-top: 2.5rem;
  margin-left: 0.3rem;
  font-style: italic;
  font-size: 0.9rem;
  color: #ffd900;
  font-weight: bold;
 }
 #footerDiv3H3{
  display: block;
  margin-top: .1rem;
  color: #ffffff;
  margin-left: 0.5rem;
  font-size: 1.2rem;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
  font-style: italic;
 }
 #footerHousID{
  margin-top: 1rem;
  margin-right: 1rem;
  display: inline;
  align-items: end;
  width: 2rem;
  height: 2rem;
  color: white;
  background-color: white;
  border-radius: 50%;
 }
 #footerdiv3rdh3{
  display: inline;
  color: #ffd900; 
  /* margin-top: 4rem; */
  font-size: 2.4rem;
  margin-bottom: 3rem;
  margin-left: 0.9em;
  text-align: center;
  font-family: "Italianno", cursive;
  font-weight:900;
  word-spacing: 8px;
  letter-spacing: 2px;
}
#footerspan{
  margin-top: 4.5rem;
}
#footerSpanWeb{
  margin-top: 2rem;
  color: white;
  font-family: "Poppins", sans-serif;
  font-weight: bold;

}

 /* #footerImglst{
  display:none;
  margin-top: -5em;
  margin-left: 1.8em;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;  
  } */
/* footer Ends here  #ffd900*/

/* ressponsive in tablet PC starts here */

/* ressponsive in tablet PC ends here */

/* ressponsive in mobile phone starts max width 500px here */
@media screen and (max-width:470px){
  html{
    font-size: 70%;
  }
  /* Header responsive starts here */
  header #navid{
    flex-direction: column;
  }
  nav #icondiv #responBar{
    display: block;
    padding-top: 0.6rem;
    padding-left: 1rem;
  }
  nav #icondiv #responBar:hover{
    padding-right: 1rem;
    border-radius: 10px;
    background-color:#b428fb;
  }
   #navid .hiden{
    display:none;
   }    
  #menudiv ul{
    flex-direction: column;
    justify-content:center; 
    padding-left: 5rem;
      }
  #menudiv ul li a{
    font-size: 1.8rem;
    font-weight: 700;   
  }  
  /* Header responsive ends here */

  /* Banner Section responsive start here */
    #bannerHid{
    display:block;
    color: blue;
    font-size: 3.8rem;
    text-align: center;
    font-family: "Italianno", cursive;
    margin: 0.5rem;
    letter-spacing: 2px;
    font-weight: bold;
    transition: all 0.3s;
    }
    
    .bannerH{
      display:block;
      color: blue;
      font-size: 6rem;
      text-align: center;
      font-family: "Italianno", cursive;
      margin:1.5rem;
      letter-spacing: 3px;
      font-weight: bold;
      transition: all 0.3s;
    }
    #bannerSec #articldiv{
    display: flex;
    flex-direction:column;
    /* justify-content: center; */
    width: 100%;
    /* font-size: 60%; */
  }
  
  #bannerSec #articldiv #asid{
    padding-left: 0;
  }
  #banerImg{
    height: 450px;
    width: 390px;
    margin-left: -2.2rem;
    margin-right: 2rem;
    
  }
  
  
  /* Banner Section responsive ends here */
  /* About Me Section responsive Starts here */
  #mediv2nd{
    flex-direction:column;
    margin-bottom: 1.6rem ;
  }
  #mediv2nd2 .skilClas{
    display: flex;
    flex-direction: column;
  }
  .skilldivcls h3{
    font-family:"Merriweather", sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: blue;
    text-align: center;
  }
  .skilldivcls p{
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color:black;
    text-align: justify;
    justify-content:space-evenly;
  }
  /* About Me Section responsive Ends here */

  /* Performane Section responsive Starts here */
  

    
  #performSec  #sliderContainerDiv1, #sliderContainerDiv2, #sliderContainerDiv3{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    /* padding: 1rem; */
    gap:1rem;
  }
     
  #performdiv2nd, #performdiv3rd, #performdiv4th, #performdiv5th, #performdiv6th, #performdiv7th{
    display: flex;
    flex-direction: column;
  }
  
  #performdiv2nd, #performdiv3rd, #performdiv4th, #performdiv5th, #performdiv6th, #performdiv7th .slider {
    width: 400px;
    height: 250px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 3px 10px 15px 0px rgba(0, 0, 0, 0.4);
        
  }
  #performdiv12th, #performdiv13th, #performdiv14th, #performdiv15th, #performdiv16th, #performdiv17th .slider {
    width: 400px;
    height: 250px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 3px 10px 15px 0px rgba(0, 0, 0, 0.4);
    
  }
  /* #performdiv2nd1 .ulcls{
    height: 100%;
    list-style: none;  
  }
  #performdiv2nd2 .ulcls2nd{
    height: 400px;
    
  } */
  #projPerfId{
    font-size: 5rem;

  }
  #performSec .slidCaptioncls{
    display: block;
    text-align: center;
    color: red;
    font-size: 2rem;
    font-family:"Merriweather", sans-serif;
    font-weight: bold;
    background-color:#e1ff00;
    /* padding: 1rem; */
  }
  
    #performdiv2nd .imgcls {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
  }
    
  #performdiv3rd .imgcls2nd {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;
  }
  #performdiv4th .imgcls3rd {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;
  }
  
  #performdiv5th .imgcls4th {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;
  }
  #performdiv6th .imgcls5th {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;
  }
  #performdiv7th .imgcls6th {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;
  
  }
  #performdiv12th .imgcls11th {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;
  }
    
  #performdiv13th .imgcls12th {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;
  }
  #performdiv14th .imgcls13th {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;
  }
  
  #performdiv15th .imgcls14th {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;
  }
  #performdiv16th .imgcls15th {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;
  }
  #performdiv17th .imgcls16th {
    width: 400px;
    height: 250px;
    border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;    
  }
  #performSec #sliderWoocomh3{
    font-size: 1.8em;
  }
  #performSec > #sliderContainerDiv1, #sliderContainerDiv2, #sliderContainerDiv3{
    /* padding: 1rem;
    gap:4rem; */
    margin-bottom: 1rem;
  }  

  /* #servicSec{
    width: 20%;
  } */
/* Performane Section responsive Ends here */  

/* Service Section responsive Starts here */
#servicDivId1{
  margin-bottom: 6rem;
}
  #servicSec .wrapper .swiper-wrapper .card {
    width: 15%;
    height: 130%; 
    
  }
  #servicSec .wrapper .swiper-wrapper .card .title{    
    font-size: 2.6em;
  }
  #servicSec .wrapper .swiper-wrapper .card .name{    
    font-size: 1.8em;
  }
  #servicSec .wrapper .swiper-wrapper .card .desc{    
    font-size: 1.8em;    
  }
  #servicSec #webDevTitle{
    font-size: 2.5em;    
  }
  #servicSec .wrapper .swiper-wrapper .card .name{    
    font-size: 1.8em;
  }

  #servicSec #wocomercP{
    font-size: 1.8em;
  }
  #servicSec #fbigP{
    font-size: 1.6em;
  }
  #servicSec #goglP{
    font-size: 1.55rem;
    text-align:justify;
  }
  #servicSec #ecomName{
    font-size: 1.65em;
  } 
#servicSec #ecomTitlId{
  font-size: 1.75em;
}
#servicSec #seoName{
  font-size: 1.8em;
}
#servicSec #desinSpanName{
  font-size: 1.6em;
}
#servicSec #desinPId{
  font-size: 1.5em;
}
#servicSec .card .image {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 50%;
  height: 100%;
  /* border-radius: 25%; */
  /* border: 5px solid #4070f4; */
  padding: 3px;
  /* margin-bottom: 1em; */
}

#servicSec .card .image img {
  width: 7em;
  height: 7em;  
  /* border-radius: 25%; */
  /* object-fit: cover; */
  margin-right: 4px;
}


/* Service Section responsive Ends here */

/* Contact Section responsive Starts here */
#contactSectionId{
  margin-top: 5.2rem;
}

#contactSectionId #contactContainerDiv{
  flex-direction: column; 
  /* width: 90%; */
}
#contactSectionId .h3class{
  font-size: 2.4rem;
}
#contactSectionId .contacth4{
  font-size: 1.6rem;
}
#contactSectionId #conectMeId{
  font-size: 3rem;
}
#contactSectionId #mapH4Id{
  font-size: 1.7rem;
}
#contactSectionId iframe{
  width: 400px;
  height: 250x; 
  border: 2px solid red;
  margin-left: 0.5em;
  margin-right: 0.5em;
}
#contactSectionId #webConnectionId{
  margin-left: 0.5em;
  margin-right: 0.5em;
  gap: 1em;
}
#connectDiv{
margin-left: 0.6rem;
}
#contactSectionId .imgConectClas{
  width: 4em;
  height: 4em;
  border: 3px solid rgb(237, 3, 3);
  background-color: #ffa600;
  border-radius: 50%;
  margin-bottom: 1em;
  padding: 0.5em;
}
#contactSectionId #callaId{
 font-size: 1.8rem;
}
#contactSectionId address{
  font-size: 1.8rem;
}
#contactSectionId #idmonirmail{
  font-size: 1.6em;
}

  #formSectionId #formSecH2{
    font-size: 3.6em;
    display:block;
  color: blue;  
  text-align: center;
  font-family: "Italianno", cursive;
  font-weight:bold;
  margin:0.5rem;
  letter-spacing: 3px;
  font-weight: bold;
  transition: all 0.3s;
  }
  #formSectionId #formSecH3{
    font-size: 1.8em;
  }
  .h3class{
    margin-bottom: 1.5rem;
    font-size: 3rem;
  }

  form{
    /* box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem #5e505ef3; */
    /* box-shadow: 3px 10px 15px 0px rgba(0, 0, 0, 0.4); */
    width: 96%;
    box-shadow: 5px 13px 17px 3px rgba(0, 0, 0, 0.4); 
    padding: 0.5rem;
    margin-left: 0.3em;
    margin-right: 0.3em;
    margin-top: 1em;
    margin-bottom: 1em;
    /* color: #ffffff; */
    
   }
   
   .formItemClas{
    flex-direction: column;
     margin-bottom: .5rem;
     justify-content: center;
        
   }
   .formItemClas label{
    font-size: 2.4rem;
    }
   .formItemClas input,textarea, select{
    width:96%;
    }
   #btnDiv{
    margin-top: 0.8em;
    display:flex;
    flex-direction: row;
    
  }
  footer{
    flex-direction: column;
    
  }
 /* Footer responsive strats here */
 #footerdiv1st a, address{
  /* margin-left: 0.8rem;
  font-family: "Poppins", sans-serif; */
  font-size: 1.6em;
  /* color: #ffffff; */
}
#footerdiv1st address{
  margin-bottom: 0.6rem;

}
#footerdiv1st .iconImgCls{
 width: 2rem;
 height: 2rem;
 }

#footerH2Fst{
 font-size: 2.4rem;
 
 }
 #footerH2Snd{
  /* display:block;
  color: #ffd900; */
  margin-top: 0.5rem;
  font-size: 3.1rem;
  margin-bottom: 5rem;
  }
 footer .copyright_text{
   font-size: 1.5rem;
  margin-bottom: 0.5rem;
  }
 #footerDiv3H3, #footerHousID{
  font-size: 2.5rem;
  margin-bottom: 9.5rem;
  }
footer #footerdiv2nd {
  
background-image: radial-gradient( farthest-corner at 200px 95px,rgb(255, 0, 0) 50%, transparent 0%, rgba(0, 124, 16, 0.996) 40%);
 }

footer #footerdiv3rd {  
background-image: radial-gradient( farthest-corner at 220px 95px,rgb(255, 0, 0) 50%, transparent 0%, rgba(0, 124, 16, 0.996) 50%);

 }
 
 #footerHousID{
  width: 3rem;
  height: 3rem;
  margin-left: -2rem;
  
}
#footerImglst{
display:none;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;  
}
#footerdiv3rdh3{
  display: inline;
  color: #ffd900; 
  /* margin-top: 5rem; */
  font-size: 4rem;
  margin-bottom: 5rem;
  margin-left: 0.1em;
  text-align: center;
  font-family: "Italianno", cursive;
  font-weight:900;
  word-spacing: 2px;
  letter-spacing: 2px;
  /* font-weight: bold;  */

}
#footerspan{
  margin-top: 5rem;
}
#footerSpanWeb{
  margin-top: 3.5rem;
  /* margin-left: 0.1em; */
  margin-left: -9rem;
  margin-bottom: 0.7rem;
  color: white;
  font-family: "Poppins", sans-serif;
  font-size: 2em;
  font-weight: bold;
  /* margin-bottom: 1rem; */

}
 /* Footer responsive Ends here */

}

/* ressponsive in mobile phone ends here max width 500px */

/* ressponsive in mobile phone ends here max width 400px */


@media screen and (max-width:400px){
  html{
    font-size: 70%;
  }
  /* Header responsive starts here */
  header #navid{
    flex-direction: column;
  }
  nav #icondiv #responBar{
    display: block;
    padding-top: 0.6rem;
    padding-left: 1rem;
  }
  nav #icondiv #responBar:hover{
    padding-right: 1rem;
    border-radius: 10px;
    background-color:#b428fb;
  }
   #navid .hiden{
    display:none;
   }    
  #menudiv ul{
    flex-direction: column;
    justify-content:center; 
    padding-left: 5rem;
    }
  #menudiv ul li a{
    font-size: 1.8rem;
    font-weight: 700;   
  }  
  /* Header responsive ends here */

  /* Banner Section responsive start here */
    #bannerHid{
    display:block;
    color: blue;
    font-size: 3.3rem;
    text-align: center;
    font-family: "Italianno", cursive;
    font-weight:500;
    margin: 0.5rem;
    letter-spacing: 2px;
    font-weight: bold;
    transition: all 0.3s;
    }
    
    .bannerH{
      display:block;
      color: blue;
      font-size: 6rem;
      text-align: center;
      font-family: "Italianno", cursive;
      margin:1.5rem;
      letter-spacing: 3px;
      font-weight: bold;
      transition: all 0.3s;
    }
    #bannerSec #articldiv{
    display: flex;
    flex-direction:column;
    /* justify-content: center; */
    width: 100%;
    /* font-size: 60%; */
  }
  
  #bannerSec #articldiv #asid{
    padding-left: 0;
  }
  #banerImg{
    height: 350px;
    width: 350px;
    margin-left: -3.2rem;
    margin-right: 2rem;
    
  }
  
  
  /* Banner Section responsive ends here */
  /* About Me Section responsive Starts here */
  #aboutMeSec #aboutMeh3{
    font-size: 1.6rem;
    
  } 
  #mediv2nd{
    flex-direction:column;
    margin-bottom: 1.6rem ;
  }
  #mediv2nd2 .skilClas{
    display: flex;
    flex-direction: column;
  }
  .skilldivcls h3{
    font-family:"Merriweather", sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: blue;
    text-align: center;
  }
  .skilldivcls p{
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color:black;
    text-align: justify;
    justify-content:space-evenly;
  }
  /* About Me Section responsive Ends here */

  /* Performane Section responsive Starts here */
  
  #performSec #projPerfId{
      display:block;
      color: blue;
      font-size: 4.4rem;
      text-align: center;
      font-family: "Italianno", cursive;
      font-weight:500;
      margin:1.5rem;
      letter-spacing: 3px;
      font-weight: bold;
      transition: all 0.3s;
  }
    
  #performSec  #sliderContainerDiv1, #sliderContainerDiv2, #sliderContainerDiv3{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    /* padding: 1rem; */
    gap:1rem;
  }
     
  #performdiv2nd, #performdiv3rd, #performdiv4th, #performdiv5th, #performdiv6th, #performdiv7th{
    display: flex;
    flex-direction: column;
  }
  
  #performdiv2nd, #performdiv3rd, #performdiv4th, #performdiv5th, #performdiv6th, #performdiv7th .slider {
    width: 350px;
    height: 250px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 3px 10px 15px 0px rgba(0, 0, 0, 0.4);
        
  }
  #performdiv12th, #performdiv13th, #performdiv14th, #performdiv15th, #performdiv16th, #performdiv17th .slider {
    width: 350px;
    height: 250px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 3px 10px 15px 0px rgba(0, 0, 0, 0.4);
    
  }
  /* #performdiv2nd1 .ulcls{
    height: 100%;
    list-style: none;  
  }
  #performdiv2nd2 .ulcls2nd{
    height: 400px;
    
  } */
  #projPerfId{
    font-size: 5rem;

  }
  #performSec .slidCaptioncls{
    display: block;
    text-align: center;
    color: red;
    font-size: 1.7rem;
    font-family:"Merriweather", sans-serif;
    font-weight: bold;
    background-color:#e1ff00;
    /* padding: 1rem; */
  }
  #performSec #sliderWoocomh3{
    font-size: 1.6em;
  }
  
    #performdiv2nd .imgcls {
    width: 350px;
    height: 250px;
  }
    
  #performdiv3rd .imgcls2nd {
    width: 350px;
    height: 250px;
  }
  #performdiv4th .imgcls3rd {
    width: 350px;
    height: 250px;
  }
  
  #performdiv5th .imgcls4th {
    width: 350px;
    height: 250px;
  }
  #performdiv6th .imgcls5th {
    width: 350px;
    height: 250px;
      }
  #performdiv7th .imgcls6th {
    width: 350px;
    height: 250px;
     
  }
  #performdiv12th .imgcls11th {
    width: 350px;
    height: 250px;
    
  }
    
  #performdiv13th .imgcls12th {
    width: 350px;
    height: 250px;
    /* border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem; */
  }
  #performdiv14th .imgcls13th {
    width: 350px;
    height: 250px;
    /* border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem; */
  }
  
  #performdiv15th .imgcls14th {
    width: 350px;
    height: 250px;
    /* border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem; */
  }
  #performdiv16th .imgcls15th {
    width: 350px;
    height: 250px;
    /* border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem; */
  }
  #performdiv17th .imgcls16th {
    width: 350px;
    height: 250px;
    /* border-radius: 3px;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 1rem;     */
  }
  #performSec .slidacls{
    padding: 0.5rem;
    margin-top: 1rem;
    /* margin-right: 1rem; */
    display: inline-block;
    background-color: #f9046ee8;
    border: 2px solid #2f2cf5; 
    border-radius: 12px;
    text-align: center;
    color: #f6fe01;
    font-family: "Merriweather", sans-serif;
    font-size: 1.2rem;
    font-weight:bolder;
    align-items: center;
    
  } 
  #performSec .slidbtncls{
    padding: 0.5rem;
    margin-top: 1rem;
    /* margin-left: 1rem; */
    display: inline-block;
    background-color: lime;
    border: 2px solid #2f2cf5; 
    border-radius: 12px;
    text-align: center;
    color: #2f2cf5;
    font-family: "Merriweather", sans-serif;
    font-size: 1.2rem;
    align-items: center;
    
  } 
  #popup-window, #popup-window2nd, #popup-window3rd, #popup-window4th, #popup-window5th, #popup-window6th{
    position: fixed;
    width: 300px;
    height: 200px;
    padding: 10px;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11;
    display: none;
    justify-content: center;
    align-items: center;
    
  }
  /* This for Load More */
  #popup-window11th, #popup-window12th, #popup-window13th, #popup-window14th, #popup-window15th, #popup-window16th{
    position: fixed;
    width: 300px;
    height: 200px;
    padding: 10px;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11;
    display: none;
    justify-content: center;
    align-items: center;
    
  }
  /* Till for Load More */
  
  #performSec .popupcls{
    background: #03d7f4;
    border: 2px solid #f40404;
    border-radius: 12px;
  }
  #performSec .popuph1cls{
    text-align: center;
    font-family: "Merriweather", sans-serif;
    font-size: 1.3rem;
    padding: 0.6rem;
    color: #0602fd;
    font-weight: bold;
    text-decoration: underline;
    background-color:#f68cc1;
  }
  
  #performSec .popupPcls {
    font-family: "Merriweather", sans-serif;
    font-size: 1rem;
    padding: 0.6rem;
    color: #f80400;
    /* text-align: center; */
    justify-content: space-evenly;
    font-weight: bold; 
  }
  #performSec .popupBtncls{
    background-color:#f9046ee8;
    border: 2px solid blue;
    border-radius: 10px;
    padding: 0.6rem;
    font-size: 1rem;
    font-weight: bold;
    color: #ffff00;
    justify-content: center;
    margin-left: 6rem;
    
  
  }

  #performSec > #sliderContainerDiv1, #sliderContainerDiv2, #sliderContainerDiv3{
    /* padding: 1rem;
    gap:4rem; */
    margin-bottom: 0.6rem;
  }


  /* #servicSec{
    width: 20%;
  } */
/* Performane Section responsive Ends here */  

/* Service Section responsive Starts here */

/* #servicSec .wrapper {
  max-width: 20%;  
} */
/* #servicSec #servicCapId{
  display:block;
  color: blue;
  font-size: 6em;
  text-align: center;
  font-family: "Italianno", cursive;
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  letter-spacing: 3px;
  font-weight: bold;
  transition: all 0.3s;
} */
#servicSec .h3class{
  display: block;
  text-align: center;
  margin-top: -1.5rem;
  margin-bottom: 4rem;
  color:#ff0101;
  font-size: 2rem;
  font-family:"Merriweather", sans-serif;
  font-weight: bold;
  font-style: italic;
  background-color:#f68cc1;
  padding: 0.3rem;
  border-radius: 10px;
} 
#servicSec .wrapper .swiper-wrapper .card {
    width: 15%;
    height: 130%; 
    
  }
  #servicSec .wrapper .swiper-wrapper .card .title{    
    font-size: 2.6em;
  }
  #servicSec .wrapper .swiper-wrapper .card .name{    
    font-size: 1.8em;
  }
  #servicSec .wrapper .swiper-wrapper .card .desc{    
    font-size: 1.7em;    
  }
  #servicSec #webDevTitle{
    font-size: 2.2em;
  }
  #servicSec #wocomercP{
    font-size: 1.8em;
  }
  #servicSec #fbigP{
    font-size: 1.6em;
  }
  #servicSec #goglP{
    font-size: 1.5em;
    text-align:justify;
  }
  #servicSec #ecomName{
    font-size: 1.6em;
  } 
#servicSec #ecomTitlId{
  font-size: 1.8em;
}
#servicSec #seoName{
  font-size: 1.8em;
}
#servicSec #desinSpanName{
  font-size: 1.6em;
}
#servicSec #desinPId{
  font-size: 1.6em;
}
#servicSec .card .image {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 50%;
  height: 100%;
  /* border-radius: 25%; */
  /* border: 5px solid #4070f4; */
  padding: 3px;
  /* margin-bottom: 1em; */
}

#servicSec .card .image img {
  width: 7em;
  height: 7em;  
  /* border-radius: 25%; */
  /* object-fit: cover; */
  margin-right: 4px;
}


/* Service Section responsive Ends here */

/* Contact Section responsive Starts here */

#contactSectionId #ourConatctId{
  margin-top: 0.8em;
}

#contactSectionId #contactContainerDiv{
  flex-direction: column; 
  /* width: 90%; */
}
#contactSectionId .contacth4{
  font-size: 1.6rem;
}
#contactSectionId #conectMeId{
  font-size: 3.5rem;
}
#contactSectionId #mapH4Id{
  font-size: 1.4rem;
} 
#contactSectionId iframe{
  width: 344px;
  height: 290px; 
  border: 2px solid red;
  margin-left: 0.5em;
  margin-right: 0.5em;
}
#contactSectionId #webConnectionId{
  margin-left: 1em;
  margin-right: 1em;
  gap: 1em;
}
#connectDiv{
margin-left: 0.6rem;
}
#contactSectionId address{
  font-size: 1.5rem;
}
#contactSectionId .imgConectClas{
  width: 4em;
  height: 4em;
  border: 2px solid rgb(237, 3, 3);
  background-color: #ffa600;
  border-radius: 50%;
  margin-bottom: 1em;
  padding: 0.5em;
}

  #contactSectionId #idmonirmail{
    font-size: 1.3em;
  }
  #formSectionId #formSecH2{
  font-size: 3.6em;
  display:block;
  color: blue; 
  text-align: center;
  font-family: "Italianno", cursive;
  margin:0.5rem;
  letter-spacing: 2px;
  font-weight: bold;
  transition: all 0.3s;
  }
  #formSectionId #formSecH3{
    font-size: 1.6em;
  }
.h3class{
  margin-bottom: 0.5rem;
}
  form{
    /* box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem #5e505ef3; */
    /* box-shadow: 3px 10px 15px 0px rgba(0, 0, 0, 0.4); */
    width: 96%;
    box-shadow: 5px 13px 17px 3px rgba(0, 0, 0, 0.4); 
    padding: 0.5rem;
    margin-left: 0.3em;
    margin-right: 0.3em;
    margin-top: 1em;
    margin-bottom: 1em;
    /* color: #ffffff; */
    
   }
   
   .formItemClas{
    flex-direction: column;
     margin-bottom: .5rem;
     justify-content: center;
        
   }
   .formItemClas label{
    /* font-family: "Poppins", sans-serif; */
     font-size: 1.7rem;
     /* flex: 0.25;
     color: #0602fd;
     font-weight: bold; */
     
   }
   .formItemClas input,textarea, select{
    
     width:96%;
     /* width:40rem;
     padding: 1.2rem 1rem;
     border: none;
     border-radius: 0.6rem; */
   }
   #btnDiv{
    margin-top: 0.8em;
    display:flex;
    flex-direction: row;
    
  }
  footer{
    flex-direction: column;
    
  }
 /* Footer responsive strats here */
 #footerdiv1st a, address{
  /* margin-left: 0.8rem;
  font-family: "Poppins", sans-serif; */
  font-size: 1.4em;
  /* color: #ffffff; */
}
#footerdiv1st address{
  margin-bottom: 0.6rem;

}
#footerdiv1st .iconImgCls{
 /* background-color: rgb(255, 196, 0); */
 width: 1.5rem;
 height: 1.5rem;
 /* border-radius: 50%;
 padding: 0.2rem;
 color: black; */
 
}

#footerH2Fst{
  /* margin-top: 0.5rem;
  display:block;
  color: #ffffff; */
  font-size: 2rem;
  /* text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight:900;
  font-weight: bold; */
 }
 #footerH2Snd{
  /* display:block;
  color: #ffd900; */
  margin-top: 0.5rem;
  font-size: 2.6rem;
  margin-bottom: 5rem;
  /* text-align: center;
  font-family: "Italianno", cursive;
  font-weight:900;
  word-spacing: 12px;
  letter-spacing: 2px;
  font-weight: bold; */
 }
 footer .copyright_text{
  /* margin-top: 5.5rem; */
  /* margin-left: 0.5rem;
  font-style: italic;  */
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  /* color: #ffd900;
  font-weight: bold; */
 }
 #footerDiv3H3, #footerHousID{
  /* display: inline-block;
  margin-top: 1.9rem;
  color: #ffffff;
  margin-left: 0.5rem; */
  font-size: 1.8rem;
  margin-bottom: 9.5rem;
  /* font-family: "Poppins", sans-serif;
  font-weight: bold;
  font-style: italic;
 } */
}

footer #footerdiv1st{
  flex-basis: 34%;
  border: 2px solid red;
  background-image: radial-gradient( farthest-corner at 200px 85px,rgb(255, 0, 0) 46%, transparent 0%, rgba(0, 124, 16, 0.996) 40%);
 }

footer #footerdiv2nd {  
background-image: radial-gradient( farthest-corner at 175px 95px,rgb(255, 0, 0) 50%, transparent 0%, rgba(0, 124, 16, 0.996) 40%);
 }

footer #footerdiv3rd {  
background-image: radial-gradient( farthest-corner at 180px 95px,rgb(255, 0, 0) 50%, transparent 0%, rgba(0, 124, 16, 0.996) 50%);


 }
 
 #footerHousID{
  width: 3rem;
  height: 3rem;
  
}
#footerImglst{
display:none;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;  
}
#footerdiv3rdh3{
  display: inline;
  color: #ffd900; 
  /* margin-top: 5rem; */
  font-size: 3.2rem;
  margin-bottom: 4rem;
  margin-left: 0.9em;
  text-align: center;
  font-family: "Italianno", cursive;
  font-weight:900;
  word-spacing: 2px;
  letter-spacing: 2px;
  /* font-weight: bold;  */

}
footer #footerdiv3rda #footerHousID {
  margin-top: 1rem;
  margin-left: -3em;
  display:inline-block;
  width: 3rem;
  height: 3rem;
  /* align-items:start; */
  color: white;
  background-color: white;
  border-radius: 50%;
}
#footerspan{
  margin-top: 6rem;
  margin-left: -7.5em;
}
#footerSpanWeb{
  margin-top: 4rem;
  margin-left: -1.5em; 
  color: white;
  font-family: "Poppins", sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 1em;
  /* margin-bottom: 1rem; */

}
 /* Footer responsive Ends here */

}

/* ressponsive in mobile phone ends here max width 500px */