:root {
  --primary: #222F64;
  --secondary: #F9A01D;
  --text-color: #252B42;
  --text-color-dark: #374754;
  --very-light-gray: #F7F7F7;
  --brdr-color: #D8D8D8;
  --black: #1D1D1D;
  --light-blue: #E8F2FF;
  --sea-blue: #0070BA;
}

body{ color: var(--text-color); font-family: "Roboto", sans-serif; font-size: 18px;}
p{ margin: 0; color: var(--text-color);}
p + p{ margin-top: 15px;}
img { max-width: 100%; }
ol{ margin: 0; padding: 0;}
ul, li{ margin: 0; padding: 0; list-style: none; }
a, a:hover,a:focus, button, button:hover, button:focus{ transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; text-decoration: none; outline: none; color: inherit;}
h1, h2, h3, h4, h5, h6{ margin: 0; font-weight: 800;}
h1{ font-size: 3em;}
h2{ font-size: 2.778em;}
h3{ font-size: 1.667em;}
input::placeholder{ overflow: visible;}
::placeholder{ opacity: 1;}
button:focus{ outline: none;}
.container{ max-width: 1373px;}
.over-link{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: block; z-index: 1;}
figure{ margin: 0;}
.bttn{ min-width: 157px; display: inline-block; line-height: 48px; text-align: center; border-radius: 5px; font-weight: 800; text-transform: uppercase; font-size: 0.778em;}
.bttn i{ font-size: 1.6em; position: relative; top: 3px;}
.bttn-yellow, .bttn-yellow:hover{ background: var(--secondary); color: var(--text-color);}
.sec-btn{ margin-top: 30px;}
.title-sec{ padding: 0 0 30px;}

.main-header{ position: fixed; width: 100%; background: var(--primary); color: var(--bs-white); padding: 15px 0; z-index: 99;}
.main-header .row{ align-items: center;}
.main-header ul.navbar-nav{ display: flex; justify-content: flex-end;}
.main-header ul.navbar-nav li.nav-item{ padding: 0 15px;}
.main-header ul.navbar-nav li.nav-item a{ font-size: 1.111em; color: var(--bs-white);}
.main-header ul.navbar-nav li.nav-item a:hover, .main-header ul.navbar-nav li.nav-item a:focus, .main-header ul.navbar-nav li.nav-item a.active{ color: var(--secondary);}
.hm-banner{ min-height: 700px; display: flex; align-items: center; background-color: var(--primary); background-image: url(images/home-banner.png); background-repeat: no-repeat; background-position: right bottom; color: var(--bs-white); padding-top: 80px;}
.hm-banner aside{ max-width: 576px;}
.hm-banner h1{ font-weight: 800; background-image: url(images/decore.png); background-repeat: no-repeat; background-position: bottom right; padding: 0 0 20px; margin: 0 0 30px;}
.hm-banner p{ font-size: 1.389em; color: var(--bs-white);}

.icon-title-sec{ padding: 60px 0; text-align: center;}
.icon-title-sec h4{ font-size: 1.111em; margin: 20px 0 0; font-weight: 700; padding: 0; line-height: 26px;}
.icon-title-sec aside{ margin: 0 0 30px; width: 20%; padding: 0 25px;}
.left-cont-right-form{ padding: 60px 0 80px;}
.cont-form-sec{ padding: 0 0 60px;}
.cont-form-sec h2{ background-image: url(images/small-decor.png); background-repeat: no-repeat; background-position: right -20px bottom; padding: 0 50px 0 0; margin: 0 0 30px; display: inline-block;}
.cont-form-sec p{ max-width: 440px; color: var(--text-color-dark);}
.cont-form-sec p a{ color: var(--primary); font-weight: 600;}
.cont-form form label{ display: block; font-size: 0.778em; margin: 0 0 12px;}
.cont-form form .form-row{ margin: 0 0 20px;}
.cont-form form .form-field{ background-color: var(--very-light-gray); height: 46px; border-radius: 5px; padding: 0 15px; border: none; display: block; width: 100%;}
.cont-form form .form-sub input{ width: 100%; border: none; color: var(--bs-white); font-size: 1em; letter-spacing: 1px;}

.main-footer{ background: var(--primary); padding: 38px 0 30px;}
.main-footer .mf-right{ display: flex; align-items: center; justify-content: flex-end; color: #fff}
.mf-right em{ font-style: normal; width: 35px; height: 35px; display: block; background: #fff; border-radius: 50%; text-align: center; line-height: 32px;}
.mf-right div{ padding-left: 15px;}
.mf-right span{ font-size: 0.667em; display: block;}
.mf-right a{ color: var(--secondary); font-weight: 600; letter-spacing: 0.2px;}
.copy-right{ border-top: 1px solid var(--brdr-color); padding: 30px 0 0; margin: 52px 0 0; display: flex; justify-content: center; text-align: center;}
.copy-right p{ color: var(--bs-white);}
.inner-banner{ background-repeat: no-repeat; background-position: right bottom; min-height: 330px; background-color: var(--primary); display: flex; align-items: flex-end; color: var(--bs-white); padding: 0 0 30px;}
.inner-banner h1{ font-size: 2.5em;}
.quot-sec{ padding: 65px 0 110px; text-align: center;}
.quot-sec h2{ font-size: 2.5em; margin: 0 0 30px;}
.quot-sec .quot-sec-in{ position: relative; background-color: var(--light-blue); max-width: 1100px; margin: auto; padding: 56px; border-radius: 32px; margin-top: 76px;}
.quot-sec .quot-sec-in:before{ content: ""; background-image: url(images/quot-icon.svg); background-repeat: no-repeat; background-position: center top; width: 83px; height: 72px; display: block; position: absolute; top: -35px; left: 0; right: 0; margin: auto;}
.quot-sec p{ color: var(--primary);}
.our-team-sec{ background: linear-gradient(180deg, rgba(215, 121, 39, 0.2) 0%, rgba(255, 255, 255, 0.2) 75.17%); padding: 90px 0 60px;}
.icon-title h2, .inner-banner h1 span{ display: inline-flex; background-image: url(images/small-decor.png); background-repeat: no-repeat; background-position: right -34px bottom;}
.icon-title h2 span{ width: 57px; height: 57px; background: var(--primary); display: block; border-radius: 50%; text-align: center; line-height: 48px; margin: 0 10px 0 0;}

.our-team-sec .tg-in{ box-shadow: 0px 2px 15px 0px #E0E0E080; background: var(--bs-white); border-radius: 16px; padding: 40px; height: 100%;}
.team-img img{ border-radius: 50%;}
.team-grid aside{ padding-top: 36px;}
.team-grid h3{ margin: 20px 0 20px; color: var(--primary);}
.team-grid p{ color: var(--primary);}
.team-grid .soc-icon{ padding-top: 20px;}
.soc-icon a{ width: 37px; height: 37px; background: var(--primary); display: block; border-radius: 50%; text-align: center; line-height: 33px;}

.services-sec{ padding: 60px 0;}
.services-sec .title-sec h4{ font-size: 1.125em; font-weight: 600; display: flex; align-items: center; padding-right: 15px;}
.services-sec .title-sec h4 img{ margin: 0 20px 0 0;}
.services-sec .services-grid{ display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 30px;}
.services-grid .service-grid{ box-shadow: 0px 2px 14px 0px #0047F018; background: var(--bs-white); padding: 38px; border-radius: 16px;}
.service-1{ grid-row: span 2;}
.service-grid h3{ color: var(--sea-blue); margin: 14px 0; font-size: 1.333em;}
.service-grid ul li{ font-size: 0.889em; list-style: outside; margin: 0 0 15px 20px; font-weight: 700;}
.contact-top{ padding: 50px 0;}
.contact-top .ct-top{ max-width: 720px; margin: auto;}
.ct-top h2{ text-align: center;}
.ct-top p a{ color: var(--sea-blue); font-weight: 600;}
.contact-grid .cg-in-sec{ position: relative; box-shadow: 0px 2px 23px 0px #0047F018;}
.cg-in-sec em{ display: block; width: 58px; height: 58px; box-shadow: 0px 2px 8px 0px #0A083B19; background: var(--secondary); border-radius: 50%; margin: 0 15px 0 0; text-align: center; line-height: 54px;}
.contact-grid .cg-in-sec{ position: relative; box-shadow: 0px 2px 23px 0px #0047F018; display: flex; align-items: center; padding: 30px; border-radius: 16px; transition: 0.5s all ease;}
.contact-grid .cg-in-sec:hover{ transform: translateY(-5px);}
.contact-grid aside{ padding-top: 40px;}
.contact-page-sec .cps-in{ max-width: 578px; margin: auto;}
.cps-in .title-sec{ text-align: center;}
.cps-in h2{ font-size: 1.333em; margin: 0 0 10px; color: var(--sea-blue);}
.contact-page-sec{ padding: 0 0 50px;}
.banner-mob-img{ display: none;}
.service-grid{ scroll-margin-top: 130px;}
.services-sec .title-sec{ display: flex; align-items: center; justify-content: space-between;}
.services-sec select{ width: 330px; background-color: #F9A01D30; border: 1px solid #F9A01D; height: 46px; border-radius: 10px; color: #000; font-size: 14px;}
#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    font-size: 23px;
    border: none;
    outline: none;
    background-color: var(--secondary);
    color: #000;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    line-height: 33px;
    border-radius: 50%;
}

#scrollTopBtn:hover {
    transform: scale(1.1);
}
.service-grid-in ul li a {
  color: var(--secondary);
  text-decoration: underline;
}