@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600&display=swap");

@font-face {
  font-family: "gobold";
  src: url("../fonts/Gobold_Bold.ttf") format("ttf"),
    url("../fonts/Gobold_Bold.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

* {margin: 0;padding: 0;font-family: "Raleway", sans-serif;}
h1,
h2,
h3,
h4,
h5,
h6 {margin: 0;}
p {margin: 0;}
ul {margin: 0;padding: 0;}
li {list-style: none;}
a {color: #000;text-decoration: none;font-weight: 600;}
a:hover {transition: 0.5s;}
.section-spacing {margin-bottom: 80px;}
/* Comon Css */
.title {font-size: 30px;color: #17344d;font-weight: 700;margin-bottom: 10px;font-family: "gobold", sans-serif;}
.title-span {color: #375a7d;font-weight: 700;}
.description {font-size: 16px;color: #375a7d;margin-bottom: 20px;font-weight: 500;letter-spacing: 0.9px;text-align: justify;}
.heading {font-size: 30px;margin-bottom: 20px;font-weight: 600;color: #17344d;font-family: "gobold", sans-serif;}
.heading-span {color: #375a7d;}
.common-btn {background-color: #17344d;padding: 13px 30px;color: #fff;border-radius: 50px;display: inline-block;font-weight: 300;border: 1px solid transparent;transition: 0.5s;}
.common-btn:hover{background-color: transparent;border: 1px solid #17344d;color: #17344d;}
/* Header section css */
header {padding: 20px 0;}
header nav {display: flex;justify-content: space-between;align-items: center;}
.main-menu {display: flex;column-gap: 40px;justify-content: center;padding: 10px;}
.main-menu li{transition: 0.5s linear;}
.main-menu li a {color: #17344d;text-transform: uppercase;}
.main-menu li:hover{border-bottom: 1px solid #17344d;}
.toggle {width: 38px;height: 38px;cursor: pointer;right: 0;position: relative;margin-left: 0;z-index: 1;display: none !important;}
.toggle-icon::before,
.toggle-icon::after {content: "";position: absolute;top: 0;right: 0;height: 10%;width: 110%;background: #162043;transition: 0.3s linear;}
.toggle-icon::before {transform: translateX(0);}
.toggle-icon::after {top: 13px;width: 90%;}
.closeMenu .toggle-icon::after {width: 110%;}
.sticky-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff; /* Adjust the background color as needed */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a box shadow for a subtle effect */
}
/* Hero Slider section */
.hero-banner-section{
  margin-top: 130px;
}
.hero-slide {position: relative;}
.hero-slide-content {position: absolute;bottom: 5%;left: 16%;max-width: 600px;background: aliceblue;padding: 30px;border-radius: 10px;}

/* Hero About Section css */
.about-left {display: flex;align-items: center;justify-content: center;height: 100%;}
.pos-rel {position: relative;z-index: 1;}
.about-pic::before {position: absolute;content: "";z-index: 1;height: 430px;width: 510px;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-44deg);border: 3px dashed #17344d;border-radius: 35% 65% 36% 64% / 31% 37% 63% 69%;}
.about-main-pic {border-radius: 35% 65% 36% 64% / 31% 37% 63% 69%;max-width: 90%;}
.about-exp-text {display: flex;align-items: center;justify-content: space-between;}
.about-exp {background-color: #17344d;padding: 30px 20px 50px;text-align: center;border-radius: 10px;}
.about-exp p {font-size: 80px;font-weight: 700;color: #fff;line-height: normal;}
.about-exp span {display: block;font-size: 22px;text-transform: capitalize;color: #fff;}
ul .description img {margin-right: 10px;}
.about-exp-text {margin-bottom: 50px;}

/* Service Slider section css */
.service-slide-content {background-color: #375a7d;max-width: 350px;margin: -10% auto 0;padding: 20px;}
.service-slide-image img {position: relative;z-index: -1;}
.service-name {color: #fff;font-size: 26px;margin-bottom: 10px;font-weight: 700;}
.service-slide-content .description {color: #fff;margin-bottom: 10px;text-align: left !important;}
.service-slide-content .common-btn {color: #17344d;background-color: #fff;font-weight: 600;}
.service-slide-content .common-btn:hover{background-color: transparent;border: 1px solid #FFF;color: #FFF;}
.our-service-section {background-image: url(../images/service-bg.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;padding: 100px 0;}
.our-service-section .heading {color: #fff;text-align: center;}
.our-service-section .description {color: #fff;text-align: center;max-width: 600px;margin: 0 auto 30px;}

/* Why us Section css */
.why-us-heading {max-width: 700px;margin: 0 auto 50px;}
.why-us-heading .heading {text-align: center;}
.why-us-heading .description {text-align: center;}
.why-us-list{
  display: flex;
  column-gap: 20px;
}

/* our work page gallery css */
.main .container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 1rem;justify-content: center;align-items: center;}
.main .card {color: #252a32;border-radius: 2px;background: #ffffff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);}
.main .card-image {position: relative;display: block;width: 100%;padding-top: 70%;background: #ffffff;}
.main .card-image img {display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.more-btn {margin-top: 30px;}
@media only screen and (max-width: 600px) {
  .main .container {display: grid;grid-template-columns: 1fr;grid-gap: 1rem;}
}
/* Our Work Details Section css */
.our-work-details {display: flex;align-items: center;justify-content: space-between;margin-bottom: 50px;}
.our-work-details .description {max-width: 900px;}

/* Testimonial Slider Section Css */
.quote {max-width: 50px;}
.star {max-width: 150px;}
.testimonial-box {display: flex;align-items: center;column-gap: 30px;width: 100%;background-color: #ffffff90;padding: 30px;border-radius: 20px;}
.client-profile {width: 20%;text-align: center;}
.client-name {font-size: 22px;color: #17344d;font-weight: 600;text-align: center;}
.client-words {width: 80%;}
.testimonial-slider-section {background-image: url(../images/testimonial-bg.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;padding: 100px 0;}
.client-profile img {max-width: 100px;margin-bottom: 20px;}
.client-words .description {color: #fff;}
.testimonial-detail {max-width: 800px;margin: 0 auto 50px;text-align: center;}
.testimonial-detail .heading {color: #fff;}
.testimonial-detail .description {color: #fff;text-align: center;}

/* Contact Form Section Css */
.contact-form-section {background-image: url(../images/contact-form-bg.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;padding: 100px 0;}
.contact-details {display: flex;align-items: baseline;column-gap: 20px;margin-bottom: 20px;}
.contact-details a,
.contact-details p {font-size: 20px;font-weight: 600;color: #17344d;}
.icon img {max-width: 40px;}
.contact-us {font-size: 24px;margin-bottom: 20px;color: #375a7d;font-weight: 700;}
.contact-form .form-group {margin-bottom: 30px;}
.contact-form .form-group label {margin-bottom: 10px;color: #fff;font-weight: 700;}
.contact-form .form-group .form-control {height: 50px;}
.contact-form .form-group .textarea {height: 150px;}
.contact-form {background-color: #375a7d;padding: 30px;border-radius: 20px;}
.contact-form .heading {color: #fff;}
.contact-form .common-btn {border: none;}
.contact-form .common-btn:hover{background-color: #FFF;color: #17344d;}
.form-control:focus {color: #ffffff;background-color: #162043;border-color: transparent;outline: 0;box-shadow: none;}

/* Footer Section Css */
footer {background-color: #375a7d;padding: 100px 0;}
footer .description {color: #fff;}
.footer-logo {margin-bottom: 20px;}
.socical-media a img {max-width: 38px;}
.socical-media {display: flex;align-items: center;column-gap: 20px;}
.footer-link-heading {font-size: 30px;margin-bottom: 20px;color: #fff;font-family: "gobold", sans-serif;text-align: center;}
footer ul li {margin-bottom: 10px;text-align: center;}
footer ul li a {color: #fff;font-size: 20px;font-weight: 500;text-align: center;}
footer ul li a:hover{color: #d9f3f7;}

/* Owl slider Dots css */
.hero-slider .owl-dot {background-color: #17344d !important;}
.owl-dots {text-align: center;padding-top: 20px;}
.owl-dot.active {background-color: #375a7d !important;height: 15px;width: 15px;}
.owl-dot {background-color: #fff !important;height: 15px;width: 15px;margin: 0 5px;}
.testimonial-slider .owl-dot.active {background-color: #ffffff90 !important;}

/* How we work Section css */
.how-we-work-section {background-image: url(../images/how-we-work-bg.jpg);background-position: top;background-repeat: no-repeat;background-size: cover;padding: 100px 0;}
.how-we-work-section .description {max-width: 600px;}
.sub-title {font-size: 30px;font-weight: 700;margin-bottom: 20px;color: #fff;}
.how-we-work-section .heading,
.how-we-work-section .description {color: #fff;}
.how-we-work-section .common-btn:hover{background-color: #FFF;color: #17344d;}
.grid-2 {display: grid;grid-gap: 3rem;grid-template-columns: repeat(2, 1fr);}
.step-box {background-color: #fff;border: 5px solid #375a7d;border-radius: 50%;height: 240px;width: 240px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: 0;position: relative;z-index: 1;}
.step-box span {display: inline-block;height: 50px;width: 50px;line-height: normal;text-align: center;background: #fff;color: #17344d;font-weight: 600;-webkit-border-radius: 50%;border-radius: 50%;font-size: 26px;position: absolute;top: 25px;left: 0;border: 5px solid #375a7d;}
.step-box h4 {text-transform: capitalize;color: #375a7d;font-weight: 700;}
.step-box p {color: #375a7d;line-height: normal;padding: 0 16px;}

/* Mini Footer CSS */
.mini-footer {background-color: #17344d;padding: 20px 0;}
.company-link {color: #ffffff90;text-align: center;font-weight: 600;}
.company {color: #fff;font-weight: 700;}
.company:hover{color: #d9f3f7;}

/* Inner Banner Section Css */
.inner-banner {background-color: #17344d;padding: 100px 0;margin-top: 130px;}
.inner-banner .title {color: #fff;text-align: center;}
.breadcrumb-item.active {color: #ffffff90;}
.breadcrumb-item a {color: #fff;}
.breadcrumb {justify-content: center;}

/* Service List section Css */
.service-list-section .service-slide-box {margin-bottom: 30px;}
.footer-logo {max-width: 300px;}

/* Service Details Sidebar Section Css */
.sidebar {margin-bottom: 50px;}
.sidebar .service {color: #fff;font-weight: 700;background-color: #162043;text-align: center;padding: 10px 0;border-radius: 10px 10px 0 0;}
.sidebar-link {background-color: #375a7d;padding: 30px;border-radius: 0 0 10px 10px;}
.sidebar-link li {padding-bottom: 15px;border-bottom: 1px solid #fff;margin-bottom: 15px;}
.sidebar-link li:last-child {margin-bottom: 0;}
.sidebar-link li a {color: #fff;font-size: 18px;}
.inquiry-form {background-color: #162043;padding: 30px;border-radius: 10px;}
.inquiry-form .form-group {margin-bottom: 20px;}
.inquiry-form .form-group .form-control {height: 50px;}
.inquiry-form .form-group .textarea {height: 100px;}
.inquiry-form .form-group label {color: #fff;font-weight: 700;font-size: 16px;margin-bottom: 10px;}
.inquiry-heading {color: #fff;text-align: center;margin-bottom: 20px;font-weight: 700;}
.inquiry-form .common-btn {border: none;background-color: #fff;color: #17344d;font-weight: 600;}
.inquiry-form .form-control:focus {color: #ffffff;background-color: #17344d;border-color: #fff;outline: 0;box-shadow: none;}

/* Service Detail Css */
.service-detail-img {margin-bottom: 20px;}
.service-subheading {margin-bottom: 20px;color: #17344d;font-weight: 700;}
.service-list {margin-bottom: 15px;}
.service-list b {color: #162043;font-weight: 700;font-size: 18px;}

/* Tetimonial Page Css */
.testimonial-section .testimonial-box {background-color: #17344d50;margin-bottom: 30px;}
.testimonial-section .testimonial-box .client-words .description {color: #17344d;font-weight: 600;}
.testimonial-section .testimonial-detail .heading {color: #17344d;}
.testimonial-section .testimonial-detail .description {color: #375a7d;font-weight: 600;}

/* Media Qury Responsive Css */
@media (min-width: 1200px) and (max-width: 1440px) {
  .about-pic::before {height: 360px;width: 420px;}
  .about-exp-text {column-gap: 20px;}
}
@media (min-width: 768px) and (max-width: 1199px) {
  .toggle {display: block !important;z-index: 6;top: 10px;}
  .closeMenu .toggle-icon::before {visibility: visible;opacity: 1;top: 0;transition: 0.3s linear;transform: rotate(135deg);background-color: #17344d;}
  .closeMenu .toggle-icon::after {top: 0;transition: 0.3s linear;transform: rotate(42deg);background-color: #17344d;}
  header nav .main-menu {flex-direction: column;position: absolute;top: 0;left: -100%;height: 100vh;width: 100%;justify-content: center;align-items: center;row-gap: 25px;transition: 0.3s;overflow: hidden;background-color: #d9f3f7;}
  header nav .main-menu li a {color: #17344d;font-size: 16px;}
  header nav .main-menu li {padding-left: 0;}
  header nav .main-menu.show-menu {left: 0;z-index: 4;}
  .hero-slide-content {position: inherit;width: 100%;max-width: 100%;}
  .toggle {display: block !important;z-index: 6;top: 10px;}
  .closeMenu .toggle-icon::before {visibility: visible;opacity: 1;top: 0;transition: 0.3s linear;transform: rotate(135deg);background-color: #17344d;}
  .closeMenu .toggle-icon::after {top: 0;transition: 0.3s linear;transform: rotate(42deg);background-color: #17344d;}
  header nav .main-menu {flex-direction: column;position: absolute;top: 0;left: -100%;height: 100vh;width: 100%;justify-content: center;align-items: center;row-gap: 25px;transition: 0.3s;overflow: hidden;background-color: #d9f3f7;}
  header nav .main-menu li a {color: #17344d;font-size: 16px;}
  header nav .main-menu li {padding-left: 0;}
  header nav .main-menu.show-menu {left: 0;z-index: 4;}
  .hero-slide-content {position: inherit;}
  .about-main-pic {margin-bottom: 40px;}
  .about-exp-text {flex-direction: column;row-gap: 20px;}
  .section-spacing {margin-bottom: 60px;}
  .our-service-section {padding: 70px 0;}
  .why-us-section .heading {margin-top: 20px;}
  .how-we-work-section {padding: 70px 0;}
  .grid-2 {place-items: center;margin-top: 20px;}
  .our-work-details .description {max-width: 750px;}
  .testimonial-slider-section {padding: 70px 0;}
  .contact-form-section {padding: 70px 0;}
  .map {margin-bottom: 20px;}
  footer {padding: 70px 0;}
  .socical-media {margin-bottom: 20px;}
  .inner-banner {padding: 70px 0;}
}
@media (min-width: 320px) and (max-width: 767px) {
  .toggle {display: block !important;z-index: 6;top: 10px;}
  .closeMenu .toggle-icon::before {visibility: visible;opacity: 1;top: 0;transition: 0.3s linear;transform: rotate(135deg);background-color: #17344d;}
  .closeMenu .toggle-icon::after {top: 0;transition: 0.3s linear;transform: rotate(42deg);background-color: #17344d;}
  header nav .main-menu {flex-direction: column;position: absolute;top: 0;left: -100%;height: 100vh;width: 100%;justify-content: center;align-items: center;row-gap: 25px;transition: 0.3s;overflow: hidden;background-color: #d9f3f7;}
  header nav .main-menu li a {color: #17344d;font-size: 16px;}
  header nav .main-menu li {padding-left: 0;}
  header nav .main-menu.show-menu {left: 0;z-index: 4;}
  .hero-slide-content {position: inherit;}
  .title {font-size: 20px;}
  .description {font-size: 14px;margin-bottom: 10px;}
  .common-btn {padding: 6px 20px;}
  .about-pic::before {height: 340px;width: 340px;transform: translate(-50%, -50%) rotate(-90deg);}
  .pos-rel {margin-bottom: 30px;}
  .about-exp-text {flex-direction: column;row-gap: 20px;}
  .heading {font-size: 20px;}
  .section-spacing {margin-bottom: 50px;}
  .our-service-section {padding: 50px 0;}
  .grid-2 {grid-template-columns: 1fr;place-items: center;}
  .our-work-details {flex-direction: column;align-items: flex-start;}
  .testimonial-slider-section {padding: 50px 0;}
  .contact-form-section {padding: 50px 0;}
  .map {margin-bottom: 20px;}
  .footer-link-heading {text-align: left;}
  footer ul li {text-align: left;}
  footer {padding: 50px 0;}
  .socical-media {margin-bottom: 20px;}
  .why-us-section .heading {margin-top: 20px;}
  .how-we-work-section {padding: 50px 0;}
  .inner-banner {padding: 50px 0;margin-top: 110px;}
  .breadcrumb {margin-bottom: 0;}
  .why-us-list{
    flex-direction: column;
  }
}