@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');
body { margin: 0; padding: 0; font-family: "Sora", sans-serif;}
p {color: #1b1b1b;font-size: 17px; letter-spacing: .3px; line-height: 1.7;margin: 0 0 10px 0;}
a { text-decoration: none !important;}
.custom-btn { display: inline-block; border: 1px solid #fff; background: transparent; padding: 16px 40px; color: #fff; text-transform: uppercase; letter-spacing: 1.8px; font-size: 15px; position: relative;}
.custom-btn span, .custom-btn1 span { position: relative; z-index: 3;  transition: all .3s ease-in-out; font-weight: 500;}
.custom-btn::before, .custom-btn1::before { content: ''; position: absolute; width: 12px; height: 12px; background: #fff; top: -4px; left: -4px; transition: all .3s ease-in-out;}
.custom-btn::after, .custom-btn1::after { content: ''; position: absolute; width: 12px; height: 12px; background: #fff; bottom: -4px; right: -4px; transition: all .3s ease-in-out;}
.custom-btn:hover { color: #010c7a;}
.custom-btn:hover::after, .custom-btn:hover::before, .custom-btn1:hover::after, .custom-btn1:hover::before { width: 104%; height: 104%;}

.custom-btn1 { display: inline-block; border: 1px solid #010c7a; background: transparent; padding: 16px 40px; color: #010c7a; text-transform: uppercase; letter-spacing: 1.8px; font-size: 15px; position: relative;}
.custom-btn1::before, .custom-btn1::after{ background: #010c7a;}
.custom-btn1:hover { color: #fff;}

.heading .icon { width: 20px; height: 20px; background-image: linear-gradient( 175deg, #0f5dfb 0%, #010c7a 100%); transform: rotate(45deg); border-radius: 3px; margin: 0 0 25px 0; animation: roate 4s infinite;}
.heading p { font-size: 19px; text-transform: uppercase; color: #010c7a; font-weight: 500; letter-spacing: 1px; margin: 0 0 5px 0;}
.heading h2 { font-size: 50px; color: #181818; font-weight: 700; margin: 0 0 25px 0; line-height: 1.2;}

.top-header {position: absolute; z-index: 2; width: 100%;}
.top-header .container { border-bottom: 1px solid rgba(255, 255, 255, .45); padding: 12px 0;}
.top-header .left-text a { color: #f2f2f2;}
.top-header .left-text a i { margin: 0 5px 0 0;}
.top-header .social-icon a {display: inline-block; background: rgba(255, 255, 255, .95); color: #010c7a; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 2; font-size: 14px;}

header { position: absolute; width: 100%; top: 56px; z-index: 2;} 
.navbar .nav-link { color: #fff !important; font-size: 17px; font-weight: 600; margin: 0 0 0 20px; letter-spacing: .5px;}

.banner-section { background-image: linear-gradient(120deg, #0c0f24, #0b2a59); min-height: 100vh; position: relative; padding: 16% 0 7% 0;}
.banner-section .text { padding: 12% 0 0 0; position: relative;}
.banner-section .text::after { content: ''; position: absolute; width: 150px; height: 150px; background-image: radial-gradient(#0e58f3 1.5px, transparent 1.5px); background-size: 15px 15px; opacity: .7; top: 5%; left: -70px; border-radius: 50%; animation: bounce-y 3s infinite;}
.banner-section .text h1, .banner-section .text p  {position: relative; z-index: 2;}
.banner-section .text h1 { color: #fff; font-size: 54px; font-weight: 700; margin: 0 0 20px 0;}
.banner-section .text p  {color: #fff; color: #ddd; font-size: 19px; margin: 0 0 30px 0;}
.banner-section .pic { position: relative;}
.banner-section .pic::after { position: absolute; content: ''; width: 100%; height: 400px; background-image: linear-gradient(45deg, #013bad, #0f5dfb); right: -50px; bottom: -50px; border-radius: 15px;}
.banner-section .pic::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px solid #fff; top: -30px; right: -30px; z-index: 4; border-radius: 20px; opacity: .3;}
.banner-section .pic img { border-radius: 15px; position: relative; z-index: 3; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}

.about-section { padding: 8% 0;}
.about-section p a { color: #010c7a; font-weight: 500; transition: all .3s ease-in-out;}
.about-section p a:hover { letter-spacing: 2px;}
.about-section .pic { position: relative;}
.about-section .pic::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px solid #0f5dfb; top: -30px; left: -30px; border-radius: 20px;;}
.about-section .pic img { border-radius: 15px; position: relative; z-index: 2; box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 15px;}
.about-section .pic .ser { position: absolute; background: #010c7a; padding: 25px 35px; border-radius: 15px; outline-offset: -12px; outline: 2px dashed #fff; right: -40px; bottom: 50px; z-index: 3;}
.about-section .pic .ser h3 { color: #fff; font-size: 40px; font-weight: 700; margin: 0; line-height: 1;}
.about-section .pic .ser p { color: #fff; font-size: 24px; margin: 0; font-weight: 600; letter-spacing: 1px;}

.service-section { padding: 8% 0 9% 0; background: #0c0f24; position: relative; overflow: hidden;}
.service-section::after { content: ''; position: absolute; width: 350px; height: 350px; background-image: radial-gradient(#fff 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: .25; top: -20px; right: -60px; border-radius: 50%; animation: bounce-y 3s infinite;}
.service-section .heading .icon { margin-left: auto; margin-right: auto;}
.service-section .heading p { color: #cccccc;}
.service-section .heading h2 { color: #fff;}
.service-section .ser-card { background: #fff; border-radius: 20px; margin: 30px 0 0 0;}
.service-section .ser-card .ser-img { overflow: hidden; border-radius: 20px 20px 0 0;}
.service-section .ser-card .ser-img img{ border-radius: 20px 20px 0 0; filter: brightness(92%); transition: all .6s ease-in-out;}
.service-section .ser-card .icon { position: relative; z-index: 2; width: 80px; height: 80px; background-image: linear-gradient( 45deg, #0f5dfb 0%, #010c7a 100%); padding: 16px; border-radius: 50%; margin: -40px auto 15px auto;}
.service-section .ser-card .text { padding: 0 30px 40px 30px;}
.service-section .ser-card .text h4 { color: #1b1b1b; font-size: 24px; text-align: center; font-weight: 700; margin: 0 0 12px 0;}
.service-section .ser-card .text p { text-align: center; margin: 0; letter-spacing: 0px;}
.service-section .ser-card .text p a { color: #010c7a; font-size: 16px; font-weight: 500;}
.service-section .ser-card:hover .ser-img img { transform: scale(1.3) rotate(-10deg);}

.team-section { padding: 8% 0;}
.team-section .team-card { margin: 30px 0 0 0; position: relative;}
.team-section .team-card::after { content: ''; position: absolute; width: 0; height: 2px; background-image: linear-gradient( 175deg, #0f5dfb 0%, #010c7a 100%); bottom: 0; left: 0; transition: all .4s ease-in-out;}
.team-section .team-card:hover::after { width: 100%;}
.team-section .team-card img{ border-radius: 20px;}
.team-section .team-card .team-name { padding: 15px; border-bottom: 2px solid #c9c9c9;}
.team-section .team-card .team-name h5 { color: #1b1b1b; font-size: 21px; margin: 0;}
.team-section .team-card .social-icon a { display: inline-block; background: linear-gradient( 175deg, #0f5dfb 0%, #010c7a 100%); color: #fff; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 2; font-size: 14px; margin: 0 0 0 2px;}

footer {padding: 8% 0 0 0; background: #0c0f24;}
footer .links h4 {color: #fff;font-size: 21px;text-transform: uppercase; font-weight: 600; margin: 20px 0 25px 0; position: relative;}
footer .links h4::after { content: ''; position: absolute; width: 30px; height: 3px; background: linear-gradient( 175deg, #0f5dfb 0%, #010c7a 100%); top: -10px; left: 0;}
footer .links p, footer .links  p a {color: #cacaca;font-size: 15px; margin: 0 0 10px 0;}
footer .links p i {color: #0f5dfb; margin: 0 5px 0 0;}
footer.links  p a:hover {color: #0f5dfb;}
footer .footer-bottom {margin: 5% 0 0 0;border-top: 1px solid rgba(204, 204, 204, .4);padding: 15px 0;}
footer .footer-bottom p { margin: 0; color: #dadada; font-size: 15px;}
footer .about { background: linear-gradient( 175deg, #0f5dfb 0%, #010c7a 100%); padding: 30px 30px 50px 30px; border-radius: 20px;}
footer .about h4 { font-size: 30px; color: #fff; margin: 0 0 12px 0; font-weight: 700;}
footer .about p { color: #f4f4f4; font-size: 16px; letter-spacing: 0;}
footer .about p a { color: #fff;}
footer .social-icon a {color: #013bad; background:#fff; font-size: 13px; width: 30px; height: 30px; display: inline-block; border-radius: 50%; text-align: center; line-height: 2.1; transition: all .2s ease-in-out;}

@keyframes bounce-y{
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes roate{
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
}