/**/





.accordion{
	transform: translateZ(0);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.accordion > .accordion-toggle{
	position: absolute;
	opacity: 0;
	display: none;
}

.accordion > label{
	position: relative;
	display: block;
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 700;
	border-top: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
}

.accordion > label:after {
  position: absolute;
  top: 0px;
  right: 20px;
  font-family: fontawesome;
  transform: rotate(90deg);
  transition: .3s transform;
}

.accordion > section{
	height: 0;
	transition: .3s all;
	overflow: hidden;
}

.accordion > .accordion-toggle:checked ~ label:after{
 transform: rotate(0deg);
}

.accordion > .accordion-toggle:checked ~ section{
  height: 200px;
}

.accordion > section p {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 12px;
  line-height: 1.5;
}


















#box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}
.gradient-border {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

















.drop-shadow {
   position:relative;
 width:500px;
  height: 150px;
  background :#e3e3e3;
  color : rgba(0,0,0,.4);
  text-align : center;
  line-height : 150px;
  margin : 0 auto;
  color : rgba(0,0,0,.5);
  font-family : Tahoma; 
  text-shadow : 0 1px 0 #fff;
}

.drop-shadow a{
  text-decoration : none;
  color : #999999;
  font-family : Tahoma; 
}

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }






.headerback{
  text-align: center;
  padding: 50px;
  background-color: #78e26f;
  font-size:25pt
}











*{
    margin:0;
    padding:0;
    box-sizing:border-box

}
.wrapper{
    margin:100px auto;
    width:1200px;
}
.services{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
}
.single-service{
    flex-basis:400px;
    text-align:center;
    padding:40px;
    position:relative
}
.single-service:nth-child(1):before, .single-service:nth-child(1):after,.single-service:nth-child(2):before, .single-service:nth-child(2):after{
    content:"";
    position:absolute;
    width:80px;
    height:2px;
    background-color:#ff7720;
    right:-40px;
    bottom:-2px;
    z-index:1
}
.single-service:nth-child(1):after, .single-service:nth-child(2):after{
    transform:rotate(90deg)
}

.single-service:nth-child(1), .single-service:nth-child(2){
    border-bottom:1px solid #ddd;
    border-right:1px solid #ddd;
}
.single-service:nth-child(3){
    border-bottom:1px solid #ddd;
}
.single-service:nth-child(4), .single-service:nth-child(5){
    border-right:1px solid #ddd;
}

.service-icon{
    position:relative;
    margin-bottom:50px;
}
.service-icon:before{
    content:"";
    position:absolute;
    width:60px;
    height:60px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#ff7720;
    z-index:-1;
    transition:.3s
}
.single-service:hover .service-icon:before{
    border-radius:50%;
    background-color:#999
}

.service-icon i{
    color:#fff;
    font-size:22px;
}
.single-service h4{
    font-size:24px;
    text-transform:capitalize;
    margin-bottom:20px;
}











.services-titie {
  text-align: center;
  margin-top: 10px;
  position: relative;
}

.services-titie::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 3px;
  background-color: black;
  top: 150%;
  left: 50%;
  transform: translate(-50% , -50%);
}

.services-container {
  display: grid;
  grid-template-columns: repeat(3, 400px);
  gap: 30px;
  margin: 50px auto;
  padding: 30px;
  justify-content: center;
}

.services-box {
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transition: background-color .5s linear;
}

.service-Icon {
  display: inline-flex;
  width: 70px;
  height: 70px;
  border: 2px solid darkslategray;
  transform: rotate(45deg);
  margin-bottom: 30px;
  margin-top: 18px;
  justify-content: center;
  align-items: center;
  transition: background-color .5s linear;
}

.services-box:hover {
  background-color: teal;
  color: white;
}

.services-box:hover .service-Icon {
  background-color: tan;
  color: white;
}

.service-Icon i {
  font-size: 30px;
  transform: rotate(-45deg);
}

.services-title {
  margin-bottom: 10px;
  font-size: 20px;
}

.services-desc {
  font-size: 14px;
}





@media screen and (max-width: 600px) {
    .iframed {
        visibility: hidden;
        clear: both;
        float: right;
        margin: 5px auto;
        width: 22%;
        height: auto;
        display: none;
    }
}