@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@view-transition {navigation: auto;}

:root {--primary1-color: #0c1346; --dark-color: #373737;}
body {font-family: "Roboto", sans-serif; font-weight: 400; color: #555;}
img {max-width: 100%;}
a {color: var(--primary1-color); text-decoration: none;}
a:hover {color: #570808; text-decoration: none;}
.text-primery {color: var(--primary1-color) !important;} 
.text-dark {color: var(--dark-color) !important;}
.main-header {position: fixed; top: 0; left: 0; right: 0; z-index: 11;background: transparent; transition: 0.3s background;}
.main-header .navbar { padding: 15px 0;}
.main-header .navbar-nav >li {padding: 0 10px;}
.main-header .navbar-nav >li > .nav-link {padding: 0 5px; line-height: 35px; font-weight: 400; text-transform: uppercase; font-size: 14px; color: var(--dark-color); letter-spacing: 3px; position: relative;}
.main-header .navbar-nav >li > .nav-link:after { content: ""; position: absolute; bottom: 0; right: 0; left: auto; width: 0; height: 2px; background: var(--primary1-color); transition: ease all 0.3s;}
.main-header .navbar-nav > li > .nav-link:hover, .main-header .navbar-nav > li > .nav-link.active { color: var(--primary1-color);}
.main-header .navbar-nav > li > .nav-link:hover:after,  .main-header .navbar-nav > li > .nav-link.active:after {  left:0; right: auto; width: 100%;}

@media (max-width: 991px) {
.main-header .navbar-collapse {border-bottom: 2px solid var(--dark-color); border-top: 2px solid var(--dark-color); position: absolute; top: 100%; left: 0; right: 0; background: #fff;}
.main-header .navbar-nav > li + li { border-top: 1px solid rgb(30, 27, 46);}
.main-header .navbar-nav > li > .nav-link { line-height: 50px;}
.main-header .navbar-nav > li > .nav-link::after {display:none;}

.main-header .navbar-toggler {display: flex; flex-direction: column; border: none; padding: 4px 9px; outline: none; box-shadow: none;}
.main-header .navbar-toggler span {width: 25px; height: 2px; background: var(--dark-color); margin: 4px 0; transition: 0.3s;}
.main-header .navbar-toggler:not(.collapsed) span:nth-child(1) {transform: translateY(10px) rotate(45deg);}
.main-header .navbar-toggler:not(.collapsed) span:nth-child(2) {opacity: 0;}
.main-header .navbar-toggler:not(.collapsed) span:nth-child(3) {transform: translateY(-10px) rotate(-45deg);}
}

.fixed-header .main-header { background: #e5f2f0; backdrop-filter: blur(10px); box-shadow: 0 0.125rem 0.25rem rgba(55, 55, 55, 0.07); }

.phone {padding: 8px 20px; font-size: 14px; text-decoration: none; letter-spacing: 2px; transition: ease all 0.3s; display: inline-block;}
.phone:hover {color: #06254B;}

/*Main--------------------------------------------------------------------------------------------------------------*/
.bg-gray {background-color: #e5f2f0;}
.bg-dark {background-color: var(--dark-color) !important;}
.bg-1 {background-color: #051b36;}
.main {position: relative; z-index: 1;}
.home-section {position: relative; overflow: hidden; padding-top: 150px; padding-bottom: 30px; } 

@media (max-width 767px) {.home-section {padding-bottom: 70px;}}
.home-section .container {position: relative; z-index: 1;}

.home-section .home-intro h6 {font-weight: 500; color: var(--dark-color); letter-spacing: 3px; text-transform: uppercase; font-size: 17px; margin: 0 0 26px;}
@media (max-width 767px) {.home-section .home-intro h6 {margin: 0 0 20px;}}

.home-section .home-intro h1 {font-size: 48px; font-weight: 500; text-align: left; 
background-image: linear-gradient(to right,#3D4E81, #5753C9, #6E7FF3); background-size: cover; background-clip: text;
 -webkit-background-clip: text; color: transparent; margin: 0 0 35px; line-height: 1;}

@media (max-width 767px) {.home-section .home-intro h1 {background-image: linear-gradient(to right,#3D4E81, #5753C9, #6E7FF3); background-size: cover; background-clip: text;
 -webkit-background-clip: text; color: transparent; margin: 0 0 25px; font-size: 45px;}}
@media (max-width 1200px) {.home-section .home-intro h1 {font-size: 60px; background-image: linear-gradient(to right,#3D4E81, #5753C9, #6E7FF3); background-size: cover; background-clip: text;
 -webkit-background-clip: text; color: transparent;}}

.home-section .home-intro h1 {border-bottom: 2px solid #132F29;}
.home-section .home-intro p {font-size: 20px; text-align: justify;}
@media (max-width 767px) {.home-section .home-intro p {font-size: 18px;}}


/*main Image gallery----------------------------------------------------------------------------------------*/
.home-image { height: 430px; width: 430px; background-size: cover; object-fit: cover; z-index: -2; margin: auto; position: relative;}
.roll-img {height: 430px; width: 430px; object-fit: cover; border: 5px solid #e5edf2; border-radius: 50%; position: absolute; z-index: 1; animation: gallery 12s linear infinite; 
            background-repeat: no-repeat; background-size: cover; background-position: center;}

.roll-img:nth-child(1){animation-name: gallery-1; z-index: 3;}
.roll-img:nth-child(2){animation-name: gallery-2; z-index: 2;}
.roll-img:nth-child(3){animation-name: gallery-3; z-index: 1;}
.roll-img:nth-child(4){animation-name: gallery-4; z-index: 0;}

@keyframes gallery-1{ 0%{opacity: 1;} 23%{opacity: 1;} 26%{opacity: 0;} 100%{opacity: 0;} 98%{opacity: 0;} 100%{opacity: 1;}}
@keyframes gallery-2{ 23%{opacity: 1;} 26%{opacity: 1;} 48%{opacity: 1;} 51%{opacity: 0;} 100%{opacity: 0;}}
@keyframes gallery-3{ 48%{opacity: 1;} 51%{opacity: 1;} 73%{opacity: 1;} 76%{opacity: 0;} 100%{opacity: 0;}}
@keyframes gallery-4{ 73%{opacity: 1;} 76%{opacity: 1;} 98%{opacity: 1;} 100%{opacity: 0;}}

@media (max-width 767px) {.home-image .roll-img {height: 300px; width: 300px; object-fit: cover;}}
@media (max-width 767px) {.roll-img {height: 150px; width: 150px; object-fit: cover;}}

/*section--------------------------------------------------------------------------------------------------------*/
.section {padding: 70px 0; position: relative;}
@media (max-width: 991px) {.section {padding: 80px 0;}}
@media (max-width: 767px) {.section {padding: 60px 0;}}

/*section-heading*/
.section-heading {padding-bottom: 60px; text-align: center;}
@media (max-width: 991px) {.section-heading {padding-bottom: 40px;}}
@media (max-width: 767px) {.section-heading {padding-bottom: 30px;}}

/*section-heading h3*/
.section-heading h3 {font-size: 35px; margin: 0; color: var(--dark-color); font-weight: 600; letter-spacing: 4px; text-transform: uppercase;}
@media (max-width: 991px) {.section-heading h3 {font-size: 45px;}}
@media (max-width: 767px) {.section-heading h3 {font-size: 38px;}}

.about-text p {font-size: 18px;}




/*Service-new*/
.service-box .service-img {position: relative; border: 1px solid var(--dark-color); box-shadow: 0 0 0 0 var(--dark-color); transition: 0.3s;}
.service-box .service-img:hover {box-shadow: 5px 5px 0 0 var(--dark-color);}
.service-box .service-text span {display: inline-block; margin-top: 25px; padding: 8px 20px; background: rgba(255, 101, 28, .2); color: var(--dark-color); letter-spacing: 3px; text-transform: uppercase; font-weight: 500; font-size: 12px; border-radius: 30px; margin-bottom: 18px;}
.service-box .service-text h4 {color: var(--dark-color); font-weight: 600; font-size: 32px; margin-bottom: 20px;}
@media (max-width: 767px) {.service-box .service-text h4 {font-size: 26px; margin-bottom: 10px;}}



/*Contact Section*/
.contact {padding-bottom: 70px;}
.contact .info {padding: 20px; background: white; width: 100%; box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);}
.contact .info i {font-size: 20px; color: #0d5374; float: left; width: 44px; height: 44px; background: #dff3fc; display: flex; justify-content: center; align-items: center; border-radius: 50px; transition: all 0.3s ease-in-out;}
.contact .info h4 {padding: 0 0 0 60px; font-size: 22px; font-weight: 600; margin-bottom: 5px; color: #050d18;}
.contact .info p {padding: 0 0 10px 60px; margin-bottom: 20px; font-size: 14px; color: #173b6c;}

.contact .info .email p {padding-top:  5px;}
.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i {background: #149ddd; color: #fff;}

.contact .php-email-form { width: 100%; padding: 19px; background: #fff; box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);}
.contact .php-email-form .validate { display: none; color: red; margin: 0 0 15px 0; font-weight: 400; font-size:  13px;}
.contact .php-email-form .form-group {padding-bottom: 0px;}
.contact .php-email-form input {height: 20px;}
.contact .php-email-form input,
.contact .php-email-form textarea {padding: 10px 12px;}
.contact .php-email-form button[type="submit"] {background: #3ca2d2; border: 0; padding: 10px 12px; color: #fff; transition: 0.4s; border-radius: 4px;}
.contact .php-email-form button[type="submit"]:hover {background: #025379; cursor: pointer;}

/*Footer*/
.footer {background-color: #e5f2f0; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid rgba(177, 225, 230, 0.9); color: #1d2567;}
.footer .nav a {font-size: 20px; color: #173b6c;}
.footer .nav a:hover {color: var(--dark-color);}
.footer .nav a + a {margin-left: 18px;}