@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Suranna&display=swap');



*
{	
	font-family: 'Roboto', sans-serif;

	font-size:12px;
}
p{
	line-height:22px
}
html , body
{
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;

}

.transition
{
	transition:all 0.5s ease-in-out;
}
body
{
	
}
a {
	color:#363636;
	text-decoration:none;
	transition:0.8s;
	-webkit-transition:0.8s;
	-moz-transition:0.8s;
	-o-transition:0.8s;
}
.displaynone
{
	display:none !important
}
.vError
{
	border-bottom:red 1px solid !important
}
.form-error
{
    color: red;
    font-size: 10px !important;
    padding-top: 5px;
    display: inline-block;
}
.h100{
	height:100%
}
.suranna
{
	font-family: 'Suranna', serif;

}
.FormResult  , .FormResult1
{
	color:white;
	width:100%;
}
.dnone
{
	display:none
}
.d-block{
	display:block !important
}
.d-flex
{
	display:flex;
	flex-wrap: wrap;
}
.italic
{
	font-style:italic
}
.white
{
	color:#FFF
}
.font-light , .font-light *
{
	font-weight: 300;
}
.font-medium , .font-medium *
{
	 font-weight: 500;
}

.font-bold , .font-bold *
{
	 font-weight: 700;
}
.font-12, .font-12 *
{
	font-size:0.75rem
}
.font-13, .font-13 *
{
	font-size:0.8125rem
}
.font-14, .font-14 *
{
	font-size:0.875rem
}
.font-16, .font-16 *
{
	font-size:1rem
}
.font-18 , .font-18 *
{
	font-size:1.125rem
}
.font-20, .font-20 *
{
	font-size:1.25rem
}
.font-22, .font-22 *
{
	font-size:1.375rem
}
.font-24, .font-24 *
{
	font-size:1.5rem
}
.font-26, .font-26 *
{
	font-size:1.625rem
}
.font-28, .font-28 *
{
	font-size:1.75rem
}
.font-30, .font-30 *
{
	font-size:1.875rem
}
.font-32, .font-32 *
{
	font-size:2rem
}
.font-36, .font-36 *
{
	font-size:2.25rem
}
.font-40, .font-40 *
{
	font-size:2.2rem
}
.font-42, .font-42 *
{
	font-size:2.625rem
}
.font-50, .font-50 *
{
	font-size:3.125rem
}
.font-55, .font-55 *
{
	font-size:3.437rem
}
.font-62, .font-62 *
{
	font-size:3.875rem
}
.font-70, .font-70 *
{
	font-size:4.126rem
}
.font-90, .font-90 *
{
	font-size:5.625rem
}
.text-center
{
	text-align:center
}
.line-height13
{
	line-height:1.3rem
}
.line-height14
{
	line-height:1.4rem
}
.line-height15
{
	line-height:1.5rem
}
.line-height2
{
	line-height:2rem
}
.line-height3
{
	line-height:3rem
}
.line-height4
{
	line-height:4rem
}
.inline-block
{
	display:inline-block
}
.flex-row {
    display: flex !important;
    justify-content: center;
    flex-direction: row;
    align-content: center;
    align-items: center;
}
.flex-column {
    display: flex !important;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.jc-fs
{
	    justify-content: flex-start !important;
}
.jc-sb
{
	    justify-content: space-between !important
}

.trigger{
	width: 35px;
	height: 25px;
	z-index: 999999999;


}

.trigger > div{
	position: relative;
}

.trigger > div > span{
	position: absolute;
	height: 4px;
	width:34px;
	margin:0;
	background: #FFF;
	top:0;
	border-radius:25px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;

	transition:.7s;
	-moz-transition:.7s;
	-webkit-transition:.7s;
	right:0
}

.trigger > div > span:nth-child(2){
    top: 9px;
    width: 22px;
}

.trigger > div > span:nth-child(3){
	top:18px;
}

.trigger > div.close > span:nth-child(1){
	-ms-transform: rotate(45deg); /* IE 9 */
	-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
	transform: rotate(45deg);
	top: 19px;
	background:#FFF
}

.trigger > div.close > span:nth-child(2){
	display: none;
}

.trigger > div.close > span:nth-child(3){
	-ms-transform: rotate(-45deg); /* IE 9 */
	-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
	transform: rotate(-45deg);
	top: 19px;background:#FFF
}

.trigger, .sitewrapper{
	transition:.7s;
	-moz-transition:.7s;
	-webkit-transition:.7s;
}


.white
{
	color:#FFF
}
.blur {
    
    background: transparent !important;
}
.z-100
{
	z-index:100
}
.relative
{
	position:relative;
}
b
{
	font-weight:700
}
.txt-justify
{
	text-align:justify
}
.py-100
{
	padding-top:100px;
	padding-bottom:100px
}
.px-100
{
	padding-right: 100px;
	padding-left: 100px
}
.ai-fs
{
	align-items:flex-start
}
.line-height2
{
	line-height:2rem
}
/*//////////////////////////////////////////////////////////////////////////////*/
footer
{
	display:inline-block;
	width:100%;
	background:#bd1832;
}
.bg_black
{
	background:#1A1A1C
}
.border-before:before
{
	position:absolute;
	bottom:-15px;
	left:calc(50% - 100px);
	width:200px;
	height:3px ;
	background:#FFF;
	content:'';
}
.border1-before:before
{
	position:absolute;
	bottom:-15px;
	left:calc(50% - 50px);
	width:100px;
	height:3px ;
	background:#E11C3C;
	content:'';
}

.border2-before:before
{
	position:absolute;
	bottom:-15px;
	left:calc(50% - 50px);
	width:100px;
	height:3px ;
	background:#FFF;
	content:'';
}

.border3-before:before
{
	position:absolute;
	bottom:-15px;
	left:0;
	width:100px;
	height:3px ;
	background:#E11C3C;
	content:'';
}


.mb-100
{
	margin-bottom:6.25rem
}
.what_we_do
{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	background-attachment:fixed;
}
.what_we_do:after
{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100% ;
	background:rgba(0,0,0,0.15);
	content:'';
	z-index:10
}
.bg_red
{
	background:#bd1832
}
.bg_dark
{
	background:#000
}
.slick-dots li button:before{
font-size:14px;
}
.slick-dots li{
margin:0
}
.slick-dots li button:before
{
	color:#FFF;
	opacity:1
}
.slick-dots li.slick-active button:before{
color:#000;
opacity:1
}
.txt-right
{
	text-align:right;
}
.ai-fe
{
	align-items:flex-end
}
.container
{
	width:1200px
}
.container.small
{
	width:962px
}
.bg_grey
{
	background:#1A1A1C;
}
.our_work img{
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    transition: transform .5s;
	border:3px solid transparent
}
.our_work
{
	overflow:hidden
}
.our_work:hover img
{
	 transform: scale(1);
	 border:3px solid #FFF
}

.overlay-block {
    color: #fff;
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: translateY(10px);
}
.our_work:hover .overlay-block {
    opacity: 1;
    transform: translateY(0px);
}

.filter
{

	text-align:center;
}
.filter a {
    color: #5F5F60;
    text-align: center;
	text-transform:uppercase;
    padding: 0 25px;
    line-height: inherit;
    transition: all 1s ease-in-out;
	display:inline-block
}
.filter a:hover ,  .filter a.active
{
	color:#FFF
}
.is-animated {
  
}

@keyframes rotate-right {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: none;
  }
}

.contact_us
{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	background-attachment:fixed;
}
.contact_us:after
{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100% ;
	background:rgba(0,0,0,0.8);
	content:'';
	z-index:10
}
.contact_us_box .red a
{
	color:#E11C3C
}
.contact_us_box .red a:hover
{
	color:#FFF
}

.contact_us_box .locate_us a
{
	color:#FFF
}
.contact_us_box .locate_us a:hover
{
	color:#E11C3C
}
.contact-form input[type=text] , .contact-form textarea
{
	background:none;
	border:0;
	border-bottom:2px solid #FFF;
	padding-left:0;
	color:#FFF;
	font-size:16px
}

.contact-form input::placeholder , .contact-form textarea::placeholder { 
  color: #FFF;
  opacity: 1; 
}

.contact-form:-ms-input-placeholder , .contact-form textarea:-ms-input-placeholder  { 
  color: #FFF;
}

.contact-form::-ms-input-placeholder  { 
  color: #FFF;
}
.contact-form .send
{
	float:right;
}
.jc-fe
{
	    justify-content: flex-end;
}
.contact-form button[type=submit]
{
	float:right;
	color:#FFF;
	font-size:18px;
	border-bottom:2px solid #E11C3C;
	background:none;
}
.banner_link 
{
	border-radius:25px;
	background:#E11C3C;
	padding:15px 35px 12px 35px;
	color:#FFF
}
.banner_link a
{

	color:#FFF
}
.logo{

    left: 50% ;
    position: fixed;
    top: 15%;transform: translate3d(-50%, -10%, 0);
}
header
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:500;
}
header.active .logo-box img{
left:0
}
.hamburger {
	float:right;
	transition:all 0.5s ease-in-out;
	cursor:pointer;margin-right:20px;
}
.hamburger:hover {
   opacity:0.6
}
nav
{
	    padding-top: 15px;
    padding-right: 30px;
	float:right;
	transform: translate3d(-100px,0,0);transition-duration: 0.5s;    transition-timing-function: ease;transition-delay: 0;transition-property: opacity,transform;
	opacity:0
}
nav.slided{
opacity: 1;
    transform: translateZ(0);
}
nav li a
{
	color:#FFF;
	
}
nav li a:hover
{
	border-bottom:2px solid #E11C3C;
	color:#FFF !important
	
}






.i2-abso{position:absolute;top:0;left:0;z-index:50}
.aos-animate .heartbeat{-webkit-animation:heartbeat 3s ease-in-out  ;animation:heartbeat 3s ease-in-out  }
@-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

.aos-animate .scale-up-center{-webkit-animation:scale-up-center 3s cubic-bezier(.39,.575,.565,1.000) 1s  ;animation:scale-up-center 3s cubic-bezier(.39,.575,.565,1.000) 1.5s  }
@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}









.jello-horizontal{-webkit-animation:jello-horizontal 1.5s 2s infinite both;animation:jello-horizontal 1.5s 2s infinite both}
@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}






svg  .path11{
  fill: none;
  stroke: #e11c3c;
  stroke-width: 3;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear  forwards;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}




 .six{
    display: inline-block;
    width: 218px;
    height: 218px;

    perspective: 1000px;
}
.aos-animate .six > .square {
    position: absolute;
    width: 218px;
    height: 218px;
    margin: 0 auto;
    left: 0;
    right: 0;
    border: 4px solid #E11C3C;
    transform-origin: 50% 50%;
    animation: six 3s ease ;
    opacity: 1;
}

.six > .square:nth-of-type(2) {
    animation-delay: 600ms;
    width: 118px;
    height: 118px;	
	
	top: 50px;
}
.six > .square:nth-of-type(3) {
    animation-delay: 800ms;
    width: 118px;
    height: 118px;	
	background:#E11C3C;
	top: 50px;
}

@keyframes six{
  0%{transform:scale(0.1, 0.1);}
  50%{opacity:1;}
}




.triangle {
    stroke-dasharray: 17;
    animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: 136;
    }
}






.aos-animate .triangle2 {
 transform-origin: 50% 50%;
  animation: rotate 6s linear ;
}
#triangle
{

    transform: scale(1.3);
}
.aos-animate #triangle polygon {
  stroke-dasharray: 0;
  animation: dash 4s cubic-bezier(0.35, 0.04, 0.63, 0.95) ;
}


@keyframes dash {
  to { stroke-dashoffset: 34; }
}

@keyframes rotate {
  0% { transform: scale(0.7); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}




.leftLst
{
	position:absolute;
	top:40%;
	-webkit-transform: translate(40%,0);
	left:0;
	z-index:50;
	cursor:pointer;
	background:none;
}
.rightLst
{
	position:absolute;
	top:40%;
	-webkit-transform: translate(40%,0);
	right:25px;
	z-index:50;
	cursor:pointer;
	background:none;
}
.leftLst img , .rightLst img
{
	filter: drop-shadow(2px 4px 6px black);
}
.projects_info
{
	position:relative;

	width:100%;
	background:rgba(0,0,0,0.5);
	padding:10px 30px;
}
.our_work_slick_nav img{height:50px}
.our_work_slick , .our_work_slick_nav
{
	margin-bottom:0 !important
}
.grey
{
	color:rgba(255,255,255,0.6)
}

.our_work_slick_nav .card img
{
	border:2px solid #E5E8EA;

}
.our_work_slick_nav .slick-slide
{

	margin-right:15px;
}

.our_work_slick .slick-slide > div
{
	display:block
}
.fancybox-slide .container
{
	overflow-x:hidden !important
}
.fancybox-close-small:after , .fancybox-close-small:hover:after , .fancybox-close-small
{
	background:none;
    font-size: 42px;
	color:#FFF
}
.leftLst img, .rightLst img
{
	height:40px;
}




.scroll_down
{
	position:absolute;
	bottom:25px;
	left:0;
	width:100%;
	z-index:500;
	height:40px;
}
.backtop-shown1
{
	position:relative;
	height:20px;cursor:pointer;
	width:50px;
}
.backtop-shown1:before
{
	position:absolute;
	content:'';
	left:50%;
	top:0;
	width:2px ;    transition: transform .5s;
	height:30px;
	background:#e11c3c
}
.backtop-shown1:after
{
	position:absolute;
	content:'';    transition: transform .5s;
	left:50%;
	top:0;
	width:2px ;
	height:30px;
	background:#e11c3c
}
.scroll_down:hover .backtop-shown1:before
{
	    transform:translate(-10px, 2px) rotate(-45deg)
	
}
.scroll_down:hover .backtop-shown1:after
{
	    transform:translate(11px, 2px) rotate(45deg)
	
}




.forcefullwidth_wrapper_tp_banner
{
	z-index:50
}
.scroll_up
{
	position:fixed;
	bottom:60px;
	right:0;
	z-index:40;
	height:40px;
}
.backtop-shown2
{
	position:relative;
	height:20px;cursor:pointer;
	width:50px;
}
.backtop-shown2:before
{
	position:absolute;
	content:'';
	left:50%;
	top:0;
	width:2px ;    transition: transform .5s;
	height:25px;
	background:#e11c3c
}
.backtop-shown2:after
{
	position:absolute;
	content:'';    transition: transform .5s;
	left:50%;
	top:0;
	width:2px ;
	height:25px;
	background:#e11c3c
}
.scroll_up:hover .backtop-shown2:before
{
	    transform:translate(-5px, 2px) rotate(30deg)
	
}
.scroll_up:hover .backtop-shown2:after
{
	    transform:translate(7px, 2px) rotate(-30deg)
	
}




.clients_slick  .slick-dots li
{
	width:40px;
	height:5px;
	border-radius:25px;
}

.clients_slick .slick-dots li 
{
	margin:0 2.5px;
}
 .clients_slick .slick-dots li button
{
	width:40px;
	height:5px;border-radius:25px;
	background:#F2F2F2;transition: all 0.5s ease-in;
	padding:0
}
.clients_slick .slick-dots li button:before
{
	display:none
}
 .clients_slick .slick-dots li button:hover , .clients_slick .slick-dots li.slick-active button
{
	background:#000;
}
.clients_slick .slick-dots {

}
footer li
{
	padding-left:15px;
}
.boxes{margin:0 -10px;width:calc(100% + 20px)}
.clients_slick img
{
	max-width:200px
}
#about .txt-justify{line-height:26px;}
.our_work h2{    text-shadow: 1px 3px 10px black;}
.contact_us
{
	min-height:100vh
}
.hide-arrow .tparrows 
{
	display:none !important
}
.banner_link
{
	cursor:pointer
}
.rec_box
{
	width:250px;    margin-left: -25px;
	height:216px
}
#triangle13
{
	z-index:500
}
.our_work_slick .slick-list
{
	min-height:585px;
}
.txt-shadow
{
	text-shadow: 0 0px 8px #fff;
}
@media all and (max-width: 960px){
	
	

.rec_box{margin-left:-5px}
.font-62, .font-62 * {font-size: 2.5rem !important;line-height: 2.5rem;}
.font-40, .font-40 * {font-size: 1.6rem;line-height: 1.6rem;}
.font-32, .font-32 * {font-size: 1.6rem;line-height: 1.6rem;}
.font-26, .font-26 * {font-size: 1.4rem;line-height: 1.4rem;}
.font-24, .font-24 * {font-size: 1.3rem;line-height: 1.3rem;}
.font-22, .font-22 * {font-size: 1.2rem;line-height: 1.2rem;}

#contact .pl-50{padding-left:0;padding-top:75px;padding-bottom:75px;}
h1,h2,h3,h4,h5{line-height: initial;}
.filter{display:flex;flex-wrap:Wrap}
.filter a{width:50%;padding:10px 0}.txt-cntr-m{text-align:center}
 .projects_info{display:inline-block !important}
 .flex-row-m {flex-direction:column!important}
#who-we-are .colw-60{padding-top:50px;text-align:justify}
nav{top:140px;}
header nav li {margin: 10px 15px;text-align:center}
.fancybox-slide > *{margin-left:0;margin-right:0}
.projects_info{position:relative}.pb-10-m{padding-bottom:10px;}
.pb-25-m{padding-bottom:25px;}.pb-50-m{padding-bottom:25px;}
.pt-25-m{padding-top:25px;}.pt-50-m{padding-top:25px;}
.logo-box img{left:0;}.logo{    transform: inherit;position:absolute; 
    position: absolute;
    top: 100px;
   left: calc(50% - 103px);}
#expertise h2 , #expertise h3{text-align:center}
.five{order:2}.fivet{order:1}
#expertise  .ai-fe{align-items:center}
.scroll_up{bottom:75px;}
#about img{display:inline-block !important}
.text_1 {font-size:18px !important;text-shadow:inherit}
.py-100 {padding-top: 30px;padding-bottom: 30px;}
header{position:absolute;top:0;left:0;}
.hamburger{position:fixed;top:25px;right:0;z-index:500}
nav{    position: fixed;
    width: 100%;
    background: #E11C3C;
    top: 0;
    left: 0;
    z-index: 50;    display: flex !important;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;visibility:hidden}nav.slided{visibility:visible}.clients_slick img{max-width:100%}
.mb-100 {
    margin-bottom: 3.25rem;
}	.clients_slick{text-align:center;    display: flex;
    flex-wrap: wrap;}.four , .five {width:140px;}.six{width:140px;height:140px;}.aos-animate .six > .square{width:100%;height:100%}.six > .square:nth-of-type(3) , .six > .square:nth-of-type(2){top: calc(50% - 45px);width:90px;height:90px;}#triangle12{width:150px;    margin-top: -50px;}#triangle13 {
    z-index: 500;
    width: 90px;
    margin-left: 10px;
    margin-top: 0;
}.rec_box{height:140px;}.pb-0-m{padding-bottom:0}.pb-15-m{padding-bottom:15px}.leftLst img, .rightLst img{height:25px;}.font-14-m{font-size:1rem}.projects_img .img-bg{width:100%;height:250px;}	.our_work_slick .slick-list
{
	min-height:250px;
}
.projects_img_nav .img-bg{width:100%;height:50px;    border: 2px solid #E5E8EA;}
header ul li{width:auto !important;margin:10px 3px  } nav ul li a{font-size:1rem !important}.hamburger{    top: 10px;right: -5px;}
}

/* ahmad */
.our_work_slick_nav .slick-track .slick-slide.slick-current img {
	border: 3px solid #E11C3C;
}