@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Lora:ital,wght@0,500;1,500&family=Poppins:wght@400;500;700&display=swap');

@import url("animate.css");


body {
  overflow: hidden;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
}


ul {
  font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 16px;
   padding-left: 17px!important;
}

/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 9999999;
  /* makes sure it stays on top */
}

#status {
  width: 400px;
  height: 400px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(../img/loader2.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -200px 0 0 -200px;
  /* is width and height divided by two */
}



h2,
.kode-mono- h3 {
  font-family: "Kode Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

h3 {
    font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
}

h5 {
    font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.white {
  color: #fff;
}

p {
  font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
}

.projects-wrapper {
  width: 100%;
  height: 100%;
}


.projects-wrapper p{
  color: #292929;
  font-size: 18px;

}

.projects-wrapper h2 {
  color: #000;
  font-size: 34px;

}




.brief-para1 h2 {
  text-align: center;

}

.brief-para1 p {
  text-align: center;
}






.brief-para2 h2 {
  text-align: left;
  margin-top: 55px;
}

.brief-para2 p {
  text-align: left;
  margin-bottom: 35px;
}




.brief-para3 h2 {
  text-align: left;
  color: #fff;
}

.brief-para3 p {
  text-align: left;
  margin-bottom: 35px;
  color: #fff;
  font-size: 18px
}


.brief-para4 h2 {
  text-align: left;
  color: #fff;
  margin-top: 150px;
  margin-bottom: 20px;
}


.mac27 {
  position: relative;
  width: 100%;
  text-align: center;

}

.pdt {
  padding-top: 30px;
}

.mac27 iframe{
    position: absolute;
  	top: 100px;
  	left: 0;
  	width: 100%;
  	height: 60%;
  }


.mac {
  position: relative;
  width: 100%;
  text-align: center;

}

.mac iframe{
    position: absolute;
  	top: 100px;
  	left: 0;
  	width: 100%;
  	height: 60%;
  }

  .mac video {
      position: absolute;
    	top: 100px;
    	left: 0;
    	width: 100%;
    	height: 60%;
    }



.closer {
  position: fixed;
  z-index: 999999;
  right: -170px;
  top: 30px;

}

.closer img {
    width: 24%;
  }

  .closer a {
    opacity: 1;
    }



.df-bg {
    background: linear-gradient(115deg, rgb(13 132 141) 0%, rgb(4 64 69) 99%);
}




.sw-bg {
  background: #00b6de;
}

.sw-bg2 {
  background: #eef3f9;
}



.infosys-bg {

  background: url(../img/infosys/1.png) #191919;
}

.seq-bg {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c1272d+0,6f18a2+100 */
  background: #c1272d; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #c1272d 0%, #6f18a2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #c1272d 0%,#6f18a2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #c1272d 0%,#6f18a2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1272d', endColorstr='#6f18a2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.seq-bg2 {
background: #242C44;}


.shadow-infosys {
  box-shadow: 15px 15px 50px #0000005e;
    margin-top: 100px;
}


.izod-bg {
  background: #831d23;
}

.shadow-izod {
  box-shadow: 15px 15px 50px #731d22;
    margin-top: 100px;
}

.shadow {
  box-shadow: 25px 25px 70px #3f879c;
  margin-top: 100px;
}

.shadow-hr {
  box-shadow: 10px 10px 10px #0000005e;
  transition: all 0.3s;
}

.shadow-hr:hover {
  box-shadow: 5px 5px 0px #0000005e;
}

.shadow-hr2 {
  box-shadow: 15px 15px 50px #0000005e;
  margin-top: 100px;
}

.shadow-hr3 {
  box-shadow: 15px 15px 50px #963f57;
  /*margin-top: 100px;*/
}


.shadow-tr2 {
  box-shadow: 15px 15px 50px #2f2f2f;
}


.padding {
  margin-top: 100px;
}

.padding-sec {
  padding: 100px 0px 100px 0px;
}

.padding-sec2 {
  padding: 50px 0px 50px 0px;
}

.padding-sec3 {
  padding: 50px 0px 100px 0px;
}


.hr-bg {background: rgb(38,40,52);
background: linear-gradient(115deg, rgba(38,40,52,1) 0%, rgba(74,105,140,1) 99%);
}


.at-bg {
  background-image: linear-gradient(128deg, #2F3652 0%, #143D5E 100%);



}

.cult-bg {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fe740d+0,ed3e94+100 */
  background: #fe740d; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #fe740d 0%, #ed3e94 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #fe740d 0%,#ed3e94 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #fe740d 0%,#ed3e94 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe740d', endColorstr='#ed3e94',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}


.tr-bg {
  background: #3b3b3b;
  background-image: url(../img/tollr/roadbg.jpg);
}

.cm-gray {
    background: linear-gradient(115deg, rgb(233 235 237) 0%, rgb(233 236 239) 99%);
  }

.tr-bg h3 {
  color: #fff;
  font-size: 18px;
}