*{
  box-sizing: border-box ;
  margin: 0px;
  padding: 0px;
  font-family: Euclid-Regular;
}
/* body{
  background-color: black;
  width: 100%;
} */
@font-face {
  font-family: Euclid-Regular;
  src: url(../Languages/Euclid-Regular.ttf);
}
:root{
  --bgc: #F1E4FD;
  --fontcolor : #7317cf;
}            
                /* HEADER CSS START */
                
/* Desktop screen view */
header {
  background-color: lightslategrey;
  background-image: url(../Images/Background\ Image.jpg);
  background-repeat: no-repeat;
  /* background-position: top center; */
  background-size: 100%;
  width: 100%;
  height: 50vw;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#top-bar {
  width: 100%;
  padding: 0.8vw;
  padding-right: 2vw;
  background-color: #ffa300;
  text-align: right;
  font-weight: bold;
  color: white;
  /* padding-right: 3%; */
}
#menu-icon {
  display: none;
}
#nav {
  display: flex;
}
#navbar-content {
  margin: 4vw 0vw 0vw 13vw;
}
#navbar-content > li {
  display: inline-block;
  margin: 0vw 0vw;
}
#free {
  color: white;
  background-color: orange;
}
#free:hover {
  background-color: #6e18d1;
  box-shadow: 0 0 6px 3px #6e18d1;
  transition: 1s;
}
.anchor {
  padding: 0.8vw 1.4vw;
  border-radius: 5vw;
  text-decoration: none;
  color: black;
  font-size: 1.1vw;
  font-weight: bold;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
#image {
  width: 13vw;
  margin: 2.5vw -2.5vw 0vw 10vw;
}
#content {
  margin: 9.5vw 0vw -3vw 5vw;
  color: #6e18d1;
  width: 45%;
  /* padding: 0px 0px 5px 0px; */
}
#header-h1 {
  font-family: 'Arial Narrow Bold', sans-serif;
  font-size: 2.9vw;
  font-weight: bolder;
  margin: 0vw;
  padding: 0vw;
}
#header-h2 {
  font-size: 4.6vw;
  font-weight: bolder;
  margin: 0vw;
  margin-top: -0.1vw;
  padding: 0vw;
}
#header-para {
  font-size: 1.5vw;
  font-stretch: condensed;
  padding: 0vw;
  font-weight: 600;
  margin-top: 1vw !important;
  margin-bottom: 1vw !important;
  margin: 0vw;
}
.anchor:hover {
  background-color: #6e18d1;
  color: white;
} 
#icon {
  width: 1.4vw;
  height: 1.1vw;
  color: white;
  padding-top: 0.1vw;
  padding-bottom: 0vw;
}
#header-form {
  border: 1px solid #6e18d1;
  border-radius: 5px;
  width: 98%;
  display: flex;
  justify-content: space-between;
  padding: 0.25vw;
}
#header-email {
  border: 0px;
  font-size: 1.5vw;
  font-weight: bold;
  padding: 1.5vw 1vw;
}
#header-email:focus {
  outline: none;
}
#header-submit {
  background-color: #6e18d1;
  color: white;
  padding: 1.2vw 2.5vw;
  border-radius: 5px;
  font-size: 1.5vw;
  font-weight: bold;
  border: none;
}
#header-submit:hover {
  background-color: black;
  transition: background-color 2s;
  cursor: pointer;}

/* Mobile screen view         */
@media (max-width: 600px) {
  header {
    background-image: none;
    background-color: #68349c;
    width: 100%;
    height: 140vw;
    box-sizing: border-box;
  }

  #top-bar {
    display: none;
  }
  #navbar-content {
    display: none;
  }
  #image {
    margin: 3vw 2vw;
    width: 25vw;
  }
  #menu-icon {
    display: flex;
    width: 6vw;
    height: 4vw;
    position: absolute;
    right: 5vw;
    top: 8vw;
  }
  #content {
    width: 93%;
    color: white;
    margin-top: 30vw;
  }
  #header-h1 {
    font-size: 170%;
    margin: 0px;
    padding-bottom: 5px;
  }
  #header-h2 {
    font-size: 6.3vw;
    margin: 0px;
    margin-top: -3px;
    padding: 0px;
  }
  #header-para {
    font-size: 3.5vw;
    font-weight: 500;
    /* margin-top: 20px; */
    padding-top: 15px;
    margin-right: 60px;
  }
  #header-form {
    display: flex;
    border: 1px white solid;
    width: 80vw;
    padding: 5px 5px;
    outline: white;
    border-radius: 5px;
  }
  #header-email {
    border: 0px;
    width: 70vw;
    padding: 0px 0px 0px 15px;
    background-color: white;
  }
  #header-submit {
    padding: 3vw;
    font-size: 2vw;
    margin: 0px;
 
  }
  #anchor:hover {
    background-color: #6e18d1;
    color: white;
  }
}
                                      /* HEADER CSS END */
.companies-logo{
  padding: 10px;
}

                                      /* Our services CSS Start */

#our-services{
    background-color:var(--bgc);
    padding-bottom: 5%;
}

        /* Image resize */
.card-img-top{
    width: 25%;
    height: 25%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px ;
    margin-bottom: 10px;
}
.card-img-top:hover{
    transition: all ;
    transform: scale(1.1);
}

.service-heading{
    color: var(--fontcolor);
    font-weight: 900;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 3%;
}
.card-title{
/* padding-bottom: 10px; */
font-weight: bold;
font-size: 18px;
color: var(--fontcolor) !important;

}
.card-text{
    padding-bottom: 5%;
    font-weight: 500;
    padding: 5px;
    color: var(--fontcolor);
    text-align: center;
    }
#card-box{
 border-radius: 20px;
 box-shadow: 0px 0px 5px  #7317cf;  
 min-height: 55vh;
max-width: 55vw;
margin: 15px;
}
  /* Our services CSS END */
/* -------------------------------------------------------------------------------- */
/* Marketing- Website Start */

.flex-container
{
  display: flex;
  flex-wrap: wrap;
  margin: 7% 3%;
  justify-content: space-around;
  }
.flex-container >div>img{
  width: 200px;

}
.flex-container >div{
margin: 2%;
}
/* Marketing website end */
/* ---------------------------------------------------------------------------------------------- */
          /* About us start */
  
    #about-us, #website-design, #google-my-business-seo, #local-seo, #google-ads, #social-media-marketing{
      padding-bottom: 20px;
    }      
    .about-us-img > img{
      width: 100%;
      padding-left: 2%;
      padding-bottom: 5%;
    }
  .list-star{
    width: 20px ;
    height: 20px;
    border: 1px solid transparent;
    border-radius: 360px;
    text-align: center;
    position: relative; 
    background-color: #7317CF;   
    color: white;
    margin: 5px 5px 5px 0px;
  }
  .list-star>i{
    position: absolute;
    left: 20%;
    top: 25%;
    font-size: 60%;
  }
 .list-check>i {
  position: absolute;
  left: 20%;
  top: 15%;
  font-size: 90%;
  font-weight: bold;
  }
  .list-check{
    width: 20px ;
    height: 20px;
    border: 1px solid transparent;
    border-radius: 360px;
    text-align: center;
    position: relative; 
    background-color: #7317CF;   
    color: white;
    margin: 5px 5px 5px 0px;
  }
  .list-star:hover{
    background-color:transparent;
    color: #7317CF;
  }
  .list-check:hover{
    background-color:transparent;
    color: #7317CF;
    font-size: large;
  }

    #about-us-h2{
      text-align: center;
      color: #7317CF;
      padding-top: 20px;
      padding-bottom: 40px;
      font-weight: 900;
      font-size: 50px
    }
    .about-us-text>p{
      font-size: 105%;
      font-weight: 650;
    }
    .li, .li>p{
      font-size: 100%;
      font-weight: 550;
      margin: 2px 10px;
       }
      #about-us-ul{
        margin-top: 5%;
      }
      #button{
        color: white;
        outline: none;
        background-color:#7317CF;
        font-size: 20px;
        width: 180px;
        height: 50px;
         border: none; 
        border-radius: 150px;
        margin-top: 5%;
        margin-left: 2%;
      }
       /* About-us End */
       /* --------------------------------------------------------------------------- */
       /* Website design start */

#website-design, #local-seo, #social-media-marketing, #faqs{
  background-color: #F7EEFF;
}


          /* website design end */
       /* -------------------------------------------------------------------------- */
         /*Feature-page-Start  */
         #features{
          padding-bottom: 6%;
         }
         /* .feature-rows{
          margin-left: 5%;
          margin-right: 5%;

         } */
         .feature-h5>h5{
          color: #7317CF;
          font-weight: bold;
         }
         .f-img > img:hover{
          transition: all;
          transform: scale(1.1);
         }
         #feature-h-para{
          text-align: center;
          font-weight: bold;
          /* margin-top: -40px !important;
          margin-bottom: 50px !important; */
         }
         div[class*="feature-column"]{
          border-radius: 15px;
          border: transparent;
          box-shadow: 0px 4px 6px 0 #EADAFB;
          padding: 10px;
          font-weight: bold;
          margin: 20px;
         }
         .feature-h5>h5,p{
          margin: 10px;
         }
         .feature-h5{
          max-width: 350px;
         }
.f-heading{
  margin-bottom: -40px;
  font-size: 200% !important;
}
         /* Feature-page-end */

         /* FAQs Start */
#faqs{
  padding: 5%;
  text-align: left;
}
.faqs-h2{
  margin-bottom: 60px;
  color: #7317CF;
  font-weight: bold;
  font-size: 300%;
}
.wajahat{
  margin-top: 20px !important;
}
.accordion-item{
  margin-top: 20px;
  border-radius: 30px !important;
  box-shadow: white !important;
  font-weight: bold !important;
}
.accordion-button{
  border-radius: 30px !important;
  box-shadow: white !important;
  font-weight: bold !important;
}
.accordion-button:focus{
  background-color: #7317CF !important;
  color: white;
  box-shadow: 0px 0px 5px white !important;
  
}
.accordion-button::after {
  background-image: initial;
}

.accordion-button:not(.collapsed)::after {
  background-image:initial;
}
       /* Footor-Css Start */


  footer{
    background-color: #1d003a;
    min-height: 100vh;
    color: white;
}
/* COLUMN 1 */
/* LOGO ? */
#footor-logo{
    width:70%;
    padding-left: 0px;
    margin-top: 143px;
    display: block;
    margin-left: 0px;
}
/* LIST */
.anchor-link{
    text-decoration: none;
    color: white;
}
.anchor-link:hover{
    text-decoration: underline;
}
.s-icon{
    margin-right: 4%;
}
.footor-h2{
    font-size: 220%;
    text-align: start;
}
.footor-ul, .footor-li{
    margin: 0;
    padding: 0;
    padding: 0.5%;
    font-size: 110%;
    list-style: none;
    text-align: start;
}

#column2{
    margin-top: 26%;
    padding: 0px;
}
#social-icon{
    text-align: left;
    display: block;
    font-size: 200%;
    padding-top: 5%;
}
.footor-li{
    display: flex;
    padding-top: 2%;
}
.col2{
    margin-top: -5px;
}
#icon1:hover{
    transition: all 1s;
    transform: rotateY(360deg) ;
    color: rgb(38, 38, 201);
}
#icon2:hover{
    transition: all 1s;
    transform: rotateY(360deg) ;
    color: rgb(252, 126, 147);
}
#icon3:hover{
    transition: all 1s;
    transform: rotateY(360deg) ;
    color: rgb(38, 38, 201);
}
/* Column 3 */
#footor-form{
    background-image: linear-gradient(to right, #6D19c2, #4c0594);
    margin-top: 18%;
    margin-bottom: 5%;
    padding: 2%;
    padding-top: 10%;
    padding-bottom: 15%;
    box-shadow: 0 0 30px #6b13c2 ;
    border-radius: 15px;
}
#footor-form-h2{
    text-align: center;
    font-size: 150%;
    padding-left: 2%;
    padding-right: 2%;

}
.ff-input{
    width: 90%;
    padding: 3% 2%;
    margin-top: 5%;
    border-radius: 10px;
    border: none;
    color: black;
    padding-left: 5%;
}
.ff-input:focus{
    outline: transparent;
}
#message{
    height: 120px;
}
#message::-webkit-input-placeholder { 
        position:absolute;
        left: 0px;
        top: 10px;
        padding-left: 5%;
}
#send{
    text-align: center;
    background-color: #8919f9;
    color: white !important;   
}
#send:hover{
    background-color: black;
    transition: all 2s;
}
#f-copyright{
    background-color: black;
    width: 100%;
    height:50px;
    text-align: center;
    padding-top: 5px;
    color: white;
}
@media (max-width:992px){
    #column2{
        margin-top: 40% !important;
    }
}
    
@media (width<1200px) {
    #column2{
        margin-top: 28%;
    }
}
@media (width<768px){
    #column2{
        margin-top: 10%;
        margin-left: 5%;
        width: 50%;
 }
    #column1 {
        margin-left: 3%;
        width: 50%;
    }
}
@media (width<768px){
  #column1 , #column2{
    width: 90%;
  }
}
    /* Footor-Css End */