/**************************************************************** Font styles *****************************************************************/ /* // : Use a unique and descriptive class name // : Use a value from 100 to 900 */ /* .jost- { font-family: "Jost", serif; font-optical-sizing: auto; font-weight: ; font-style: normal; } */ .tangerine-regular { font-family: "Tangerine", serif; font-weight: 400; font-style: normal; } .tangerine-bold { font-family: "Tangerine", serif; font-weight: 700; font-style: normal; } .poppins-thin { font-family: "Poppins", serif; font-weight: 100; font-style: normal; } .poppins-extralight { font-family: "Poppins", serif; font-weight: 200; font-style: normal; } .poppins-light { font-family: "Poppins", serif; font-weight: 300; font-style: normal; } .poppins-regular { font-family: "Poppins", serif; font-weight: 400; font-style: normal; } .poppins-medium { font-family: "Poppins", serif; font-weight: 500; font-style: normal; } .poppins-semibold { font-family: "Poppins", serif; font-weight: 600; font-style: normal; } .poppins-bold { font-family: "Poppins", serif; font-weight: 700; font-style: normal; } .poppins-extrabold { font-family: "Poppins", serif; font-weight: 800; font-style: normal; } .poppins-black { font-family: "Poppins", serif; font-weight: 900; font-style: normal; } .poppins-thin-italic { font-family: "Poppins", serif; font-weight: 100; font-style: italic; } .poppins-extralight-italic { font-family: "Poppins", serif; font-weight: 200; font-style: italic; } .poppins-light-italic { font-family: "Poppins", serif; font-weight: 300; font-style: italic; } .poppins-regular-italic { font-family: "Poppins", serif; font-weight: 400; font-style: italic; } .poppins-medium-italic { font-family: "Poppins", serif; font-weight: 500; font-style: italic; } .poppins-semibold-italic { font-family: "Poppins", serif; font-weight: 600; font-style: italic; } .poppins-bold-italic { font-family: "Poppins", serif; font-weight: 700; font-style: italic; } .poppins-extrabold-italic { font-family: "Poppins", serif; font-weight: 800; font-style: italic; } .poppins-black-italic { font-family: "Poppins", serif; font-weight: 900; font-style: italic; } /* // : Use a unique and descriptive class name // : Use a value from 100 to 900 .roboto- { font-family: "Roboto", serif; font-optical-sizing: auto; font-weight: ; font-style: normal; font-variation-settings: "wdth" 100; } */ /* // : Use a unique and descriptive class name // : Use a value from 100 to 900 .noto-serif- { font-family: "Noto Serif", serif; font-optical-sizing: auto; font-weight: ; font-style: normal; font-variation-settings: "wdth" 100; } */ /* // : Use a unique and descriptive class name // : Use a value from 300 to 900 .playfair- { font-family: "Playfair", serif; font-optical-sizing: auto; font-weight: ; font-style: normal; font-variation-settings: "wdth" 100; } */ /* The :root selector represents the element in the HTML page */ :root { --green: #00ff00; --white: #ffffff; --black: #000000; --gray: #cccccc; --lightgray: #d3d3d3; --snow: #fffafa; --coral: #ff7f50; --color-amber-10: #fff4d1; --color-amber-05: #fffbf0; --event-heading-background-color: rgba(221, 53, 69, 0.9); --page-header-color: #b3dcf51a; --page-header-background-color: var(--color-amber-05); --page-footer-background-color: var(--color-amber-10); --page-background-color: var(--snow); --page-font-size: 18px; --page-header-menu-color: var(--color-amber-05); --menu-item-normal-color: #032075 !important; --menu-item-current-color: #e21e51 !important; /* --nav-background: #153d77; --landing-background: linear-gradient(90deg, #0d274c, #1c53a3); */ --bs-body-font-family: Roboto, sans-serif, Metropolis, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; --header-font: "Playfair Display", serif; /* --header-font: "Poppins", sans-serif; */ /* --page-home-header-image: url("images/bookTravekMap.jpg"); */ /* --page-home-statement-image: url("/images/frenchscommon.jpg"); */ --page-home-statement-image: url("/images/mid-aug-2023-banner.jpg"); /* --page-travel-header-image: url("images/ToTravelIsToLiveMidQuality.jpg"); */ /* --page-photos-header-image: url("images/forbidden_city.jpg"); */ --global-palette1: #E21E51; --global-palette3: #040037; --global-palette4: #032075; --global-palette4-4: #011243; } /* For smooth scrolling behavior */ html { scroll-behavior: smooth; } body { font-family: var(--bs-body-font-family) !important; font-size: var(--page-font-size); background-color: var(--page-background-color) !important; } body .smaller { font-size: smaller; } .html-h-spacer { padding: 10px; } #site-header { background-color: var(--page-header-background-color); } #header-menu { background-color: var(--page-header-menu-color); } #navigation-menu > ul > li.menu-item > a { color: var(--menu-item-normal-color); padding-left: calc(1.2em / 2); padding-right: calc(1.2em / 2); padding-top: 0.6em; padding-bottom: 0.6em; display: block; width: 100%; text-decoration: none; transition: all 0.2s ease-in-out; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #navigation-menu > ul > li.menu-item.active > a { color: var(--global-palette1); } /* Custom CSS to center the navigation menu */ .navbar-custom { display: flex; justify-content: center; } /* Custom CSS to position on the right */ .navbar-right { position: absolute; right: 0px; } /* .header-top { background: rgb(174,219,238); background: linear-gradient(0deg, rgba(174,219,238,1) 20%, rgba(148,175,233,0.9389880952380952) 100%); } */ /* Custom CSS for hiding the top row on scroll */ .header-top { transition: transform 0.3s ease-in-out; } .header-top.hide { transform: translateY(-100%); } .header-bottom.sticky { position: fixed; top: 0; width: 100%; z-index: 1000; /*background-color: white;*/ /* Add background color for better visibility */ /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/ /* Optional: Add shadow */ } #site-footer { background-color: var(--page-footer-background-color); } #site-footer ul#footer-menu { font-size: smaller; } :root :where(.block-separator) { border-top-width: 2px; color: var(--global-palette3); } .block-separator.is-style-dots { background: none !important; border: none !important; } :root :where(.block-separator.is-style-dots):before { color: var(--global-palette3); content: "ยทยทยท"; font-family: serif; font-size: 1.5em; letter-spacing: 2em; padding-left: 2em; } .less-vis-separator { border-top-width: 1px; opacity: 0.1; } #home #statement.bg { color: var(--white); /* The image used */ background-image: var(--page-home-statement-image); /* Full height */ height: 30vh; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } .datablock-heading { padding-bottom: 0px; /* margin-top: -60px; */ /* margin-bottom: 20px; */ text-align: center; font-size: 60px; /* line-height: 10px; */ } @media only screen and (max-width: 492px) { .datablock-sm-heading { font-size: 40px; } } .datablock-subheading { padding-bottom: 0px; /* margin-top: -40px; */ /* margin-bottom: 20px; */ /* text-align: center; */ font-size: xx-large; /* line-height: 10px; */ } .event-heading-style { background-color: var(--event-heading-background-color); color: gold; /* padding: 30px 10px 30px 10px; */ } @media (min-width: 491px) { .event-heading-style { padding: 30px 10px 30px 10px; } } .caption-heading { font-style: normal; font-weight: 600; font-size: 2rem; line-height: 1.5; color: var(--global-palette3); margin: 1.5em 0 0.5em; } .caption-content { font-style: normal; font-weight: 600; font-size: 1.25rem; line-height: 1.5; color: var(--global-palette4); margin: 1.5em 0 0.5em; } /* One simple and effective way to force image resize while preserving the aspect ratio is by using CSS. You can set the max-width and max-height properties to limit the size of the image, ensuring it resizes proportionally. Here the .resizable-image class is applied to the image, setting both max-width and max-height to 100%. This ensures that the image won't exceed the size of its container while maintaining its aspect ratio. */ .resizable-image { max-width: 100%; max-height: 100%; display: block; margin: auto; } img.kb-img { box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 14px 0px; filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.2)); } .mission-item { font-style: normal; font-weight: 600; font-size: large; } .large-figure { border: 1px solid var(--gray); padding: 20px; } .custom-figcaption { background-color: rgb(240, 240, 240); border: 1px solid var(--black); text-align: center; font-size: large; font-weight: 600; padding: 10px; } .custom-smaller-figcaption { font-size: small; padding: 2px; } /* Ensure the figure container has a consistent height */ .medium-figure { border: 1px solid var(--gray); /* Optional: Add a border for visual clarity */ overflow: hidden; /* Ensure the image doesn't overflow */ } /* Ensure the image fits inside the container */ .figure-img-container { height: 150px; /* Set a fixed height for the image container */ display: flex; align-items: center; justify-content: center; } .smaller-figure-img-container { height: 100px; /* Set a fixed height for the image container */ display: flex; align-items: center; justify-content: center; } .figure-img { max-height: 100%; /* Ensure the image doesn't exceed the container height */ max-width: 100%; /* Ensure the image doesn't exceed the container width */ width: 100%; /* use 'auto' Maintain aspect ratio */ height: 100%; /* use 'auto' Maintain aspect ratio */ object-fit: cover; /* stretch image fits inside the container */ } @media only screen and (max-width: 492px) { .figure-img { object-fit: contain; /* Ensure the image fits inside the container */ } } #upcoming-events { color: var(--global-palette4-4); } ul.icon-list { list-style: none; padding: 0; grid-row-gap: 5px; display: grid; gap: 5px 0; grid-template-rows: auto; margin: 0 0 10px; text-align: left; } ul.icon-list > .icon-list-item { align-items: center; display: flex; font-size: large; padding: 0; } ul.icon-list > .icon-list-item > .icon-list-single { align-items: center; display: inline-flex; justify-content: center; margin-right: 10px; /* padding: 4px 0; */ font-size: 25px !important; font-weight: 600; } ul.icon-list > .icon-list-item > .icon-list-text { font-weight: 600; font-size: larger !important; } #back-to-top-btn { display: none; /* Hide the button by default */ position: fixed; /* Fixed position */ bottom: 20px; /* Place it at the bottom */ right: 20px; /* Place it at the right */ z-index: 99; /* Make sure it's on top of other elements */ border: none; /* Remove border */ outline: none; /* Remove outline */ background-color: var(--lightgray); color: rgb(0, 0, 0); cursor: pointer; /* Add a pointer cursor on hover */ padding: 3px 5px 3px 5px; /* Add some padding */ font-size: 25px; /* Increase font size */ } #back-to-top-btn { transition: opacity 0.3s ease-in-out; opacity: 0.5; } #back-to-top-btn:hover { background-color: var(--gray); opacity: 0.6; } .contact-form-container { background-color: white; padding: 1rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .main-page-event-title { max-width: 860px; /* margin-right: auto; margin-left: auto; */ max-width: 860px; text-align: center; font-size: 60px; line-height: 65px; font-weight: 700; text-transform: none; color: var(--coral); } .main-page-event-title-margin { margin: 0.67em auto; } .x-large-font { font-size: x-large; } /* bootstrap 5 does not have media size sizing */ /* Custom CSS */ @media (min-width: 768px) { .w-md-85 { width: 85% !important; } } @media (min-width: 992px) { .w-lg-70 { width: 70% !important; } } /* Ensure the image is responsive */ .brand.has-logo-image img { max-width: 100%; height: auto; }