/*@import url(effect.css);

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
/* Fonts */

html { margin: 0; padding:0; overflow-x:hidden;}
body{ 
font-family: 'Outfit', sans-serif; font-weight:normal; padding:0; color:#fff; font-weight:300; padding-right:0!important; background:var(--blue);
font-size:17px;
line-height:1.5;
}

/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */
:root{--blue:#030f33; --yellow:#03d8c1; --light-yellow:#89fff3; --light-blue:#072e97; --light:#f0dbd9; --gray:#222; --shade:linear-gradient(135deg, var(--yellow) 0%, #03d88f 100%);}

img{border:0;}

*{ box-sizing:border-box;
}
*:hover{
}

a{color:#1f1917; text-decoration:none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
a:hover{text-decoration:none; color:var(--blue);}

h1, h2, h3, h4, h5{margin:0 0 15px; padding:0; font-weight:700;}

a:focus, .active{outline: none !important; box-shadow: 0!important;}

@keyframes wiggle {
0%{transform:rotate(0deg);}
80%{transform:rotate(0deg);}
85%{transform:rotate(5deg);}
95%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}


.popUpBox{position:fixed; right:10px; bottom:10px; width:330px; background:#fff; padding:10px; border-radius:0 30px; text-align:center; z-index:99999; font-size:18px; oapcity:1; display:block; transition:.2s ease-in-out;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
}
.popUpBox h4{margin-bottom:10px; font-size:18px;}
.popUpBox div a{display:block; overflow:hidden; font-weight:700; font-size:30px; margin-top:5px; line-height:1; animation: wiggle 1.5s infinite; color:var(--red);}
.popUpBox div a i{font-size:26px;}
.popUpBox > a{position:absolute; left:-10px; top:-10px;background:var(--blue); color:#fff; text-align:center; width:40px; height:40px; line-height:36px; border-radius:50%; border:2px #fff solid;}
.popUpBox div a:hover{color:var(--blue);}
.popUpBox.show{opacity:0; display:none;}


.container{width:1280px; max-width:100%;}

/* Header */
.headerArea{display:block; padding:15px 0; float:left; width:100%; margin-top:1px; background:var(--blue); color:#fff;}
.headerArea .logo{display:block; width:100%; overflow:hidden;}
.headerArea .logo img{height:30px; float:left; margin-right:5px; transition:all .2s ease-in-out;}
.headerArea .logo img:last-child{width:190px;}
.sticky {position: fixed!important; top: 0!important; margin-top:0!important; width: 100%; z-index:999; background:rgba(3,15,51,0.8); backdrop-filter: blur(10px);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
.sticky .logo img:last-child,.headerArea .logo:hover img:last-child{width:0px}

.getintouchBtn{display:block; overflow:hidden; padding:10px; text-transform:uppercase; font-weight:700; text-align:center; background:var(--shade); color:var(--gray); font-size:14px;}
.getintouchBtn:hover{background:var(--light-blue); color:#fff;}
.getintouchBtn i{margin-right:5px;}

.socialLinks{list-style-type:none; margin:0; padding:0; float:right;}
.socialLinks li{display:inline-block; margin:0 12px;}
.socialLinks li a{font-size:20px; color:var(--dark);}
.socialLinks li a:hover{color:var(--blue);}

.project-slider{position:relative; display:block; width:100%; overflow:hidden; clear:both; background:var(--blue); color:#fff; padding:150px 0;}
.project-slider:before{left:0; right:0; top:50%; bottom:0%; content:''; display:block; position:absolute; background: rgb(3,15,51);
background: linear-gradient(0deg, rgba(3,15,51,1) 0%, rgba(3,15,51,0) 100%);
}

.project-slider h2{font-weight:600; font-size:55px; letter-spacing:1px; margin-bottom:25px; line-height:1.2; position:relative; z-index:5;}
/* Video styles to cover the hero section */
.project-slider video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 100%;
    z-index: -1;
    transform: translate(-25%, -50%);
    object-fit: cover;
    opacity: 0.7; /* Optional: reduce opacity for readability */
    mix-blend-mode:screen;
}
.project-slider h2 span {
    font-size: 85px;
    display: block;
    overflow: hidden;
    background: url("../images/txtcolorbg1.png") repeat left top;
    background-size: 800px auto;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: diagonalScroll 5s linear infinite;
}

@keyframes diagonalScroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 800px 800px; /* Moves diagonally */
    }
}

.project-slider a{display:inline-block; background:var(--shade); color:var(--blue); padding:8px 30px; position:relative; z-index:5; border-radius:30px;}


.scroll-downs {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 25vh;
  left: 0;
  margin: auto;
  width :28px;
  height: 25px;
}

.mousey {
  width: 3px;
  padding: 7px 12px;
  height: 28px;
  border: 2px solid rgba(240,235,200,0.7);
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #f1edc9;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}


.serviceAreas{position:relative; display:block; overflow:hidden; padding:0 0 20px; clear:both;}
.serviceAreas [class^="col-"]{position:relative; margin-bottom:40px;}
.serviceAreas [class^="col-"]:before{ background:var(--blue); content:''; display:block; overflow:hidden; z-index:1; position:absolute; left:15px; right:15px; top:0; bottom:0;}
.serviceAreas [class^="col-"] > div{z-index:3; padding:30px; border:1px var(--yellow) solid; height:450px; position:relative; line-height:1.2; overflow: hidden;}
.serviceAreas [class^="col-"] > div h2{font-size:20px;}
.serviceAreas [class^="col-"] > div h3{font-size:22px; font-weight:400;}
.serviceAreas [class^="col-"] > div p{opacity:0; padding:0px 0 0 80px;transition:all .2s ease-in-out;}
.serviceAreas [class^="col-"] > div a{font-size:17px; font-weight:600; text-transform:uppercase; color:#fff; position:absolute; left:30px; bottom:30px; opacity:0;}
.serviceAreas [class^="col-"] > div a i{margin-left:5px; transition:all .2s ease-in-out;}
.serviceAreas [class^="col-"] > div a:hover i{margin-left:15px;}
.serviceAreas [class^="col-"] > div > img{position:absolute; left:0; right:0; top:0; bottom:0; height:100%; width:100%; z-index:-1; mix-blend-mode:normal; transition:all .2s ease-in-out; overflow: hidden; transition: transform 0.3s ease-in-out; transform-origin: top left;}
/*.serviceAreas [class^="col-"]:after{background:var(--blue); content:''; display:block; overflow:hidden; z-index:1; position:absolute; left:16px; right:16px; top:1px; bottom:1px;background: rgb(3,15,51); background: linear-gradient(180deg, rgba(3,15,51,1) 0%, rgba(3,15,51,0) 100%)}*/
.serviceAreas [class^="col-"]:hover > div p{opacity:1; padding:0;}
.serviceAreas [class^="col-"]:hover > div a{opacity:1;}
.serviceAreas [class^="col-"]:hover > div > img{/*mix-blend-mode:overlay;*/ opacity:1; filter: blur(15px); transform: scale(2);}

.serviceAreas [class^="col-"]:nth-child(2) > div, .serviceAreas [class^="col-"]:nth-child(4) > div{color:#222;}
.serviceAreas [class^="col-"]:nth-child(2) > div a, .serviceAreas [class^="col-"]:nth-child(4) > div a{color:#222;}


.welcomeArea{display:block;overflow:hidden;padding:80px 0;position:relative; color:var(--blue); background:#fff;}
.welcomeArea h1{font-weight:normal; line-height:1; margin-bottom:25px; font-size:30px;}
.welcomeArea > div{position:relative; z-index:5;}
.welcomeArea a{display:inline-block; padding:12px 0; color:var(--blue); font-weight:500; font-size:15px; margin-top:10px;}
.welcomeArea a i{ width:40px; height:40px; line-height:40px; text-align:center; margin-right:8px; background:var(--shade); border-radius:50%; display:inline-block;}
.welcomeArea a:hover i{ background:var(--blue); color:#fff;}

.welcomeArea .row .row [class^="col-"]{ position:relative; color:#fff; margin-bottom:10px; line-height:1.2; overflow:hidden;}
.welcomeArea .row .row [class^="col-"]:nth-child(2n+2){ top:20px;}
.welcomeArea .row .row [class^="col-"]:before{position:absolute; content:''; display:block; background:var(--blue); left:5px; right:5px; top:0; bottom:0;}
.welcomeArea .row .row [class^="col-"] > div{position:relative; z-index:2; padding:20px;}
.welcomeArea .row .row [class^="col-"] > div h2{ font-size:18px; margin-top:15px;}
.welcomeArea .row .row [class^="col-"]:hover > div h2{color:var(--yellow);}
.welcomeArea .row .row [class^="col-"] > div img:first-child{position:absolute; right:25px; top:-100px; height:90px; transition:all .5s ease-in-out;}
.welcomeArea .row .row [class^="col-"]:hover > div img:first-child{top:-15px; right:-10px;}


section {
  transition: opacity 0.3s ease, transform 0.5s ease; 
  position: relative;
}


.inactive {
  opacity: 0;
  transform: translateY(100px);
}

.active {
  opacity: 1;
  transform: translateY(0);
}

.welcome:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:var(--shade); /* Semi-transparent background */
  transform: translateX(-100%); /* Start off-screen */
  transition: transform 0.5s ease; /* Smooth transition for non-GSAP animations */
}

.welcome.active:after {
  transform: translateX(0); /* Move to the right edge */
}

.delayed-content {
  opacity: 0; /* Initially hidden */
  transform: scale(0.8); /* Initially scaled down */
  transition: opacity 0.2s ease, transform 0.2s ease; /* Smooth transition for non-GSAP animations */
}

.welcome.active .delayed-content {
  opacity: 1; /* Fully visible when active */
  transform: scale(1); /* Normal scale when active */
}


.projectArea{text-align:center; display:block; overflow:hidden; padding:40px 0 0;}
.projectArea h2, .insiteArea h2, .sayhiArea h2{
    font-size: 48px; margin-bottom:50px;
    display: block;
    overflow: hidden;
    background: url("../images/txtcolorbg1.png") repeat left top;
    background-size: 800px auto;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: diagonalScroll 5s linear infinite;
}
@keyframes diagonalScroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 800px 800px; /* Moves diagonally */
    }
}





#panels-container {position: relative;}
.panel {
min-height: 100vh; /* Each panel takes at least full viewport height */
display: flex;
justify-content: center;
align-items: center;
color: white;
position: relative; /* For the border effect */
padding-top: 0px; /* Space for the border */
box-sizing: border-box; /* Include border in the element's total width/height */
border-radius:50px 50px 0 0;
}
.panel.bg-primary { background-color: var(--light-blue)!important;}
.panel.bg-secondary { background-color: var(--yellow)!important; color:#222!important;}
.panel.bg-success { background-color: var(--light)!important; color:#222!important;}
.empty-panel {
min-height: 100vh; /* Ensure it occupies full viewport height */
}
.panel > span{position:absolute; left:20px; top:20px; font-size:75px;}
.panel [class^="col-"] > div{ padding:50px; background:#fff; display:block; overflow:hidden;box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;}
.panel [class^="col-"] > div > img{width:100%;}
.panel [class^="col-"] h3{margin-bottom:0; font-size:36px; font-weight:600;}
.panel [class^="col-"] h4{margin-bottom:20px; font-size:24px; font-weight:600;}
.panel [class^="col-"] a{display:inline-block; background:#000; color:#fff; padding:10px 20px; border-radius:30px; margin-top:10px; font-weight:500;}
.panel [class^="col-"] a i{color:var(--yellow); margin-right:5px;}
.panel [class^="col-"] a:hover{color:var(--yellow);}



.insiteArea{display:block; padding:80px 0 40px; text-align:center; background:var(--blue); position:relative;}
.insiteArea:before{background:#fff url('../images/whiteLineBg.png') no-repeat center bottom; background-size:100%; display:block; content:''; position:absolute; left:0; right:0; bottom:0; top:45%; z-index:1;}
.insiteArea .item{background:#fff; padding:30px; display:block; overflow:hidden; border-radius:20px; text-align:left; padding-top:250px; position:relative; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; margin:4px;}
.insiteArea .item > a{display:block; overflow:hidden;}
.insiteArea figure{ position:absolute; font-size:100px; color:var(--light-yellow); font-weight:700; top:60px; white-space: nowrap; animation: scrollText 30s linear infinite;}
@keyframes scrollText {
  0% {
    transform: translateX(15%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.insiteArea small{color:var(--yellow); font-weight:700;}
.insiteArea h3{font-weight:500; font-size:22px;}
.insiteArea p{line-height:1.3; font-size:16px; height:70px;}
.owl-theme .owl-nav.disabled + .owl-dots{margin-top:40px!important;}
.owl-theme .owl-dots .owl-dot span{background:var(--blue)!important; width: 12px!important; height: 12px!important; margin: 5px!important;}
.owl-theme .owl-dots .owl-dot.active span{background:var(--shade)!important;}

.insiteArea .item:hover{background:var(--light-blue); color:#fff;}
.insiteArea .item:hover a{color:#fff;}



.counterArea{background:var(--blue); color:#fff; display:block; overflow:hidden; padding:80px 0;}
.counterArea .row:first-child{border-bottom:1px rgba(255,255,255,0.3) solid;}
.counterArea [class^="col-"]{border-left:1px rgba(255,255,255,0.3) solid;}
.counterArea [class^="col-"]:first-child{border:none;}
.counterArea [class^="col-"] > div{padding:40px 20px;}
.counterArea figure{font-size:48px; font-weight:400; margin-bottom:5px; line-height:1.2; color:#fecc59;}
.counterArea [class^="col-"]:nth-child(2) figure{color:#fd8154;}
.counterArea [class^="col-"]:nth-child(3) figure{color:#fd40af;}
.counterArea .row:last-child [class^="col-"]:nth-child(1) figure{color:#17b3ff;}
.counterArea .row:last-child [class^="col-"]:nth-child(2) figure{color:#0cf289;}
.counterArea .row:last-child [class^="col-"]:nth-child(3) figure{color:#c6ff00;}
.counterArea figure span{font-weight:800;}
.counterArea h4{font-weight:400; font-size:22px;}





.sayhiArea{display:block; overflow:hidden; padding:80px 5%; background:#fff; color:#222;}
.sayhiArea h2{font-size:42px; margin-bottom:20px;}
.sayhiArea h3{font-weight:500; font-size:26px;}
.sayhiArea h3 a{color:var(--light-blue); text-decoration:underline;}
.sayhiArea [class^="col-"]{border-left:1px var(--blue) solid; padding:15px;}
.sayhiArea [class^="col-"]:first-child{border:none;}
.sayhiArea [class^="col-"] > a{display:block; margin-top:200px; font-weight:600;}
.sayhiArea [class^="col-"] > a i{color:var(--yellow); margin-left:3px;}
.sayhiArea [class^="col-"] > a:hover{color:var(--yellow);}








.testimonialsArea {
    display: block;
    overflow: hidden;
    clear: both;
    position: relative;
    padding: 10vh 0;
    background: var(--blue);
    scroll-behavior: smooth;
    height: 140vh; /* Full viewport height */
}
.testimonialsArea:before, .testimonialsArea:after{background: rgb(3,15,51); background: linear-gradient(180deg, rgba(3,15,51,0) 0%, rgba(3,15,51,1) 100%); position:absolute; left:0; right:0; bottom:0; height:15%; z-index:10; content:''; display:block; z-index:2;}
.testimonialsArea:after{bottom:auto; top:0; transform: scaleY(-1);}


/* Ensure h2 remains centered */
.testimonialsArea h2 {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    font-size: 600%;
    text-align: center;
    font-weight: 500;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #C0C0C0, #D3D3D3, #C0C0C0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    z-index: 20; /* Ensure it stays above */
}

/* Make fullBox scrollable while keeping h2 outside */
.testimonialsArea .fullBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%; /* Full height */
    overflow-y: scroll;
    padding:0;
    scrollbar-width: none;
    z-index:25;
}

/* Hide scrollbar for Webkit browsers */
.testimonialsArea .fullBox::-webkit-scrollbar {
    display: none;
}


.testimonialsArea ul{margin:100px 0; list-style-type:none; padding:0; position:relative; z-index:5;}
.testimonialsArea ul li{float:right; background:var(--yellow); color:#222; width:50%; margin:30px 5%; padding:40px 40px 20px; border-radius:30px; position:relative; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;}
.testimonialsArea ul li:nth-child(even){float:left;}
.testimonialsArea h3{margin-bottom:5px;}
.testimonialsArea span{display:block; overflow:hidden; margin-bottom:20px;}
.testimonialsArea i{position:absolute; color:#fff; font-size:50px; right:40px; top:40px;}
.testimonialsArea video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 100%;
    z-index: 1;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.5; /* Optional: reduce opacity for readability */
    mix-blend-mode:luminosity;
}





.footer{display:block; clear:both; overflow:hidden; padding:60px 0 0; position:relative; color:#fff;}
.footer img{height:40px;}
.footer img + ul{list-style-type:none; margin:100px 0 10px; padding:0;}
.footer img + ul li{display:inline-block; margin-right:10px;}
.footer img + ul li a{font-size:14px; text-decoration:underline; color:#fff;}
.footer small{display:block; clear:both; overflow:hidden; padding:0; font-size:16px;}
.footer h5{font-size:16px; color:var(--yellow); text-transform:uppercase;}
.footer ul.links{list-style-type:none; margin:0 0 50px; padding:0; font-size:18px; font-weight:400;}
.footer ul.links li{display:block; margin:0 0 12px;}
.footer ul.links li a{color:#fff;}
.footer ul.links li a:hover{color:var(--yellow);}

.contactLinks{margin:0 0 40px; padding:0; list-style-type:none;}
.contactLinks li a{font-size:30px; color:#fff; line-height:1.4;}

.social-icons{margin:0 0 50px; padding:0; list-style-type:none; position:relative;}
.social-icons li{display:inline-block; font-size:26px; margin:0 5px 0 0;}
.social-icons li a{color:var(--blue); background:var(--yellow); width:60px; height:60px; display:block; text-align:center; line-height:60px; border-radius:50%;}
.social-icons li a:hover{background:var(--light-blue); color:#fff;}



.text-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Define text items with slight random animation variations */
.text-item {
    font-weight: bold;
    color: #fff;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    opacity: 0.7;
    text-align: center;
    line-height: 0.5;
    font-size: 4.5em;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
    animation: loopAnimation 5s infinite alternate ease-in-out;
}

/* Define unique animations for each text item */
.text-item:nth-child(2) { animation-delay: 0.3s; }
.text-item:nth-child(3) { animation-delay: 0.6s; }
.text-item:nth-child(4) { animation-delay: 0.9s; }
.text-item:nth-child(5) { animation-delay: 1.2s; }
.text-item:nth-child(6) { animation-delay: 1.5s; }

/* Keyframes for subtle scaling and rotating */
@keyframes loopAnimation {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Lottie animation container */
#lottie-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

/* Hover effect to zoom and increase opacity */
.text-item:hover {
    transform: scale(1.2); /* Additional zoom on hover */
    opacity: 1;
}



#scroll-icon {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:30px;
    height:30px;
    background-color:var(--dark);
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    z-index:99999;
}
#scroll-icon span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:7px solid transparent;
    border-bottom-color:#ffffff
}
#scroll-icon:hover {
    background-color:var(--blue);
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}



.fixed-bottom {width:50px; bottom:5px; left:10px;}
.fixed-bottom img{width:50px; border:2px #fff solid; border-radius:50%;}
.fixed-bottom a{display:block; margin-bottom:5px;}


.innerheaderArea{ height:80vh; z-index:1; display:block; clear:both; overflow:hidden;}
.innerheaderArea > img{position:absolute; left:0; top:50%; transform:translate(0%,-50%); width:100%; height:100%; object-fit:cover;}
.innerheaderArea:before{left:0; right:0; top:40%; bottom:0%; z-index:5; content:''; display:block; position:absolute; background: rgb(3,15,51); background: linear-gradient(0deg, rgba(3,15,51,1) 0%, rgba(3,15,51,0) 100%);}
.innerheaderArea > div{position:relative; z-index:10; top:30%; text-align:center;}
.innerheaderArea h1{
    font-size: 65px;
    display: block;
    overflow: hidden;
    background: url("../images/txtcolorbg1.png") repeat left top;
    background-size: 800px auto;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: diagonalScroll 5s linear infinite;
    margin-bottom:10px;
}
.innerheaderArea h1 + p{font-size:26px;}

.highlightWhiteBox{background:#fff; padding:60px 0; display:block; clear:both; color:#222; font-size:24px;}
.highlightWhiteBox strong{font-weight:700; color:var(--yellow);}
.highlightWhiteBox h2{margin:30px 0; color:var(--light-blue);}

.fourDesignBox [class^="col-"]:after{position:absolute; right:15px; left:15px; top:0; bottom:0; z-index:1; background:var(--yellow); content:''; display:block; border-radius:20px;}
.fourDesignBox [class^="col-"] > div{display:block; overflow:hidden; padding:30px 30px 15px; font-size:18px; position:relative; z-index:5; color:#222;}

.futureReady{padding:60px 0 40px; background:#fff; color:#222;}
.futureReady h3{color:var(--light-blue);}


.innerContentArea{display:block; overflow:hidden; clear:both; padding:80px 0;}
.innerContentArea h2{font-size:42px; color:var(--yellow); text-transform:uppercase; margin-bottom:35px;}
.innerContentArea em strong{font-size:20px;}

.imgTextboxes [class^="col-"] > div{display:block; overflow:hidden; padding:40px;}
.imgTextboxes .row:nth-child(even) [class^="col-"] > div{text-align:right; display:block; overflow:hidden; padding:40px;}
.imgTextboxes .row:nth-child(even) [class^="col-"]:first-child{left:50%;}
.imgTextboxes .row:nth-child(even) [class^="col-"]:last-child{right:50%;}
.imgTextboxes h3{ font-size:22px;}
.imgTextboxes img{width:100%; height:100%; object-fit:cover; position:relative; z-index:5; border-radius:15px;}

.imgTextboxes .row [class^="col-"]:first-child:after{position:absolute; right:-15px; width:30px; top:10%; bottom:10%; background:var(--yellow); content:''; display:block; border-radius:30px;}
.imgTextboxes .row:nth-child(even) [class^="col-"]:first-child:after{left:-15px; right:auto;}

.specilizeBox{}
.specilizeBox h3{font-size:24px; color:var(--light-blue);}
.specilizeBox img{background:var(--light-blue); width:130px; height:130px; padding:15px; margin-bottom:25px; border-radius:15px;}
.specilizeBox [class^="col-"]{margin-bottom:30px;}
.specilizeBox [class^="col-"]:nth-child(3n+2) img{background:#17b3ff;}
.specilizeBox [class^="col-"]:nth-child(3n+3) img{background:#0cf289;}
.specilizeBox [class^="col-"]:nth-child(2) h3{color:#17b3ff;}
.specilizeBox [class^="col-"]:nth-child(3) h3{color:#0cf289;}
.specilizeBox [class^="col-"] p{line-height:1.3; padding:0 50px 0 0;}

.benifitsArea{background:var(--light-blue); padding:80px 0; line-height:1.3; font-size:18px;}
.benifitsArea h2{text-align:center; font-size:42px; margin-bottom:20px; color:var(--yellow);}
.benifitsArea h2 + p, .benifitsArea h2 + p + p{text-align:center; margin-bottom:40px; font-size:20px;}
.benifitsArea strong{font-weight:700;}
.highlighPara{display:block; padding:20px 20px 25px; border-radius:15px; background:rgba(0,0,0,0.2); box-shadow: rgb(0, 0, 0, 0.3) 3px 3px 6px 0px inset, rgba(0, 0, 0, 0.3) -3px -3px 6px 1px inset;}
.highlighPara strong{font-weight:600; color:var(--light); display:block; overflow:hidden; margin-bottom:5px;}



.FaqArea{ background:var(--light)!important; color:#222; padding:60px 0;}
.FaqArea h2{font-size:72px; color:var(--light-blue);}
.accordion{}
.accordion .card{background:none;margin-bottom:15px;border: none;border-radius:0;}
.accordion .card-header {background:none;color:var(--blue);cursor: pointer; border-radius:0; padding:0!important; margin-bottom:0px!important;}
.accordion .card-header:hover {background-color:none;}
.accordion .btn-link {text-decoration: none;color:#fff; background:var(--light-blue); padding:10px 15px; border-radius:0!important; font-size: 1.2rem;display: flex; justify-content: space-between;align-items: center;width: 100%; position:relative;}
.accordion .btn-link.collapsed{text-decoration: none; background:none; color:var(--blue);}
.card-header .btn-link:after {
	position:absolute; right:20px; top:5px;
    font-family: 'Font Awesome 5 Free';
    content:'\f078';
    font-weight:900;
    width:15px; height:30px; font-size:24px;
}
.card-header .btn-link.collapsed:after {content:'\f054'; color:var(--blue);}
.accordion .card-body{ padding:10px 15px 0;}



.white4BoxArea{background:#fff; padding:80px 0 50px; color:#222;}
.white4BoxArea h2{margin-bottom:40px;}
.white4BoxArea [class^="col-"]{margin-bottom:30px;}
.white4BoxArea [class^="col-"]:before{position:absolute; content:''; display:block; background:var(--yellow); border-left:8px #fecc59 solid; top:0; bottom:0; left:15px; right:15px;}
.white4BoxArea [class^="col-"] > div{display:block; overflow:hidden; padding:30px 30px 15px; position:relative; z-index:5;}
.white4BoxArea [class^="col-"] h3{font-size:24px;}


.processArea{padding:60px 0;}
.processArea h2{margin-bottom:40px; font-size:42px;}

.main-timeline {
    position: relative
}

.main-timeline:before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: var(--yellow);
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.main-timeline .timeline {
    margin-bottom: 40px;
    position: relative
}

.main-timeline .timeline:after {
    content: "";
    display: block;
    clear: both
}

.main-timeline .icon {
    width: 18px;
    height: 18px;
    line-height: 18px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.main-timeline .icon:before,
.main-timeline .icon:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.33s ease-out 0s
}

.main-timeline .icon:before {
    background:#fff;
    border: 2px solid var(--yellow);
    left: -3px
}

.main-timeline .icon:after {
    border: 2px solid var(--light);
    left: 3px
}

.main-timeline .timeline:hover .icon:before {
    left: 3px
}

.main-timeline .timeline:hover .icon:after {
    left: -3px
}

.main-timeline .date-content {
    width: 50%;
    float: left;
    margin-top: 22px;
    position: relative
}

.main-timeline .date-content:before {
    content: "";
    width: 36.5%;
    height: 2px;
    background: var(--yellow);
    margin: auto 0;
    position: absolute;
    top: -11px;
    right: 12px;
    bottom: 0
}

.main-timeline .date-outer {
    width: 125px;
    height: 125px;
    font-size: 16px;
    text-align: center;
    margin: auto;
    z-index: 1
}

.main-timeline .date-outer:before,
.main-timeline .date-outer:after {
    content: "";
    width: 125px;
    height: 125px;
    margin: 0 auto;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.33s ease-out 0s
}

.main-timeline .date-outer:before {
    border: 2px solid var(--yellow); background:var(--shade);
    left: -6px
}

.main-timeline .date-outer:after {
    border: 2px solid var(--light);
    left: 6px
}

.main-timeline .timeline:hover .date-outer:before {
    left: 6px
}

.main-timeline .timeline:hover .date-outer:after {
    left: -6px
}

.main-timeline .date {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 32%;
    left: 0
}

.main-timeline .month {
    font-size: 18px;
    font-weight: 700
}

.main-timeline .year {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #232323;
    line-height: 36px
}

.main-timeline .timeline-content {
    width: 50%;
    padding: 20px 0 20px 50px;
    float: right
}

.main-timeline .title {
    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 0 15px 0
}

.main-timeline .description {
    margin-bottom: 0
}

.main-timeline .timeline:nth-child(2n) .date-content {
    float: right
}

.main-timeline .timeline:nth-child(2n) .date-content:before {
    left: 10px
}

.main-timeline .timeline:nth-child(2n) .timeline-content {
    padding: 20px 50px 20px 0;
    text-align: right
}

@media only screen and (max-width: 991px) {
    .main-timeline .date-content {
        margin-top: 35px
    }
    .main-timeline .date-content:before {
        width: 22.5%
    }
    .main-timeline .timeline-content {
        padding: 10px 0 10px 30px
    }
    .main-timeline .title {
        font-size: 17px
    }
    .main-timeline .timeline:nth-child(2n) .timeline-content {
        padding: 10px 30px 10px 0
    }
}

@media only screen and (max-width: 767px) {
    .main-timeline:before {
        margin: 0;
        left: 7px
    }
    .main-timeline .timeline {
        margin-bottom: 20px
    }
    .main-timeline .timeline:last-child {
        margin-bottom: 0
    }
    .main-timeline .icon {
        margin: auto 0
    }
    .main-timeline .date-content {
        width: 95%;
        float: right;
        margin-top: 0
    }
    .main-timeline .date-content:before {
        display: none
    }
    .main-timeline .date-outer {
        width: 110px;
        height: 110px
    }
    .main-timeline .date-outer:before,
    .main-timeline .date-outer:after {
        width: 110px;
        height: 110px
    }
    .main-timeline .date {
        top: 30%
    }
    .main-timeline .year {
        font-size: 24px
    }
    .main-timeline .timeline-content,
    .main-timeline .timeline:nth-child(2n) .timeline-content {
        width: 95%;
        text-align: center;
        padding: 10px 0
    }
    .main-timeline .title {
        margin-bottom: 10px
    }
}



.contactHead h3{ font-weight:normal; font-size:42px;}
.contactBoxes{margin-bottom:50px; border-top:2px #fff solid; border-bottom:2px #fff solid; padding-top:10px; padding-bottom:10px;}
.contactBoxes [class^="col-"]{margin:10px 0;}
.contactBoxes [class^="col-"] > a{color:#fff; font-size:24px;}
.contactBoxes [class^="col-"] > a:hover{color:var(--yellow);}


.contactForm p{ font-size:22px; margin-bottom:30px;}
.contactForm{margin-bottom:40px;}
.contactForm label{display:block; clear:both; margin-bottom:10px; font-size:16px;}
.contactForm input, .contactForm textarea, .contactForm select{height:50px; border:none; background:#031547; color:#fff; padding:0 10px; display:block; width:100%; margin-bottom:20px;}
.contactForm textarea{height:120px;}
.contactForm input[type="submit"]{width:250px; background:var(--yellow); color:var(--dark); font-weight:600;}
.contactForm input[type="submit"]:hover{background:#fff;}



/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media (max-width: 1024px){
}

@media (max-width: 991px){
.headerArea .logo img{ height:30px; margin-bottom:15px;}
.socialLinks{float:left;}
.socialLinks li{margin:0 8px;}
.socialLinks li a{font-size:16px; line-height:1;}


.panel [class^="col-"] > div{ padding:10px; margin-bottom:10px;}
.panel [class^="col-"] h3{font-size:30px;}
.panel [class^="col-"] h4{margin-bottom:10px; font-size:20px;}
.panel [class^="col-"] p{line-height:1.3;}
.panel > span{position:absolute; left:10px; top:10px; font-size:45px;}



.innerheaderArea{ height:350px;}
.innerheaderArea h1{font-size: 45px;}
.innerheaderArea h1 + p{font-size:26px;}

}

@media (max-width: 767px){

.project-slider h2{font-size:26px;}
.project-slider video {width: 140%;}
.project-slider h2 span {font-size: 45px;}

.serviceAreas [class^="col-"] > div {height: 350px;}

.welcomeArea h1{font-size:26px;}
.welcomeArea .row .row [class^="col-"]:nth-child(2n+2){ top:0px;}

.projectArea h2, .insiteArea h2, .sayhiArea h2{font-size:28px;}


.counterArea{ text-align:center; padding:60px 0;}
.counterArea .row:first-child{border:none;}
.counterArea [class^="col-"]{border-left:none; border-bottom:1px rgba(255,255,255,0.3) solid;}
.counterArea [class^="col-"]:first-child{border-bottom:1px rgba(255,255,255,0.3) solid;}
.counterArea .row:last-child [class^="col-"]{border-bottom:1px rgba(255,255,255,0.3) solid;}

.sayhiArea{padding:40px 10%;}
.sayhiArea [class^="col-"]{border-left:none; border-top: 1px var(--blue) solid;}
.sayhiArea [class^="col-"] > a{margin-top:30px;}


.testimonialsArea ul li{width:85%;}


.footer{text-align:center;}
/*.footer [class^="col-"]:last-child{display:none;}*/
.footer img + ul{margin:20px 0 10px;}
.footer small{display:block; clear:both; overflow:hidden; padding:0 0 40px; font-size:16px;}



.enquiryArea h2{font-size:32px; }
.enquiryArea h2 + p{font-size:18px;}
.enquiryArea h3{font-size:30px;}
.enquiryArea [class^="col"] > div{padding:25px;}

.fixed-bottom {width:95px;}
.fixed-bottom img{width:40px;}
.fixed-bottom a{display:inline-block; margin:0px 2px 5px 0;}


.innerContentArea h2{font-size:32px;}
.imgTextboxes .row [class^="col-"]:first-child:after, .imgTextboxes .row:nth-child(even) [class^="col-"]:first-child:after{right:5%; left:5%; height:30px; bottom:-15px; top: auto; width: auto;}
.imgTextboxes .row [class^="col-"] img{margin-top:20px;}
.imgTextboxes .row [class^="col-"] > div{padding:30px 5% 0;}
.imgTextboxes .row:nth-child(even) [class^="col-"] > div{text-align:left; padding:30px 5% 0;}
.imgTextboxes .row:nth-child(even) [class^="col-"]:first-child{left:auto;}
.imgTextboxes .row:nth-child(even) [class^="col-"]:last-child{right:auto;}


}

@media (max-width: 500px){
.header-area > a.logo img{height:80px;}
}

@media (max-width: 360px){
}


@media screen and (max-width: 1920px) and (min-width: 1240px){
}

.logoIcon{display:inline-block; height:25px; width:40px; border-top:3.5px #fff solid; border-bottom:3.5px #fff solid; position:relative; float:left; margin:3px 5px 0 0; transition:all .2s ease-in-out;}
.logoIcon:before{position:absolute; content:''; display:block; top:8px; left:0; right:0; height:3.5px; background:#fff;}
.logoIcon small{position:absolute; height:16px; width:16px; border:2px var(--blue) solid; border-radius:50%; top:1.5px; left:5px; transition:all .2s ease-in-out;
background: #F5D332; background: linear-gradient(45deg, rgba(245, 211, 50, 1) 0%, rgba(245, 194, 10, 1) 100%);}

.logo:hover .logoIcon{width:50px;}
.logo:hover .logoIcon small{left:28px;}

.projectPageContent{border-radius:50px 50px 0 0; background-color: var(--light-blue)!important; padding:80px 0 50px;}
.projectPageContent [class^="col-"] > div{ padding:50px; background:#fff; display:block; overflow:hidden;box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;}
.projectPageContent [class^="col-"] > div > img{width:100%;}
.projectPageContent [class^="col-"] h3{margin-bottom:0; font-size:36px; font-weight:600;}
.projectPageContent [class^="col-"] h4{margin-bottom:20px; font-size:24px; font-weight:600;}
.projectPageContent [class^="col-"] a{display:inline-block; background:#000; color:#fff; padding:10px 20px; border-radius:30px; margin-top:10px; font-weight:500;}
.projectPageContent [class^="col-"] a i{color:var(--yellow); margin-right:5px;}
.projectPageContent [class^="col-"] a:hover{color:var(--yellow);}

.projectPageContent .owl-nav{position:relative; top:38px; font-size:30px;}
.projectPageContent .owl-nav .owl-prev{left:-100px; position:relative;}
.projectPageContent .owl-nav .owl-next{right:-100px; position:relative;}
.projectPageContent .owl-dots{position:relative; z-index:10; margin:0 auto; width:150px;}


.modal .modal-dialog{max-width:900px;}
.modal-content{border:none; position:relative;padding:0!important;font-size:14px;border-radius:0;-webkit-box-shadow:0 10px 34px -15px rgba(0,0,0,.24);-moz-box-shadow:0 10px 34px -15px rgba(0,0,0,.24);box-shadow:0 10px 34px -15px rgba(0,0,0,.24)}
.modal-content .modal-header{padding:0;border:none}
.modal-content button.close{position:absolute;top:0;right:0;padding:0;margin:0;width:40px;height:40px;z-index:1;text-shadow:none;background:var(--light-blue);color:#fff;opacity:1}
.modal-content .modal-body{border:none;position:relative;z-index:0}
.modal-content .row [class^=col-]:first-child{background:transparent url('../images/serviceImg1.jpg') no-repeat center center;background-size:cover}
.modal-content .modal-body h2{font-weight:700;text-transform:uppercase;font-size:36px; margin-bottom:20px; color:var(--light-blue);}
.modal-content .modal-body h2 span{font-weight:400}
.modal-content .modal-body h4{text-transform:uppercase;font-size:15px}
.modal-content .modal-body p{color:var(--dark); margin-bottom:0; text-align:center;}
.modal-content .modal-body .form-control{margin-bottom:10px}
.modal-content .modal-body .btn-primary{color:#fff!important;text-transform:uppercase;letter-spacing:1px;font-size:14px;background:var(--blue)!important;width:100%;margin-top:10px;border:none!important}
.modal-content .text{position:relative;z-index:0}
.modal-content .text:after{position:absolute;top:-30px;left:-30px;right:-30px;bottom:-30px;content:'';border:1px solid rgba(0,0,0,.1);z-index:-1}

.modal-content input[type="submit"]{width:250px; background:var(--yellow); color:#fff; font-weight:600; width:100%;}
.modal-content input[type="submit"]:hover{background:var(--light-blue);}


.shorHead{height:50vh;}

.scholarshipHead{ display:block; overflow:hidden; padding:15px 0; background:var(--light-blue); color:#fff;}
.scholarshipHead a{display:inline-block; padding:10px 10px 10px 20px; background:var(--shade); border-radius:30px; color:var(--dark);}
.scholarshipHead a strong{margin-left:5px; background:var(--dark); color:#fff; width:26px; height:26px; line-height:26px; font-size:12px; text-align:center; border-radius:50%; display:inline-block;}
.scholarshipHead a:hover{background:#fff;}
.scholarshipHead select{padding:8px 10px; background:#fff; border:none; border-radius:20px; font-family: 'Outfit', sans-serif;}
.scholarshipHead select option{font-family: "Arimo";}

.scholarshipHead ul{margin:0; padding:0; list-style-type:none; display:flex; justify-content: space-between; gap: 10px;}
.scholarshipHead ul li{flex: 1; text-align:center;}
.scholarshipHead ul li a{display:block; width:100%; background:none; border:1px #fff solid; color:#fff;}
.scholarshipHead ul li.active a, .scholarshipHead ul li:hover a{background:var(--shade); color:var(--dark); font-weight:600; border-color:var(--gold);}



.resourceBox > div{margin-bottom:30px;}
.resourceBox > div > div{background:#fff; padding:30px; display:block; overflow:hidden; border-radius:20px; text-align:left; position:relative; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; margin:4px;}
.resourceBox > div > div > a{display:block; overflow:hidden;}
.resourceBox > div > div figure{ position:absolute; font-size:100px; color:var(--light-yellow); font-weight:700; top:60px; white-space: nowrap; animation: scrollText 30s linear infinite;}
@keyframes scrollText {
  0% {
    transform: translateX(15%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.resourceBox > div > div > a img{width:100%; display:block; margin-bottom:10px; border-top-left-radius:15px; border-top-right-radius:15px;}
.resourceBox > div > div small{color:var(--yellow); font-weight:700; font-size:14px;}
.resourceBox > div > div h3{font-weight:500; font-size:22px;}
.resourceBox > div > div p{line-height:1.3; font-size:16px; height:70px;}
.resourceBox > div > div:hover{background:var(--light-blue); color:#fff;}
.resourceBox > div > div:hover a{color:#fff;}


.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 20px 0;
  gap: 10px;
}

.pagination li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
}

.pagination li a:hover,
.pagination li a.active {
  background-color: var(--yellow);
  color: #fff;
}


.BlogArea{text-align: left;}
.BlogArea img{width:400px!important;max-width:100%!important;height:auto!important; margin:0 25px 25px 0px; float:left; border:1px #ddd solid;}
.BlogArea h2{text-align: center; margin-bottom: 30px;}
.BlogArea p{text-align: justify;}
.blogDates{display:block;overflow:hidden;padding:0 0 10px;}
.blogDates i{color:var(--dark);margin:0 3px}
.blogDates a{float: right; padding: 5px 10px; background: var(--dark); color: #fff; border-radius:5px;}
.blogDates a i{color: #fff;}
.blogDates a:hover{background: var(--green);}

.blogTitle{min-height:80px}
.blogTitle a:hover{color:var(--green)}
.tags{visibility:visible;margin-bottom:15px;font-size:13px;text-transform:uppercase}
.tags a{padding:3px 8px;background:#ddd;color:#222;display:inline-block;margin:0 3px;font-size:12px}
.tags a:hover{background:var(--green);color:#fff;border:none!important;text-decoration:none}
.navigation.post-navigation{display:block;overflow:hidden;padding:10px 0;margin:10px 0 15px;border-top:2px var(--green) dotted;border-bottom:2px var(--green) dotted;}
.nav-links>div{width:50%;float:left;}
.nav-links>div.nav-next{float:right;}
.navigation.post-navigation .nav-links span{border:none}
.nav-next{text-align:right}
.next-post,.previous-post{font-size:16px;color:var(--green);font-weight:600}
.nav-links .post-title{display:block;clear:both;overflow:hidden}
.nav-links a{color:var(--green)}
article[class^=post-]{display:block;overflow:hidden;padding:15px;margin-bottom:20px;border:1px #ddd solid}
article[class^=post-] h2{font-size:20px}
article[class^=post-] .post-taxonomies{display:none}
article[class^=post-] a img{width:300px!important;margin-bottom:5px;max-width:100%!important}
article[class^=post-] a{color:var(--green)}
article[class^=post-] a:hover{color:red}
article[class^=post-] .posted-on{font-size:12px;display:block;padding:5px 10px;background:#ddd}
article+.navigation.pagination{display:none}
.blogTitle+p{min-height:115px!important}
.btn.btn-primary{background:var(--dark)!important;border:none!important}
.btn.btn-primary:hover{background:var(--green)!important}
.pagination{justify-content:center}
.page-numbers{display:inline-block;padding:5px 10px;margin:0 2px 0 0;border:1px solid #fff;background:#fff;color:var(--blue);line-height:1;text-decoration:none;border-radius:2px;font-weight:600}
.page-numbers.current,a.page-numbers:hover{background:var(--shade);color:#fff}


.projectListing [class^="col-"]{margin-bottom:30px;}
.projectListing [class^="col-"]:before{position:absolute; left:15px; right:15px; top:0; bottom:0; content:''; display:block; background:#fff;}
.projectListing [class^="col-"] > div{background:none; padding:5px 15px 15px; position:relative; z-index:5; color:#222;}
.projectListing [class^="col-"] > div a:first-child{background:none; border-radius:0; margin-bottom:20px; padding:0;}
.projectListing [class^="col-"] > div h3{font-size:20px; margin-bottom:5px;}
.projectListing [class^="col-"] > div h4{font-size:16px; font-weight:400; margin-bottom:10px;}


.innerheaderArea video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.2; /* Optional: reduce opacity for readability */
}



/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media (max-width: 1024px){
}

@media (max-width: 991px){
.headerArea .logo img{ height:30px; margin-bottom:15px;}
.socialLinks{float:left;}
.socialLinks li{margin:0 8px;}
.socialLinks li a{font-size:16px; line-height:1;}


.panel [class^="col-"] > div{ padding:10px; margin-bottom:10px;}
.panel [class^="col-"] h3{font-size:30px;}
.panel [class^="col-"] h4{margin-bottom:10px; font-size:20px;}
.panel [class^="col-"] p{line-height:1.3;}
.panel > span{position:absolute; left:10px; top:10px; font-size:45px;}


.projectPageContent [class^="col-"]{text-align:center;}
.projectPageContent [class^="col-"] > div{ padding:10px; margin-bottom:10px;}
.projectPageContent [class^="col-"] h3{font-size:30px;}
.projectPageContent [class^="col-"] h4{margin-bottom:10px; font-size:20px;}
.projectPageContent [class^="col-"] p{line-height:1.3;}


.innerheaderArea{ height:350px;}
.innerheaderArea h1{font-size: 45px;}
.innerheaderArea h1 + p{font-size:26px;}

}

@media (max-width: 767px){

.project-slider h2{font-size:26px;}
.project-slider video {width: 140%;}
.project-slider h2 span {font-size: 45px;}

.serviceAreas [class^="col-"] > div {height: 350px;}

.welcomeArea h1{font-size:26px;}
.welcomeArea .row .row [class^="col-"]:nth-child(2n+2){ top:0px;}

.projectArea h2, .insiteArea h2, .sayhiArea h2{font-size:28px;}


.counterArea{ text-align:center; padding:60px 0;}
.counterArea .row:first-child{border:none;}
.counterArea [class^="col-"]{border-left:none; border-bottom:1px rgba(255,255,255,0.3) solid;}
.counterArea [class^="col-"]:first-child{border-bottom:1px rgba(255,255,255,0.3) solid;}
.counterArea .row:last-child [class^="col-"]{border-bottom:1px rgba(255,255,255,0.3) solid;}

.sayhiArea{padding:40px 10%;}
.sayhiArea [class^="col-"]{border-left:none; border-top: 1px var(--blue) solid;}
.sayhiArea [class^="col-"] > a{margin-top:30px;}


.testimonialsArea ul li{width:85%;}


.footer{text-align:center;}
/*.footer [class^="col-"]:last-child{display:none;}*/
.footer img + ul{margin:20px 0 10px;}
.footer small{display:block; clear:both; overflow:hidden; padding:0 0 40px; font-size:16px;}



.enquiryArea h2{font-size:32px; }
.enquiryArea h2 + p{font-size:18px;}
.enquiryArea h3{font-size:30px;}
.enquiryArea [class^="col"] > div{padding:25px;}

.fixed-bottom {width:95px;}
.fixed-bottom img{width:40px;}
.fixed-bottom a{display:inline-block; margin:0px 2px 5px 0;}


.innerContentArea h2{font-size:32px;}
.imgTextboxes .row [class^="col-"]:first-child:after, .imgTextboxes .row:nth-child(even) [class^="col-"]:first-child:after{right:5%; left:5%; height:30px; bottom:-15px; top: auto; width: auto;}
.imgTextboxes .row [class^="col-"] img{margin-top:20px;}
.imgTextboxes .row [class^="col-"] > div{padding:30px 5% 0;}
.imgTextboxes .row:nth-child(even) [class^="col-"] > div{text-align:left; padding:30px 5% 0;}
.imgTextboxes .row:nth-child(even) [class^="col-"]:first-child{left:auto;}
.imgTextboxes .row:nth-child(even) [class^="col-"]:last-child{right:auto;}


.scholarshipHead a{padding:5px 5px 5px 10px; font-size:12px;}
.scholarshipHead select{width:100%; margin-top:0;}

.scrollerHead{text-align:center;}
.scrollerHead [class^="col-"]{margin-bottom:10px;}
.scholarshipHead ul{margin:0; list-style-type:none; display:block;}
.scholarshipHead ul li{text-align:center; padding:5px 0;}
}

@media (max-width: 500px){
.header-area > a.logo img{height:80px;}
}

@media (max-width: 360px){
}


@media screen and (max-width: 1920px) and (min-width: 1240px){
}