@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap'); */
body {line-height:normal;font-family: 'Poppins', sans-serif;color:var(--black-color); margin:0px; padding:0px;background:#fff; font-size:var(--clamp16); overflow-x: hidden; padding-top: 105px; }

html,body{ scroll-behavior: smooth;}

:root{

	/* colors*/
	--logo-color:#006caf;
	--secondry-color:#fe0001;
	--light-color: #6265a1;
	--dark-color:#6c3c9e;
	--white-color:#fff;
	--black-color:#000;
    --footer-color:#313131;
	--yellow-color:#fa9712;
    --orange-color:#f2a725;
	--btn-color:#d94664;
	--new-color:#ef6626;

	/* fonts*/

	--clamp12: clamp(10px, 0.625vw, 12px);
	--clamp14: clamp(12px, 0.72916vw, 14px);
	--clamp16: clamp(14px, 0.8333vw, 16px);
	--clamp18: clamp(14px, 0.9375vw, 18px);
	--clamp24: clamp(16px, 1.25vw, 24px);
	--clamp26: clamp(20px, 1.3541vw, 26px);
	--clamp28: clamp(22px, 1.4583vw, 28px);
	--clamp30: clamp(20px, 1.5625vw, 30px);
	--clamp36: clamp(25px, 1.875vw, 36px);
	--clamp40: clamp(25px,2.083vw, 40px);
  --clamp50: clamp(25px, 2.6041vw, 50px);
	--clamp60: clamp(25px, 3.125vw, 60px);
	--clamp78: clamp(30px, 4.0625vw, 78px);
	

}


html, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, a,
dl, dt, dd, ol, ul, li,
fieldset, input, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:top;
    background:transparent;
	font-family: 'Poppins', sans-serif;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
nav ul {list-style:none;}
ul, li{ list-style:none;}
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select { vertical-align:middle; font-size:13px;}
.clear{display:block; clear:both; margin:0; padding:0;}
.clearfix:after,.header:after,.container:after
{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden}

img{ max-width: 100%;}
.clearfix{zoom:1}
a{text-decoration:none; color:var(--logo-color);}
a:hover{outline:none; color:#000; text-decoration:none;}
a{
    transition: opacity .3s ease-in, color .3s ease-in, background-color .3s ease-in;
    -moz-transition: opacity .3s ease-in, color .3s ease-in, background-color .3s ease-in;
    -webkit-transition: opacity .3s ease-in, color .3s ease-in, background-color .3s ease-in;
    -o-transition: opacity .3s ease-in, color .3s ease-in, background-color .3s ease-in;
    -ms-transition: opacity .3s ease-in, color .3s ease-in, background-color .3s ease-in;	
	transition: color 0.3s linear 0s; text-decoration:none;
}
p{ margin-bottom: 20px; font-size: var(--clamp16);}
h3{ font-size: var(--clamp60); color: var(--logo-color); margin-bottom: 20px; font-weight: 700;}
h4{ font-size: var(--clamp40); color: var(--logo-color); margin-bottom: 20px; font-weight: 700;}
h5{ font-size: var(--clamp30); color: var(--logo-color); margin-bottom: 20px; font-weight: 700;}
ul{ padding: 0px; margin: 0px 0px 0px 0px;}
ul li{ list-style: none; font-size: var(--clamp16); padding: 0px 0px 20px 20px; position: relative;}
ul li:before{ position: absolute; width: 8px; height: 8px; border-radius: 50%; top:6px; left: 0px; content: ""; background: var(--logo-color);}

::-webkit-input-placeholder {color:#000; opacity:1;}
:-moz-placeholder {color:#000; opacity:1;}
::-moz-placeholder {color:#000; opacity:1;}
:-ms-input-placeholder {color:#000; opacity:1;}
/**************************************************/
.header{
    background:rgb(255, 255, 255,.8);   
    position: fixed; padding:10px 0px; z-index: 9; left: 0px; top: 0px; width: 100%; border-bottom:1px solid #ccc;
    
}

.header-inner{display: flex; justify-content: space-between; align-items: center;}
.logo{ position: relative;}
.logo img{ max-width: 120px;}
.sticky { position: fixed;width: 100%; left: 0; top: 0; z-index: 9999;  border-top: 0;; padding:10px 0px; transform: translateY(0);    transition:all 0.7s; border-bottom:1px solid #ccc;   background:rgb(255, 255, 255,.9);  }
/* .header.sticky .logo img{ max-width:100px;} */


.main_nav{ padding:38px 0px 0px 0px;}
.nav ul{ display: flex;}
.nav ul li{ padding:0px 20px; position:relative;}
.nav ul li::before{ display: none;}
.nav ul li:last-child{ padding-right: 0px;}
.nav ul li a{ color:var(--logo-color); font-size:var(--clamp16); font-weight: 500; padding: 0px;}
.nav ul li a:hover{ color:var(--secondry-color);}
.nav ul li a.active{color:var(--secondry-color); position: relative;}
.nav ul li a.active:before{ position: absolute; left:-20%; height:3px; bottom: -21px; width: 140%; background: var(--secondry-color); content: ""; border-radius: 5px; }


.banner{
	 background:url(images/banner.jpg) no-repeat top center;  background-size: cover; position: relative; margin-top: -110px; padding-top: 110px;
}
.ban-text{
	background:rgb(255, 255, 255,.4);
	padding:30px; height: 100%;
}
.ban-text h1{
	font-size: var(--clamp50); text-transform: uppercase; color: var(--logo-color); margin-bottom: 20px; font-weight: 700;
}
.ban-text h1 span{
	display: block; font-size: var(--clamp36); font-weight: 500; text-transform: capitalize;
}

.whyads{ padding:120px 0px 0px;}
.whyads h4{ color: #fff; font-size: var(--clamp40);}
.why-text{ padding:30px; border: 1px solid rgb(56, 113, 175,.2); margin-top: -1px; margin-left: -1px; display: flex; align-items: center; min-height: 300px; flex-direction: column; text-align: center; position: relative;}
.why-text .w-img{ display: flex; align-items: center; height: 170px;}
  .overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color:rgb(0, 108, 175,.9);
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: .5s ease;
  }
  
  .why-text:hover .overlay {
	height: 100%;
  }
  
  .w-text {
	color: white;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
  }

  .principles{ padding:120px 0px 80px;}
  
  .principles figure{ overflow: hidden;}
  .principles figure img{ max-width: 100%; margin: 0 auto; display: block; transition: all 0.7s ease;}
  .principles figure:hover img{ overflow: hidden;transform:scale(.95);}

  .ads-team{background: url(images/2_ADS_Team.jpg) no-repeat top center; background-size: cover;}
  .team-inner{ padding: 100px 0px 80px 160px; position: relative;}
  .team-inner:before{ width: 100px; height: 100%; top: 0px; left: 0px; content: ""; position: absolute; background: var(--logo-color);}
  .team-inner h3{ writing-mode: vertical-rl; color: #fff; margin: 0px; position: absolute; left: 18px; top: 50%; transform: translateY(50%); rotate: 180deg; }

  .area{ padding-top:120px; text-align: center;}
  .area img{margin-bottom:20px;}
  .area p{ margin: 0px; color: var(--logo-color); font-weight: 600;}
  .a-img{ height: 150px; display: flex; align-items: center; display: flex; justify-content: center;}
  .box{ background: #f5ccd2; padding:40px 10px;transform: skew(-17deg, 0deg); transition: all 0.7s ease;}
  .box:hover{ background: #d9334b; }
  .box:hover img{ filter: brightness(0) invert(1);}
  .box:hover p{ color: #fff;} 
  .box.a1{background: #fbd4d9;}
  .box.a1:hover{background: #ed5564;}
  .box.a2{background: #fedbd5;}
  .box.a2:hover{background: #fb6e52;}
  .box.a3{background: #fff3d3;}
  .box.a3:hover{background: #ffce55;}
  .box.a4{background: rgb(231, 206, 77,.4);}
  .box.a4:hover{background: #e7ce4d;}
  .box.a5{background: #e7f4da;}
  .box.a5:hover{background: #a0d468;}
  .box.a6{background: #d2f3ec;}
  .box.a6:hover{background: #48cfae;}
  .box.a7{background: #e7f3f3;}
  .box.a7:hover{background: #a0cecb;}
  .box.a8{background: #d3effa;}
  .box.a8:hover{background: #4fc0e8;}
  .box.a9{background: #d6e7fb;}
  .box.a9:hover{background: #5d9cec;}
  .box.a10{background: #ccd4f9;}
  .box.a10:hover{background: #95a5f2;}
  


  .digital{ padding-top:107px;}
  .digital h3{ color: #fff; text-align: center; background: var(--logo-color); padding:20px 0px; margin-bottom: 0px;}
  .digital figure{ overflow: hidden;}

  .digital figure img{ max-width: 100%;transition: all 0.7s ease;}
  .digital figure:hover img{ overflow: hidden;transform:scale(1.05);}

  .platform-experience{padding: 100px 0px 0px ; text-align: center;}
  .platform-experience p{ padding-bottom: 30px;}
  .platform-experience figure{ overflow: hidden; margin-bottom:40px;}

  .platform-experience figure img{ max-width: 100%;transition: all 0.7s ease;}
  .platform-experience figure:hover img{ overflow: hidden;transform:scale(.97);}

  .relationship{ padding:120px 0px 0px;}
  .relationship figure{ overflow: hidden;}

  .relationship figure img{ max-width: 100%;transition: all 0.7s ease;}
  .relationship figure:hover img{ overflow: hidden;transform:scale(1.05);}

  .contact{
	padding-top: 100px;
  }
  .contact h3{ text-align: right;}
  .contact-inner{ padding:0px 0px; background: var(--logo-color);}
  .address{ background: #fff; padding: 20px; text-align: right;}
  .gmap{ position: relative; height:350px;}
  .gmap iframe{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
  .address img{ margin-bottom: 10px;}
  .address h4{ font-size: var(--clamp30); font-weight:500; margin: 20px 0px;}
  .address p.phone{ background: url(images/Phone.png) no-repeat right 0px; color: var(--logo-color);padding-right: 40px;    background-size: auto 20px;}
  .address p.mail{ background: url(images/Email.png) no-repeat right 2px; color: var(--logo-color);padding-right: 40px;    background-size: auto 16px;}
  .copyright{ padding:40px 0px; text-align: center;}
  .copyright p{ font-size: var(--clamp16); margin: 0px; font-weight:400;}

  #scroll {
    position:fixed;
    right:10px;
    bottom:25px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:rgb(52, 152, 219,.4);
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:var(--logo-color);
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

@media screen and (max-width:1280px) {
  .container{
    max-width: 94%;  
  } 
  .nav ul li{ padding: 0px 10px;}     
  .area{ padding:40px;}           
  
}
@media screen and (max-width:767px) {
  .nav{ display: none;}
  .sticky{ position: inherit;}
  .whyads{ padding-top: 40px;}
  .principles{ padding:40px 0px;}
  .team-inner:before{ display: none;}
  .team-inner{ padding: 40px 0px;}
  .team-inner h3 {
    writing-mode: inherit;
    color: #fff;
    margin: 0px;
    position: inherit;
    left: inherit;
    top: inherit;
    transform: inherit;
    rotate: inherit;
    margin: 0px 0px 20px;
    text-align: center;
    color: var(--logo-color);}
    .area{ padding: 40px 0px;}
    .box{ transform: inherit;}
    .digital{ padding-top: 0px;}
    .digital h3{ margin-bottom: 20px;}
    .address{ text-align: center;}
    .address p.mail,.address p.phone{ background: none; padding-right: 0px;}
    .copyright{ padding: 20px 0px;}
    #scroll{ bottom: 70px;}
    .contact-inner{ padding: 10px 0px;}
}