/* 



1. Add your custom Css styles below

2. Place the this code in your template: 



 <link href="css/custom.css" rel="stylesheet">



*/

#topbar{background:#000;}

#topbar .top-menu > li > a{color:#fff !important;}

#topbar .social-icons li a{color:#fff !important;}

.nav-bg{}

.mid-head{float:right;background:#ff8e14;padding:5px 0px; color:#000;background: linear-gradient(88deg, #f86b11, #fd6e59);}

.brand-logo{position:relative;background:#fff;margin: 0px -15px;width: 20%;}

.brand-logo:after {

  content: "";

  position:absolute;

  margin: 0px -1px;

  width: 92%;

  height: 114%;

  /* transform:rotate(45deg); */

  background-color: #6aaf08; /* to see where it is */

  left:45%;

  top: -14%;

  background: url(../images/nav-curve.png);

  background-repeat: no-repeat;

}

.brand-logo .img11{margin:0px 20%;}

.mg-right-15{margin-right:-15px;}

#header .header-inner, #header #header-wrap{background:#ff8e14;padding:0px 10px 0px 0px; color:#000;background: linear-gradient(88deg, #f86b11, #fd6e59);}

#mainMenu nav > ul > li a:hover{color:#fff;}

.portfolio h2{font-size:15px;text-align:center;}

.portfolio .details {text-align:center;}

.btn-primary{background: linear-gradient(88deg, #f86b11, #fd6e59);border:none;border-color:unset !important;}

.abt-us{text-align:center;}

.testimonial .testimonial-item > img {

   display: block;

  float: none;

  width:100%;}

.d-none{display:none;}

#footer .footer-content{background: #141414;}

#footer a:not(.btn):not(:hover) {

    color: #8a8585;

}

#footer .widget .widget-title, #footer .widget h4{color: #f96c21;}

a:not(.btn):not(.badge):hover, a:not(.btn):not(.badge):focus, a:not(.btn):not(.badge):active {color:#f86b11;}

.heading-text.heading-line h1:before, .heading-text.heading-line h2:before, .heading-text.heading-line h3:before, .heading-text.heading-line h4:before, .heading-text.heading-line h5:before, .heading-text.heading-line h6:before{background-color: #f86b11;}

#mainMenu nav > ul > li .dropdown-menu > li > a:focus, #mainMenu nav > ul > li .dropdown-menu > li > a:hover, #mainMenu nav > ul > li .dropdown-menu > li > a:active, #mainMenu nav > ul > li .dropdown-menu > li > span:focus, #mainMenu nav > ul > li .dropdown-menu > li > span:hover, #mainMenu nav > ul > li .dropdown-menu > li > span:active, #mainMenu nav > ul > li .dropdown-menu > li [class*="col-"] > ul > li > a:focus, #mainMenu nav > ul > li .dropdown-menu > li [class*="col-"] > ul > li > a:hover, #mainMenu nav > ul > li .dropdown-menu > li [class*="col-"] > ul > li > a:active{color: #f96c21;}

.heading-text.heading-gradient h2{font-size:28px;}

.heading-text.heading-gradient h2 > * {

    -webkit-text-fill-color: transparent !important;

    -webkit-background-clip: text !important;

    background: radial-gradient(circle at left top, #ff8d14 9%, #f86a12 48%, #d6240f 91%);

}

.testimonial .testimonial-item > img {

    display: block;

    float: none;

    width: 75%;

    margin: 0px !important;

    padding: 0px;border-radius:0% !important;

}

.testimonial.testimonial-box .testimonial-item {

    padding: 15px;

    background-color: #ffffff;

    border-radius: 8px;

    margin: 0 auto;

    text-align: center;

}







.inspiro-slider{height:50vh !important;}

.sidebar-call{position:fixed;

  top: 80%;

  right: -11%;

  transform:translateY(-50%);

  width:250px;

  height:auto;

  padding:20px;

  box-sizing:border-box;

  transition:0.5s;

  z-index:9999999;display:none;}

 .sidebar-whatsapp img{width:20%;}

.sidebar-whatsapp{position:fixed;

  top: 85%;

  right: -14%;

  transform:translateY(-50%);

  width:250px;

  height:auto;

  padding:10px;

  box-sizing:border-box;

  transition:0.5s;

  z-index:9999999;

}

.sidebar-contact{

  position:fixed;

  top: 65%;

  right: -250px;

  transform:translateY(-50%);

  width:250px;

  height:auto;

  padding:15px;

  box-sizing:border-box;

  transition:0.5s;

  z-index:9999999;

  background: #fff;

}



 .sidebar-contact.active{

  right:0;

}

.sidebar-contact input,

.sidebar-contact textarea, .sidebar-contact select{

  width:100%;

  height:25px;min-height: 5px !important;

  padding:5px;

  margin-bottom:5px;

  box-sizing:border-box;

  border:1px solid rgba(0,0,0,.5);

  outline:none;border-radius: 0px;

}

.sidebar-contact h2{

  margin: -10px 0px 10px;

  padding:0;font-size:18px;

}

.sidebar-contact textarea{

  height:50px;

  resize:none;

}

.sidebar-contact input[type="submit"]{

  background: #f86b11;

  color:#fff;

  cursor:pointer;

  border:none;

  font-size: 16px;

  padding: 0;

}

.toggle{

  position: absolute;
    height: 28px;
    width: 200px;
    text-align: center;
    cursor: pointer;
    background: #f00;
    bottom: 51px;
    left: -180px;
    border-radius: 3px;

}

.toggle:before{

  /*content:'\f003';*/

  font-size: 13px;

    color: #fff;

    content: 'Request a Callback';

    padding: 1px;font-weight:600;

}

 .toggle.active:before{

  content:'x';

}

.toggle.active{width:30px;left:-15px;}

@media(max-width:768px)

{

    .sidebar-call{

        top: 95%;left: -5%;display: block;

    }

    .sidebar-whatsapp{

        top: 95%;

        right: -45%;

    }

.sidebar-contact{

    width:75%;

    height:55%;

    right:-75%;top:50%;

  }

.sidebar-contact .toggle{

    top:50%;

    transform:translateY(-50%);

    transition:0.5s;

  }

.sidebar-contact.active .toggle

  {

    top:0;

    right:0;

    transform:translateY(0);

  }

 .scroll{

    width:100%;

    height:100%;

    overflow-y:auto;

  }

 .content{

    padding:50px 50px;

  }

}







@media(max-width:1680px) and (min-width:1440px)

{

    .brand-logo:after {left: 58%;}

    /*.sidebar-contact{right: -17.5%;}*/

  .sidebar-whatsapp{right:-10%;}

}

@media(max-width:1920px) and (min-width:1680px)

{

    .brand-logo:after {left: 58%;}

   /* .sidebar-contact{right:-15%;}*/

  .sidebar-whatsapp{right:-9%;}

}



@media(max-width:480px) and (min-width:320px){
	/*.sidebar-contact{right:-75%;}*/
.slide{background-size:contain !important;}
.background-grey1.abt-us{margin-top:-200px;}
.bg-overlay{background: rgba(0, 0, 0, 0.19);opacity: .1;}

}



@media(max-width:768px) and (min-width:481px)

{

    .sidebar-contact{right:-75%;}

    .brand-logo:after {display:none;}

    .brand img {width:100%;}

    .sidebar-whatsapp{right:-35%;}

    

}





.sidebar-contact-inside-page{position:unset;margin-top:150px;margin-bottom:-150px;background: radial-gradient(circle at left top, #ff8d14 9%, #f86a12 48%, #d6240f 91%);border-radius: 5px;}

.sidebar-contact-inside-page input,.sidebar-contact-inside-page select {margin-bottom:10px;height:35px;border-radius: 3px;border: solid 1px #fff;}

 .sidebar-contact-inside-page textarea{height: 135px;border-radius: 3px;}

.sidebar-contact-inside-page h2 {margin: 5px 0px 15px;padding: 0;font-size: 24px;color: #fff;}

.abt-us .heading-text{margin-bottom:10px;text-align:left;}

.abt-us p{text-align:left !important;}

.abt-us h4{text-align:left; font-size:20px;}



/****** icon css by jamal 11-06-2023 *********/





.icon-box .icon img{width:130%}

.icon-box .service-box{border: solid 1px #d6d3d3;margin-bottom: 30px;border-radius: 5px;overflow: hidden;}

.icon-box .icon-box.process{margin-top:0px;width: 100%;margin-bottom: 0px;}

    

/************ prallx page design 12-07-2023 **********/

.parallx h1{font-size:14px;}

.parallx h2 span{font-size:28px;}

.parallx h2 span.blk {color:#000;}

.parallx .heading-text.heading-gradient h2 > span.blk{ -webkit-text-fill-color: transparent !important;

    -webkit-background-clip: text !important;

    background: radial-gradient(circle at left top, #111010 9%, #090909 48%, #000000 91%);font-weight:200;}

.parallx p{font-size:12px;color:#000;}

.parallax-container{background-attachment:fixed !important;}

.parallx-main .bg-overlay{opacity: .5 !important;}

.mb100{margin-bottom:100px;}

.parallx-main .bg-overlay{background: rgb(255 255 255 )!important;}



.para-feautr{ transition: transform 550ms;}

.para-feautr:hover {

    transform: translateX(20px);

  }
.inspiro-slider .slide .slide-captions {left:-10% !important;}

/*** New css for revamp ***/
#mainMenu nav > ul li ul {border-right: solid 1px #ddd;min-height: 250px;}
#mainMenu nav > ul > li.mega-menu-item .mega-menu-content {
    padding: 20px;
    background: linear-gradient(177deg, #f2f2f2, transparent);
}
#mainMenu nav > ul > li.mega-menu-item .mega-menu-content .mega-menu-title {color: #ff3410;}
.portfolio .head h2 span {
    font-size: 12px;
    color: #d2570a;
    font-style: italic;
}
/*New css for 24.10.2023 */
p.fs-125{font-size:1.25rem !important;}
p.fs-black{color:#000;}
.list-icon li span {
    font-weight: 600;
    color: #d6240f;
}
.cloud-infra-support h1{font-size:2rem;color: #f86b11;font-weight:600;}
.cloud-infra-support h1 span{color:#000;font-weight:400;font-size: 1.5rem;position:relative;top:-10px;}
.cloud-infra-support h2{margin: 24px 0px; font-size:1.75rem;color: #f86b11;font-weight:600;}
.cloud-infra-support h2 span{color:#000;font-weight:400;font-size: 1.25rem;position:relative;top:-10px;}
.cloud-infra-support .mb15{margin-bottom:15px;}
.cloud-infra-support .img-cloud{border-radius:5px;margin:0px 0px 10px;}
.cloud-infra-support h4{font-size:1.25rem;color: #f86b11;font-weight:600;}
.cloud-infra-support .why-choose-cloud-infra .card{border-bottom:solid 3px #ee5709;min-height:300px;}
.app-development h2{font-size:1.25rem;margin-left: -12px;}
.app-development .fs2 h2{font-size:2rem;}
.portfolio img{border-bottom:solid 2px #ddd;border-radius:5px;margin-bottom:8px;}
.portfolio .cant{margin-bottom:20px;}
.heading-new h2{color:#ee5709;font-size: 20px;font-weight: 900;text-align: center;}
.line-btm {
    border-bottom: solid 1px #f96c20;
}
.line-left {
    border-left: solid 1px #f96c20;
    position: absolute;
    top: 0%;
    left: 0%;
    min-height: 120px;
}
.copyright-content{background:#000;}

/* ==========================================================================
   Our Pricing 
   ========================================================================== */
#pricing .pricing-table {
  padding: 25px;
  border: 1px solid #ccc;
  -moz-transition: all .8s ease;
  -webkit-transition: all .8s ease;
  transition: all .8s ease;min-height:535px;max-height:525px; }
  #pricing .pricing-table h3 {
    font-size: 20px;
    color: #151948;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 11px; }
  #pricing .pricing-table h1 {
    color: #eb220a;
    font-size: 50px;
    font-weight: 500;
    position: relative;
    padding-left: 10px; }
  #pricing .pricing-table h1 span {
    font-size: 16px;
    position: absolute;
    left: 15%;
    top: 10px; }
	#pricing .pricing-table h2{position: relative;}
	#pricing .pricing-table h2 span {
    font-size: 16px;
    position: absolute;
    left: 40%;
    top: -15px;
    font-weight: 600; }
  #pricing .pricing-table ul {
    padding-bottom: 28px; padding-top: 20px;}
  #pricing .pricing-table ul li {
    font-size: 13px;
    font-weight: 400;
    color: #5e629c;
    display: block;
    line-height: 18px;
    border-bottom: dashed 1px #ddd;
    padding: 10px 0px;}
  #pricing .pricing-table:hover {
    border: 1px solid #fd8713;
    box-shadow: 0px 0px 25px 0px rgba(95, 95, 95, 0.24);
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease; }
	
/** Mobile Responsive css **/
@media screen and (max-width: 600px){
  #mainMenu nav > ul li ul {min-height:auto;}
  #mainMenu{height:300px;}
  #mainMenu nav > ul > li.mega-menu-item .mega-menu-content {background:transparent;}
  #mainMenu nav > ul > li .dropdown-menu > li [class*="col-"] > ul > li > a {color:#000;}
  #mainMenu nav > ul > li.mega-menu-item .mega-menu-content .mega-menu-title {color: #000;font-weight: 900;}
}