/* 
Templete Name: Doob
Templete URL: https://coderitsoluition.com
Author: Akash
Author URL: https://akash.me
tags: Simple Agency Templete
 */
 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html{
      font-size: 62.5%;
  }
  body{
      font-family: 'Work Sans', sans-serif;
      font-size: 16px;
      font-size: 1.6rem;
  }
  :root{
      --color1:#314584;
      --color2:#ff3946;
      --color3:#ffffff;
      --color4:#314584;
  }
  h1, h2, h3, h5, h6 p{
      margin: 0;
  }
  h1{
      font-size: 60px;
      font-size: 6rem;
      font-weight: 600;
      color: var(--color1);
      line-height: 65px;
      line-height: 6.5rem;
  }
  h2{
      font-size: 40px;
      font-size: 4rem;
      font-weight: 600;
      color: var(--color1);
      line-height: 65px;
      line-height: 5rem;
  }
  h3{
      font-size: 27px;
      font-size: 2.7rem;
      font-weight: 600;
      color: var(--color1);
  }
  h4{
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--color1);
  }
  ul{
      margin: 0;
      padding: 0;
      list-style: none;
  }
  a{
      text-decoration: none;
      display: block;
      text-transform: capitalize;
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--color1);
  }
  .btn1{
      padding: 15px 30px;
      background:var(--color3);
      box-shadow: 2.5px 4.33px 10px 0px rgba( 25, 45, 51, 0.15);
      border-radius: 0.5rem;
  }
  .btn2{
      display: inline-block;
      padding: 20px  40px;
      padding: 2rem  4rem;
      background: var(--color2);
      color: var(--color3);
      border-radius: 3rem;
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 600;
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
  }
  p{
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 400;
      color: #9d98a4;
      line-height: 30px;
      line-height: 2.7rem;
  }
  .section-padding{
      padding: 70px 0;
      padding: 7rem 0;
  }
  /*********************************/
  
      /******** 1.Header Area css ********/
  
          /*********************************/
  .header-area{
      background: url(../assets/images/background.png);
      background-repeat: no-repeat;
      background-position: right 0px;
      background-position: right 0rem;
      background-size: contain;
      margin-top: 2rem;
  }
  .container{
      max-width: 1170px;
      width: 100%;
      margin: auto;
  }
  .header-top{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
  }
  .logo{
      position: absolute;
      margin-left: -130px;
      margin-left: -13rem;
  }
  .menu ul{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
  }
  .menu ul li a{
      margin: 45px;
      margin: 4.5rem;
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
  }
  .menu ul li a:hover, .menu ul li.active a{
      color: var(--color2);
  }
  .menu ul li a:first-child{
      margin-left: 0;
  }
  .click-event i{
        font-size: 32px;
        font-size: 3.2rem;
  }
  /* header bennar area css */
  .header-bennar {
      padding: 80px 0;
      padding: 8rem 0;
    }
  .form-contant select{
      background: none;
      border: none;
      text-transform: uppercase;
      font-size: 16px;
      font-size: 1.6rem;
      font-weight: 600;
      margin-right: 45px;
      margin-right: 4.5rem;
  }
  .form-contant .btn1{
      display: inline-block;
      color: var(--color2);
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
  }
  .form-contant .btn1:hover{
      background: var(--color2);
      color: var(--color3);
  }
  .form-contant .btn1 i{
      margin-left: 10px;
      margin-left: 1rem;
  }
  .form-contant a{
      display: none;
      color: var(--color1);
  }
  .bennar-item h1{
      max-width: 50%;
      font-size: 67px;
      font-size: 6.7rem;
      font-weight: 600;
      line-height: 100px;
      line-height: 8.8rem ;
      color: var(--color1);
      margin-bottom: 25px;
      margin-bottom: 2.5rem;
  }
  .bennar-item p{
      max-width: 47%;
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 400;
      color: #9d98a4;
      margin-bottom: 50px;
      margin-bottom: 3rem;
  }
  .bennar-item a{
      display: inline-block;
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 600;
  }
  .btn2{
      margin-right: 35px;
      margin-right: 3.5rem;
  }
  .btn2:hover{
      background: var(--color1);
  }
  .site-btn{}
         /*************************************/
  
      /******** 2.services Area css ********/
  
  /**************************************/
  .service-area{
    position: relative;
  }
  .service-area:after {
      content: "";
      background-image: url(../assets/images/bg-shape1.png);
      background-repeat: no-repeat;
      position: absolute;
      width: 300px;
      height: 970px;
      left: 0;
      top: 0;
      z-index: -1;
      background-size: auto 60%;
  }
  .service-container{
      max-width: 1170px;
      width: 100%;
      margin: auto;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[3];
          grid-template-columns: repeat(3, 1fr);
      grid-gap: 6rem;
      
  }
  .service-item{
      box-shadow: 2.5px 4.33px 10px 0px rgba( 25, 45, 51, 0.15 );
      padding: 45px 30px;
      padding: 4.5rem 3rem;
      border-radius: 0.5rem;
  }
  .service-item:first-child{
      box-shadow: none;
      padding: 0;
  }
  .service-item h2{
      margin-bottom: 40px;
      margin-bottom: 4rem;
  }
  .service-item h3{
      margin-bottom: 20px;
      margin-bottom: 2rem;
  }
  .service-item p{
      color: var(--color4);
  }
  .service-item img{
      display: inline-block;
      margin-bottom: 30px;
      margin-bottom: 3rem;
      height: 50px;
      height: 5rem;
      width: auto;
  }
  .service-item .btn2{
      border-radius: 3rem;
      font-size: 14px;
      font-size: 1.4rem;
      padding: 15px 40px;
      padding: 1.5rem 4rem;
      
  }
  /*************************************/
  
          /******** 3.About Area css ********/
  
  /************************************/
  .about-area{
    position: relative;
  }
  .about-area:after {
	content: "";
	background-image: url(../assets/images/bg-shape2.png);
	background-repeat: no-repeat;
	position: absolute;
	width:170px;
	height: 750px;
	right: 0;
	top: -20%;
	z-index: -1;
	background-size: auto 60%;
}
  .about-container{
      max-width: 1170px;
      width: 100%;
      margin: auto;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[2];
          grid-template-columns: repeat(2, 1fr);
      grid-gap: 2rem;
  }
  .about-left img{
      max-width: 100%;
      width: 100%;
      margin-left: -150px;
      margin-left: -15rem;
  }
  .about-right h2{
      max-width: 55%;
      line-height: 43px;
      line-height: 4.3rem;
      margin-bottom: 15px;
      margin-bottom: 1.5rem;
  }
  .about-right h4{
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--color2);
      margin-bottom: 25px;
      margin-bottom: 1.2rem;
  }
  .about-right p{
      color: var(--color1);
      margin-bottom: 25px;
      margin-bottom: 2.5rem;
  }
  .about-icon{
      font-size: 20px;
      font-size: 2rem;
      font-weight: 700;
      display: inline-block;
  }
  .about-icon a{ 
      display: inline-block;
  }
  .about-icon .fa-sharp{
      color: #c2b8c3;
      margin-right: 25px;
      margin-right: 2.5rem;
      display: inline-block;
  }
  .about-icon .fa-arrow-right-long{
      color: var(--color1);
      display: inline-block;
  }
      /*************************************/
  
  /******** 4.Potfolio Area css ********/
  
      /************************************/
  .potfolio-area{
    background:url(../assets/images/bg-shape3.png) no-repeat scroll 0 0 / contain;
  }
  .potfolio-container-1 {
      max-width: 1170px;
      width: 100%;
       margin: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      padding-bottom: 50px;
      padding-bottom: 5rem;
  }
  .potfolio-container-1 h2 {
      max-width: 55%;
      line-height: 50px;
      line-height: 5rem;
      margin-bottom: -30px;
      margin-bottom: -3rem;
    }
  .potfolio-item.about-icon {
      padding-top: 90px;
      padding-top: 9rem;
  }
  .potfolio-second-div {
      max-width: 1170px;
      width: 100%;
      margin: auto;
      padding-bottom: 70px;
      padding-bottom: 7rem;
    }
  .potfolio-container-2{
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[3];
          grid-template-columns: repeat(3, 1fr);
      grid-gap: 2rem;
  }
  .potfolio-img {
      position: relative;
      overflow: hidden;
  }
  .potfolio-img i{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      font-size: 50px;
      font-size: 5rem;
      color: var(--color3);
      background: rgba(214, 43, 43, 0.5);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-transform: scale(0);
              transform: scale(0);
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
  }
  .potfolio-img:hover i{
      -webkit-transform: scale(1);
              transform: scale(1);
  }
  .potfolio-img img{
      width: 100%;
      height: 350px;
      display: block;
      -o-object-fit: cover;
         object-fit: cover;
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
  } 
  .potfolio-img:hover img{
      -webkit-transform: scale(1.15, 1.15);
              transform: scale(1.15, 1.15);
  }
  .potfolio-link {
      text-align: center;
      padding: 40px 0;
      padding: 4rem 0;
      color: var(--color2);
    }
  /*************************************/
  
      /****5.News Area css *****/
  
  /************************************/
  .news-area{
    position: relative;
  }
  .news-area:after{
    content:"";
    background-image: url(../assets/images/bg-shape4.png);
    background-repeat: no-repeat;
    position: absolute;
    top:10%;
    right: 0;
    width:280px;
    height: 650px;
    z-index: -1;
  }
  .news-container-1{
      max-width: 1170px;
      width: 100%;
      margin: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
  }
  .news-container-1 h4{
      color: var(--color2);
      padding-bottom: 8px;
      padding-bottom: 0.8rem;
  }
  .news-item.about-icon {
      padding-top: 30px;
      padding-top: 3rem;
    }
  .news-container-2{
      max-width: 1170px;
      width: 100%;
      margin: auto;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[3];
          grid-template-columns: repeat(3, 1fr);
      grid-gap: 3rem;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      padding: 30px 0px;
      padding: 3rem 0px;
  }
  .news-containar2-item{
      box-shadow: 2.5px 4.33px 10px 0px rgba( 25, 45, 51, 0.15 );
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
  }
  .news-containar2-item:hover{
      background: var(--color2);
  }
  .news-containar2-item:nth-child(1){
      margin-left: 0;
  }
  .news-containar2-item:nth-child(3){
      margin-right: 0;
  }
  .news-containar2-item .news-parag{
      padding: 50px 45px;
      padding: 5rem 4.5rem;
      padding-bottom: 0
  }
  .news-containar2-item h4{
      padding-bottom: 15px;
      padding-bottom: 1.5rem;
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
  }
  .news-containar2-item h5{
      padding-bottom: 18px;
      padding-bottom: 1.8rem;
      font-size: 14px;
      font-size: 1.4rem;
      font-weight: 600;
      color: #7e7f89;
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
  }
  .news-containar2-item p{
      color: var(--color4);
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
  }
  .news-containar2-item a{
      text-align: right;
      padding: 30px;
      padding: 3rem;
  }
  .news-containar2-item:hover h4{
      color: var(--color3);
  }
  .news-containar2-item:hover h5{
      color: var(--color3);
  }
  .news-containar2-item:hover p{
      color: var(--color3);
  }
  .news-containar2-item i{
      color: var(--color2);
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
  }
  .news-containar2-item:hover i{
      color: var(--color3);
  }
  /*************************************/
  
      /****6.Contact Area css *****/
  
  /************************************/
  .contact-area{
      max-width: 1170px;
      width: 100%;
      margin: auto;
      padding-top: 100px;
      padding-top: 10rem;
      padding-bottom: 60px;
      padding-bottom: 6rem;
  }
  .contact-area h2{
      padding-top: 10px;
      padding-top: 1rem;
      padding-bottom: 26px;
      padding-bottom: 2.6rem;
  }
  .contact-area h4{
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--color2);
    }
  .input-item-1{
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: (1fr)[2];
          grid-template-columns: repeat(2, 1fr);
      grid-gap: 3rem;
  }
  .input:first-child{
      margin-left: 0;
  }
  .input:last-child{
      margin-right: 0;
  }
  input {
      width: 100%;
      padding: 1.8rem 2rem;
      outline: none;
      border: none;
      background: #f4fafe;
      border-radius: 1rem;
      font-size: 1.8rem;
      font-weight: 500;
    }
    input::placeholder{
        color: var(--color1);
        opacity: 1;
    }
  .input-item-2{
      padding-top: 3rem;
      padding-bottom: 5rem;
  }
  textarea{
    width: 100%;
    resize: none;
    outline: none;
    border: none;
    padding: 3rem 2rem;
    background: #f4fafe;
    border-radius: 1rem;
    font-size: 1.8rem;
    font-weight: 500;
    padding-top: 2rem;
}
textarea::placeholder{
    color: var(--color1);
    opacity: 1;
}
  form {
      text-align: center;
  }
  form .btn2{
      display: inline-block;
      padding: 15px 35px;
      padding: 1.5rem 3.5rem;
  }
  /*************************************/
  
      /****7.Footer Area css *****/
  
  /************************************/
  .footer-area{
      background: #314584;
  }
  .footer-container{
      max-width: 1170px;
      width: 100%;
      margin: auto;
      text-align: center;
      color: var(--color3);
      padding-top: 60px;
      padding-top: 6rem;
      padding-bottom: 20px;
      padding-bottom: 2rem;
  }
  .footer-container h2{
      color: var(--color2);
  }
  .footer-container h5{
      color: var(--color3);
      font-size: 18px;
      font-size: 1.8rem;
  }
  .footer-container p{
      color: var(--color3);
      font-size: 14px;
      font-size: 1.4rem;
  }
  .footer-menu{
      padding: 20px 0;
      padding: 2rem 0;
  }
  .footer-menu ul{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  }
  .footer-menu li a{
      margin: 0px 15px;
      margin:0rem 1.5rem;
      color: var(--color3);
      transition: 0.5s all ease-in-out;
  }
  .footer-menu ul li a:hover, .footer-menu ul li.active a{
    color: var(--color2);
}
  .footer-container .footer-icon{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
  }
  .footer-icon i {
      color: var(--color3);
      margin: 20px 35px;
      margin: 2rem 2.5rem;
      font-size: 25px;
      font-size: 2.5rem;
      -webkit-transition: 0.5s all ease-in-out;
      transition: 0.5s all ease-in-out;
    }
  .footer-icon i:hover{
      -webkit-transform: rotatey(180deg);
              transform: rotatey(180deg);
      color: var(--color2);
      text-shadow: 0px 0px 5px #ff01ff;
  }