@charset "UTF-8";
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, images, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{margin:0; padding:0;	border:0; font-size:100%;font: inherit;vertical-align:baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}body{line-height:1;}ol, ul{list-style: none;}blockquote, q {quotes:none;}blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}
body{font-family:'Lato', sans-serif; font-size:100%; color:#000; margin:0; padding:0; text-align:center; background:#d2d3d5}
.fl{float:left;} .fr{float:right;} .clr{clear:both;}
img{width:100%; max-width:100%; height:auto; border:none;}
b,strong{font-weight:700;}
input, textarea{width:100%; resize:none;}
input:focus, textarea:focus{border:none; outline:none}
select:invalid{color:#444}
a, a:link, a:active{text-decoration:none;}
*{box-sizing:border-box;}
.clearfix:before, .clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.cta{position:fixed;top:calc(50% - 70px);right:20px;transform-origin:right;transform:translateY(-50%) rotate(-90deg);transition:all 1s;text-transform:uppercase;font-size:100%;padding:10px;background-image:linear-gradient(to bottom, #2475a9 , #194e7b);border-radius:5px 5px 0 0; z-index:99}
.cta a{color:#fff;}
.hide{opacity:1;right:-100%}
.show{opacity:1;right:20px}
header{width:100%; height:auto; background:#336699 url('../../images/wpp-lp-headerbg.jpg') no-repeat; background-size:100% 22%;}
.logo{width:200px; margin:0 auto 20px; padding:5px 10px 10px; background:#fff; border-radius:0 0 10px 10px}
.headerTxt{text-align:center; line-height:200%}
.headerTxt h4{font-size:140%; font-weight:700; color:#fff; line-height:200%; margin-bottom:20px; }
.headerTxt h4 small{display:block; font-size:90%}
.headerTxt ul{width:90%; margin:0 auto 40px}
.headerTxt li{text-align:left; color:#fff; margin-bottom:15px; font-size:100%; line-height:130%}
.headerTxt li div{display:table;}
.headerTxt li div img{width:60px; height:70px;}
.headerTxt li div span{vertical-align:middle;  display:table-cell; padding-left:20px;}

.mainSection{padding:30px 10px; background:#f1efef; text-align:justify; font-size:16px; line-height:30px;}
.main_content p{margin:0 0 20px;}
.main_content span{font-size:20px; color:#f26624;}

 .main_content h2, .main_content h3{font-family:'Raleway', sans-serif; font-size:30px;color:#13679d;line-height:40px;margin-bottom:15px; font-weight:600; text-align:left;}
.main_content h2, .main_content h3{font-size:24px; margin-bottom:5px}
.main_content ul{margin:0 0 20px 5px;}
.main_content li{padding-left:30px; margin-bottom:5px; position:relative;}
.main_content li::before{content:'⇨'; position:absolute;top:0; left:0; font-size:16px; color:#f26624;}

.ctable{margin:10px 0 30px; overflow:hidden; padding-bottom:20px; overflow-x:scroll}
.ctable table{width:700px; border-collapse:collapse; background:#fff;}
.ctable table th, .ctable table td{border:1px solid #13679d; border-collapse:collapse; padding:5px;}
.ctable table th{background:#13679d; color:#fff;}

/******* Query Form CSS *************/
.applyonline_form{background:#fff; padding:0; text-align: left;}
.applyonline_form span{font-size:13px; color:#999 !important;display:block;}
.queryBox h4{text-align:center; font-weight:600; font-size:20px;}
.qContainer{font-size:16px;}
.errmsgbox{background:#fff; border:1px solid #a00; padding:5px; line-height:25px; text-align:center; font-size:16px; color:#a00; margin:0 0 5px;}
.succmsgbox{background:#fff;  border:1px solid #008000; padding:5px; line-height:25px; text-align:center; font-size:16px; color:#008000; margin:0 0 5px;}
.fieldBox{width:100%; float:none; margin:0;}
.inputbox{font-family:'Lato', sans-serif; width:100%; border:1px solid #a8a8a8; background:#f5f5f5; height:30px; padding:0 10px; outline:none; margin:0 0 10px; font-size:14px; color:var(--txtCol);}
.submitQuery{width:40%; margin:10px auto;}
.submitButton{width:100%; border:none; background:#f36523; color:#eee; line-height:32px; outline:none; margin:0; text-align:center; font-size:18px; border-radius:5px}
#div_qform{min-width:300px; min-height:200px;position:relative;}
#loader{border:12px solid #f3f3f3;border-radius:50%;border-top:12px solid #444444;width:70px;height:70px;animation:spin 1s linear infinite; visibility:hidden}
@keyframes spin{
		100% {
			transform:rotate(360deg);
		}
	}
.center{position:absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
/******* Query Form CSS *************/



#whyUMU, #approvals, #recruiters, #wcapply{background:#fc6c20; padding:40px 20px; text-align:center}
#recruiters{background:#fffbe2;}
h1, #approvals h2, #recruiters h3, #wcapply h3{font-size:120%; font-weight:700; color:#fff;line-height:150%}
#recruiters h3, #htapply h3{color:#fc6c20;}
h1 span{display:block}
.bdrW, .bdrO, .bdrG{background:#fff; border-radius:10px; width:20%; height:5px; margin:10px auto 50px}
.bdrO{background:#d8572a;}
.bdrG{background:#909090; width:90%; height:2px;margin:10px auto}
#whyUMU img{width:262px; height:262px;}
#whyUMU li, #approvals li, #recruiters li{margin-bottom:30px}

#prepositions{padding:20px 20px 40px; background:#fefae2;}
#prepositions h2{font-size:18px; font-weight:700; line-height:32px; margin-bottom:30px;}
.prepositions_container{display:flex; flex-direction:column; gap:50px; align-items:center;}
.prepositions_container img{width:200px; height:auto; margin:auto;}

#learning, #htapply{padding:20px 20px 40px; background:#f4f4f4;}
#learning h2{font-size:18px; font-weight:700; line-height:32px; margin-bottom:20px;}
#learning ul{margin:0 0 20px 5px; text-align:left; line-height:30px;}
#learning li{padding-left:30px; margin-bottom:5px; position:relative;}
#learning li::before{content:'➤'; position:absolute;top:0; left:0; font-size:16px; color:#f26624;}

#testimonials{padding:20px 20px 40px;}
#testimonials h2{font-size:18px; font-weight:700; line-height:32px; margin-bottom:20px; color:#f26624}
.testimonial_section{display:grid; gap:30px; align-items:center;}
.testmonial_box{display:flex; flex-direction:column; gap:10px; align-items:center;}
.tb_img{display:flex; justify-content:center; width:max-content;}
.tb_img img{width:150px;}
.tb_img_caption{font-weight:700; font-size:16px;}
.tb_txt{text-align:left; line-height:25px;}
.tb_txt span{color:#f26624; font-weight:700; text-align:center; display:block;}

#wcapply{color:#fff;}
#wcapply p{text-align:left; line-height:30px;}
#wcapply span{font-size:18px; font-weight:700;}

#approvals{background:#134a79;}
#approvals img{width:224px;}


footer{background:#1b6da0;padding:20px 0;text-align:center; color:#fff; line-height:170%;margin-bottom:0}
.copyrightTxt, .btmTxt{text-align:center}
.copyrightTxt{margin-bottom:15px}

@media only screen and (min-width:360px)
	{		
		.headerTxt li{font-size:115%;}
		h1, #approvals h2, #recruiters h3{font-size:140%;}
	}
@media only screen and (min-width:480px)
	{
		.headerTxt h4{font-size:160%;}
		.headerTxt ul{width:70%}
		#recruiters ul{display:grid; grid-template-columns:auto auto; gap:20px}
		#recruiters li{margin:0}
	}
@media only screen and (min-width:600px)
	{
		.headerTxt h4{font-size:150%;}
		.headerTxt ul{width:65%}
		.headerTxt li{font-size:130%; margin-bottom:30px}
		.fieldBox{width:45%; float:left; margin:0 10px 15px;}
		.inputbox{height:40px;}
		.submitQuery{width:20%;}
		#whyUMU li, #approvals li{width:50%; float:left;}
	}
@media only screen and (min-width:768px)
	{
		header{background-size:100% 30%; }
		.headerTxt h4{font-size:200%;}
		.headerTxt ul{width:95%; display:grid; grid-template-columns:1fr 1fr}	
		h1, #approvals h2, #recruiters h3{font-size:180%;}
		.bdrW, .bdrO{width:120px;}
		.ctable{overflow:hidden;}
		.ctable table{width:100%}
		.ctable table th, .ctable table td{padding:7px 10px;}
		.ctable table th{font-weight:700; text-align:center;}
		#recruiters ul{grid-template-columns:auto auto auto;}

		#prepositions h2, #learning h2{font-size:20px;}
		.prepositions_container{display:grid; grid-template-columns:1fr 1fr;}
		#learning ul, .testimonial_section{display:grid; grid-template-columns:1fr 1fr;}
	}
@media only screen and (min-width:1024px)
	{	
		header{background-size:cover; }
		.headerTxt h4{font-size:200%;}
		#whyUMU ul{text-align:center}
		#whyUMU li{width:30%; margin-bottom:0; float:none; display:inline-block; }
		#approvals li{width:25%; margin-bottom:0}
		#whyUMU img{width:200px; height:200px;}
		#approvals img{width:200px;}
		.mainSection{padding:40px 10px}		
		#recruiters ul{grid-template-columns:auto auto auto auto;}
		footer{padding:10px 0; margin:0}

		.prepositions_container{grid-template-columns:1fr 1fr 1fr;}
	}
	@media only screen and (min-width:1200px){		
		header{padding:0 0 50px}
		.Container{width:1100px; max-width:1100px; margin:0 auto;}
		.logo{margin:0 0 50px}
		.headerTxt{width:60%; float:left; text-align:left}
		.headerTxt h4{font-size:250%; margin-bottom:50px; letter-spacing:1.5px;}
		.headerTxt ul{width:100%; margin:0; text-align:left;}
		.headerTxt li{font-size:110%; margin-bottom:50px;}	
		.applyonline_form{width:30%; float:right; margin:5px 0 20px 40px; padding:0; position:relative; z-index:1;}
		.queryBox h4{margin-bottom:10px}
		.fieldBox{width:90%; float:none; margin:0 0 5px;}
		.inputbox{height:35px; margin:0 0 5px; font-size:15px}
		.inputlbox{height:50px; margin:0 0 5px; font-size:15px}
		.labeltxt, .labelsum{font-size:17px}	
		.submitQuery{width:30%;}
		#whyUMU img{width:230px; height:230px;}
		#approvals img{width:250px;}
	}
@media only screen and (min-width:1280px){
		header{background-size:100% 100%;}
		.Container{width:1200px; max-width:1200px;}	
		.headerTxt h4{font-size:320%; line-height:110%; text-align:center}
		.headerTxt ul{width:90%; margin:0 auto}
		.headerTxt li{font-size:130%;}
		.queryBox{width:30%;}
		.queryBox h4{font-size:130%;}
		.mainSection{padding:40px 0}
		.qContainer{max-width:100%;}
		.fieldBox{width:100%;}
		#whyUMU, #approvals, #recruiters, #htapply, #wcapply{padding:50px 0 70px}
		h1, #approvals h2, #recruiters h3, #htapply h3, #wcapply h3{font-size:250%;}
		#recruiters img{width:714px; height:auto; margin:auto;}
		#whyUMU img{width:262px; height:262px;}
		.copyrightTxt{margin:0}

		#prepositions, #learning, #testimonials{padding:50px 0}
		#prepositions h2, #learning h2{font-size:250%;}
		#learning ul{grid-template-columns:1fr 1fr 1fr; line-height:40px}
		.testimonial_section{grid-template-columns:1fr 1fr 1fr 1fr; gap:50px; align-items:start;}
		.tb_img img{width:auto; height:100px;}
		#testimonials h2{font-size:250%;}
		#wcapply p{font-size:20px;}
		#wcapply p span{font-size:25px;}
	}
	@media only screen and (min-width:1360px){
		.Container{width:1280px; max-width:1280px; }				
		.headerTxt h4{font-size:280%; line-height:140%}
		.headerTxt ul{width:85%}
	}
	
/* Sticky Contact Bar */
.sticky-contact-bar{position:fixed;right:6px;bottom:85px;z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 6px;background:#ffffff1f;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;border:1px solid #ffffff40;box-shadow:0 8px 25px #00000040 inset 0 1px 0 #fff3}
.contact-btn{position:relative;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;text-decoration:none;transition:all .25s ease}
.call{background:#1d4ed8d9}
.email{background:#f97316d9}
.whatsapp{background:#25d366d9}
.contact-btn::after{content:attr(data-tooltip);position:absolute;right:42px;background:#0b2443;color:#fff;font-size:11px;padding:5px 8px;border-radius:5px;white-space:nowrap;opacity:0;transform:translateX(8px);transition:.2s ease}
.contact-btn::before{content:"";position:absolute;right:36px;border:5px solid transparent;border-left-color:#0b2443;opacity:0;transition:.2s ease}
@media (hover: hover) {
.contact-btn:hover::after,.contact-btn:hover::before{opacity:1;transform:translateX(0)}
.contact-btn:hover{text-decoration:none;}
.call:hover i{color:#f97316}
}
.whatsapp{animation:pulseBrand 2s infinite}
@keyframes pulseBrand {
0%{box-shadow:0 0 0 0 #25d36680}
70%{box-shadow:0 0 0 8px #25d36600}
100%{box-shadow:0 0 0 0 #25d36600}
}
@media (min-width: 768px) {
.sticky-contact-bar{top:50%;bottom:auto;transform:translateY(-50%);right:10px}
.contact-btn{width:36px;height:36px;font-size:16px}
}