body { color:#000; font-family:Plus Jakarta Sans !important; }
:root { --main-color:#124d7b; --main-color-1:#aeacac; }
a, i, button, .work-box{ outline:none; text-decoration:none !important; transition:all ease 0.5s; -webkit-transition:all ease 0.5s; }
ul { list-style:none; margin:0; padding:0; }
img { height:auto; object-fit:cover; width:auto; }
h1, h2, h3, h4, h5, h6 { font-family:Rubik; }
p { font-weight:400; }

header { left:0; position:absolute; right:0; top:45px; transition:all ease 0.3s; -webkit-transition:all ease 0.3s; z-index:111; }
header.smaller { background-color:#fff; position:sticky; top:0; }
header .col-lg-2, header .col-lg-10 { align-self:center; }

.top-head { align-items:center; background-color:#fff; display:flex; justify-content:space-between; padding:0 18px; }
.logo { width:180px; }
.get-btn { background-color:var(--main-color); color:#fff; display:inline-block; font-size:16px; font-weight:700; padding:7px 0; text-align:center; text-transform:uppercase; width:200px; }
.get-btn:hover { background-color:#000; color:#fff; }
.get-btn img { margin:-3px 4px 0 0; transition:all ease 0.5s; -webkit-transition:all ease 0.5s; width:0; }
.get-btn:hover img { width:38px; }

.call-btn { color:#000; display:block; font-size:14px; font-weight:500; }  
.call-btn strong { align-items:center; background-color:var(--main-color); border-radius:50%; display:flex; float:left; height:45px; justify-content:center; margin:1px 10px 0 0; text-align:center; width:45px; }
.call-btn strong img { width:25px; }
.call-btn b { display:block; font-size:17px; font-weight:600; }
.call-btn:hover, .serv-box a:hover, footer li a:hover { color:var(--main-color); }

/**** Navbar CSS Start Here ****/
header .navbar, header .navbar-toggler { padding:0; }
header .navbar-expand-md .navbar-nav .nav-link { color:var(--main-color); font-size:16px; font-weight:600; padding:25px 17px; position:relative; }
header .navbar-expand-md .navbar-nav .nav-link:hover, header .navbar-nav .nav-link:focus { color:#000; }
/**** Navbar CSS End Here ****/

.main img { height:700px; }
.main .carousel-caption { bottom:-30px; display:flex; flex-direction:column; left:0; justify-content:center; right:0; top:0; z-index:0; }
.main .carousel-caption::before, footer::before { background-color:rgba(0,0,0,0.5); bottom:0; content:''; left:0; padding:0; position:absolute; right:0; top:0; z-index:-1; }
.main .carousel-control-prev, .main .carousel-control-next { opacity:1; width:75px; z-index:1; }
.main .carousel-control-prev span, .main .carousel-control-next span { background-color:var(--main-color); background-size:18px; border-radius:50%; height:40px; width:40px; }
.main h1 { color:#fff; font-size:66px; font-weight:600; line-height:1.25; margin:15px 0 18px; }
.main h2 { color:#fff; font-size:24px; font-weight:500; letter-spacing:1.5px; margin:0; text-transform:uppercase; }
.main p { color:#fff; font-size:18px; margin:0 auto 35px; line-height:1.8; width:75%; }
.main .get-btn { margin:0 8px 8px 0; }
.our-btn { border:2px solid #fff; color:#fff; display:inline-block; font-size:16px; font-weight:700; padding:5px 30px; text-transform:uppercase; }
.our-btn:hover { border:2px solid var(--main-color); background-color:var(--main-color); color:#fff; }

.banner-icon { margin:-100px 0 0; position:relative; }
.banner-icon .col-lg-4, .banner-icon.dd .col-xl-5, .service-sec .col-lg-4, .portfolio-sec .col-lg-4, .portfolio-sec .col-lg-6, .team-sec .col-lg-3, .work-sec .col-lg-3 { margin:0 0 24px; }
.banner-box { background-color:#fff; box-shadow:0 0 11.3px 0 rgba(0,0,0,0.25); height:100%; padding:40px 25px; text-align:center; }
.banner-box img { height:72px; }
.banner-box h2 { color:var(--main-color); font-size:20px; font-weight:700; margin:15px 0; }
.banner-box p { color:#485273; font-size:16px; line-height:1.6; margin:0; }
.ban-icon1 { align-items:center; background-color:var(--main-color); clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display:flex; height:79px; margin:0 auto; justify-content:center; width:70px; }
.ban-icon1 img { filter:brightness(0) invert(1); height:45px; }

.about-sec, .faq-sec, .test-page { padding:80px 0; }
.about-sec .col-lg-6:first-child { padding:45px 35px 45px 12px; }
.about-sec .col-lg-6:last-child img { border-radius:15px; height:100%; }
.about-sec h2, .what-sec h2, .portfolio-sec h2, .faq-sec h2, .team-sec h2, .work-sec h2 { color:var(--main-color); font-size:36px; font-weight:500; margin:0; position:relative; }
.line-img { margin:15px 0; position:relative; }
.line-img::before { border-bottom:1px solid #dddbf2; bottom:12px; content:''; left:0; position:absolute; right:0; top:0; }
.line-img span { background-color:#fff; display:block; margin:0 auto; position:relative; text-align:center; width:70px; }
.line-img img { filter:brightness(0); width:22px; }
.about-sec p, .what-sec p, .serv-box p, .faq-sec p, .team-sec p, .work-sec p { color:#485273; font-size:16px; line-height:1.7; margin:0; }
.about-sec p strong, .what-sec p strong { color:var(--main-color); display:block; font-size:20px; font-weight:700; }
.abt-icon { align-items:center; background-color:#000; border-radius:50%; display:flex; float:left; height:50px; justify-content:center; width:50px; }
.abt-icon img { filter:brightness(0) invert(1); height:25px; }
.about-sec li { padding:25px 0 0; }
.about-sec li p { margin:0 0 0 70px; }
.about-sec .get-btn { margin:28px 0 0 70px; }

.what-sec { background-image:url(https://thedevserver.us/dev/ocp/wp-content/uploads/2025/11/what-bg.webp) !important; background-position:top left; background-size:cover; padding:100px 0; }
.what-sec h2 { margin:0 0 12px; }
.what-sec h3, .portfolio-sec h3, .faq-sec h3, .about-sec h3 { color:#000; font-size:25px; font-weight:500; letter-spacing:1.5px; margin:0 0 15px; text-transform:uppercase; }
.what-sec .line-img span { background-color:#ececec; }
.what-sec li { align-items:center; border-bottom:2px solid #dedede; display:flex; gap:30px; padding:35px 0; }
.what-sec li:last-child { border-bottom:none !important; padding-bottom:0 !important; }
.what-sec p strong { color:#000; font-size:22px; }
.what-icon span { align-items:center; background-color:#fff; border:1px solid var(--main-color); border-radius:50%; display:flex; height:100px; justify-content:center; width:100px; }
.what-icon span img { width:60px; }

.service-sec { background-attachment:fixed; background-image:url(../images/service-bg.webp) !important; background-position:top center; background-size:cover; padding:80px 0; text-align:center; }
.service-sec h2 { color:#000; font-size:38px; font-weight:600; margin:0 0 55px; }
.service-sec h3 { color:var(--main-color); font-size:20px; font-weight:500; letter-spacing:1.5px; margin:0 10px 15px; text-transform:uppercase; }
.serv-box { background-color:#fff; border:2px solid var(--main-color-1); height:100%; padding:28px; text-align:left; }
.serv-box img { width:70px; }
.serv-box h4 { color:var(--main-color); font-size:24px; font-weight:600; margin:20px 0 12px; }
.serv-box a, .read-btn { color:var(--main-color-1); display:inline-block; font-size:17px; font-weight:600; margin:15px 0 0; }

.portfolio-sec { padding:0 0 60px; text-align:center; }
.portfolio-sec h2 { margin:0 0 40px; }
.portfolio-box { overflow:hidden; }
.portfolio-box img { height:300px; transition:all 0.7s ease; -webkit-transition:all 0.7s ease; }
.portfolio-box:hover img { transform:scale(1.08); -webkit-transform:scale(1.08); }
.portfolio-txt { bottom:25px; left:25px; position:absolute; right:25px; text-align:left; transition:all ease .9s; transform:translateY(140%); z-index:1; -webkit-transform:translateY(140%); }
.portfolio-box:hover .portfolio-txt { transform:translateY(0%); -webkit-transform:translateY(0%); }
.portfolio-txt h4 { color:#fff; font-size:27px; font-weight:500; margin:0 0 10px; }
.portfolio-txt p { color:#fff; font-size:16px; line-height:1.6; margin:0; }

.faq-sec .col-lg-5 { align-self:end; padding-bottom:22px; }
.faq-sec h2 { margin:0 0 30px; }
.faq-sec .card { border:1px solid rgba(51,166,221,0.25); border-radius:35px; margin:0 0 22px; padding:12px 52px 12px 30px; }
.faq-sec .card-header { background-color:transparent; border:none; border-radius:0; font-size:19px; font-weight:700; padding:0; }
.faq-sec .card-header a { color:var(--main-color); display:block; }
.faq-sec .card-header a::after { align-items:center; background-color:#e5f7ff; border-radius:50%; bottom:0; color:var(--main-color); content:"\+"; display:flex; font-size:32px; font-weight:400; height:32px; justify-content:center; margin:auto 0; padding-bottom:10px; position:absolute; right:20px; top:0; width:32px; }
.faq-sec .card-header a[aria-expanded="true"]::after { background-color:var(--main-color); color:#fff; content:"\×"; }
.faq-sec .card-body { padding:8px 0 0; }

footer { background-image:url(../images/footer-bg.webp) !important; background-position:center center; background-size:cover; padding:60px 0 0; position:relative; z-index:0; }
footer::before { background-color:rgba(0,0,0,0.7); }
footer .col-xl-3 img { margin:16px 0; width:215px; }
footer h2 { color:#fff; font-size:24px; font-weight:600; margin:12px 0 20px; }
footer p { color:#fff; font-size:16px; line-height:1.7; margin:0 0 15px; }
footer li { padding:0 0 12px; }
footer li a { color:#fff; font-size:16px; line-height:1.6; word-break:break-word; }
footer li a i { float:left; padding-top:5px; width:28px; }
footer li a strong { display:block; padding-left:28px; }
.social-icon { display:flex; gap:10px; padding:15px 0 0; }
.social-icon li i { align-items:center; border:2px solid #fff; border-radius:50%; display:flex; font-size:18px !important; height:35px; justify-content:center; padding:0; width:35px; }
.social-icon li i:hover { background-color:var(--main-color-1); border:2px solid var(--main-color-1); color:#000; }
.copy-txt { border-top:1px solid var(--main-color-1); margin:35px 0 0; padding:15px; text-align:center; }
.copy-txt h6 { color:#fff; font-size:14px; font-weight:normal; letter-spacing:0; line-height:1.7; margin:0; text-transform:none; }
.copy-txt h6 strong { font-weight:normal; }
.copy-txt img { margin-left:5px; width:142px; }

/******************** about-us page CSS ********************/
.inner-banner { position:relative; }
.inner-banner::before { background-color:rgba(0,0,0,0.5); bottom:0; content:''; left:0; position:absolute; right:0; top:0; }
.inner-txt { align-items:center; bottom:0; display:flex; flex-direction:column; justify-content:center; left:0; padding:120px 12px 0; position:absolute; right:0; text-align:center; top:0; }
.inner-txt h1 { color:#fff; font-size:45px; font-weight:700; line-height:1.35; margin:0; }

.banner-icon.dd { margin:90px 0 0; }
.ban-icon { align-items:center; background-color:#000; border-radius:50%; display:flex; height:100px; justify-content:center; margin:0 auto 20px; width:100px; }
.ban-icon img { filter:brightness(0) invert(1); height:52px; }

.what-sec.dd { background-color:#eff7fc; background-image:none !important; }
.what-sec.dd .line-img span { background-color:#eff7fc; }
.what-sec.dd li { align-items:start; border-bottom:1px solid #dedede; padding:20px 0; }
.what-sec.dd .col-xl-6:first-child img { height:100%; }
.what-sec.dd .what-icon span { background-color:var(--main-color); border:none; height:75px; width:75px; }
.what-sec.dd .what-icon span img { filter:brightness(0) invert(1); width:40px; }

.team-sec, .work-sec { padding:80px 0 65px; text-align:center; }
.team-sec p, .work-sec p { margin:15px 0 45px; }
.team-sec img { border:3px solid var(--main-color); border-radius:50%; height:180px; width:180px; }
.team-sec h4 { color:#8e8d8d; font-size:16px; font-weight:normal; margin:12px 0 0; }
.team-sec h4 span { color:#000; display:block; font-size:18px; font-weight:600; padding:0 0 10px; text-transform:uppercase; }

/******************** contact-us page CSS ********************/
.inner-banner.dd img { height:500px; }
.inner-banner.dd .inner-txt { padding:10px 12px 0; }

.cont-sec { margin:-120px 0 0; position:relative; }
.cont-sec .col-lg-4 { margin:0 0 30px; }
.cont-box { background-color:var(--main-color-1); border-radius:15px; box-shadow:0 4px 10px 4px #00000040; height:100%; padding:35px 30px; text-align:center; }
.cont-box img { height:75px; margin:0 0 28px; }
.cont-box h2 { color:#000; font-size:20px; font-weight:600; margin:0 0 10px; text-transform:uppercase; }
.cont-box p { color:#fff; font-size:15px; line-height:1.7; margin:0; }
.cont-box a { color:#000; font-size:17px; font-weight:500; }
.cont-box:hover a, .work-box:hover h3, .work-box:hover p { color:#fff; }

.contact-sec { padding:70px 0 80px; text-align:center; }
.contact-sec h2 { color:#1B1A1A; font-size:26px; font-weight:600; line-height:1.3; margin:0 0 45px; padding:0 0 25px; position:relative; text-transform:uppercase; }
.contact-sec h2::before { border-bottom:6px solid var(--main-color); border-radius:6px; bottom:0; content:''; left:0; margin:0 auto; position:absolute; right:0; width:110px; }

.in-box { margin:0 0 24px; position:relative; }
.box { background-color:#F2F2F2; border:1px solid #F2F2F2; border-radius:14px; color:#1B1A1A; font-size:16px; font-weight:500; outline:none; padding:14px 22px; width:100%; }
.box:focus { border:1px solid var(--main-color); }
.box:focus::placeholder { color:transparent; }
.box::placeholder { color:#1B1A1A; opacity:1; }
.contact-sec .get-btn { border:none; color:#fff; display:inline-block; font-size:16px; font-weight:600; padding:7px 25px; text-transform:uppercase; width:auto; }
.in-box .wpcf7-not-valid-tip { color:#f00; font-size:12px; text-align:left; }

/******************** service page CSS ********************/
.serv-list { column-count:2; margin:10px 0 0; }
.serv-list li { color:#485273; font-size:16px; padding:10px 0 0 25px; position:relative; }
.serv-list li::before { color:var(--main-color); content:'\f00c'; font-family:FontAwesome; left:0; position:absolute; }

.work-box { border:2px dashed #DDDBF2; border-radius:6px; height:100%; padding:25px 12px; }
.work-box:hover { background-color:var(--main-color); border:2px solid var(--main-color); }
.work-icon { align-items:center; background-color:var(--main-color); border-radius:50%; display:flex; height:90px; justify-content:center; margin:0 auto; width:90px; }
.work-box:hover .work-icon { background-color:#fff; }
.work-icon img { height:48px; filter:brightness(0) invert(1); }
.work-box:hover img { filter:none; }
.work-box h3 { color:var(--main-color); font-size:20px; font-weight:600; line-height:1.5; margin:25px 0 8px; text-transform:uppercase; }
.work-box p { font-size:16px; margin:0; }

/************** thank-you page **************/
.thank-sec { padding:80px 12px 0; text-align:center; }
.thank-sec h2 { color:#000; font-size:80px; font-weight:bold; line-height:1; margin:25px 0 20px; }
.thank-sec p { color:#000; font-size:18px; font-weight:700; margin:0; }
.page-not-found-sec { padding:160px 12px 100px; text-align:center; }
.page-not-found-sec p { color:#000; font-size:20px; font-weight:600; margin:15px 0 30px; }
.page-not-found-sec h1 { color:var(--main-color); font-size:80px; font-weight:bold; margin:0; }
.test-page p { color:#000; font-size:24px; font-weight:700; margin:0; }


/*.................. Home-Page-Media .................. */
@media (min-width:320px) and (max-width:767.98px){
header { top:20px; }
.logo { width:150px; }
.top-head { padding:0 10px; }
.main img { height:750px; }	
.main .carousel-caption { bottom:0; }	
.main .carousel-control-prev, .main .carousel-control-next { width:38px; }
.main .carousel-control-prev span, .main .carousel-control-next span { background-size:15px; height:30px; width:30px; }
.main h1 { font-size:32px; }
.main h2 { font-size:18px; }
.main p { font-size:16px; width:85%; }
.about-sec h2, .what-sec h2, .service-sec h2, .portfolio-sec h2, .faq-sec h2, .work-sec h2 { font-size:27px; }
.about-sec .col-lg-6:last-child img, .serv-ban { height:220px; }
.what-sec li { align-items:start; flex-direction:column; gap:20px; }
.copy-txt span { display:block; padding:8px 0 0; }
.serv-list { column-count:1; }
.inner-banner.dd .inner-txt { bottom:50px !important; }
.thank-sec h2 { font-size:52px; }
.thank-sec p { font-size:16px; }
.thank-sec img { width:70px; }	
}

@media (min-width:320px) and (max-width:991.98px){
.mob-logo { margin:20px auto; width:150px; }
.mob-logo img { width:100%; }
.call-btn, .call-btn b { font-size:0; margin-left:auto; }
header .navbar-expand-md { order:3; padding:10px 0; }	
header .navbar-collapse { background-color:#fff; box-shadow:0 0 5px #999; height:100%; left:-15px; overflow-y:auto; position:fixed; top:0; transform:translateX(-100%); transition:0.3s cubic-bezier(0.55,0,0.1,1); width:260px; z-index:11; -webkit-transform:translateX(-100%); -webkit-transition:0.3s cubic-bezier(0.55,0,0.1,1); }
header .collapse.show { left:0; transform:translateX(0); -webkit-transform:translateX(0); } 
header .navbar-nav { display:block; padding:0 15px; }
header .navbar-toggler:focus { box-shadow:none; outline:none; }
header .navbar-toggler .icon-bar { background-color:var(--main-color); display:block; height:3px; margin:5px 0; outline:none; transition:all 500ms; width:25px; }
header .navbar-toggler:not(.collapsed) .icon-bar { position:relative; transition:all 300ms ease-in-out 0s; }
header .navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) { top:9px; transform:rotate(45deg); }
header .navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) { opacity:0; }
header .navbar-toggler:not(.collapsed) .icon-bar:last-child { top:-7px; transform:rotate(-45deg); }
header .navbar-expand-md .navbar-nav .nav-link { align-items:center; display:flex; justify-content:space-between; }
header .navbar-expand-md .navbar-nav .nav-link { border-bottom:1px solid #e2e2e2; color:#000; font-size:14px; margin:0; padding:10px 0; }
.about-sec .col-lg-6:first-child { padding:0 12px 45px; }

/******************** about-us page CSS ********************/
.inner-banner img { height:370px; }
.inner-txt { padding:72px 12px 0; }
.what-sec.dd .col-xl-6:last-child { padding-top:45px; }
.inner-banner.dd img { height:400px; }
.inner-banner.dd .inner-txt { bottom:15px; padding:0 12px; }
}

@media (min-width:480px) and (max-width:767.98px){
.main h1 { font-size:40px; }
.main h2 { font-size:22px; }
.main p { font-size:18px; }
footer .col-xl-3, footer .col-xl-4, .team-sec .col-lg-3 { width:50%; }
footer .col-xl-3:last-child { width:100%; }	
}

@media (min-width:768px){
.copy-txt h6 { align-items:center; display:flex; justify-content:space-between; text-align:left; }
.copy-txt h6 span { text-align:right; width:350px; }
.why-img { height:100%; position:relative; z-index:0; }
.why-img::before, .why-img::after { background-color:var(--main-color-1); content:''; height:150px; left:-20px; position:absolute; top:-20px; z-index:-1; width:150px; }
.why-img::after { background-color:var(--main-color); bottom:-20px; left:auto; right:-20px; top:auto; }
footer .col-xl-4 ul { column-count:2; }		
}

@media (min-width:768px) and (max-width:991.98px){	
.logo { width:180px; }
.top-head { padding:0 15px; }
header .navbar-expand-md .navbar-toggler, header .navbar-expand-md .navbar-collapse { display:block !important; }
.main h1 { font-size:50px; }
}

@media (min-width:992px){	
header .navbar-collapse { justify-content:end; }
.mob-logo { display:none; }
.banner-icon.dd .row { justify-content:center; }	
.banner-icon.dd .col-xl-5 { padding:0 20px; }
.what-sec.dd .col-xl-6:last-child { padding-bottom:45px; padding-left:45px; padding-top:45px; }
.cont-sec .col-lg-4 { padding:0 30px; }
}

@media (min-width:992px) and (max-width:1199.98px){
.inner-banner img { height:400px; }
.cont-sec .col-lg-4 { padding:0 12px; }
footer .col-xl-4 ul { column-count:1; }	
}