@import url('https://fonts.googleapis.com/css2?family=Average+Sans&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orelega+One&amp;display=swap');

.main-container {
    
    width: 100%;
    overflow: hidden;
    background: url(../images/kali.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: contain;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


body {
    font-family: "Average Sans", serif;
    font-weight: 500;
}

.hdd {
    font-family: "Orelega One", serif;
    font-weight: 400;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

.tophead-section {
    background: linear-gradient(45deg, #3d0f41, #150725);
    padding: 10px 0 10px;
    position: relative;
    z-index: 9;
    float: left;
    width: 100%;
}

.tophead-section:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: url(../images/bg.png) no-repeat;
    background-position: top;
    top: 0;
    z-index: -9;
    opacity: 11%;
    left: 0;
}

.head-design {
    justify-content: center;
    align-items: center;
    padding: 10px 0 0;
}

.head-contact {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.head-contact1 a {
    font-size: 50px;
    font-weight: 700;
    display: block;
    color: #fff;
}

.head-contact1 .click-chat {
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    color: #fa0;
    margin: -7px 0 0 0;
}

.marquee-line {
    float: left;
    width: 100%;
    padding: 10px 0;
    background: #fee0b9;
    
}

.marquee-left1 strong {
    padding: 8px 30px 8px 10px;
    clip-path: polygon(92% 0, 100% 50%, 92% 100%, 0 100%, 0% 50%, 0 0);
    background: #b40000;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
}

.marquee-right1 {
    padding: 9px 20px 3px 20px;
    font-size: 20px;
    font-weight: 600;
    color: white;
     background:  yellow;
  animation: mymove 0.4s infinite;
}
@keyframes mymove {
  from {background-color: yellow;}
  to {background-color: red;}
}

.main_services {
    float: left;
    width: 100%;
    padding: 50px 0px;
}

.aboutus-head {
    float: left;
    width: 100%;
    text-align: center;
}

.aboutus-head strong {
    font-size: 42px;
    color: #3a0f3f;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
}

.aboutus-head p {
    color: #b10000;
    font-size: 17px;
    margin: 10px 0 0;
    font-weight: 600;
    text-transform: capitalize;
    background: #fff4dd;
    padding: 8px 0;
}

.main-services1 {
    padding: 15px;
    margin-top: 40px;
    text-align: center;
}

.main-services2 {
    padding: 30px 30px 30px;
    box-shadow: 0 0 18px #e9e9e9;
    border-radius: 9px;
}

.main-services2 strong {
    font-size: 28px;
    padding: 0px 0px 0 0px;
    color: #3a0f3f;
    margin: 0px 0 0px 0;
    display: block;
    text-transform: capitalize;
    font-weight: 500;
}

.main-services2 p {
    color: #191919;
    font-size: 16px;
    line-height: 31px;
    padding: 12px 0px 12px 0px;
}

.main-services2 a {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  display: block;
  text-transform: uppercase;
  background-color: #3a0f3f;
  padding: 10px;
}

.main-services2 img {
    border: 15px solid #ba0000;
    margin: -56px 0 0;
}

.main-services2:hover {
    background: #ffaa00;
}

.aboutus-section {
    float: left;
    width: 100%;
    padding: 50px 0px;
}

.about-content {
    float: left;
    width: 100%;
    margin-top: 30px;
}

.about-content p {
    color: #232323;
    line-height: 31px;
    font-size: 15px;
    font-weight: 400;
    text-align: justify;
    padding: 10px 0 0;
}

.about-content p strong {
    font-weight: 600;
    color: #000000;
}

.about-content ul {
    margin: 19px 0 7px;
    list-style: none;
    background: linear-gradient(45deg, #3d0f41, #150725);
    padding: 20px 20px 20px;
    position: relative;
    z-index: 9;
}

.about-content ul:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: url(../images/bg.png) no-repeat;
    background-position: top;
    top: 0;
    z-index: -9;
    opacity: 11%;
    left: 0;
}

.about-content ul li {
    line-height: 27px;
    font-size: 15px;
    padding: 7px 0px 7px 20px;
    border-radius: 30px;
    color: #ffffff;
    position: relative;
}

.about-content ul li:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    border-radius: 30px;
    border: 2px solid #fa0;
    background: #2f0c37;
    left: 0px;
    top: 14px;
}

.talkastro-section {
    background: #fff6ed;
    position: relative;
    z-index: 9;
    float: left;
    width: 100%;
}

.talkastro-section:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: url(../images/bg.png) no-repeat;
    background-position: top;
    top: 0;
    z-index: -9;
    opacity: 9%;
    left: 0;
}

.talkastro-1 {
    padding: 40px;
    float: left;
    width: 100%;
}

.talkastro-2 a {
    padding: 40px 10px 30px;
    box-shadow: 1px 3px 11px 3px #dddddd;
    border-radius: 10px;
    background: #390e3e;
    float: left;
    width: 100%;
    text-align: center;
}

.talkastro-2 span {
    border-radius: 50%;
    box-shadow: 2px 1px 13px #ffffff80;
    height: 65px;
    width: 65px;
    line-height: 79px;
    background: #fff;
    display: block;
    color: #ff8800;
    margin: 0 auto 20px;
}

.talkastro-2 span i {
    font-size: 30px;
}

.talkastro-2 p {
    text-transform: uppercase;
    color: #ff9b00;
    font-weight: 600;
}

.talkastro-2 strong {
    padding: 15px 0 0 0;
    color: #ffffff;
    margin: 30px 0 0 0;
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    border-top: 1px solid #6e0d79;
}

.testimonials {
    float: left;
    width: 100%;
    padding: 50px 0px;
    background: #fa0;
}

.testimonails-1 {
    padding: 15px;
    float: left;
    width: 100%;
}

.testimonails-2 {
    padding: 25px;
    border-radius: 30px;
    background: #fff;
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
}

.testimonails-2 i {
    border-radius: 50%;
    position: absolute;
    display: block;
    line-height: 0;
    color: #390e3e;
    left: 0px;
    /* transform: rotate(359deg); */
    bottom: 0px;
    opacity: 3%;
    font-size: 100px;
    top: 150px;
    left: 50px;
}

.testimonails-2 p {
    color: #3b3b3b;
    font-size: 15px;
    line-height: 27px;
    font-weight: 500;
}

.testimonails-2 span {
    text-align: center;
    display: block;
    font-size: 16px;
    color: #c50000;
    text-transform: capitalize;
    font-weight: 700;
    padding: 16px 0 9px;
    margin: 0 0 10px;
    text-align: left;
}

.testimonails-2 strong {
    padding: 0px 10px 3px;
    background: #390e3e;
    display: inline-block;

}

.testimonails-2 strong i {
    color: #ff8800;
    font-size: 15px;
}

.testimonails-2 img {
    border-radius: 50%;
    border: 2px solid #b10000;
    width: 80px;
}

.footer {
    background: linear-gradient(45deg, black, #141414ee);
    padding: 50px 0px;
    position: relative;
    z-index: 9;
    float: left;
    width: 100%;
}

.footer:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: url(../images/bg.png) no-repeat;
    background-position: top;
    top: 0;
    z-index: -9;
    opacity: 9%;
    background-size: cover;
    left: 0;
}

.footer-center1 {
    padding: 10px 10px 20px;
    border-right: 1px solid #ffe0a3;
}

.footer-center1:last-child {
    border: 0;
    padding-left: 20px;
}

.footer-center2 {
    padding: 0px 6px 0px;
}

.footer-heading strong {
    font-size: 20px;
    text-transform: uppercase;
    color: #ffaa00;
    font-weight: 500;
}

.d-block {
    display: block !important;
}

.text-centent p {
    color: #fff;
    line-height: 31px;
    font-weight: 300;
    font-size: 15px;
}

.footer-list ul {
    list-style: none;
}

.footer-list ul li {
    padding: 5px 0px 5px 18px;
    font-size: 15px;
    font-weight: 300;
    color: #fff;
    position: relative;
    text-transform: capitalize;
}

.footer-list ul li:before {
    content: "";
    position: absolute;
    height: 9px;
    width: 9px;
    border: 2px solid #ffb700;
    border-radius: 50%;
    background: #101010;
    left: 0;
    top: 12px;
}

.footercontact-heading ul {
    padding: 11px 0 0 0;
    margin: 0;
    text-align: left;
    list-style: none;
}

.footercontact-heading ul li {
    display: block;
    padding: 7px 0px 7px;
    color: #fff;
    font-size: 20px;
}

.footercontact-heading ul li a {
    color: #fff;
}

.footercontact-heading ul li i {
    font-size: 18px;
    color: #ffb524;
    margin: 0px 0 -3px 0;
    padding-right: 10px;
}


.footer-copy p {
    color: #ffaa00;
}

.topservices-section {
    float: left;
    width: 100%;
    padding: 50px 0px;
}

.top-services1 {
    padding: 15px;
    float: left;
    width: 100%;
    margin-top: 20px;
}

.top-services3 {
    padding: 25px 0 0;
    background: linear-gradient(180deg, #2f0c37 61%, transparent 50%);
    text-align: center;
}

.top-services3 strong {
    font-size: 22px;
    padding: 5px 0 4px;
    text-transform: uppercase;
    display: block;
    background: #fff;
    color: #b10000;
}

.top-services3 p {
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 33px;
    color: #ffffff;
    padding: 12px 15px 25px;
}

.top-services3 img {
    border-radius: 50%;
    border: 15px solid #ffffff;
}

.top-services4 {
    position: relative;
    padding: 25px 0 0;
}

.top-services4:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 8%;
    top: 0;
    margin: 0 auto;
    background: #b10000;
    z-index: -9;
    left: 0;
    right: 0;
}

.top-services4 a {
    color: #ffffff;
    background: #109f00;
    display: block;
    border-radius: 40px;
    font-size: 20px;
    padding: 6px 0px 7px;
    text-transform: capitalize;
    font-weight: 500;
    text-shadow: 0 0 20px white;
    text-align: center;
}

.footer-bottom {
    float: left;
    width: 100%;
    border-bottom: 1px solid #fff;
    margin-bottom: 20px;
}

.why-section {
    float: left;
    width: 100%;
    padding-top: 50px;
}

.why-title {
    padding: 0;
    text-align: center;
}

.why-title span {
    color: #fa0;
    font-size: 32px;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 45px 10px;
    background: #390e3e;
    display: inline-block;
    border-radius: 60px;
}

.why-1 {
    padding: 12px;
    margin-top: 20px;
}

.why-2 {
    padding: 0;
}

.counter {
    border-radius: 15% 28%;
    text-align: center;
    position: relative;
    transition: all 0.3s ease 0s;
    background: #fa0;
    line-height: 35px;
    overflow: hidden;
    padding: 0 0 18px;
    max-width: 350px;
    margin: 0 auto;
}

.counter .counter-icon {
    padding: 0 0 94px;
}

.counter .counter-icon i {
    font-size: 40px;
    color: #390e3e;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    left: -15px;
    top: -20px;
    padding: 0 0 0 11px;
    width: 95px;
    height: 95px;
    line-height: 115px;
    font-weight: 600;
}

.counter .title {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    padding: 2px 8px 0px;
    background: #390e3e;
    border: 1px solid #ffffff;
    border-left: 0;
    border-right: 0;
}

.counter span {
    font-size: 42px;
    font-weight: 800;
    color: #000000;
    padding: 13px 0 0;
    display: block;
}

@media(min-width:992px) and (max-width:1200px){
}
@media(min-width:768px) and (max-width:991px){
    .col-sm-4{width: 50%;}
    .col-sm-3{width: 50%;}
    .head-contact1 a {
        font-size: 35px;
      }
      .head-contact {
        margin-top: 10px;
      }
}
@media(min-width:640px) and (max-width:767px){
    .head-contact1 a {
        font-size: 35px;
      }
      .head-contact {
        margin-top: 10px;
      }
      .aboutus-head strong {
        font-size: 35px;
      }
      .main_services .aboutus-head
      {
        margin-bottom: 0px;
      }
      .main-services1 {
        float: left;
        width: 100%;
      }
      .about-content {
        padding: 0px 20px;
      }
      .top-services4 {
        z-index: 1;
      }

}
@media(min-width:480px) and (max-width:639px)
{
    .head-contact1 a {
        font-size: 35px;
      }
      .head-contact {
        margin-top: 10px;
      }
      .aboutus-head strong {
        font-size: 35px;
      }
      .main_services .aboutus-head
      {
        margin-bottom: 0px;
      }
      .main-services1 {
        float: left;
        width: 100%;
      }
      .about-content {
        padding: 0px 20px;
      }
      .top-services4 {
        z-index: 1;
      }
.main-services1 {
  padding: 0;
}
}
@media(min-width:320px) and (max-width:479px)
{
    .head-contact1 a {
        font-size: 35px;
      }
      .head-contact {
        margin-top: 10px;
      }
      .aboutus-head strong {
        font-size: 35px;
      }
      .main_services .aboutus-head
      {
        margin-bottom: 0px;
      }
      .main-services1 {
        float: left;
        width: 100%;
      }
      .about-content {
        padding: 0px 20px;
      }
      .top-services4 {
        z-index: 1;
      }
.main-services1 {
  padding: 0;
}
}


/* Desktop only: hover par dropdown menu open */
@media (min-width: 768px) {
  .navbar-nav > li.dropdown:hover > .dropdown-menu {
    display: block;
  }
}
