/* ========================================= CAPITALS FINSERV MAIN STYLE ========================================= */ :root { --navy: #0B2854; --navy-dark: #071D3A; --blue: #174A8B; --gold: #D9A441; --gold-light: #F2C66D; --white: #FFFFFF; --black: #172033; --light-bg: #F7F9FC; --border: #E5E9EF; } /* ========================================= RESET ========================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; color: var(--black); background: var(--white); overflow-x: hidden; } a { text-decoration: none; } img { max-width: 100%; height: auto; } button { font-family: inherit; } /* ========================================= TOPBAR ========================================= */ .topbar { background: var(--navy); margin: 15px 3% 0; padding: 11px 25px; border-radius: 30px; color: #fff; position: relative; z-index: 100; } /* MAIN WRAPPER */ .topbar-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* ========================================= LEFT ========================================= */ .topbar-left { display: flex; align-items: center; gap: 9px; font-size: 14px; white-space: nowrap; } .topbar-label { color: #fff; } .topbar-left > a { color: var(--gold-light); font-weight: 700; transition: .3s; } .topbar-left > a:hover { color: #fff; } /* ========================================= DIVIDER ========================================= */ .topbar-line { width: 1px; height: 22px; background: rgba(255,255,255,.45); margin: 0 8px; } /* ========================================= SOCIAL ========================================= */ .social-link { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; color: #fff !important; font-size: 15px; border-radius: 50%; transition: .3s; } .social-link:hover { color: var(--gold-light) !important; transform: translateY(-2px); } /* ========================================= RIGHT ========================================= */ .topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 14px; white-space: nowrap; } .update-label { color: var(--gold-light); font-weight: 700; } .topbar-right strong { color: var(--gold-light); font-weight: 700; } .topbar-right a { color: #fff; margin-left: 5px; transition: .3s; } .topbar-right a:hover { color: var(--gold-light); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .topbar { margin: 10px 15px 0; padding: 12px 18px; border-radius: 20px; } .topbar-wrapper { flex-direction: column; justify-content: center; gap: 7px; } .topbar-right { justify-content: center; flex-wrap: wrap; white-space: normal; text-align: center; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 576px) { .topbar { margin: 8px 10px 0; padding: 10px 12px; border-radius: 15px; } .topbar-left { justify-content: center; flex-wrap: wrap; white-space: normal; font-size: 12px; } .topbar-line { height: 18px; margin: 0 3px; } .social-link { width: 23px; height: 23px; font-size: 13px; } .topbar-right { font-size: 11px; line-height: 1.5; gap: 5px; } .topbar-right strong { width: 100%; } .topbar-right a { display: none; } } /* ========================================= HEADER ========================================= */ .main-header { background: #ffffff; padding: 10px 0; border-bottom: 1px solid #e8ebf0; } /* HEADER WRAPPER */ .header-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 30px; } /* ========================================= LOGO ========================================= */ .header-logo { display: flex; align-items: center; } .header-logo a { display: block; } .header-logo img { width: 360px; height: 100px; max-width: 100%; object-fit: contain; object-position: left center; } /* ========================================= RIGHT SIDE ========================================= */ .header-right { display: flex; align-items: center; gap: 35px; } /* ========================================= CONTACT ========================================= */ .header-contact { display: flex; align-items: center; gap: 12px; } /* ICON */ .contact-icon { width: 44px; height: 44px; background: var(--navy); color: var(--gold-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } /* CONTENT */ .contact-content span { display: block; color: #7a8494; font-size: 12px; margin-bottom: 3px; } .contact-content a { display: block; color: var(--navy); font-size: 14px; font-weight: 700; white-space: nowrap; transition: .3s; } .contact-content a:hover { color: var(--gold); } /* ========================================= APPLY BUTTON ========================================= */ .header-apply { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 25px; background: linear-gradient( 135deg, var(--gold-light), var(--gold) ); color: var(--navy); border-radius: 30px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: .3s; } .header-apply:hover { color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217,164,65,.30); } .header-apply i { font-size: 16px; } /* ========================================= LAPTOP ========================================= */ @media (max-width: 1200px) { .header-logo img { width: 300px; height: 85px; } .header-right { gap: 20px; } .contact-content a { font-size: 13px; } .header-apply { padding: 12px 20px; } } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .main-header { padding: 8px 0; } .header-wrapper { justify-content: center; } .header-right { display: none; } .header-logo img { width: 310px; height: 85px; object-position: center; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 576px) { .main-header { padding: 5px 0; } .header-logo img { width: 270px; height: 75px; } } /* ========================================= CAPITALS FINSERV NAVBAR ========================================= */ .capital-navbar { background: #ffffff; padding: 0; border-bottom: 1px solid #e5e9ef; position: relative; z-index: 999; } /* ========================================= NAV MENU ========================================= */ .capital-navbar .navbar-nav { gap: 0; } /* ========================================= NAV LINK ========================================= */ .capital-navbar .nav-link { color: #172033; font-size: 14px; font-weight: 700; padding: 20px 13px !important; position: relative; white-space: nowrap; transition: all .25s ease; } /* HOVER */ .capital-navbar .nav-link:hover { color: var(--gold); } /* ACTIVE */ .capital-navbar .nav-link.active { color: var(--gold); } /* ACTIVE LINE */ .capital-navbar .nav-link.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 3px; background: var(--gold); border-radius: 10px; } /* ========================================= DROPDOWN ARROW ========================================= */ .capital-navbar .dropdown-toggle::after { margin-left: 6px; vertical-align: 2px; } /* ========================================= DROPDOWN MENU ========================================= */ .capital-navbar .dropdown-menu { border: 0; border-top: 3px solid var(--gold); border-radius: 0 0 10px 10px; padding: 8px; min-width: 220px; box-shadow: 0 15px 40px rgba(11,40,84,.15); } /* DROPDOWN ITEM */ .capital-navbar .dropdown-item { color: #172033; font-size: 14px; font-weight: 600; padding: 11px 14px; border-radius: 6px; transition: .2s; } /* DROPDOWN HOVER */ .capital-navbar .dropdown-item:hover { background: #fff7e5; color: var(--gold); } /* ========================================= SPACER ========================================= */ .nav-spacer { flex: 1; } /* ========================================= APPLY NOW ========================================= */ .capital-navbar .nav-apply { color: var(--gold) !important; font-weight: 800; padding-left: 15px !important; padding-right: 15px !important; } /* ========================================= CUSTOMER LOGIN ========================================= */ .customer-login { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--navy); color: #ffffff; font-size: 13px; font-weight: 700; padding: 12px 20px; border-radius: 30px; white-space: nowrap; transition: all .3s ease; } .customer-login:hover { background: var(--blue); color: #ffffff; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(11,40,84,.20); } .customer-login i { font-size: 16px; } /* ========================================= TOGGLER ========================================= */ .capital-navbar .navbar-toggler { border: 1px solid var(--navy); border-radius: 7px; padding: 7px 10px; } .capital-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(217,164,65,.20); } /* ========================================= LAPTOP ========================================= */ @media (max-width: 1399px) { .capital-navbar .nav-link { font-size: 13px; padding-left: 9px !important; padding-right: 9px !important; } .customer-login { padding: 11px 15px; font-size: 12px; } } /* ========================================= TABLET ========================================= */ @media (max-width: 1199px) { .capital-navbar { padding: 5px 0; } .capital-navbar .navbar-nav { padding: 12px 0; } .capital-navbar .nav-link { padding: 11px 10px !important; font-size: 14px; } .capital-navbar .nav-link.active::after { display: none; } .capital-navbar .nav-link.active { background: #fff7e5; border-left: 3px solid var(--gold); border-radius: 5px; padding-left: 13px !important; } .nav-spacer { display: none; } .capital-navbar .nav-apply { margin-top: 5px; } .customer-login { margin-top: 8px; width: max-content; } .capital-navbar .dropdown-menu { border-top: 1px solid var(--gold); border-left: 3px solid var(--gold); box-shadow: none; border-radius: 0 7px 7px 0; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 576px) { .capital-navbar { padding: 5px 0; } .capital-navbar .navbar-toggler { margin-left: 5px; } .capital-navbar .nav-link { font-size: 13px; padding: 10px 8px !important; } .customer-login { width: 100%; margin-top: 8px; } .capital-navbar .dropdown-menu { width: 100%; } } /* ========================================= CAPITALS FINSERV HERO SECTION ========================================= */ .hero-section { position: relative; width: 100%; overflow: hidden; } /* ========================================= HERO SLIDE ========================================= */ .hero-slide { height: 400px; min-height: 400px; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; } /* ========================================= SLIDE 1 ========================================= */ .hero-slide-1 { background-image: linear-gradient( 90deg, rgba(7, 29, 58, 0.98) 0%, rgba(11, 40, 84, 0.92) 42%, rgba(11, 40, 84, 0.48) 75%, rgba(11, 40, 84, 0.20) 100% ), url("../assets/hero-loan.jpg"); background-position: center; background-size: cover; } /* ========================================= SLIDE 2 ========================================= */ .hero-slide-2 { background-image: linear-gradient( 90deg, rgba(7, 29, 58, 0.98) 0%, rgba(11, 40, 84, 0.88) 45%, rgba(23, 74, 139, 0.45) 100% ), url("../assets/hero-personal.jpg"); background-position: center; background-size: cover; } /* ========================================= SLIDE 3 ========================================= */ .hero-slide-3 { background-image: linear-gradient( 90deg, rgba(7, 29, 58, 0.98) 0%, rgba(11, 40, 84, 0.88) 45%, rgba(23, 74, 139, 0.45) 100% ), url("../assets/hero-business.jpg"); background-position: center; background-size: cover; } /* ========================================= HERO CONTENT ========================================= */ .hero-content { width: 100%; max-width: 820px; color: #ffffff; padding-top: 5px; } /* ========================================= SMALL TITLE ========================================= */ .hero-tag { display: inline-block; color: var(--gold-light); font-size: 13px; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; } /* ========================================= MAIN HEADING ========================================= */ .hero-content h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 4.5vw, 60px); line-height: 1.05; font-weight: 700; margin: 0 0 15px; color: #ffffff; } .hero-content h1 span { color: var(--gold-light); } /* ========================================= DESCRIPTION ========================================= */ .hero-content p { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.92); margin: 0 0 20px; } /* ========================================= FEATURES ========================================= */ .hero-features { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 22px; } .hero-features span { display: flex; align-items: center; gap: 7px; color: #ffffff; font-size: 14px; padding-right: 15px; border-right: 1px solid rgba(255,255,255,.4); } .hero-features span:last-child { border-right: 0; } .hero-features i { color: var(--gold-light); font-size: 18px; } /* ========================================= HERO BUTTONS ========================================= */ .hero-buttons { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* PRIMARY BUTTON */ .hero-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 25px; background: linear-gradient( 135deg, var(--gold-light), var(--gold) ); color: var(--navy); border-radius: 30px; font-size: 14px; font-weight: 700; transition: all .3s ease; } .hero-btn-primary:hover { color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217,164,65,.35); } /* OUTLINE BUTTON */ .hero-btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 11px 25px; border: 1px solid #ffffff; color: #ffffff; border-radius: 30px; font-size: 14px; font-weight: 600; transition: all .3s ease; } .hero-btn-outline:hover { background: #ffffff; color: var(--navy); } /* ========================================= SLIDER ARROWS ========================================= */ .hero-section .carousel-control-prev, .hero-section .carousel-control-next { width: 7%; opacity: 1; } .hero-arrow { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.72); color: var(--navy); border-radius: 50%; font-size: 19px; transition: all .3s ease; } .hero-arrow:hover { background: #ffffff; transform: scale(1.05); } /* ========================================= SLIDER INDICATORS ========================================= */ .hero-section .carousel-indicators { bottom: 12px; margin-bottom: 0; } .hero-section .carousel-indicators button { width: 8px; height: 8px; margin: 0 4px; border: 0; border-radius: 50%; background: #ffffff; opacity: .7; } .hero-section .carousel-indicators button.active { background: var(--gold); opacity: 1; } /* ========================================= FLOATING BUTTONS ========================================= */ .hero-floating-buttons { position: absolute; right: 0; top: 35px; z-index: 20; display: flex; flex-direction: column; gap: 5px; } .hero-floating-buttons a { width: 55px; height: 52px; display: flex; align-items: center; justify-content: center; background: #ffffff; color: var(--navy); font-size: 20px; border-radius: 10px 0 0 10px; box-shadow: 0 3px 12px rgba(0,0,0,.18); transition: all .3s ease; } .hero-floating-buttons a:hover { background: var(--gold); color: var(--navy); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .hero-slide { height: 400px; min-height: 400px; } .hero-content { padding-left: 20px; padding-right: 80px; } .hero-content h1 { font-size: 48px; } .hero-content p { font-size: 16px; } .hero-features { gap: 10px; } .hero-features span { font-size: 13px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .hero-slide { height: 400px; min-height: 400px; } .hero-content { padding: 25px 65px 35px 20px; } .hero-tag { font-size: 11px; margin-bottom: 7px; } .hero-content h1 { font-size: 34px; line-height: 1.08; margin-bottom: 12px; } .hero-content p { font-size: 14px; line-height: 1.45; margin-bottom: 15px; } .hero-features { gap: 6px; margin-bottom: 17px; } .hero-features span { width: 100%; border-right: 0; padding-right: 0; font-size: 12px; } .hero-features i { font-size: 15px; } .hero-buttons { gap: 8px; } .hero-btn-primary, .hero-btn-outline { padding: 10px 18px; font-size: 12px; } .hero-floating-buttons { top: 20px; } .hero-floating-buttons a { width: 43px; height: 43px; font-size: 16px; border-radius: 8px 0 0 8px; } .hero-section .carousel-control-prev, .hero-section .carousel-control-next { width: 10%; } .hero-arrow { width: 35px; height: 35px; font-size: 15px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .hero-slide { height: 400px; min-height: 400px; } .hero-content { padding: 25px 55px 30px 15px; } .hero-content h1 { font-size: 29px; } .hero-content p { font-size: 13px; } .hero-btn-primary, .hero-btn-outline { padding: 9px 15px; } } /* ========================================= GOLD LOAN SECTION ========================================= */ .gold-loan-section { background: #f8f1e9; padding: 70px 0; overflow: hidden; } /* ========================================= MAIN WRAPPER ========================================= */ .gold-loan-wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; max-width: 1500px; margin: 0 auto; } /* ========================================= LEFT CONTENT ========================================= */ .gold-loan-content { padding-left: 20px; max-width: 720px; } /* SMALL LABEL */ .gold-loan-label { display: block; color: #e02b20; font-size: 17px; font-weight: 500; margin-bottom: 12px; } /* HEADING */ .gold-loan-content h2 { font-family: Georgia, "Times New Roman", serif; color: var(--navy); font-size: 42px; font-weight: 400; line-height: 1.2; margin: 0 0 18px; } /* DESCRIPTION */ .gold-loan-content p { color: #7d7f86; font-size: 18px; line-height: 1.65; font-weight: 400; margin: 0 0 30px; max-width: 720px; } /* ========================================= READ MORE BUTTON ========================================= */ .gold-loan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 235px; padding: 14px 25px; border: 1px solid #252525; border-radius: 35px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 17px; transition: all .3s ease; } .gold-loan-btn i { font-size: 20px; transition: transform .3s ease; } .gold-loan-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); } .gold-loan-btn:hover i { transform: translateX(5px); } /* ========================================= RIGHT IMAGE ========================================= */ .gold-loan-image { width: 100%; overflow: hidden; border-radius: 30px; position: relative; } .gold-loan-image img { width: 100%; height: 330px; object-fit: cover; display: block; transition: transform .5s ease; } .gold-loan-image:hover img { transform: scale(1.03); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .gold-loan-section { padding: 55px 0; } .gold-loan-wrapper { grid-template-columns: 1fr; gap: 35px; } .gold-loan-content { padding-left: 10px; max-width: 100%; } .gold-loan-content h2 { font-size: 38px; } .gold-loan-content p { font-size: 16px; max-width: 100%; } .gold-loan-image img { height: 300px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .gold-loan-section { padding: 45px 0; } .gold-loan-wrapper { gap: 30px; } .gold-loan-content { padding-left: 5px; padding-right: 5px; } .gold-loan-label { font-size: 15px; margin-bottom: 8px; } .gold-loan-content h2 { font-size: 32px; line-height: 1.2; margin-bottom: 14px; } .gold-loan-content p { font-size: 15px; line-height: 1.6; margin-bottom: 22px; } .gold-loan-btn { min-width: 200px; padding: 12px 20px; font-size: 15px; } .gold-loan-image { border-radius: 22px; } .gold-loan-image img { height: 240px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .gold-loan-section { padding: 40px 0; } .gold-loan-content h2 { font-size: 28px; } .gold-loan-content p { font-size: 14px; } .gold-loan-image img { height: 210px; } } /* ========================================= INVESTMENT SECTION ========================================= */ .investment-section { background: #f8f1e9; padding: 25px 0 70px; overflow: hidden; } /* ========================================= MAIN WRAPPER ========================================= */ .investment-wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; max-width: 1500px; margin: 0 auto; } /* ========================================= LEFT CONTENT ========================================= */ .investment-content { padding-left: 20px; max-width: 720px; } /* LABEL */ .investment-label { display: block; color: #e02b20; font-size: 17px; font-weight: 500; margin-bottom: 12px; } /* HEADING */ .investment-content h2 { font-family: Georgia, "Times New Roman", serif; color: var(--navy); font-size: 42px; font-weight: 400; line-height: 1.2; margin: 0 0 18px; } /* DESCRIPTION */ .investment-content p { color: #7d7f86; font-size: 18px; line-height: 1.65; font-weight: 400; margin: 0 0 30px; max-width: 720px; } /* ========================================= READ MORE BUTTON ========================================= */ .investment-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 235px; padding: 14px 25px; border: 1px solid #252525; border-radius: 35px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 17px; transition: all .3s ease; } .investment-btn i { font-size: 20px; transition: transform .3s ease; } .investment-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); } .investment-btn:hover i { transform: translateX(5px); } /* ========================================= RIGHT IMAGE ========================================= */ .investment-image { width: 100%; overflow: hidden; border-radius: 30px; position: relative; } .investment-image img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform .5s ease; } .investment-image:hover img { transform: scale(1.03); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .investment-section { padding: 25px 0 55px; } .investment-wrapper { grid-template-columns: 1fr; gap: 35px; } .investment-content { padding-left: 10px; max-width: 100%; } .investment-content h2 { font-size: 38px; } .investment-content p { font-size: 16px; max-width: 100%; } .investment-image img { height: 300px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .investment-section { padding: 20px 0 45px; } .investment-wrapper { gap: 30px; } .investment-content { padding-left: 5px; padding-right: 5px; } .investment-label { font-size: 15px; margin-bottom: 8px; } .investment-content h2 { font-size: 32px; line-height: 1.2; margin-bottom: 14px; } .investment-content p { font-size: 15px; line-height: 1.6; margin-bottom: 22px; } .investment-btn { min-width: 200px; padding: 12px 20px; font-size: 15px; } .investment-image { border-radius: 22px; } .investment-image img { height: 240px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .investment-section { padding-bottom: 40px; } .investment-content h2 { font-size: 28px; } .investment-content p { font-size: 14px; } .investment-image img { height: 210px; } } /* ========================================= BUSINESS LOAN SECTION ========================================= */ .business-loan-section { background: #f8f1e9; padding: 25px 0 70px; overflow: hidden; } /* ========================================= MAIN WRAPPER ========================================= */ .business-loan-wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; max-width: 1500px; margin: 0 auto; } /* ========================================= LEFT CONTENT ========================================= */ .business-loan-content { padding-left: 20px; max-width: 720px; } /* ========================================= LABEL ========================================= */ .business-loan-label { display: block; color: #e02b20; font-size: 17px; font-weight: 500; margin-bottom: 12px; } /* ========================================= HEADING ========================================= */ .business-loan-content h2 { font-family: Georgia, "Times New Roman", serif; color: var(--navy); font-size: 42px; font-weight: 400; line-height: 1.2; margin: 0 0 18px; } /* ========================================= DESCRIPTION ========================================= */ .business-loan-content p { color: #7d7f86; font-size: 18px; line-height: 1.65; font-weight: 400; margin: 0 0 30px; max-width: 720px; } /* ========================================= READ MORE BUTTON ========================================= */ .business-loan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 235px; padding: 14px 25px; border: 1px solid #252525; border-radius: 35px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 17px; transition: all .3s ease; } .business-loan-btn i { font-size: 20px; transition: transform .3s ease; } .business-loan-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); } .business-loan-btn:hover i { transform: translateX(5px); } /* ========================================= RIGHT IMAGE ========================================= */ .business-loan-image { width: 100%; overflow: hidden; border-radius: 30px; position: relative; } .business-loan-image img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform .5s ease; } .business-loan-image:hover img { transform: scale(1.03); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .business-loan-section { padding: 25px 0 55px; } .business-loan-wrapper { grid-template-columns: 1fr; gap: 35px; } .business-loan-content { padding-left: 10px; max-width: 100%; } .business-loan-content h2 { font-size: 38px; } .business-loan-content p { font-size: 16px; max-width: 100%; } .business-loan-image img { height: 300px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .business-loan-section { padding: 20px 0 45px; } .business-loan-wrapper { gap: 30px; } .business-loan-content { padding-left: 5px; padding-right: 5px; } .business-loan-label { font-size: 15px; margin-bottom: 8px; } .business-loan-content h2 { font-size: 32px; line-height: 1.2; margin-bottom: 14px; } .business-loan-content p { font-size: 15px; line-height: 1.6; margin-bottom: 22px; } .business-loan-btn { min-width: 200px; padding: 12px 20px; font-size: 15px; } .business-loan-image { border-radius: 22px; } .business-loan-image img { height: 240px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .business-loan-section { padding-bottom: 40px; } .business-loan-content h2 { font-size: 28px; } .business-loan-content p { font-size: 14px; } .business-loan-image img { height: 210px; } } /* ========================================= ABOUT US SECTION ========================================= */ .insurance-section { background: #f5f8fc; padding: 55px 0 65px; overflow: hidden; position: relative; } /* ========================================= SOFT BACKGROUND SHAPE ========================================= */ .insurance-section::before { content: ""; position: absolute; width: 380px; height: 380px; background: rgba(217, 164, 65, 0.08); border-radius: 50%; top: -180px; left: -140px; } .insurance-section::after { content: ""; position: absolute; width: 300px; height: 300px; background: rgba(11, 40, 84, 0.04); border-radius: 50%; bottom: -160px; right: -100px; } /* ========================================= MAIN WRAPPER ========================================= */ .insurance-wrapper { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: center; gap: 55px; max-width: 1500px; margin: 0 auto; position: relative; z-index: 2; } /* ========================================= LEFT CONTENT ========================================= */ .insurance-content { padding: 15px 20px; max-width: 700px; } /* ========================================= LABEL ========================================= */ .insurance-label { display: inline-flex; align-items: center; gap: 9px; color: var(--gold); font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; } .insurance-label::before { content: ""; width: 28px; height: 2px; background: var(--gold); } /* ========================================= HEADING ========================================= */ .insurance-content h2 { color: var(--navy); font-size: 42px; font-weight: 800; line-height: 1.2; margin: 0 0 18px; max-width: 650px; } /* GOLD WORD EFFECT */ .insurance-content h2 span { color: var(--gold); } /* ========================================= DESCRIPTION ========================================= */ .insurance-content p { color: #667085; font-size: 16px; line-height: 1.75; font-weight: 400; margin: 0 0 14px; max-width: 650px; } /* ========================================= READ MORE BUTTON ========================================= */ .insurance-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; min-width: 185px; padding: 13px 24px; background: var(--navy); border: 1px solid var(--navy); border-radius: 30px; color: #fff; font-size: 14px; font-weight: 700; transition: all .3s ease; } .insurance-btn i { font-size: 16px; transition: transform .3s ease; } .insurance-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217, 164, 65, 0.25); } .insurance-btn:hover i { transform: translateX(5px); } /* ========================================= RIGHT IMAGE ========================================= */ .insurance-image { width: 100%; overflow: hidden; border-radius: 24px; position: relative; box-shadow: 0 18px 45px rgba(11, 40, 84, 0.14); border: 5px solid #fff; } /* GOLD BORDER ACCENT */ .insurance-image::before { content: ""; position: absolute; top: 15px; left: 15px; width: 55px; height: 55px; border-top: 3px solid var(--gold); border-left: 3px solid var(--gold); z-index: 2; border-radius: 8px 0 0 0; } .insurance-image img { width: 100%; height: 330px; object-fit: cover; object-position: center; display: block; transition: transform .5s ease; } .insurance-image:hover img { transform: scale(1.035); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .insurance-section { padding: 50px 0 55px; } .insurance-wrapper { grid-template-columns: 1fr; gap: 35px; } .insurance-content { padding: 5px 10px; max-width: 100%; } .insurance-content h2 { font-size: 36px; max-width: 700px; } .insurance-content p { font-size: 16px; max-width: 100%; } .insurance-image img { height: 320px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .insurance-section { padding: 40px 0 45px; } .insurance-wrapper { gap: 28px; } .insurance-content { padding: 0 5px; } .insurance-label { font-size: 12px; letter-spacing: 1.2px; margin-bottom: 10px; } .insurance-label::before { width: 22px; } .insurance-content h2 { font-size: 30px; line-height: 1.25; margin-bottom: 14px; } .insurance-content p { font-size: 14px; line-height: 1.7; margin-bottom: 12px; } .insurance-btn { min-width: 165px; padding: 11px 19px; font-size: 13px; margin-top: 8px; } .insurance-image { border-radius: 18px; border-width: 4px; } .insurance-image img { height: 250px; } .insurance-image::before { width: 40px; height: 40px; top: 10px; left: 10px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .insurance-section { padding: 35px 0 40px; } .insurance-content h2 { font-size: 27px; } .insurance-content p { font-size: 13.5px; } .insurance-image img { height: 215px; } } /* ========================================= EMI CALCULATOR SECTION ========================================= */ .emi-section { background: #ffffff; padding: 60px 0 80px; overflow: hidden; } /* ========================================= MAIN WRAPPER ========================================= */ .emi-wrapper { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; } /* ========================================= LEFT IMAGE ========================================= */ .emi-image-box { width: 100%; height: 550px; overflow: hidden; border-radius: 30px; } .emi-image-box img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .emi-image-box:hover img { transform: scale(1.02); } /* ========================================= RIGHT CALCULATOR ========================================= */ .emi-calculator { padding: 10px 20px; width: 100%; } /* ========================================= HEADING ========================================= */ .emi-heading h2 { color: #171b27; font-family: Georgia, "Times New Roman", serif; font-size: 45px; font-weight: 600; line-height: 1.15; margin: 0 0 12px; } .emi-heading p { color: #777d87; font-size: 19px; margin: 0 0 28px; } /* ========================================= LOAN TABS ========================================= */ .emi-tabs { display: flex; align-items: center; border: 1px solid #eeeeee; border-radius: 35px; overflow: hidden; margin-bottom: 45px; } .emi-tab { flex: 1; border: 0; background: transparent; color: #171b27; font-family: Georgia, "Times New Roman", serif; font-size: 18px; padding: 16px 18px; cursor: pointer; transition: all .3s ease; } .emi-tab.active { background: #e91f2b; color: #ffffff; border-radius: 35px; } .emi-tab:hover:not(.active) { color: #e91f2b; } /* ========================================= INPUT ROW ========================================= */ .emi-input-row { display: grid; grid-template-columns: 1fr 145px; align-items: end; gap: 30px; margin-bottom: 30px; } /* ========================================= FIELD ========================================= */ .emi-field label { display: block; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 18px; margin-bottom: 10px; } .emi-field input { width: 100%; height: 54px; border: 0; border-bottom: 1px solid #dcdcdc; background: #f6f6f6; border-radius: 7px 7px 0 0; padding: 0 15px; color: #222; font-size: 16px; outline: none; transition: all .3s ease; } .emi-field input:focus { border-bottom-color: #e91f2b; background: #f3f3f3; } .emi-field input::placeholder { color: #aaaaaa; } /* ========================================= VALUE BOX ========================================= */ .emi-value { height: 65px; border: 1px solid #e5e0db; border-radius: 35px; display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 17px; white-space: nowrap; } /* ========================================= RESULT ========================================= */ .emi-result { border-top: 1px solid #f0caca; margin-top: 65px; padding-top: 45px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .emi-result-text span { display: block; color: #e91f2b; font-family: Georgia, "Times New Roman", serif; font-size: 18px; margin-bottom: 12px; } .emi-result-text h3 { margin: 0; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 38px; font-weight: 400; } .emi-result-text h3 strong { font-weight: 700; } /* ========================================= APPLY BUTTON ========================================= */ .emi-apply-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 225px; padding: 15px 30px; background: #ed241b; color: #ffffff; border-radius: 35px; font-family: Georgia, "Times New Roman", serif; font-size: 18px; transition: all .3s ease; } .emi-apply-btn:hover { background: var(--navy); color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11,40,84,.20); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .emi-section { padding: 50px 0 60px; } .emi-wrapper { grid-template-columns: 1fr; gap: 40px; } .emi-image-box { height: 400px; } .emi-calculator { padding: 0 10px; } .emi-heading h2 { font-size: 40px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .emi-section { padding: 40px 0 50px; } .emi-wrapper { gap: 30px; } .emi-image-box { height: 280px; border-radius: 20px; } .emi-calculator { padding: 0 5px; } .emi-heading h2 { font-size: 31px; line-height: 1.2; } .emi-heading p { font-size: 15px; margin-bottom: 22px; } .emi-tabs { border-radius: 20px; flex-wrap: wrap; margin-bottom: 30px; } .emi-tab { font-size: 14px; padding: 12px 8px; } .emi-input-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 25px; } .emi-field label { font-size: 16px; } .emi-value { width: 100%; height: 48px; font-size: 15px; } .emi-result { margin-top: 40px; padding-top: 30px; flex-direction: column; align-items: flex-start; } .emi-result-text h3 { font-size: 32px; } .emi-apply-btn { width: 100%; min-width: 0; font-size: 16px; padding: 13px 20px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .emi-image-box { height: 230px; } .emi-heading h2 { font-size: 27px; } .emi-tabs { display: grid; grid-template-columns: 1fr; } .emi-tab { width: 100%; border-radius: 0; } .emi-tab.active { border-radius: 20px; } } /* ========================================= TRUST SECTION ========================================= */ .trust-section { background: #e52b1f; padding: 80px 0 85px; overflow: hidden; color: #ffffff; } /* ========================================= MAIN WRAPPER ========================================= */ .trust-wrapper { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 55px; } /* ========================================= LEFT CONTENT ========================================= */ .trust-content { max-width: 760px; padding-left: 20px; } /* ========================================= HEADING ========================================= */ .trust-content h2 { font-family: Georgia, "Times New Roman", serif; font-size: 48px; line-height: 1.12; font-weight: 700; color: #ffffff; margin: 0 0 28px; } /* ========================================= PARAGRAPHS ========================================= */ .trust-content p { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.96); margin: 0 0 22px; max-width: 760px; } /* ========================================= KNOW MORE BUTTON ========================================= */ .trust-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 235px; padding: 14px 25px; margin-top: 8px; border: 1px solid #ffffff; border-radius: 35px; color: #ffffff; font-family: Georgia, "Times New Roman", serif; font-size: 17px; transition: all .3s ease; } .trust-btn i { font-size: 20px; transition: transform .3s ease; } .trust-btn:hover { background: #ffffff; color: #e52b1f; } .trust-btn:hover i { transform: translateX(5px); } /* ========================================= RIGHT CARDS ========================================= */ .trust-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; } /* ========================================= CARD ========================================= */ .trust-card { width: 100%; } /* ========================================= CARD IMAGE ========================================= */ .trust-card-image { width: 100%; height: 350px; overflow: hidden; border-radius: 25px; background: #ffffff; } .trust-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .trust-card:hover .trust-card-image img { transform: scale(1.04); } /* ========================================= CARD TITLE ========================================= */ .trust-card h3 { font-family: Georgia, "Times New Roman", serif; color: #ffffff; font-size: 26px; font-weight: 400; line-height: 1.25; margin: 30px 0 0; } /* ========================================= TABLET ========================================= */ @media (max-width: 1100px) { .trust-wrapper { grid-template-columns: 1fr; gap: 50px; } .trust-content { max-width: 900px; padding-left: 10px; } .trust-cards { max-width: 900px; } } /* ========================================= TABLET / SMALL LAPTOP ========================================= */ @media (max-width: 991px) { .trust-section { padding: 60px 0 65px; } .trust-content h2 { font-size: 42px; } .trust-content p { font-size: 16px; } .trust-card-image { height: 300px; } .trust-card h3 { font-size: 23px; margin-top: 22px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .trust-section { padding: 50px 0 55px; } .trust-wrapper { gap: 40px; } .trust-content { padding-left: 5px; padding-right: 5px; } .trust-content h2 { font-size: 32px; line-height: 1.15; margin-bottom: 20px; } .trust-content p { font-size: 14px; line-height: 1.6; margin-bottom: 18px; } .trust-btn { min-width: 200px; padding: 12px 20px; font-size: 15px; } .trust-cards { grid-template-columns: 1fr; gap: 35px; padding: 0 5px; } .trust-card-image { height: 300px; border-radius: 20px; } .trust-card h3 { font-size: 24px; margin-top: 18px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .trust-section { padding: 42px 0 48px; } .trust-content h2 { font-size: 28px; } .trust-content p { font-size: 13px; } .trust-card-image { height: 250px; } .trust-card h3 { font-size: 21px; } } /* ========================================= WHY CHOOSE US ========================================= */ .why-choose-section { background: #fff; padding: 55px 0 60px; overflow: hidden; } .why-choose-wrapper { max-width: 1500px; margin: 0 auto; } .why-choose-title { font-family: Georgia, "Times New Roman", serif; font-size: 48px; font-weight: 600; color: #171b27; margin: 0 0 45px; } /* ========================================= ACCORDION ITEM ========================================= */ .why-item { border-top: 1px solid #dcdcdc; } .why-item:last-child { border-bottom: 1px solid #dcdcdc; } /* HEADER */ .why-item-header { width: 100%; min-height: 90px; padding: 15px 0; border: 0; background: transparent; display: flex; align-items: center; text-align: left; cursor: pointer; } /* TITLE */ .why-item-title { display: flex; align-items: center; gap: 20px; } /* ICON */ .why-icon { width: 50px; height: 50px; flex-shrink: 0; border: 1px solid #e0e0e0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #e52b1f; font-size: 16px; transition: all .3s ease; } /* TITLE TEXT */ .why-item-title h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; color: var(--navy); transition: color .3s ease; } /* ACTIVE */ .why-item.active .why-item-title h3 { color: #e52b1f; } /* ========================================= CONTENT ========================================= */ .why-item-content { max-height: 0; overflow: hidden; opacity: 0; padding-left: 70px; padding-right: 30px; transition: max-height .4s ease, opacity .3s ease, padding-bottom .3s ease; } .why-item.active .why-item-content { max-height: 300px; opacity: 1; padding-bottom: 25px; } .why-item-content p { color: #777d87; font-size: 17px; line-height: 1.6; margin: 0 0 15px; max-width: 800px; } .why-item-content p:last-child { margin-bottom: 0; } /* ========================================= ICON ROTATION ========================================= */ .why-item.active .why-icon { background: #fff; } .why-item.active .why-icon i { transform: rotate(180deg); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .why-choose-section { padding: 45px 0 50px; } .why-choose-title { font-size: 40px; margin-bottom: 30px; } .why-item-header { min-height: 80px; } .why-item-title h3 { font-size: 24px; } .why-item-content { padding-left: 65px; } .why-item-content p { font-size: 15px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .why-choose-section { padding: 40px 0 45px; } .why-choose-title { font-size: 32px; margin-bottom: 20px; } .why-item-header { min-height: 70px; } .why-item-title { gap: 12px; } .why-icon { width: 42px; height: 42px; font-size: 14px; } .why-item-title h3 { font-size: 20px; } .why-item-content { padding-left: 54px; padding-right: 10px; } .why-item.active .why-item-content { padding-bottom: 20px; } .why-item-content p { font-size: 14px; line-height: 1.55; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .why-choose-section { padding: 35px 0 40px; } .why-choose-title { font-size: 28px; } .why-item-title h3 { font-size: 18px; } .why-icon { width: 38px; height: 38px; } .why-item-content { padding-left: 50px; } } /* ========================================= OUR JOURNEY SECTION ========================================= */ .journey-section { background: #f8f1e9; padding: 65px 0 70px; overflow: hidden; } .journey-wrapper { max-width: 1500px; margin: 0 auto; } /* ========================================= HEADING ========================================= */ .journey-heading { text-align: center; margin-bottom: 50px; } .journey-heading h2 { font-family: Georgia, "Times New Roman", serif; font-size: 48px; font-weight: 600; color: #171b27; margin: 0 0 10px; } .journey-heading p { color: #a4a8ae; font-size: 20px; margin: 0; } /* ========================================= MAIN CONTENT ========================================= */ .journey-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } /* ========================================= IMAGE ========================================= */ .journey-image { width: 100%; height: 430px; overflow: hidden; border-radius: 30px; } .journey-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .journey-image:hover img { transform: scale(1.03); } /* ========================================= STATS GRID ========================================= */ .journey-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 55px; row-gap: 38px; padding-top: 25px; } /* ========================================= STAT ITEM ========================================= */ .journey-stat h3 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 22px; } .journey-stat strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 46px; line-height: 1; font-weight: 600; color: #e52b1f; margin-bottom: 14px; } .journey-stat p { color: #777d87; font-size: 16px; margin: 0; line-height: 1.5; } /* ========================================= DESCRIPTION ========================================= */ .journey-description { grid-column: 1 / -1; margin-top: 5px; } .journey-description p { color: var(--navy); font-size: 17px; line-height: 1.65; margin: 0; max-width: 750px; } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .journey-section { padding: 50px 0 60px; } .journey-heading { margin-bottom: 35px; } .journey-heading h2 { font-size: 40px; } .journey-heading p { font-size: 17px; } .journey-content { grid-template-columns: 1fr; gap: 35px; } .journey-image { height: 380px; } .journey-stats { padding-top: 0; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .journey-section { padding: 42px 0 50px; } .journey-heading { margin-bottom: 28px; } .journey-heading h2 { font-size: 32px; } .journey-heading p { font-size: 15px; } .journey-content { gap: 28px; } .journey-image { height: 260px; border-radius: 20px; } .journey-stats { grid-template-columns: 1fr 1fr; column-gap: 25px; row-gap: 28px; } .journey-stat h3 { font-size: 19px; margin-bottom: 14px; } .journey-stat strong { font-size: 34px; margin-bottom: 9px; } .journey-stat p { font-size: 13px; } .journey-description { margin-top: 0; } .journey-description p { font-size: 14px; line-height: 1.55; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .journey-section { padding: 35px 0 42px; } .journey-heading h2 { font-size: 28px; } .journey-heading p { font-size: 14px; } .journey-image { height: 220px; } .journey-stats { column-gap: 18px; row-gap: 25px; } .journey-stat h3 { font-size: 17px; } .journey-stat strong { font-size: 29px; } .journey-stat p { font-size: 12px; } } /* ========================================= NEWS ROOM SECTION ========================================= */ .news-room-section { background: #ffffff; padding: 65px 0 75px; overflow: hidden; } .news-room-wrapper { max-width: 1500px; margin: 0 auto; } /* ========================================= SECTION HEADING ========================================= */ .news-room-heading { text-align: center; margin-bottom: 48px; } .news-room-heading h2 { font-family: Georgia, "Times New Roman", serif; font-size: 48px; line-height: 1.15; font-weight: 600; color: #171b27; margin: 0 0 12px; } .news-room-heading p { color: #858a92; font-size: 19px; margin: 0; } /* ========================================= NEWS GRID ========================================= */ .news-room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; } /* ========================================= NEWS CARD ========================================= */ .news-card { min-width: 0; } /* ========================================= IMAGE ========================================= */ .news-card-image { width: 100%; height: 330px; overflow: hidden; border-radius: 28px; background: #eeeeee; } .news-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .news-card:hover .news-card-image img { transform: scale(1.04); } /* ========================================= CARD INFO ========================================= */ .news-card-info { padding-top: 25px; } /* TITLE */ .news-card-info h3 { font-family: Georgia, "Times New Roman", serif; color: #171b27; font-size: 26px; line-height: 1.35; font-weight: 400; text-transform: uppercase; margin: 0 0 25px; min-height: 70px; } /* ========================================= BOTTOM ROW ========================================= */ .news-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; } /* READ MORE */ .news-card-bottom a { display: inline-flex; align-items: center; gap: 8px; color: #e52b1f; font-size: 16px; font-weight: 500; padding-bottom: 7px; border-bottom: 2px solid #e52b1f; transition: all .3s ease; } .news-card-bottom a i { font-size: 18px; transition: transform .3s ease; } .news-card-bottom a:hover { color: var(--navy); border-color: var(--navy); } .news-card-bottom a:hover i { transform: translateX(5px); } /* DATE */ .news-card-bottom span { color: #777d87; font-size: 16px; white-space: nowrap; } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .news-room-section { padding: 50px 0 60px; } .news-room-heading { margin-bottom: 35px; } .news-room-heading h2 { font-size: 40px; } .news-room-heading p { font-size: 17px; } .news-room-grid { gap: 25px; } .news-card-image { height: 260px; border-radius: 22px; } .news-card-info { padding-top: 18px; } .news-card-info h3 { font-size: 21px; min-height: 60px; } .news-card-bottom a, .news-card-bottom span { font-size: 14px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .news-room-section { padding: 42px 0 50px; } .news-room-heading { margin-bottom: 30px; } .news-room-heading h2 { font-size: 32px; } .news-room-heading p { font-size: 14px; line-height: 1.5; } .news-room-grid { grid-template-columns: 1fr; gap: 38px; } .news-card-image { height: 280px; border-radius: 20px; } .news-card-info h3 { font-size: 23px; min-height: auto; margin-bottom: 18px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .news-room-section { padding: 35px 0 45px; } .news-room-heading h2 { font-size: 28px; } .news-room-heading p { font-size: 13px; } .news-card-image { height: 240px; } .news-card-info h3 { font-size: 20px; } .news-card-bottom a, .news-card-bottom span { font-size: 13px; } } /* ========================================= TESTIMONIALS SECTION ========================================= */ .testimonials-section { background: var(--navy); padding: 65px 0 75px; overflow: hidden; } .testimonials-wrapper { max-width: 1500px; margin: 0 auto; position: relative; } /* ========================================= TESTIMONIAL GRID ========================================= */ .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); } /* ========================================= CARD ========================================= */ .testimonial-card { min-height: 475px; padding: 45px 55px 60px; display: flex; flex-direction: column; align-items: center; text-align: center; border-right: 1px solid rgba(255,255,255,.12); } .testimonial-card:last-child { border-right: 0; } /* ========================================= USER ICON ========================================= */ .testimonial-icon { width: 82px; height: 82px; background: #ffffff; color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; font-size: 43px; border: 4px solid var(--gold-light); } /* ========================================= REVIEW ========================================= */ .testimonial-card p { color: rgba(255,255,255,.92); font-size: 17px; line-height: 1.7; margin: 0 auto 25px; max-width: 390px; flex-grow: 1; } /* ========================================= NAME ========================================= */ .testimonial-card h3 { font-family: Georgia, "Times New Roman", serif; color: var(--gold-light); font-size: 31px; font-weight: 400; margin: 0 0 5px; } /* LOCATION */ .testimonial-card span { color: #ffffff; font-size: 15px; opacity: .85; } /* ========================================= ARROWS ========================================= */ .testimonial-prev, .testimonial-next { position: absolute; top: 50%; transform: translateY(-50%); width: 55px; height: 55px; border: 1px solid rgba(255,255,255,.7); background: transparent; color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 10; transition: all .3s ease; } .testimonial-prev { left: -5px; } .testimonial-next { right: -5px; } .testimonial-prev:hover, .testimonial-next:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } /* ========================================= INDICATORS ========================================= */ .testimonial-indicators { bottom: -35px; margin-bottom: 0; } .testimonial-indicators button { width: 8px; height: 8px; border: 0; border-radius: 50%; margin: 0 5px; background: #ffffff; opacity: .5; } .testimonial-indicators button.active { background: var(--gold); opacity: 1; } /* ========================================= TABLET ========================================= */ @media (max-width: 1100px) { .testimonial-card { padding: 40px 35px 50px; } .testimonial-card p { font-size: 15px; } .testimonial-card h3 { font-size: 27px; } } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .testimonials-section { padding: 55px 0 65px; } .testimonial-card { min-height: 430px; padding: 35px 25px 45px; } .testimonial-icon { width: 70px; height: 70px; font-size: 35px; margin-bottom: 22px; } .testimonial-card p { font-size: 14px; line-height: 1.6; } .testimonial-prev { left: 5px; } .testimonial-next { right: 5px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .testimonials-section { padding: 45px 0 60px; } .testimonial-grid { grid-template-columns: 1fr; } .testimonial-card { min-height: 390px; padding: 35px 45px 45px; border-right: 0; } .testimonial-card p { font-size: 14px; max-width: 500px; } .testimonial-card h3 { font-size: 27px; } .testimonial-prev, .testimonial-next { width: 42px; height: 42px; font-size: 15px; } .testimonial-prev { left: 5px; } .testimonial-next { right: 5px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .testimonial-card { min-height: 400px; padding: 30px 35px 40px; } .testimonial-icon { width: 65px; height: 65px; font-size: 32px; } .testimonial-card p { font-size: 13px; line-height: 1.55; } .testimonial-card h3 { font-size: 25px; } } /* ========================================= CONTACT / SUPPORT SECTION ========================================= */ .contact-support-section { position: relative; background: #f7f9fc; padding: 70px 0; overflow: hidden; } .contact-support-wrapper { max-width: 1500px; min-height: 590px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.1fr 0.65fr; align-items: center; position: relative; } /* ========================================= LEFT CONTACT INFO ========================================= */ .contact-info { position: relative; z-index: 3; padding: 20px 35px 20px 0; } .contact-info h2 { font-family: Georgia, "Times New Roman", serif; font-size: 45px; line-height: 1.18; font-weight: 600; color: #171b27; margin: 0 0 25px; } .contact-intro { color: #7b828c; font-size: 17px; line-height: 1.65; max-width: 470px; margin: 0 0 30px; } /* ========================================= CONTACT DETAILS ========================================= */ .contact-detail { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 19px; } .contact-detail-icon { width: 23px; flex-shrink: 0; color: var(--navy); font-size: 17px; padding-top: 3px; } .contact-detail a, .contact-detail p { color: #172033; font-size: 16px; line-height: 1.55; margin: 0; transition: .3s; } .contact-detail a:hover { color: var(--gold); } /* ========================================= SOCIAL ========================================= */ .contact-social { display: flex; gap: 12px; margin-top: 30px; } .contact-social a { width: 48px; height: 48px; border: 1px solid #e2e5e9; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 18px; transition: all .3s ease; box-shadow: 0 5px 18px rgba(11,40,84,.06); } .contact-social a:hover { background: var(--navy); color: var(--gold-light); transform: translateY(-3px); } /* ========================================= FORM BOX ========================================= */ .contact-form-box { position: relative; z-index: 5; background: #f8f1e9; border-radius: 30px; padding: 38px 50px; box-shadow: 0 20px 50px rgba(11,40,84,.08); } /* ========================================= FORM GROUP ========================================= */ .contact-form-group { margin-bottom: 17px; } .contact-form-group label { display: block; color: #172033; font-size: 15px; font-weight: 600; margin-bottom: 7px; } .contact-form-group input, .contact-form-group textarea { width: 100%; border: 1px solid transparent; background: #fff; border-radius: 25px; padding: 12px 18px; color: #172033; font-family: inherit; font-size: 14px; outline: none; transition: all .3s ease; } .contact-form-group input { height: 47px; } .contact-form-group textarea { min-height: 100px; resize: vertical; border-radius: 18px; } .contact-form-group input:focus, .contact-form-group textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,164,65,.10); } .contact-form-group input::placeholder, .contact-form-group textarea::placeholder { color: #a7abb1; } /* ========================================= SUBMIT BUTTON ========================================= */ .contact-submit-btn { border: 0; background: var(--navy); color: #fff; border-radius: 30px; padding: 13px 28px; font-family: inherit; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: all .3s ease; } .contact-submit-btn i { color: var(--gold-light); transition: transform .3s ease; } .contact-submit-btn:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); } .contact-submit-btn:hover i { transform: translateX(4px); color: var(--navy); } /* ========================================= RIGHT IMAGE ========================================= */ .contact-image { height: 590px; overflow: hidden; position: relative; margin-left: -10px; } .contact-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 0 0 0; } /* ========================================= TABLET ========================================= */ @media (max-width: 1100px) { .contact-support-wrapper { grid-template-columns: 1fr 1.1fr; } .contact-image { display: none; } .contact-info { padding-right: 30px; } .contact-form-box { padding: 35px 40px; } } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .contact-support-section { padding: 55px 0; } .contact-support-wrapper { min-height: auto; grid-template-columns: 1fr 1fr; gap: 25px; } .contact-info h2 { font-size: 38px; } .contact-intro { font-size: 15px; } .contact-detail a, .contact-detail p { font-size: 14px; } .contact-form-box { padding: 30px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .contact-support-section { padding: 45px 0 50px; } .contact-support-wrapper { display: flex; flex-direction: column; gap: 30px; } .contact-info { width: 100%; padding: 0; } .contact-info h2 { font-size: 32px; } .contact-intro { font-size: 14px; margin-bottom: 25px; } .contact-detail { margin-bottom: 15px; } .contact-form-box { width: 100%; padding: 28px 22px; border-radius: 22px; } .contact-image { display: block; width: 100%; height: 280px; margin: 0; order: 3; border-radius: 20px; overflow: hidden; } .contact-image img { border-radius: 20px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .contact-support-section { padding: 38px 0 45px; } .contact-info h2 { font-size: 28px; } .contact-form-box { padding: 25px 18px; } .contact-form-group { margin-bottom: 14px; } .contact-form-group label { font-size: 14px; } .contact-form-group input { height: 44px; } .contact-submit-btn { width: 100%; justify-content: center; } } /* ========================================= VIDEO GALLERY SECTION ========================================= */ .video-gallery-section { background: #f8f1e9; padding: 65px 0 70px; overflow: hidden; } .video-gallery-wrapper { max-width: 1500px; margin: 0 auto; } /* ========================================= HEADING ========================================= */ .video-gallery-heading { text-align: center; max-width: 900px; margin: 0 auto 50px; } .video-gallery-heading h2 { font-family: Georgia, "Times New Roman", serif; font-size: 48px; line-height: 1.15; font-weight: 600; color: #171b27; margin: 0 0 15px; } .video-gallery-heading p { color: #858078; font-size: 19px; line-height: 1.5; margin: 0; } /* ========================================= VIDEO GRID ========================================= */ .video-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; } /* ========================================= VIDEO CARD ========================================= */ .video-card { min-width: 0; } .video-thumbnail { position: relative; width: 100%; height: 300px; overflow: hidden; border-radius: 28px; background: #ddd; } .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .video-card:hover .video-thumbnail img { transform: scale(1.04); } /* ========================================= PLAY BUTTON ========================================= */ .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78px; height: 58px; border-radius: 18px; background: #ff0033; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 38px; transition: all .3s ease; z-index: 3; } .video-play-btn:hover { color: #fff; transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 10px 30px rgba(255,0,51,.30); } /* ========================================= BOTTOM OVERLAY ========================================= */ .video-bottom { position: absolute; left: 15px; right: 15px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 4; } .video-bottom > span { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: rgba(20,30,25,.65); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; } .video-bottom > a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 22px; border-radius: 30px; background: rgba(20,30,25,.65); color: #fff; font-size: 16px; font-weight: 600; transition: .3s; } .video-bottom > a i { font-size: 22px; } .video-bottom > a:hover { background: var(--navy); color: var(--gold-light); } /* ========================================= VIEW MORE ========================================= */ .video-view-more { text-align: center; margin-top: 55px; } .video-view-more a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 190px; padding: 14px 30px; border-radius: 30px; background: var(--navy); color: #fff; font-size: 16px; font-weight: 600; transition: all .3s ease; } .video-view-more a i { color: var(--gold-light); transition: transform .3s ease; } .video-view-more a:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); } .video-view-more a:hover i { color: var(--navy); transform: translateX(5px); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .video-gallery-section { padding: 50px 0 60px; } .video-gallery-heading { margin-bottom: 35px; } .video-gallery-heading h2 { font-size: 40px; } .video-gallery-heading p { font-size: 17px; } .video-gallery-grid { gap: 25px; } .video-thumbnail { height: 240px; border-radius: 22px; } .video-bottom > a { font-size: 13px; padding: 0 14px; } .video-bottom > span { width: 40px; height: 40px; font-size: 18px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .video-gallery-section { padding: 42px 0 50px; } .video-gallery-heading { margin-bottom: 28px; } .video-gallery-heading h2 { font-size: 32px; } .video-gallery-heading p { font-size: 14px; line-height: 1.55; } .video-gallery-grid { grid-template-columns: 1fr; gap: 25px; } .video-thumbnail { height: 260px; border-radius: 20px; } .video-play-btn { width: 70px; height: 52px; font-size: 34px; } .video-bottom { left: 10px; right: 10px; bottom: 10px; } .video-bottom > a { min-height: 42px; font-size: 13px; padding: 0 15px; } .video-bottom > span { width: 42px; height: 42px; } .video-view-more { margin-top: 35px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .video-gallery-section { padding: 35px 0 45px; } .video-gallery-heading h2 { font-size: 28px; } .video-gallery-heading p { font-size: 13px; } .video-thumbnail { height: 230px; } .video-bottom > a { font-size: 12px; padding: 0 12px; } } /* ========================================= CAPITALS FINSERV FOOTER ========================================= */ .capital-footer { background: var(--navy-dark); color: #fff; } /* ========================================= MAIN FOOTER ========================================= */ .footer-main { padding: 55px 0 45px; } .footer-logo { margin-bottom: 20px; } .footer-logo img { width: 250px; height: auto; object-fit: contain; /* logo image ko white background se blend karne ke liye */ background: #fff; padding: 8px 12px; border-radius: 5px; } .footer-about { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.75; max-width: 340px; margin: 0 0 22px; } /* ========================================= FOOTER TITLES ========================================= */ .footer-title { position: relative; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 500; margin: 5px 0 23px; } .footer-title::after { content: ""; display: block; width: 38px; height: 2px; background: var(--gold); margin-top: 10px; } /* ========================================= QUICK LINKS ========================================= */ .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: rgba(255,255,255,.70); font-size: 14px; transition: .25s; position: relative; } .footer-links a:hover { color: var(--gold-light); padding-left: 5px; } .footer-links a::before { content: "›"; color: var(--gold); margin-right: 7px; font-size: 17px; } /* ========================================= SOCIAL ICONS ========================================= */ .footer-social { display: flex; gap: 9px; } .footer-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.20); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; transition: .3s; } .footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-dark); transform: translateY(-3px); } /* ========================================= CONTACT ========================================= */ .footer-contact { display: flex; flex-direction: column; gap: 17px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 13px; } .footer-contact-icon { width: 37px; height: 37px; flex-shrink: 0; border-radius: 50%; background: rgba(217,164,65,.13); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-size: 14px; } .footer-contact-item strong { display: block; color: #fff; font-size: 13px; margin-bottom: 3px; } .footer-contact-item p { color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.6; margin: 0; } .footer-contact-item a { color: var(--gold-light); font-size: 14px; transition: .25s; } .footer-contact-item a:hover { color: #fff; } /* ========================================= INFO BAR ========================================= */ .footer-info-bar { border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); padding: 22px 0; } .footer-info-wrapper { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; } .footer-info-wrapper > div { display: flex; flex-direction: column; gap: 4px; } .footer-info-wrapper > div span { color: rgba(255,255,255,.55); font-size: 12px; } .footer-info-wrapper > div strong { color: var(--gold-light); font-size: 15px; } .footer-outline-btn { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--gold); color: #fff; padding: 11px 18px; border-radius: 25px; font-size: 13px; transition: .3s; } .footer-outline-btn + .footer-outline-btn { margin-left: 0; } .footer-outline-btn i { color: var(--gold-light); transition: .3s; } .footer-outline-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-dark); } .footer-outline-btn:hover i { color: var(--navy-dark); transform: translateX(4px); } /* ========================================= COPYRIGHT ========================================= */ .footer-bottom { background: #07182f; padding: 17px 0; } .footer-bottom-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .footer-bottom p { color: rgba(255,255,255,.60); font-size: 13px; margin: 0; } .footer-bottom p span { color: var(--gold-light); } .footer-bottom-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .footer-bottom-links a { color: rgba(255,255,255,.60); font-size: 12px; transition: .25s; } .footer-bottom-links a:hover { color: var(--gold-light); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .footer-main { padding: 45px 0 35px; } .footer-logo img { width: 220px; } .footer-title { font-size: 21px; } .footer-info-wrapper { align-items: flex-start; } .footer-outline-btn { margin-left: 0; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .footer-main { padding: 40px 0 30px; } .footer-logo img { width: 210px; } .footer-about { font-size: 14px; } .footer-title { font-size: 20px; margin-bottom: 18px; } .footer-links li { margin-bottom: 9px; } .footer-info-wrapper { flex-direction: column; gap: 18px; } .footer-outline-btn { width: 100%; margin-left: 0; } .footer-bottom-wrapper { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-bottom-links { gap: 12px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .footer-main { padding: 35px 0 25px; } .footer-logo img { width: 195px; } .footer-about { font-size: 13px; line-height: 1.6; } .footer-contact-item p, .footer-contact-item a { font-size: 13px; } .footer-info-wrapper > div strong { font-size: 14px; } .footer-bottom-links { flex-direction: column; gap: 7px; } } /* ========================================= INNER PAGE BANNER ========================================= */ .inner-page-banner { position: relative; height: 300px; min-height: 300px; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; overflow: hidden; } /* DARK OVERLAY */ .inner-banner-overlay { position: absolute; inset: 0; /* background: linear-gradient( 90deg, rgba(7, 29, 58, 0.94) 0%, rgba(11, 40, 84, 0.82) 50%, rgba(11, 40, 84, 0.58) 100% ); */ z-index: 1; } /* CONTENT */ .inner-banner-content { position: relative; z-index: 2; text-align: center; max-width: 800px; margin: 0 auto; color: #fff; } /* SMALL LABEL */ .inner-banner-label { display: inline-block; color: var(--gold-light); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; } /* TITLE */ .inner-banner-content h1 { margin: 0 0 14px; color: #fff; font-size: 46px; font-weight: 800; line-height: 1.15; } /* BREADCRUMB */ .inner-banner-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 500; } .inner-banner-breadcrumb a { color: var(--gold-light); transition: .3s; } .inner-banner-breadcrumb a:hover { color: #fff; } .inner-banner-breadcrumb i { color: rgba(255,255,255,.65); font-size: 11px; } .inner-banner-breadcrumb span { color: rgba(255,255,255,.85); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .inner-page-banner { height: 300px; min-height: 300px; } .inner-banner-content h1 { font-size: 40px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .inner-page-banner { height: 300px; min-height: 300px; background-position: center; } .inner-banner-content { padding: 0 20px; } .inner-banner-label { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 7px; } .inner-banner-content h1 { font-size: 32px; margin-bottom: 12px; } .inner-banner-breadcrumb { font-size: 13px; gap: 8px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .inner-page-banner { height: 300px; min-height: 300px; } .inner-banner-content h1 { font-size: 28px; } .inner-banner-label { font-size: 10px; } } /* ========================================= AGENT ATTENDANCE SECTION ========================================= */ .agent-attendance-section { background: linear-gradient( 135deg, #f4f7fb 0%, #ffffff 50%, #faf6ed 100% ); padding: 60px 0 70px; position: relative; overflow: hidden; } /* ========================================= BACKGROUND DECORATION ========================================= */ .agent-attendance-section::before { content: ""; position: absolute; width: 360px; height: 360px; background: rgba(217, 164, 65, 0.08); border-radius: 50%; top: -190px; left: -120px; pointer-events: none; } .agent-attendance-section::after { content: ""; position: absolute; width: 320px; height: 320px; background: rgba(11, 40, 84, 0.045); border-radius: 50%; right: -130px; bottom: -180px; pointer-events: none; } /* ========================================= MAIN CARD ========================================= */ .agent-attendance-card { width: 100%; max-width: 1050px; margin: 0 auto; background: #ffffff; padding: 42px 48px 45px; border-radius: 22px; border: 1px solid #e4e9f0; box-shadow: 0 18px 50px rgba(11, 40, 84, 0.10); position: relative; z-index: 2; } /* ========================================= HEADING ========================================= */ .agent-attendance-heading { text-align: center; max-width: 680px; margin: 0 auto 35px; } /* SMALL LABEL */ .agent-small-title { display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 9px; } .agent-small-title::before, .agent-small-title::after { content: ""; width: 24px; height: 2px; background: var(--gold); border-radius: 10px; } /* HEADING */ .agent-attendance-heading h2 { color: var(--navy); font-size: 38px; font-weight: 800; line-height: 1.2; margin: 0 0 10px; } .agent-attendance-heading h2 span { color: var(--gold); } /* DESCRIPTION */ .agent-attendance-heading p { color: #737d8c; font-size: 15px; line-height: 1.7; margin: 0; } /* ========================================= FORM ========================================= */ .agent-attendance-form { width: 100%; } /* ========================================= TWO COLUMN FORM GRID ========================================= */ .agent-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } /* ========================================= FORM GROUP ========================================= */ .agent-form-group { width: 100%; margin-bottom: 22px; } /* ========================================= LABEL ========================================= */ .agent-form-group > label { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 14px; font-weight: 700; margin-bottom: 9px; } .agent-form-group > label i { color: var(--gold); font-size: 16px; } /* ========================================= INPUT / SELECT ========================================= */ .agent-form-control { width: 100%; height: 52px; padding: 0 16px; background: #ffffff; color: #273142; border: 1px solid #d9e0e9; border-radius: 9px; outline: none; font-family: inherit; font-size: 14px; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } /* SELECT */ select.agent-form-control { cursor: pointer; appearance: auto; } /* FOCUS */ .agent-form-control:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.12); } /* PLACEHOLDER */ .agent-form-control::placeholder { color: #9aa4b2; } /* DATE */ .agent-form-control[type="date"] { cursor: pointer; color: #374151; } /* ========================================= ATTENDANCE STATUS ========================================= */ .attendance-options { display: flex; align-items: center; gap: 30px; min-height: 52px; padding: 0 2px; } /* OPTION */ .attendance-option { display: inline-flex !important; align-items: center; gap: 9px !important; color: #596474 !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer; margin: 0 !important; } /* HIDE ORIGINAL RADIO */ .attendance-option input { position: absolute; opacity: 0; pointer-events: none; } /* CUSTOM RADIO */ .custom-radio { width: 19px; height: 19px; border: 2px solid #c6ced8; border-radius: 50%; display: inline-block; position: relative; flex-shrink: 0; transition: all .25s ease; } /* CHECKED */ .attendance-option input:checked + .custom-radio { border-color: var(--gold); background: var(--gold); } /* INNER DOT */ .attendance-option input:checked + .custom-radio::after { content: ""; position: absolute; width: 7px; height: 7px; background: #ffffff; border-radius: 50%; left: 4px; top: 4px; } /* HOVER */ .attendance-option:hover .custom-radio { border-color: var(--gold); } /* ========================================= REMARK / TEXTAREA ========================================= */ .agent-textarea { height: 110px; min-height: 110px; padding: 14px 16px; resize: vertical; line-height: 1.5; } /* ========================================= SUBMIT AREA ========================================= */ .agent-submit-area { display: flex; align-items: center; justify-content: flex-start; padding-top: 2px; } /* ========================================= SUBMIT BUTTON ========================================= */ .agent-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-width: 205px; padding: 13px 24px; background: var(--navy); color: #ffffff; border: 1px solid var(--navy); border-radius: 30px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .3s ease; } .agent-submit-btn i { font-size: 16px; transition: transform .3s ease; } .agent-submit-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217, 164, 65, 0.25); } .agent-submit-btn:hover i { transform: translateX(5px); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .agent-attendance-section { padding: 55px 0 60px; } .agent-attendance-card { padding: 38px 35px 40px; } .agent-attendance-heading h2 { font-size: 35px; } .agent-form-grid { grid-template-columns: 1fr 1fr; gap: 20px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .agent-attendance-section { padding: 40px 0 50px; } .agent-attendance-card { padding: 30px 20px 32px; border-radius: 17px; } .agent-attendance-heading { margin-bottom: 28px; } .agent-small-title { font-size: 10px; letter-spacing: 1.3px; gap: 7px; } .agent-small-title::before, .agent-small-title::after { width: 17px; } .agent-attendance-heading h2 { font-size: 29px; } .agent-attendance-heading p { font-size: 13px; line-height: 1.6; } /* 1 COLUMN ON MOBILE */ .agent-form-grid { grid-template-columns: 1fr; gap: 0; } .agent-form-group { margin-bottom: 19px; } .agent-form-group > label { font-size: 13px; } .agent-form-control { height: 49px; font-size: 13px; padding: 0 14px; } /* ATTENDANCE */ .attendance-options { flex-wrap: wrap; gap: 13px 22px; min-height: 45px; } .attendance-option { font-size: 13px !important; } .custom-radio { width: 18px; height: 18px; } .attendance-option input:checked + .custom-radio::after { width: 6px; height: 6px; left: 4px; top: 4px; } /* TEXTAREA */ .agent-textarea { height: 100px; min-height: 100px; padding: 13px 14px; } /* BUTTON */ .agent-submit-area { width: 100%; } .agent-submit-btn { width: 100%; min-width: 0; padding: 13px 20px; font-size: 13px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .agent-attendance-card { padding: 27px 16px 30px; } .agent-attendance-heading h2 { font-size: 26px; } .agent-attendance-heading p { font-size: 12.5px; } .agent-form-control { height: 47px; font-size: 13px; } .attendance-options { gap: 12px 16px; } .attendance-option { font-size: 12.5px !important; } .agent-textarea { min-height: 90px; } } /* ========================================= PERSONAL LOAN SECTION ========================================= */ .personal-loan-section { background: #ffffff; padding: 70px 0; overflow: hidden; position: relative; } /* ========================================= BACKGROUND SHAPE ========================================= */ .personal-loan-section::before { content: ""; position: absolute; width: 350px; height: 350px; background: rgba(217, 164, 65, 0.07); border-radius: 50%; left: -170px; bottom: -180px; pointer-events: none; } /* ========================================= MAIN WRAPPER ========================================= */ .personal-loan-wrapper { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: center; gap: 65px; max-width: 1250px; margin: 0 auto; position: relative; z-index: 2; } /* ========================================= LEFT IMAGE ========================================= */ .personal-loan-image { position: relative; width: 100%; border-radius: 25px; overflow: hidden; box-shadow: 0 18px 45px rgba(11, 40, 84, 0.14); border: 5px solid #ffffff; } .personal-loan-image img { display: block; width: 100%; height: 440px; object-fit: cover; object-position: center; transition: transform .5s ease; } .personal-loan-image:hover img { transform: scale(1.035); } /* ========================================= IMAGE BADGE ========================================= */ .personal-loan-badge { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: 11px; background: rgba(255, 255, 255, 0.96); padding: 12px 17px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); backdrop-filter: blur(5px); } .personal-loan-badge > i { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--gold-light); border-radius: 50%; font-size: 17px; } .personal-loan-badge strong { display: block; color: var(--navy); font-size: 13px; font-weight: 800; margin-bottom: 2px; } .personal-loan-badge span { display: block; color: #7a8492; font-size: 11px; } /* ========================================= RIGHT CONTENT ========================================= */ .personal-loan-content { max-width: 650px; } /* ========================================= LABEL ========================================= */ .personal-loan-label { display: inline-flex; align-items: center; gap: 9px; color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 12px; } .personal-loan-label::before { content: ""; width: 28px; height: 2px; background: var(--gold); border-radius: 10px; } /* ========================================= HEADING ========================================= */ .personal-loan-content h2 { color: var(--navy); font-size: 42px; font-weight: 800; line-height: 1.2; margin: 0 0 17px; } .personal-loan-content h2 span { display: block; color: var(--gold); } /* ========================================= INTRO ========================================= */ .personal-loan-intro { color: #687386; font-size: 15px; line-height: 1.75; margin: 0 0 25px; max-width: 620px; } /* ========================================= FEATURES ========================================= */ .personal-loan-features { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 25px; margin-bottom: 30px; } .personal-feature { display: flex; align-items: flex-start; gap: 12px; } .personal-feature-icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff8e9; color: var(--gold); border-radius: 10px; font-size: 17px; transition: .3s; } .personal-feature:hover .personal-feature-icon { background: var(--navy); color: var(--gold-light); transform: translateY(-2px); } .personal-feature h4 { color: var(--navy); font-size: 14px; font-weight: 800; margin: 1px 0 4px; } .personal-feature p { color: #7b8492; font-size: 12px; line-height: 1.5; margin: 0; } /* ========================================= ACTIONS ========================================= */ .personal-loan-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; } /* PRIMARY BUTTON */ .personal-loan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; background: var(--navy); color: #ffffff; border: 1px solid var(--navy); border-radius: 30px; font-size: 13px; font-weight: 700; transition: all .3s ease; } .personal-loan-btn i { transition: transform .3s ease; } .personal-loan-btn:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217, 164, 65, 0.25); } .personal-loan-btn:hover i { transform: translateX(5px); } /* SECONDARY LINK */ .personal-loan-link { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-size: 13px; font-weight: 700; transition: .3s; } .personal-loan-link i { color: var(--gold); transition: transform .3s ease; } .personal-loan-link:hover { color: var(--gold); } .personal-loan-link:hover i { transform: translate(3px, -3px); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .personal-loan-section { padding: 55px 0 60px; } .personal-loan-wrapper { grid-template-columns: 1fr; gap: 40px; max-width: 750px; } .personal-loan-image img { height: 350px; } .personal-loan-content { max-width: 100%; } .personal-loan-content h2 { font-size: 36px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .personal-loan-section { padding: 45px 0 50px; } .personal-loan-wrapper { gap: 30px; } .personal-loan-image { border-radius: 18px; border-width: 4px; } .personal-loan-image img { height: 270px; } .personal-loan-badge { left: 14px; bottom: 14px; padding: 9px 12px; } .personal-loan-badge > i { width: 34px; height: 34px; font-size: 15px; } .personal-loan-badge strong { font-size: 11px; } .personal-loan-badge span { font-size: 10px; } .personal-loan-label { font-size: 11px; letter-spacing: 1.4px; margin-bottom: 9px; } .personal-loan-label::before { width: 21px; } .personal-loan-content h2 { font-size: 30px; margin-bottom: 14px; } .personal-loan-intro { font-size: 14px; line-height: 1.7; margin-bottom: 22px; } .personal-loan-features { grid-template-columns: 1fr; gap: 16px; margin-bottom: 25px; } .personal-feature-icon { width: 39px; height: 39px; font-size: 15px; } .personal-feature h4 { font-size: 13px; } .personal-feature p { font-size: 11.5px; } .personal-loan-actions { gap: 18px; } .personal-loan-btn { padding: 12px 18px; font-size: 12px; } .personal-loan-link { font-size: 12px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .personal-loan-section { padding: 38px 0 45px; } .personal-loan-image img { height: 225px; } .personal-loan-content h2 { font-size: 27px; } .personal-loan-intro { font-size: 13px; } .personal-loan-features { gap: 14px; } } /* ================================ VERIFY AGENT SECTION ================================ */ .verify-agent-section { background: linear-gradient( 135deg, #f4f7fb 0%, #ffffff 55%, #faf7ef 100% ); padding: 65px 0 70px; position: relative; overflow: hidden; } .verify-agent-section::before { content: ""; position: absolute; width: 360px; height: 360px; background: rgba(217, 164, 65, 0.08); border-radius: 50%; top: -190px; left: -120px; } .verify-agent-section::after { content: ""; position: absolute; width: 320px; height: 320px; background: rgba(11, 40, 84, 0.045); border-radius: 50%; right: -140px; bottom: -190px; } .verify-agent-card { max-width: 1050px; margin: 0 auto; background: #ffffff; border: 1px solid #e4e9f0; border-radius: 22px; padding: 45px 50px 48px; box-shadow: 0 18px 50px rgba(11, 40, 84, 0.10); position: relative; z-index: 2; } /* HEADING */ .verify-agent-heading { text-align: center; max-width: 650px; margin: 0 auto 35px; } .verify-agent-label { display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 9px; } .verify-agent-label::before, .verify-agent-label::after { content: ""; width: 25px; height: 2px; background: var(--gold); border-radius: 10px; } .verify-agent-heading h2 { margin: 0 0 10px; color: var(--navy); font-size: 38px; font-weight: 800; line-height: 1.2; } .verify-agent-heading h2 span { color: var(--gold); } .verify-agent-heading p { margin: 0; color: #737d8c; font-size: 15px; line-height: 1.7; } /* FORM */ .verify-agent-form { width: 100%; } .verify-agent-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } .verify-agent-group { width: 100%; } .verify-agent-group label { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 14px; font-weight: 700; margin-bottom: 10px; } .verify-agent-group label i { color: var(--gold); font-size: 16px; } .verify-agent-input { width: 100%; height: 54px; padding: 0 17px; border: 1px solid #d8e0ea; border-radius: 10px; background: #fff; color: #273142; font-family: inherit; font-size: 14px; outline: none; transition: all 0.25s ease; } .verify-agent-input::placeholder { color: #9aa4b2; } .verify-agent-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.12); } /* BUTTON */ .verify-agent-action { display: flex; justify-content: center; margin-top: 30px; } .verify-agent-btn { min-width: 250px; padding: 14px 28px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--navy); border-radius: 30px; background: var(--navy); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; } .verify-agent-btn i { font-size: 17px; transition: transform 0.3s ease; } .verify-agent-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217, 164, 65, 0.25); } .verify-agent-btn:hover i { transform: translateX(5px); } /* ================================ TABLET ================================ */ @media (max-width: 991px) { .verify-agent-section { padding: 55px 0 60px; } .verify-agent-card { padding: 40px 35px 42px; } .verify-agent-heading h2 { font-size: 35px; } .verify-agent-fields { gap: 20px; } } /* ================================ MOBILE ================================ */ @media (max-width: 767px) { .verify-agent-section { padding: 42px 0 50px; } .verify-agent-card { padding: 30px 20px 32px; border-radius: 17px; } .verify-agent-heading { margin-bottom: 27px; } .verify-agent-label { font-size: 10px; letter-spacing: 1.3px; gap: 7px; } .verify-agent-label::before, .verify-agent-label::after { width: 17px; } .verify-agent-heading h2 { font-size: 29px; } .verify-agent-heading p { font-size: 13px; line-height: 1.6; } .verify-agent-fields { grid-template-columns: 1fr; gap: 18px; } .verify-agent-group label { font-size: 13px; } .verify-agent-input { height: 50px; font-size: 13px; padding: 0 14px; } .verify-agent-action { margin-top: 24px; } .verify-agent-btn { width: 100%; min-width: 0; padding: 13px 20px; font-size: 13px; } } /* ================================ SMALL MOBILE ================================ */ @media (max-width: 480px) { .verify-agent-section { padding: 35px 0 42px; } .verify-agent-card { padding: 27px 16px 30px; } .verify-agent-heading h2 { font-size: 26px; } .verify-agent-heading p { font-size: 12.5px; } .verify-agent-input { height: 48px; } } /* ================================= CUSTOMER VERIFICATION ================================= */ .customer-verification-section { background: linear-gradient( 135deg, #f4f7fb 0%, #ffffff 55%, #faf7ef 100% ); padding: 65px 0 70px; position: relative; overflow: hidden; } .customer-verification-section::before { content: ""; position: absolute; width: 360px; height: 360px; background: rgba(217, 164, 65, 0.08); border-radius: 50%; top: -190px; left: -120px; } .customer-verification-section::after { content: ""; position: absolute; width: 320px; height: 320px; background: rgba(11, 40, 84, 0.045); border-radius: 50%; right: -140px; bottom: -190px; } .customer-verification-card { width: 100%; max-width: 1050px; margin: 0 auto; background: #fff; border: 1px solid #e4e9f0; border-radius: 22px; padding: 45px 50px 48px; box-shadow: 0 18px 50px rgba(11, 40, 84, 0.10); position: relative; z-index: 2; } /* HEADING */ .customer-verification-heading { text-align: center; max-width: 680px; margin: 0 auto 35px; } .customer-verification-label { display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 9px; } .customer-verification-label::before, .customer-verification-label::after { content: ""; width: 25px; height: 2px; background: var(--gold); border-radius: 10px; } .customer-verification-heading h2 { color: var(--navy); font-size: 38px; font-weight: 800; line-height: 1.2; margin: 0 0 10px; } .customer-verification-heading h2 span { color: var(--gold); } .customer-verification-heading p { color: #737d8c; font-size: 15px; line-height: 1.7; margin: 0; } /* FORM */ .customer-verification-form { width: 100%; } .customer-verification-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } .customer-verification-group { width: 100%; } .customer-verification-group label { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 14px; font-weight: 700; margin-bottom: 10px; } .customer-verification-group label i { color: var(--gold); font-size: 16px; } .customer-verification-input { width: 100%; height: 54px; padding: 0 17px; border: 1px solid #d8e0ea; border-radius: 10px; background: #fff; color: #273142; font-family: inherit; font-size: 14px; outline: none; transition: all 0.25s ease; } .customer-verification-input::placeholder { color: #9aa4b2; } .customer-verification-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.12); } /* BUTTON */ .customer-verification-action { display: flex; justify-content: center; margin-top: 30px; } .customer-verification-btn { min-width: 250px; padding: 14px 28px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--navy); border: 1px solid var(--navy); border-radius: 30px; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; } .customer-verification-btn i { font-size: 17px; transition: transform 0.3s ease; } .customer-verification-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217, 164, 65, 0.25); } .customer-verification-btn:hover i { transform: translateX(5px); } /* TABLET */ @media (max-width: 991px) { .customer-verification-section { padding: 55px 0 60px; } .customer-verification-card { padding: 40px 35px 42px; } .customer-verification-heading h2 { font-size: 35px; } .customer-verification-fields { gap: 20px; } } /* MOBILE */ @media (max-width: 767px) { .customer-verification-section { padding: 42px 0 50px; } .customer-verification-card { padding: 30px 20px 32px; border-radius: 17px; } .customer-verification-heading { margin-bottom: 27px; } .customer-verification-label { font-size: 10px; letter-spacing: 1.3px; gap: 7px; } .customer-verification-label::before, .customer-verification-label::after { width: 17px; } .customer-verification-heading h2 { font-size: 29px; } .customer-verification-heading p { font-size: 13px; line-height: 1.6; } .customer-verification-fields { grid-template-columns: 1fr; gap: 18px; } .customer-verification-group label { font-size: 13px; } .customer-verification-input { height: 50px; font-size: 13px; padding: 0 14px; } .customer-verification-action { margin-top: 24px; } .customer-verification-btn { width: 100%; min-width: 0; padding: 13px 20px; font-size: 13px; } } /* SMALL MOBILE */ @media (max-width: 480px) { .customer-verification-section { padding: 35px 0 42px; } .customer-verification-card { padding: 27px 16px 30px; } .customer-verification-heading h2 { font-size: 26px; } .customer-verification-heading p { font-size: 12.5px; } .customer-verification-input { height: 48px; } } /* ========================================= CONTACT PAGE SECTION ========================================= */ .contact-page-section { background: linear-gradient( 135deg, #f5f8fc 0%, #ffffff 55%, #faf7ef 100% ); padding: 70px 0 80px; position: relative; overflow: hidden; } .contact-page-section::before { content: ""; position: absolute; width: 380px; height: 380px; background: rgba(217,164,65,.07); border-radius: 50%; top: -200px; left: -140px; } .contact-page-section::after { content: ""; position: absolute; width: 320px; height: 320px; background: rgba(11,40,84,.04); border-radius: 50%; right: -130px; bottom: -180px; } /* ========================================= HEADING ========================================= */ .contact-page-heading { text-align: center; max-width: 700px; margin: 0 auto 40px; position: relative; z-index: 2; } .contact-page-label { display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; margin-bottom: 10px; } .contact-page-label::before, .contact-page-label::after { content: ""; width: 25px; height: 2px; background: var(--gold); border-radius: 10px; } .contact-page-heading h2 { color: var(--navy); font-size: 40px; font-weight: 800; line-height: 1.2; margin: 0 0 12px; } .contact-page-heading h2 span { color: var(--gold); } .contact-page-heading p { color: #737d8c; font-size: 15px; line-height: 1.7; margin: 0; } /* ========================================= CONTACT INFO CARDS ========================================= */ .contact-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 2; margin-bottom: 35px; } .contact-info-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 25px 20px; display: flex; align-items: flex-start; gap: 15px; box-shadow: 0 10px 30px rgba(11,40,84,.06); transition: all .3s ease; } .contact-info-card:hover { transform: translateY(-5px); border-color: rgba(217,164,65,.45); box-shadow: 0 15px 35px rgba(11,40,84,.10); } .contact-info-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; background: var(--navy); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-size: 18px; } .contact-info-content span { display: block; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 1px; margin-bottom: 5px; } .contact-info-content h4 { color: var(--navy); font-size: 17px; font-weight: 800; margin: 0 0 7px; } .contact-info-content p { color: #687386; font-size: 12px; line-height: 1.6; margin: 0; } .contact-info-content a { color: var(--navy); font-size: 13px; font-weight: 700; display: block; margin-bottom: 5px; word-break: break-word; } .contact-info-content a:hover { color: var(--gold); } .contact-info-content small { display: block; color: #8a94a3; font-size: 11px; line-height: 1.5; } /* ========================================= FORM + MAP ========================================= */ .contact-main-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; position: relative; z-index: 2; } /* ========================================= FORM BOX ========================================= */ .contact-form-box, .contact-map-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 15px 40px rgba(11,40,84,.08); } .contact-form-box { padding: 35px; } .contact-form-heading { margin-bottom: 25px; } .contact-form-heading > span { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; } .contact-form-heading h3 { color: var(--navy); font-size: 27px; font-weight: 700; margin: 6px 0 7px; } .contact-form-heading h3 strong { color: var(--gold); } .contact-form-heading p { color: #7b8492; font-size: 13px; line-height: 1.6; margin: 0; } /* FORM ROW */ .contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contact-form-group { margin-bottom: 18px; } .contact-form-group > label { display: block; color: var(--navy); font-size: 13px; font-weight: 700; margin-bottom: 7px; } .contact-input-wrap { position: relative; } .contact-input-wrap > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 15px; z-index: 2; } .contact-input-wrap input, .contact-input-wrap textarea { width: 100%; border: 1px solid #d9e0e9; background: #fff; border-radius: 9px; outline: none; color: #273142; font-family: inherit; font-size: 13px; transition: all .25s ease; } .contact-input-wrap input { height: 48px; padding: 0 15px 0 42px; } .contact-input-wrap textarea { min-height: 120px; padding: 14px 15px 14px 42px; resize: vertical; line-height: 1.5; } .contact-input-wrap input::placeholder, .contact-input-wrap textarea::placeholder { color: #9ba5b2; } .contact-input-wrap input:focus, .contact-input-wrap textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,164,65,.11); } /* TEXTAREA ICON */ .contact-textarea-wrap > i { top: 20px; transform: none; } /* BUTTON */ .contact-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 180px; padding: 13px 23px; border: 1px solid var(--navy); border-radius: 30px; background: var(--navy); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .3s ease; } .contact-submit-btn i { transition: transform .3s ease; } .contact-submit-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217,164,65,.25); } .contact-submit-btn:hover i { transform: translateX(5px); } /* ========================================= MAP ========================================= */ .contact-map-box { padding: 30px; display: flex; flex-direction: column; } .contact-map-heading { margin-bottom: 18px; } .contact-map-heading > span { display: inline-flex; align-items: center; gap: 7px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; } .contact-map-heading > span i { font-size: 14px; } .contact-map-heading h3 { color: var(--navy); font-size: 27px; font-weight: 700; margin: 5px 0 0; } .contact-map-heading h3 strong { color: var(--gold); } .contact-map { width: 100%; height: 330px; overflow: hidden; border-radius: 14px; border: 1px solid #e3e8ef; } .contact-map iframe { width: 100%; height: 100%; display: block; } .contact-map-address { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 13px 15px; background: #f7f9fc; border-radius: 10px; color: #687386; font-size: 12px; line-height: 1.6; } .contact-map-address i { color: var(--gold); font-size: 16px; margin-top: 2px; } /* ========================================= TABLET ========================================= */ @media (max-width: 1100px) { .contact-info-grid { grid-template-columns: 1fr 1fr; } .contact-main-grid { grid-template-columns: 1fr; } .contact-map { height: 350px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .contact-page-section { padding: 45px 0 55px; } .contact-page-heading { margin-bottom: 30px; } .contact-page-heading h2 { font-size: 30px; } .contact-page-heading p { font-size: 13px; } .contact-info-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 25px; } .contact-info-card { padding: 20px; border-radius: 14px; } .contact-main-grid { grid-template-columns: 1fr; gap: 20px; } .contact-form-box { padding: 25px 20px; } .contact-map-box { padding: 22px 18px; } .contact-form-row { grid-template-columns: 1fr; gap: 0; } .contact-form-heading h3, .contact-map-heading h3 { font-size: 24px; } .contact-map { height: 280px; } .contact-submit-btn { width: 100%; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .contact-page-heading h2 { font-size: 27px; } .contact-page-heading p { font-size: 12.5px; } .contact-info-card { padding: 17px; } .contact-info-icon { width: 43px; height: 43px; min-width: 43px; font-size: 16px; } .contact-info-content h4 { font-size: 15px; } .contact-form-box { padding: 22px 16px; } .contact-map-box { padding: 20px 15px; } .contact-map { height: 240px; } } /* ========================================= APPLY LOAN SECTION ========================================= */ .apply-loan-section { background: linear-gradient( 135deg, #f4f7fb 0%, #ffffff 55%, #faf7ef 100% ); padding: 70px 0 80px; position: relative; overflow: hidden; } .apply-loan-section::before { content: ""; position: absolute; width: 400px; height: 400px; background: rgba(217,164,65,.07); border-radius: 50%; top: -220px; left: -150px; } .apply-loan-section::after { content: ""; position: absolute; width: 350px; height: 350px; background: rgba(11,40,84,.04); border-radius: 50%; right: -150px; bottom: -200px; } /* ========================================= MAIN CARD ========================================= */ .apply-loan-card { max-width: 1250px; margin: 0 auto; display: grid; grid-template-columns: .75fr 1.25fr; background: #fff; border-radius: 24px; overflow: hidden; border: 1px solid #e1e7ef; box-shadow: 0 20px 55px rgba(11,40,84,.10); position: relative; z-index: 2; } /* ========================================= LEFT CONTENT ========================================= */ .apply-loan-info { background: linear-gradient( 145deg, var(--navy-dark), var(--navy) ); padding: 50px 38px; color: #fff; position: relative; overflow: hidden; } .apply-loan-info::after { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(217,164,65,.25); border-radius: 50%; right: -100px; bottom: -80px; } .apply-loan-label { display: inline-block; color: var(--gold-light); font-size: 11px; font-weight: 800; letter-spacing: 1.7px; margin-bottom: 12px; } .apply-loan-info h2 { color: #fff; font-size: 38px; font-weight: 800; line-height: 1.2; margin: 0 0 17px; } .apply-loan-info h2 span { color: var(--gold-light); display: block; } .apply-loan-info > p { color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.75; margin: 0 0 25px; } /* POINTS */ .apply-loan-points { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; } .apply-point { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.88); font-size: 13px; } .apply-point i { color: var(--gold-light); font-size: 16px; } /* CONTACT */ .apply-loan-contact { display: flex; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); } .apply-contact-icon { width: 43px; height: 43px; min-width: 43px; display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--navy); border-radius: 50%; } .apply-loan-contact span { display: block; color: rgba(255,255,255,.6); font-size: 10px; margin-bottom: 2px; } .apply-loan-contact a { color: #fff; font-size: 14px; font-weight: 700; } /* ========================================= FORM BOX ========================================= */ .apply-loan-form-box { padding: 42px 45px; } .apply-form-heading { margin-bottom: 25px; } .apply-form-heading h3 { color: var(--navy); font-size: 27px; font-weight: 800; margin: 0 0 5px; } .apply-form-heading p { color: #7b8492; font-size: 13px; margin: 0; } /* ========================================= FORM ROW ========================================= */ .apply-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .apply-form-group { margin-bottom: 18px; } .apply-form-group > label { display: block; color: var(--navy); font-size: 13px; font-weight: 700; margin-bottom: 7px; } /* INPUT */ .apply-input-wrap { position: relative; } .apply-input-wrap > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 15px; z-index: 2; pointer-events: none; } .apply-input-wrap input, .apply-input-wrap select, .apply-input-wrap textarea { width: 100%; border: 1px solid #d9e0e9; background: #fff; border-radius: 9px; outline: none; color: #273142; font-family: inherit; font-size: 13px; transition: all .25s ease; } .apply-input-wrap input, .apply-input-wrap select { height: 48px; padding: 0 15px 0 42px; } .apply-input-wrap textarea { min-height: 105px; padding: 13px 15px 13px 42px; resize: vertical; line-height: 1.5; } .apply-input-wrap select { cursor: pointer; appearance: auto; } .apply-input-wrap input::placeholder, .apply-input-wrap textarea::placeholder { color: #9ba5b2; } .apply-input-wrap input:focus, .apply-input-wrap select:focus, .apply-input-wrap textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,164,65,.11); } /* TEXTAREA ICON */ .apply-textarea-wrap > i { top: 18px; transform: none; } /* ========================================= SUBMIT ========================================= */ .apply-form-action { padding-top: 3px; } .apply-loan-submit { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-width: 205px; padding: 13px 25px; border: 1px solid var(--navy); border-radius: 30px; background: var(--navy); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .3s ease; } .apply-loan-submit i { font-size: 16px; transition: transform .3s ease; } .apply-loan-submit:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217,164,65,.25); } .apply-loan-submit:hover i { transform: translateX(5px); } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .apply-loan-section { padding: 55px 0 65px; } .apply-loan-card { grid-template-columns: 1fr; } .apply-loan-info { padding: 38px 35px; } .apply-loan-info h2 { font-size: 34px; } .apply-loan-form-box { padding: 38px 35px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .apply-loan-section { padding: 42px 0 50px; } .apply-loan-card { border-radius: 18px; } .apply-loan-info { padding: 32px 22px; } .apply-loan-info h2 { font-size: 29px; } .apply-loan-info > p { font-size: 13px; } .apply-loan-points { gap: 12px; } .apply-point { font-size: 12.5px; } .apply-loan-form-box { padding: 30px 20px; } .apply-form-heading h3 { font-size: 24px; } .apply-form-row { grid-template-columns: 1fr; gap: 0; } .apply-form-group { margin-bottom: 17px; } .apply-input-wrap input, .apply-input-wrap select { height: 49px; font-size: 13px; } .apply-input-wrap textarea { min-height: 100px; } .apply-loan-submit { width: 100%; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .apply-loan-info { padding: 28px 17px; } .apply-loan-info h2 { font-size: 26px; } .apply-loan-form-box { padding: 25px 16px; } .apply-form-heading h3 { font-size: 22px; } .apply-loan-contact a { font-size: 13px; } } /* ======================================== LOAN DOCUMENTATION SECTION ======================================== */ .loan-documents-section { background: #f7f9fc; padding: 75px 0; } .loan-doc-heading { text-align: center; max-width: 750px; margin: 0 auto 45px; } .loan-doc-heading > span { display: inline-block; color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: 2px; margin-bottom: 8px; } .loan-doc-heading h2 { margin: 0 0 12px; color: var(--navy); font-size: 38px; font-weight: 800; line-height: 1.2; } .loan-doc-heading h2 span { color: var(--gold); } .loan-doc-heading p { margin: 0; color: #727c8c; font-size: 15px; line-height: 1.7; } /* GRID */ .loan-doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; } /* CARD */ .loan-doc-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 28px; box-shadow: 0 8px 25px rgba(11, 40, 84, 0.06); transition: all .3s ease; } .loan-doc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(11, 40, 84, 0.10); } .loan-doc-full { grid-column: 1 / -1; } /* CARD HEADER */ .loan-doc-card-header { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid #e8ecf1; } .loan-doc-icon { width: 48px; height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; background: #fff7e5; color: var(--gold); border-radius: 12px; font-size: 21px; } .loan-doc-card-header h3 { margin: 0 0 4px; color: var(--navy); font-size: 20px; font-weight: 750; } .loan-doc-card-header span { color: #8992a1; font-size: 12px; } /* DOCUMENT LIST */ .loan-doc-list { display: flex; flex-direction: column; } .loan-doc-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf0f4; } .loan-doc-item:last-child { border-bottom: none; } .loan-doc-item i { width: 20px; min-width: 20px; margin-top: 2px; color: var(--gold); font-size: 15px; } .loan-doc-item span { color: #3f4857; font-size: 14px; font-weight: 500; line-height: 1.5; } /* INTEREST RATE */ .loan-rate-box { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 14px 18px; background: #f5f9ff; border: 1px solid #dce8f7; border-radius: 9px; } .loan-rate-box span { color: #667085; font-size: 14px; font-weight: 600; } .loan-rate-box strong { color: var(--navy); font-size: 21px; font-weight: 800; } /* PROOF GRID */ .loan-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 5px; } .loan-proof-item { display: flex; align-items: center; gap: 9px; padding: 13px 14px; background: #f8fafc; border: 1px solid #e7ebf0; border-radius: 8px; transition: .25s; } .loan-proof-item:hover { background: #fff8e9; border-color: #efd49a; } .loan-proof-item i { color: var(--gold); font-size: 15px; flex-shrink: 0; } .loan-proof-item span { color: #4a5361; font-size: 13px; font-weight: 600; line-height: 1.35; } /* ID PROOF */ .id-proof-grid { grid-template-columns: repeat(5, 1fr); } /* NOTE */ .loan-doc-note { display: flex; align-items: flex-start; gap: 10px; max-width: 900px; margin: 28px auto 0; padding: 14px 18px; background: #fff; border: 1px solid #e4e9ef; border-left: 3px solid var(--gold); border-radius: 8px; } .loan-doc-note i { color: var(--gold); font-size: 16px; margin-top: 2px; } .loan-doc-note p { margin: 0; color: #707988; font-size: 12px; line-height: 1.6; } /* ======================================== TABLET ======================================== */ @media (max-width: 991px) { .loan-documents-section { padding: 60px 0; } .loan-doc-heading h2 { font-size: 33px; } .loan-doc-grid { gap: 20px; } .loan-doc-card { padding: 23px; } .loan-proof-grid { grid-template-columns: repeat(2, 1fr); } .id-proof-grid { grid-template-columns: repeat(3, 1fr); } } /* ======================================== MOBILE ======================================== */ @media (max-width: 767px) { .loan-documents-section { padding: 48px 0; } .loan-doc-heading { margin-bottom: 30px; padding: 0 10px; } .loan-doc-heading > span { font-size: 11px; letter-spacing: 1.5px; } .loan-doc-heading h2 { font-size: 28px; } .loan-doc-heading p { font-size: 13px; } .loan-doc-grid { grid-template-columns: 1fr; gap: 17px; } .loan-doc-full { grid-column: auto; } .loan-doc-card { padding: 20px; border-radius: 11px; } .loan-doc-card-header { gap: 12px; padding-bottom: 16px; } .loan-doc-icon { width: 43px; height: 43px; min-width: 43px; font-size: 18px; border-radius: 9px; } .loan-doc-card-header h3 { font-size: 18px; } .loan-doc-item { padding: 11px 0; } .loan-doc-item span { font-size: 13px; } .loan-proof-grid, .id-proof-grid { grid-template-columns: 1fr; } .loan-proof-item { padding: 12px; } .loan-doc-note { margin-top: 20px; padding: 12px 14px; } } /* SMALL MOBILE */ @media (max-width: 480px) { .loan-doc-heading h2 { font-size: 25px; } .loan-doc-card-header h3 { font-size: 17px; } .loan-rate-box strong { font-size: 19px; } }