@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
body { margin: 0px; padding: 0px; font-family: Lato, sans-serif; overflow-x: hidden; color: rgb(33, 33, 33); }
p { color: rgb(38, 38, 38); font-size: 17px; line-height: 29px; margin: 0px 0px 15px; font-family: Lato, sans-serif; letter-spacing: 0.4px; }
.main-table li { color: rgb(38, 38, 38); font-size: 16px; line-height: 1.6; margin: 0px 0px 8px; font-family: Lato, sans-serif; }
a { font-family: Lato, sans-serif; text-decoration: none !important; }
h1, h2, h3 { font-family: Jost, sans-serif; }
h4, h5, h6 { font-family: Lato, sans-serif; color: rgb(38, 38, 38); }
.main-table { text-align: left; padding: 5% 0px; }

#widgetsControl_C, #widgetsControl { height: auto !important; }
#Div_body .container-fluid { margin: 0px; padding: 0px; }
#MenuControl { padding: 0px 4%; }
#MenuControl .nav-item { margin: 0px; }
#MenuControl .nav-item .nav-link { color: rgb(16, 50, 91); font-size: 14px; padding: 10px 0px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; }
#MenuControl .nav-fill { width: 100%; }
#MenuControl .bg-light { height: 100%; background: rgb(255, 255, 255) !important; }
#HeaderControl.RadDock_Default .rdMiddle .rdCenter, #HeaderControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important; }
#MenuControl_C .bg-light { --bs-bg-opacity: 1; height: 100%; background-color: transparent !important; }
#MenuControl.RadDock_Default .rdMiddle .rdCenter, #MenuControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important; }
#HeaderControl, #MenuControl, #MenuControl_C { height: 85px !important; }

@media (min-width: 320px) and (max-width: 768px) {
  .navbar-toggler { position: absolute; right: 15px; top: -50px; background: rgb(255, 255, 255); }
  #MenuControl, #MenuControl_C { height: 0px !important; }
  #HeaderControl, #HeaderControl_C { background: rgb(26, 43, 74); height: 62px !important; }
  .navbar-collapse { background: rgb(0, 35, 70); margin-top: -10px; }
  #WidgetControl4 { display: none; }
}

.section-tag { color: rgb(22, 61, 134); font-weight: 800; font-size: 21px; }
.about-title { font-size: 50px; font-weight: 700; color: rgb(38, 38, 38); line-height: 1.2; margin-bottom: 30px; }
.btn-custom { background: rgb(24, 71, 150); color: rgb(255, 255, 255); padding: 12px 34px; border-radius: 50px; font-size: 15px; letter-spacing: 0.3px; font-weight: 600; box-shadow: rgba(0, 0, 0, 0.663) 0px 2px 5px; transition: opacity 0.3s; display: inline-block; }
.btn-custom:hover { background: rgb(201, 165, 114); color: rgb(255, 255, 255); }

.hero { position: relative; overflow: hidden; padding: 5% 0px; background-color: rgb(255, 255, 255); background-image: linear-gradient(rgb(237, 241, 248) 1px, transparent 1px), linear-gradient(90deg, rgb(237, 241, 248) 1px, transparent 1px); background-size: 130px 130px; }
.hero h1 { font-size: 72px; font-weight: 800; color: rgb(22, 61, 134); line-height: 78px; margin: 0px 0px 30px; }
.hero p { font-size: 19px; line-height: 34px; }
.hero .hero-image { position: relative; min-height: 650px; }
.hero .phone { position: absolute; right: 0px; top: 0px; width: 62%; z-index: 3; box-shadow: rgba(100, 100, 111, 0.32) 0px 7px 29px 5px; border-radius: 20px; }
.hero .chart-card { position: absolute; left: -30px; bottom: 40px; width: 350px; background: rgb(255, 255, 255); border-radius: 18px; overflow: hidden; border: 5px solid rgb(11, 44, 104); }
.hero .currency { position: absolute; right: 60px; bottom: 40px; font-size: 140px; color: rgb(201, 165, 114); }
.hero .hero-image::before { content: ""; position: absolute; width: 64%; height: 62%; border: 2px solid rgb(32, 75, 157); border-radius: 18px; left: 20%; top: 20%; opacity: 1; }

.about-section { padding: 6% 0px; background: rgb(248, 248, 248); }
.image-wrapper { position: relative; display: flex; justify-content: center; }
.shape {position: absolute;left: 10px;bottom: -20px;width: 82%;height: 92%;background: rgb(22, 61, 134);border-radius: 22px;}
.about-img {position: relative;z-index: 2;width: 85%;border-radius: 22px;object-fit: cover;box-shadow: rgb(229 229 229 / 12%) 0px 25px 50px;}


.services { padding: 5% 0px; }
.service-card { background: #163d86; border: 1px solid rgb(229, 229, 229); border-radius: 18px; padding: 35px 20px; text-align: center; height: 100%; transition: 0.35s; outline: rgba(0, 0, 0, 0.13) solid 1px; outline-offset: 5px; }
.service-card:hover { transform: translateY(-8px); box-shadow: rgba(0, 0, 0, 0.08) 0px 20px 45px; }
.icon-box { width: 120px; height: 120px; border-radius: 50%; background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; padding: 15px; margin: 0px auto 25px; }
.service-card h3 { font-size: 22px; font-weight: 600; color: rgb(201, 165, 114); margin: 0px 0px 11px; }
.service-card p { font-size: 16px; line-height: 28px; color: rgb(255, 255, 255); margin: 0px; }
section { overflow: hidden; }

.contact-section { padding: 0 0 5% 0;}
.contact-img { border-radius: 20px; overflow: hidden; }
.contact-img img { width: 100%; display: block; object-fit: cover; }
.card-info { background: #c9a572; color: rgb(17, 40, 75); }
.card-info p { color: #11284b; }
.contact-section .left-pic  img{ border-radius: 20px;}
.contact-section .contact-form {background: #f8f8f8;padding: 40px;border: 1px solid rgba(221, 221, 221, 0.75);border-radius: 20px;}
.contact-section .contact-form  .form-control, .contact-section .contact-form  .form-select {padding: 14px;margin: 0 0 14px 0;border-color: #163d8661;}
.contact-section .contact-form input[type="button"] {width: 100%;margin: 25px 0 0 0;border: 0;background: #163d86; color: #fff;border-radius: 5px;padding: 15px;text-transform: uppercase;letter-spacing: 1px;font-size: 14px;}
.contact-section .contact-info {background: #c9a572;padding: 25px;border-radius: 16px;margin: 20px 0 0 0;}
.contact-section .contact-info .icon { width: 18%; }
.contact-section .contact-info .text { width: 82%; }
.contact-section .contact-info .icon i { width: 42px; height: 42px; background: rgb(255, 255, 255); border-radius: 50%; text-align: center; font-size: 18px; line-height: 2.4; }
.contact-section .contact-info .text h2 {color: #0c0c0c;font-size: 22px;margin: 5px 0px;font-weight: 600;}
.contact-section .contact-info .text a, .contact-section .contact-info .text p { color: #fff; font-size: 15px; line-height: 24px; }

footer {background: #113578;padding: 5% 0 0 0;  background-image: linear-gradient(#edf1f80d 1px, transparent 1px), linear-gradient(90deg, #edf1f80d 1px, transparent 1px); background-size: 130px 130px;}
footer h4 {color: #fff;font-size: 19px;font-weight: 600;margin: 0 0 40px 0;letter-spacing: .5px;position: relative;}
footer h4::after { content: ''; position: absolute; width: 60px; height: 1px; background: #c9a572; left: 0; bottom: -18px}
footer p, footer p a {color: #ffffffe0;font-size: 14px;margin: 0 0 6px 0;}
footer p a:hover { color: #c9a572; padding-left: 5px; transition: 0.3s;}
footer .footer-bottom {/* margin: 4% 0 0 0; */border-top: 1px solid rgba(204, 204, 204, .4);padding: 15px 0;}
footer .footer-bottom p { margin: 0;}
footer p i { color: #ffffff; margin: 0 5px 0 0}
footer .social-icon a {position: relative;color: #fff;background: rgba(255, 255, 255, .1);font-size: 13px;width: 35px;height: 35px;margin: 0 5px 0 0;display: inline-block;border-radius: 50%;text-align: center;line-height: 2.8;transition: all .2s ease-in-out;}
footer .social-icon a i { position: relative; z-index: 3;}
footer .social-icon a::before{ content: ''; position: absolute; width:100%; height: 100%; border-radius: 50%; background: #c9a572;; left: 0; transform: scale(0); transition: all .4s ease-in-out;}
footer .social-icon a:hover { color: #212121;}
footer .social-icon a:hover::before { transform: scale(1);}

.about-banner { padding: 6% 0px; background-color: rgba(22, 61, 134, 0.06); background-image: linear-gradient(rgb(235, 235, 235) 1px, transparent 1px), linear-gradient(90deg, rgb(235, 235, 235) 1px, transparent 1px); background-size: 110px 110px; }
.about-banner h1 { font-size: 46px; letter-spacing: 0.5px; margin-bottom: 10px; text-transform: uppercase; font-weight: 800; line-height: 1.2; text-align: center; }
.about-banner p, .about-banner p a { color: rgb(38, 38, 38); text-align: center; margin: 0px; }

.contact-page .contact-info { background: rgb(22, 61, 134); padding: 30px; border-radius: 16px; }
.contact-page .contact-info .icon { width: 18%; }
.contact-page .contact-info .text { width: 82%; }
.contact-page .contact-info .icon i { width: 42px; height: 42px; background: rgb(255, 255, 255); border-radius: 50%; text-align: center; font-size: 18px; line-height: 2.4; }
.contact-page .contact-info .text h2 { color: rgb(201, 165, 114); font-size: 22px; margin: 5px 0px; font-weight: 600; }
.contact-page .contact-info .text a, .contact-page .contact-info .text p { color: rgb(236, 236, 236); font-size: 15px; line-height: 24px; }