:root {
    /* Colors extracted from source */
    --color-top-bar-bg: #3d3d3d;
    --color-header-bg: #303030; /* Exact from source #sp-header */
    --color-text-primary: #333333;
    --color-text-light: #d4d4d4; /* Top bar text */
    --color-text-header: #f0f0f0; /* Header text */
    --color-accent-primary: #003366; /* Updated to Dark Blue */
    --color-accent-secondary: #003366; /* Updated to Dark Blue */
    
    /* Typography */
    --font-primary: 'Open Sans', sans-serif;
    --font-heading: 'Raleway', sans-serif;

    /* Layout */
    --top-bar-height: 35px;
    --header-height: 90px;
    --container-width: 1170px;
}
/* brands icons*/
.fa.fa-500px,.fa.fa-adn,.fa.fa-amazon,.fa.fa-android,.fa.fa-angellist,.fa.fa-apple,.fa.fa-bandcamp,.fa.fa-behance,.fa.fa-behance-square,.fa.fa-bitbucket,.fa.fa-bitbucket-square,.fa.fa-bitcoin,.fa.fa-black-tie,.fa.fa-bluetooth,.fa.fa-bluetooth-b,.fa.fa-btc,.fa.fa-buysellads,.fa.fa-cc-amex,.fa.fa-cc-diners-club,.fa.fa-cc-discover,.fa.fa-cc-jcb,.fa.fa-cc-mastercard,.fa.fa-cc-paypal,.fa.fa-cc-stripe,.fa.fa-cc-visa,.fa.fa-chrome,.fa.fa-codepen,.fa.fa-codiepie,.fa.fa-connectdevelop,.fa.fa-contao,.fa.fa-creative-commons,.fa.fa-css3,.fa.fa-dashcube,.fa.fa-delicious,.fa.fa-deviantart,.fa.fa-digg,.fa.fa-dribbble,.fa.fa-dropbox,.fa.fa-drupal,.fa.fa-edge,.fa.fa-eercast,.fa.fa-empire,.fa.fa-envira,.fa.fa-etsy,.fa.fa-expeditedssl,.fa.fa-fa,.fa.fa-facebook,.fa.fa-facebook-f,.fa.fa-facebook-official,.fa.fa-facebook-square,.fa.fa-firefox,.fa.fa-first-order,.fa.fa-flickr,.fa.fa-font-awesome,.fa.fa-fonticons,.fa.fa-fort-awesome,.fa.fa-forumbee,.fa.fa-foursquare,.fa.fa-free-code-camp,.fa.fa-ge,.fa.fa-get-pocket,.fa.fa-gg,.fa.fa-gg-circle,.fa.fa-git,.fa.fa-git-square,.fa.fa-github,.fa.fa-github-alt,.fa.fa-github-square,.fa.fa-gitlab,.fa.fa-gittip,.fa.fa-glide,.fa.fa-glide-g,.fa.fa-google,.fa.fa-google-plus,.fa.fa-google-plus-circle,.fa.fa-google-plus-official,.fa.fa-google-plus-square,.fa.fa-google-wallet,.fa.fa-gratipay,.fa.fa-grav,.fa.fa-hacker-news,.fa.fa-houzz,.fa.fa-html5,.fa.fa-imdb,.fa.fa-instagram,.fa.fa-internet-explorer,.fa.fa-ioxhost,.fa.fa-joomla,.fa.fa-jsfiddle,.fa.fa-lastfm,.fa.fa-lastfm-square,.fa.fa-leanpub,.fa.fa-linkedin,.fa.fa-linkedin-square,.fa.fa-linode,.fa.fa-linux,.fa.fa-maxcdn,.fa.fa-meanpath,.fa.fa-medium,.fa.fa-meetup,.fa.fa-mixcloud,.fa.fa-modx,.fa.fa-odnoklassniki,.fa.fa-odnoklassniki-square,.fa.fa-opencart,.fa.fa-openid,.fa.fa-opera,.fa.fa-optin-monster,.fa.fa-pagelines,.fa.fa-paypal,.fa.fa-pied-piper,.fa.fa-pied-piper-alt,.fa.fa-pied-piper-pp,.fa.fa-pinterest,.fa.fa-pinterest-p,.fa.fa-pinterest-square,.fa.fa-product-hunt,.fa.fa-qq,.fa.fa-quora,.fa.fa-ra,.fa.fa-ravelry,.fa.fa-rebel,.fa.fa-reddit,.fa.fa-reddit-alien,.fa.fa-reddit-square,.fa.fa-renren,.fa.fa-resistance,.fa.fa-safari,.fa.fa-scribd,.fa.fa-sellsy,.fa.fa-shirtsinbulk,.fa.fa-simplybuilt,.fa.fa-skyatlas,.fa.fa-skype,.fa.fa-slack,.fa.fa-slideshare,.fa.fa-snapchat,.fa.fa-snapchat-ghost,.fa.fa-snapchat-square,.fa.fa-soundcloud,.fa.fa-spotify,.fa.fa-stack-exchange,.fa.fa-stack-overflow,.fa.fa-steam,.fa.fa-steam-square,.fa.fa-stumbleupon,.fa.fa-stumbleupon-circle,.fa.fa-superpowers,.fa.fa-telegram,.fa.fa-tencent-weibo,.fa.fa-themeisle,.fa.fa-trello,.fa.fa-tripadvisor,.fa.fa-tumblr,.fa.fa-tumblr-square,.fa.fa-twitch,.fa.fa-twitter,.fa.fa-twitter-square,.fa.fa-usb,.fa.fa-viacoin,.fa.fa-viadeo,.fa.fa-viadeo-square,.fa.fa-vimeo,.fa.fa-vimeo-square,.fa.fa-vine,.fa.fa-vk,.fa.fa-wechat,.fa.fa-weibo,.fa.fa-weixin,.fa.fa-whatsapp,.fa.fa-wheelchair-alt,.fa.fa-wikipedia-w,.fa.fa-windows,.fa.fa-wordpress,.fa.fa-wpbeginner,.fa.fa-wpexplorer,.fa.fa-wpforms,.fa.fa-xing,.fa.fa-xing-square,.fa.fa-y-combinator,.fa.fa-y-combinator-square,.fa.fa-yahoo,.fa.fa-yc,.fa.fa-yc-square,.fa.fa-yelp,.fa.fa-yoast,.fa.fa-youtube,.fa.fa-youtube-play,.fa.fa-youtube-square{font-family:'Font Awesome 6 Brands';font-weight:400}

/* Regular icons */
.fa.fa-address-book-o,.fa.fa-address-card-o,.fa.fa-arrow-circle-o-down,.fa.fa-arrow-circle-o-left,.fa.fa-arrow-circle-o-right,.fa.fa-arrow-circle-o-up,.fa.fa-bar-chart,.fa.fa-bar-chart-o,.fa.fa-bell-o,.fa.fa-bell-slash-o,.fa.fa-bookmark-o,.fa.fa-building-o,.fa.fa-calendar-check-o,.fa.fa-calendar-minus-o,.fa.fa-calendar-o,.fa.fa-calendar-plus-o,.fa.fa-calendar-times-o,.fa.fa-caret-square-o-down,.fa.fa-caret-square-o-left,.fa.fa-caret-square-o-right,.fa.fa-caret-square-o-up,.fa.fa-cc,.fa.fa-check-circle-o,.fa.fa-check-square-o,.fa.fa-circle-o,.fa.fa-circle-thin,.fa.fa-clipboard,.fa.fa-clock-o,.fa.fa-clone,.fa.fa-comment-o,.fa.fa-commenting,.fa.fa-commenting-o,.fa.fa-comments-o,.fa.fa-compass,.fa.fa-copyright,.fa.fa-credit-card,.fa.fa-diamond,.fa.fa-dot-circle-o,.fa.fa-drivers-license-o,.fa.fa-envelope-o,.fa.fa-envelope-open-o,.fa.fa-eye,.fa.fa-eye-slash,.fa.fa-file-archive-o,.fa.fa-file-audio-o,.fa.fa-file-code-o,.fa.fa-file-excel-o,.fa.fa-file-image-o,.fa.fa-file-movie-o,.fa.fa-file-o,.fa.fa-file-pdf-o,.fa.fa-file-photo-o,.fa.fa-file-picture-o,.fa.fa-file-powerpoint-o,.fa.fa-file-sound-o,.fa.fa-file-text-o,.fa.fa-file-video-o,.fa.fa-file-word-o,.fa.fa-file-zip-o,.fa.fa-files-o,.fa.fa-flag-o,.fa.fa-floppy-o,.fa.fa-folder-o,.fa.fa-folder-open-o,.fa.fa-frown-o,.fa.fa-futbol-o,.fa.fa-hand-grab-o,.fa.fa-hand-lizard-o,.fa.fa-hand-o-down,.fa.fa-hand-o-left,.fa.fa-hand-o-right,.fa.fa-hand-o-up,.fa.fa-hand-paper-o,.fa.fa-hand-peace-o,.fa.fa-hand-pointer-o,.fa.fa-hand-rock-o,.fa.fa-hand-scissors-o,.fa.fa-hand-spock-o,.fa.fa-hand-stop-o,.fa.fa-handshake-o,.fa.fa-hdd-o,.fa.fa-heart-o,.fa.fa-hospital-o,.fa.fa-hourglass-o,.fa.fa-id-badge,.fa.fa-id-card-o,.fa.fa-image,.fa.fa-keyboard-o,.fa.fa-lemon-o,.fa.fa-life-bouy,.fa.fa-life-buoy,.fa.fa-life-ring,.fa.fa-life-saver,.fa.fa-lightbulb-o,.fa.fa-list-alt,.fa.fa-map-o,.fa.fa-meh-o,.fa.fa-minus-square-o,.fa.fa-money,.fa.fa-moon-o,.fa.fa-newspaper-o,.fa.fa-object-group,.fa.fa-object-ungroup,.fa.fa-paper-plane-o,.fa.fa-paste,.fa.fa-pause-circle-o,.fa.fa-pencil-square-o,.fa.fa-photo,.fa.fa-picture-o,.fa.fa-play-circle-o,.fa.fa-plus-square-o,.fa.fa-question-circle-o,.fa.fa-registered,.fa.fa-send-o,.fa.fa-share-square-o,.fa.fa-smile-o,.fa.fa-snowflake-o,.fa.fa-soccer-ball-o,.fa.fa-square-o,.fa.fa-star-half-empty,.fa.fa-star-half-full,.fa.fa-star-half-o,.fa.fa-star-o,.fa.fa-sticky-note-o,.fa.fa-stop-circle-o,.fa.fa-sun-o,.fa.fa-support,.fa.fa-thumbs-o-down,.fa.fa-thumbs-o-up,.fa.fa-times-circle-o,.fa.fa-times-rectangle-o,.fa.fa-toggle-down,.fa.fa-toggle-left,.fa.fa-toggle-right,.fa.fa-toggle-up,.fa.fa-trash-o,.fa.fa-user-circle-o,.fa.fa-user-o,.fa.fa-vcard-o,.fa.fa-window-close-o,.fa.fa-window-maximize,.fa.fa-window-restore{font-family:"Font Awesome 6 Free";font-weight:400}

/* Icon name changed */
.fa.fa-glass:before{content:"\f000"}.fa.fa-star-o:before{content:"\f005"}.fa.fa-close:before,.fa.fa-remove:before{content:"\f00d"}.fa.fa-gear:before{content:"\f013"}.fa.fa-trash-o:before{content:"\f2ed"}.fa.fa-file-o:before{content:"\f15b"}.fa.fa-clock-o:before{content:"\f017"}.fa.fa-arrow-circle-o-down:before{content:"\f358"}.fa.fa-arrow-circle-o-up:before{content:"\f35b"}.fa.fa-play-circle-o:before{content:"\f144"}.fa.fa-repeat:before,.fa.fa-rotate-right:before{content:"\f01e"}.fa.fa-refresh:before{content:"\f021"}.fa.fa-dedent:before{content:"\f03b"}.fa.fa-video-camera:before{content:"\f03d"}.fa.fa-picture-o:before{content:"\f03e"}.fa.fa-photo:before{content:"\f03e"}.fa.fa-image:before{content:"\f03e"}.fa.fa-pencil:before{content:"\f303"}.fa.fa-map-marker:before{content:"\f3c5"}.fa.fa-pencil-square-o:before{content:"\f044"}.fa.fa-share-square-o:before{content:"\f14d"}.fa.fa-check-square-o:before{content:"\f14a"}.fa.fa-arrows:before{content:"\f0b2"}.fa.fa-times-circle-o:before{content:"\f057"}.fa.fa-check-circle-o:before{content:"\f058"}.fa.fa-mail-forward:before{content:"\f064"}.fa.fa-expand:before{content:"\f424"}.fa.fa-compress:before{content:"\f422"}.fa.fa-warning:before{content:"\f071"}.fa.fa-calendar:before{content:"\f073"}.fa.fa-arrows-v:before{content:"\f338"}.fa.fa-arrows-h:before{content:"\f337"}.fa.fa-bar-chart:before{content:"\f080"}.fa.fa-bar-chart-o:before{content:"\f080"}.fa.fa-gears:before{content:"\f085"}.fa.fa-thumbs-o-up:before{content:"\f164"}.fa.fa-thumbs-o-down:before{content:"\f165"}.fa.fa-heart-o:before{content:"\f004"}.fa.fa-sign-out:before{content:"\f2f5"}.fa.fa-linkedin-square:before{content:"\f08c"}.fa.fa-thumb-tack:before{content:"\f08d"}.fa.fa-external-link:before{content:"\f35d"}.fa.fa-sign-in:before{content:"\f2f6"}.fa.fa-lemon-o:before{content:"\f094"}.fa.fa-square-o:before{content:"\f0c8"}.fa.fa-bookmark-o:before{content:"\f02e"}.fa.fa-facebook:before{content:"\f39e"}.fa.fa-facebook-f:before{content:"\f39e"}.fa.fa-feed:before{content:"\f09e"}.fa.fa-hdd-o:before{content:"\f0a0"}.fa.fa-hand-o-right:before{content:"\f0a4"}.fa.fa-hand-o-left:before{content:"\f0a5"}.fa.fa-hand-o-up:before{content:"\f0a6"}.fa.fa-hand-o-down:before{content:"\f0a7"}.fa.fa-arrows-alt:before{content:"\f31e"}.fa.fa-group:before{content:"\f0c0"}.fa.fa-chain:before{content:"\f0c1"}.fa.fa-scissors:before{content:"\f0c4"}.fa.fa-files-o:before{content:"\f0c5"}.fa.fa-floppy-o:before{content:"\f0c7"}.fa.fa-navicon:before,.fa.fa-reorder:before{content:"\f0c9"}.fa.fa-google-plus:before{content:"\f0d5"}.fa.fa-money:before{content:"\f3d1"}.fa.fa-unsorted:before{content:"\f0dc"}.fa.fa-sort-desc:before{content:"\f0dd"}.fa.fa-sort-asc:before{content:"\f0de"}.fa.fa-linkedin:before{content:"\f0e1"}.fa.fa-rotate-left:before{content:"\f0e2"}.fa.fa-legal:before{content:"\f0e3"}.fa.fa-dashboard:before,.fa.fa-tachometer:before{content:"\f3fd"}.fa.fa-comment-o:before{content:"\f075"}.fa.fa-comments-o:before{content:"\f086"}.fa.fa-flash:before{content:"\f0e7"}.fa.fa-paste:before{content:"\f328"}.fa.fa-lightbulb-o:before{content:"\f0eb"}.fa.fa-exchange:before{content:"\f362"}.fa.fa-cloud-download:before{content:"\f381"}.fa.fa-cloud-upload:before{content:"\f382"}.fa.fa-bell-o:before{content:"\f0f3"}.fa.fa-cutlery:before{content:"\f2e7"}.fa.fa-file-text-o:before{content:"\f15c"}.fa.fa-building-o:before{content:"\f1ad"}.fa.fa-hospital-o:before{content:"\f0f8"}.fa.fa-tablet:before{content:"\f3fa"}.fa.fa-mobile-phone:before,.fa.fa-mobile:before{content:"\f3cd"}.fa.fa-circle-o:before{content:"\f111"}.fa.fa-mail-reply:before{content:"\f3e5"}.fa.fa-folder-o:before{content:"\f07b"}.fa.fa-folder-open-o:before{content:"\f07c"}.fa.fa-smile-o:before{content:"\f118"}.fa.fa-frown-o:before{content:"\f119"}.fa.fa-meh-o:before{content:"\f11a"}.fa.fa-keyboard-o:before{content:"\f11c"}.fa.fa-flag-o:before{content:"\f024"}.fa.fa-mail-reply-all:before{content:"\f122"}.fa.fa-star-half-o:before{content:"\f089"}.fa.fa-star-half-empty:before{content:"\f089"}.fa.fa-star-half-full:before{content:"\f089"}.fa.fa-code-fork:before{content:"\f126"}.fa.fa-chain-broken:before{content:"\f127"}.fa.fa-shield:before{content:"\f3ed"}.fa.fa-calendar-o:before{content:"\f133"}.fa.fa-ticket:before{content:"\f3ff"}.fa.fa-minus-square-o:before{content:"\f146"}.fa.fa-level-up:before{content:"\f3bf"}.fa.fa-level-down:before{content:"\f3be"}.fa.fa-pencil-square:before{content:"\f14b"}.fa.fa-external-link-square:before{content:"\f360"}.fa.fa-caret-square-o-down:before{content:"\f150"}.fa.fa-toggle-down:before{content:"\f150"}.fa.fa-caret-square-o-up:before{content:"\f151"}.fa.fa-toggle-up:before{content:"\f151"}.fa.fa-caret-square-o-right:before{content:"\f152"}.fa.fa-toggle-right:before{content:"\f152"}.fa.fa-eur:before,.fa.fa-euro:before{content:"\f153"}.fa.fa-gbp:before{content:"\f154"}.fa.fa-dollar:before,.fa.fa-usd:before{content:"\f155"}.fa.fa-inr:before,.fa.fa-rupee:before{content:"\f156"}.fa.fa-cny:before,.fa.fa-jpy:before,.fa.fa-rmb:before,.fa.fa-yen:before{content:"\f157"}.fa.fa-rouble:before,.fa.fa-rub:before,.fa.fa-ruble:before{content:"\f158"}.fa.fa-krw:before,.fa.fa-won:before{content:"\f159"}.fa.fa-bitcoin:before{content:"\f15a"}.fa.fa-file-text:before{content:"\f15c"}.fa.fa-sort-alpha-asc:before{content:"\f15d"}.fa.fa-sort-alpha-desc:before{content:"\f881"}.fa.fa-sort-amount-asc:before{content:"\f160"}.fa.fa-sort-amount-desc:before{content:"\f884"}.fa.fa-sort-numeric-asc:before{content:"\f162"}.fa.fa-sort-numeric-desc:before{content:"\f886"}.fa.fa-youtube-play:before{content:"\f167"}.fa.fa-bitbucket-square:before{content:"\f171"}.fa.fa-long-arrow-down:before{content:"\f309"}.fa.fa-long-arrow-up:before{content:"\f30c"}.fa.fa-long-arrow-left:before{content:"\f30a"}.fa.fa-long-arrow-right:before{content:"\f30b"}.fa.fa-gittip:before{content:"\f184"}.fa.fa-sun-o:before{content:"\f185"}.fa.fa-moon-o:before{content:"\f186"}.fa.fa-arrow-circle-o-right:before{content:"\f35a"}.fa.fa-arrow-circle-o-left:before{content:"\f359"}.fa.fa-caret-square-o-left:before{content:"\f191"}.fa.fa-toggle-left:before{content:"\f191"}.fa.fa-dot-circle-o:before{content:"\f192"}.fa.fa-try:before,.fa.fa-turkish-lira:before{content:"\f195"}.fa.fa-plus-square-o:before{content:"\f0fe"}.fa.fa-bank:before,.fa.fa-institution:before{content:"\f19c"}.fa.fa-mortar-board:before{content:"\f19d"}.fa.fa-spoon:before{content:"\f2e5"}.fa.fa-automobile:before{content:"\f1b9"}.fa.fa-envelope-o:before{content:"\f0e0"}.fa.fa-file-pdf-o:before{content:"\f1c1"}.fa.fa-file-word-o:before{content:"\f1c2"}.fa.fa-file-excel-o:before{content:"\f1c3"}.fa.fa-file-powerpoint-o:before{content:"\f1c4"}.fa.fa-file-image-o:before{content:"\f1c5"}.fa.fa-file-photo-o:before{content:"\f1c5"}.fa.fa-file-picture-o:before{content:"\f1c5"}.fa.fa-file-archive-o:before{content:"\f1c6"}.fa.fa-file-zip-o:before{content:"\f1c6"}.fa.fa-file-audio-o:before{content:"\f1c7"}.fa.fa-file-sound-o:before{content:"\f1c7"}.fa.fa-file-video-o:before{content:"\f1c8"}.fa.fa-file-movie-o:before{content:"\f1c8"}.fa.fa-file-code-o:before{content:"\f1c9"}.fa.fa-life-bouy:before{content:"\f1cd"}.fa.fa-life-buoy:before{content:"\f1cd"}.fa.fa-life-saver:before{content:"\f1cd"}.fa.fa-support:before{content:"\f1cd"}.fa.fa-circle-o-notch:before{content:"\f1ce"}.fa.fa-ra:before{content:"\f1d0"}.fa.fa-resistance:before{content:"\f1d0"}.fa.fa-ge:before{content:"\f1d1"}.fa.fa-y-combinator-square:before{content:"\f1d4"}.fa.fa-yc-square:before{content:"\f1d4"}.fa.fa-wechat:before{content:"\f1d7"}.fa.fa-send:before{content:"\f1d8"}.fa.fa-paper-plane-o:before{content:"\f1d8"}.fa.fa-send-o:before{content:"\f1d8"}.fa.fa-circle-thin:before{content:"\f111"}.fa.fa-header:before{content:"\f1dc"}.fa.fa-sliders:before{content:"\f1de"}.fa.fa-futbol-o:before{content:"\f1e3"}.fa.fa-soccer-ball-o:before{content:"\f1e3"}.fa.fa-newspaper-o:before{content:"\f1ea"}.fa.fa-bell-slash-o:before{content:"\f1f6"}.fa.fa-trash:before{content:"\f2ed"}.fa.fa-eyedropper:before{content:"\f1fb"}.fa.fa-area-chart:before{content:"\f1fe"}.fa.fa-pie-chart:before{content:"\f200"}.fa.fa-line-chart:before{content:"\f201"}.fa.fa-cc:before{content:"\f20a"}.fa.fa-ils:before,.fa.fa-shekel:before,.fa.fa-sheqel:before{content:"\f20b"}.fa.fa-meanpath:before{content:"\f2b4"}.fa.fa-diamond:before{content:"\f3a5"}.fa.fa-intersex:before{content:"\f224"}.fa.fa-facebook-official:before{content:"\f09a"}.fa.fa-hotel:before{content:"\f236"}.fa.fa-yc:before{content:"\f23b"}.fa.fa-battery-4:before,.fa.fa-battery:before{content:"\f240"}.fa.fa-battery-3:before{content:"\f241"}.fa.fa-battery-2:before{content:"\f242"}.fa.fa-battery-1:before{content:"\f243"}.fa.fa-battery-0:before{content:"\f244"}.fa.fa-sticky-note-o:before{content:"\f249"}.fa.fa-hourglass-o:before{content:"\f254"}.fa.fa-hourglass-1:before{content:"\f251"}.fa.fa-hourglass-2:before{content:"\f252"}.fa.fa-hourglass-3:before{content:"\f253"}.fa.fa-hand-rock-o:before{content:"\f255"}.fa.fa-hand-grab-o:before{content:"\f255"}.fa.fa-hand-paper-o:before{content:"\f256"}.fa.fa-hand-stop-o:before{content:"\f256"}.fa.fa-hand-scissors-o:before{content:"\f257"}.fa.fa-hand-lizard-o:before{content:"\f258"}.fa.fa-hand-spock-o:before{content:"\f259"}.fa.fa-hand-pointer-o:before{content:"\f25a"}.fa.fa-hand-peace-o:before{content:"\f25b"}.fa.fa-television:before{content:"\f26c"}.fa.fa-calendar-plus-o:before{content:"\f271"}.fa.fa-calendar-minus-o:before{content:"\f272"}.fa.fa-calendar-times-o:before{content:"\f273"}.fa.fa-calendar-check-o:before{content:"\f274"}.fa.fa-map-o:before{content:"\f279"}.fa.fa-commenting:before{content:"\f4ad"}.fa.fa-commenting-o:before{content:"\f4ad"}.fa.fa-vimeo:before{content:"\f27d"}.fa.fa-credit-card-alt:before{content:"\f09d"}.fa.fa-pause-circle-o:before{content:"\f28b"}.fa.fa-stop-circle-o:before{content:"\f28d"}.fa.fa-wheelchair-alt:before{content:"\f368"}.fa.fa-question-circle-o:before{content:"\f059"}.fa.fa-volume-control-phone:before{content:"\f2a0"}.fa.fa-asl-interpreting:before{content:"\f2a3"}.fa.fa-deafness:before,.fa.fa-hard-of-hearing:before{content:"\f2a4"}.fa.fa-signing:before{content:"\f2a7"}.fa.fa-google-plus-official:before{content:"\f2b3"}.fa.fa-google-plus-circle:before{content:"\f2b3"}.fa.fa-fa:before{content:"\f2b4"}.fa.fa-handshake-o:before{content:"\f2b5"}.fa.fa-envelope-open-o:before{content:"\f2b6"}.fa.fa-address-book-o:before{content:"\f2b9"}.fa.fa-vcard:before{content:"\f2bb"}.fa.fa-address-card-o:before{content:"\f2bb"}.fa.fa-vcard-o:before{content:"\f2bb"}.fa.fa-user-circle-o:before{content:"\f2bd"}.fa.fa-user-o:before{content:"\f007"}.fa.fa-drivers-license:before{content:"\f2c2"}.fa.fa-id-card-o:before{content:"\f2c2"}.fa.fa-drivers-license-o:before{content:"\f2c2"}.fa.fa-thermometer-4:before,.fa.fa-thermometer:before{content:"\f2c7"}.fa.fa-thermometer-3:before{content:"\f2c8"}.fa.fa-thermometer-2:before{content:"\f2c9"}.fa.fa-thermometer-1:before{content:"\f2ca"}.fa.fa-thermometer-0:before{content:"\f2cb"}.fa.fa-bathtub:before,.fa.fa-s15:before{content:"\f2cd"}.fa.fa-times-rectangle:before{content:"\f410"}.fa.fa-window-close-o:before{content:"\f410"}.fa.fa-times-rectangle-o:before{content:"\f410"}.fa.fa-eercast:before{content:"\f2da"}.fa.fa-snowflake-o:before{content:"\f2dc"}.fa.fa-cab:before{content:"\f1ba"}

/* Specific Fixes */
[class^="fa-"], [class*=" fa-"] {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.fa-connectdevelop:before,
.fa.fa-connectdevelop:before {
    content: "\f20e";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

.fa-diamond:before,
.fa.fa-diamond:before {
    content: "\f219";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.fa-skyatlas:before,
.fa.fa-skyatlas:before {
    content: "\f216";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}
/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Match Height System - Equal Height Columns */
.match-height {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* For parent containers that need equal height children */
.match-height-container {
    display: flex;
    flex-wrap: wrap;
}

.match-height-container > * {
    display: flex;
    flex-direction: column;
}

/* Background Opacity Utilities */
.white_bckg-70 {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

.white_bckg-50 {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.black_bckg-90 {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

.black_bckg-50 {
    background-color: rgba(48, 48, 48, 0.5) !important;
}

.black_bckg-20 {
    background-color: rgba(48, 48, 48, 0.2) !important;
}

.major_color_bckg-90 {
    background-color: rgba(56, 178, 228, 0.9) !important;
}

/* Border Utilities */
.border-radius {
    border-radius: 4px;
}

.border-radius-lg {
    border-radius: 8px;
}

/* Text Utilities */
.text-shadow {
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
}

.text-shadow-strong {
    text-shadow: 2px 4px 10px #222;
}

/* Alignment Utilities */
.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Spacing Utilities */
.sppb-empty-space {
    clear: both;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

/* Color Utilities */
.major_color {
    color: var(--color-accent-primary, #38b2e4) !important;
}

/* Display Utilities */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.hidden-tablet {
    display: inline;
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hidden-mobile {
        display: none !important;
    }
}

/* Image Effects */
.desaturate {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.desaturate:hover {
    filter: grayscale(0%);
}

/* Transition Utilities */
.transition-3s {
    transition: 0.3s ease;
}

.transition-hover-shadow:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Position Utilities */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

/* Flexbox Utilities */
.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

/* Column Alignment Helpers */
.sppb-align-items-center {
    display: flex;
    align-items: center;
}

/* Responsive Spacing */
@media (max-width: 767px) {
    .xs-no-padding {
        padding: 0 !important;
    }
    
    .xs-no-margin {
        margin: 0 !important;
    }
}

/* Overflow Utilities */
.overflow-hidden {
    overflow: hidden;
}

/* Width Utilities */
.full-width {
    width: 100%;
}

.auto-width {
    width: auto;
}

/* Reset Width for Animated Headlines */
.reset-width {
    width: auto;
}

/* Before Text Helper */
.before-text {
    display: inline-block;
    margin-right: 10px;
}

/* Word Wrapper for Animated Headlines */
.ah-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
}

.ah-words-wrapper.match-height {
    min-height: 1em;
}

/* Box Shadow Utilities */
.box-shadow-none {
    box-shadow: none !important;
}

.box-shadow-light {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.box-shadow-medium {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.box-shadow-strong {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* Transition All */
.transition-all {
    transition: all 0.3s ease;
}
/* Imports removed for performance optimization - loaded in index.php */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Flex-Style Page Preloader */
.sp-pre-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #303030;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.sp-pre-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

.sp-loader-circle {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #22a9e1;
    border-radius: 50%;
    animation: spinLoader 0.8s linear infinite;
}

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

/* Scroll Reveal Animations (Flex WOW.js Style) */
.reveal {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.reveal-visible {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* Fade In Up */
.reveal-up {
    transform: translateY(50px);
}

/* Fade In Down */
.reveal-down {
    transform: translateY(-50px);
}

/* Fade In Left */
.reveal-left {
    transform: translateX(-50px);
}

/* Fade In Right */
.reveal-right {
    transform: translateX(50px);
}

/* Fade In (no movement) */
.reveal-fade {
    transform: none;
}

/* Scale Up */
.reveal-scale {
    transform: scale(0.9);
}

/* Stagger delays for child elements */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

body {
    font-family: 'Open Sans', sans-serif; /* Explicitly set as requested, though var was similar */
    font-size: 15px;
    font-weight: normal;
    color: var(--color-text-primary);
    line-height: 25px;
}

::selection {
    background: var(--color-accent-primary);
    color: #fff;
}

::-moz-selection {
    background: var(--color-accent-primary);
    color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 15px;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

/* Top Bar */
#top-bar {
    background-color: #ffffff;
    height: var(--top-bar-height);
    color: #333333;
    font-size: 13px;
    border-bottom: 1px solid #e0e0e0;
}

#top-bar .logo img {
    display: block;
    width: auto;
}

#top-bar .social-icons a {
    margin-right: 15px;
    color: #ababab;
}

#top-bar .social-icons a:hover {
    color: var(--color-accent-primary);
}

#top-bar .top-right a, 
#top-bar .top-right span {
    margin-left: 20px;
}

/* Main Header */
#main-header {
    background-color: var(--color-header-bg);
    min-height: var(--header-height);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    color: var(--color-text-header);
    padding: 0 100px; /* Increased padding to move it "slightly" left but not "too much" */
    position: relative; /* Ensure absolute menu is positioned relative to header */
}

#main-header .logo.header-logo-left {
    display: block;
    margin-right: auto;
}

#main-header .logo.header-logo-left img {
    max-height: 55px;
    width: auto;
}

#main-header .container {
    margin: 0;
    max-width: none;
    width: auto;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

#main-header a {
    color: #ededed;
}

#main-header a:hover {
    color: #ffffff;
}

/* Nav Alignment - rely on container space-between */
/* #main-header nav {} */

/* Navigation */
.main-menu {
    display: flex;
    gap: 30px; /* Increased to reduce clutter */
}

.main-menu li a {
    font-weight: 400; /* Source says normal weight for menu items */
    text-transform: uppercase; /* Source doesn't explicitly say uppercase but visual implies it, keeping for now or check */
    /* Checking source line: .sp-megamenu-parent{font-family:Open Sans, sans-serif; font-size:15px; font-weight:normal; } */
    /* It doesn't say uppercase. Let's remove uppercase to be "exact" if user insists, but menu usually is. */
    /* Wait, screenshots usually show uppercase. I'll stick to visual for casing unless I see "text-transform: uppercase" */
    font-size: 13px; /* Reduced for cleaner look */
    color: #ededed;
    white-space: nowrap; /* Prevent wrapping */
}

.main-menu li a:hover,
.main-menu li.active a {
    color: #ffffff; /* Source says hover color #ffffff */
}

/* Fix Logo Text color for dark header */
#main-header .logo a {
    color: #ffffff !important;
}

.header-actions {
    margin-left: 30px;
    flex-shrink: 0;
}

.header-actions a {
    color: #ededed;
}

/* Mobile Toggle */
.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: #ededed;
    padding: 10px;
}

.menu-toggle:hover {
    color: #ffffff;
}

.submenu-toggle {
    display: none;
}

/* Dropdown Menu Styles - Flex Template Style */
.main-menu li {
    position: relative;
}

/* Main menu item styling */
.main-menu > li > a {
    position: relative;
    padding: 10px 0;
    transition: color 0.3s ease;
}

/* Underline hover effect for main menu items */
.main-menu > li > a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-primary);
    transition: width 0.3s ease, left 0.3s ease;
}

.main-menu > li:hover > a::before,
.main-menu > li.active > a::before {
    width: 100%;
    left: 0;
}

/* Dropdown container */
.main-menu li ul.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background-color: rgba(48, 48, 48, 0.8); /* Increased transparency */
    backdrop-filter: blur(10px); /* Modern glass effect */
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.25);
    padding: 8px 0;
    z-index: 9999;
    border-radius: 0 0 4px 4px;
    border-top: 2px solid var(--color-accent-primary);
    
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.main-menu li:hover > ul.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-menu li ul.dropdown-menu li {
    display: block;
    margin: 0;
}

.main-menu li ul.dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 400;
    color: #c8c8c8;
    text-transform: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
    position: relative;
    padding-right: 40px; /* Ensure space for arrow */
}

.main-menu li ul.dropdown-menu li:last-child a {
    border-bottom: none;
}

.main-menu li ul.dropdown-menu li a:hover {
    background-color: #22a9e1; /* Flex template blue preset */
    color: #ffffff;
    padding-left: 25px;
}

/* Accent bar on hover */
.main-menu li ul.dropdown-menu li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: var(--color-accent-primary);
    transition: width 0.2s ease;
}

.main-menu li ul.dropdown-menu li a:hover::before {
    width: 3px;
}

/* Nested Dropdown (Level 3+) */
.main-menu li ul.dropdown-menu li ul.dropdown-menu {
    top: -8px !important; /* Align with parent padding */
    left: 100%;
    margin-top: 0 !important; /* Remove any shift */
    border-top: none;
    border-left: 2px solid var(--color-accent-primary);
    border-radius: 0 4px 4px 0;
}

/* Prevent right overflow - added for responsiveness */
.main-menu li ul.dropdown-menu li ul.dropdown-menu.pull-left {
    left: auto !important;
    right: 100%;
    border-left: none; /* Remove default left border */
    border-right: 2px solid var(--color-accent-primary); /* Add right border */
    border-radius: 4px 0 0 4px;
    margin-right: -2px; /* Pull slightly to overlap border if needed, or arguably just 0 */
}

/* Dropdown Arrow Indicators */
.menu-has-children > a::after {
    content: '\f107'; /* fa-angle-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 8px;
    font-size: 11px;
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-has-children:hover > a::after {
    opacity: 1;
    transform: rotate(180deg);
}

/* Right arrow for nested */
.main-menu li ul.dropdown-menu li.menu-has-children > a::after {
    content: '\f105'; /* fa-angle-right */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    margin-right: 0;
}

.main-menu li ul.dropdown-menu li.menu-has-children:hover > a::after {
    transform: translateY(-50%) translateX(3px); /* Combine vertical center with hover move */
}

/* Sticky Header */
#main-header.sticky-header {
    position: fixed !important; /* Force override */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--color-header-bg); /* Use theme header color */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease;
    padding-top: 10px;
    padding-bottom: 10px;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Ensure content doesn't jump when header becomes fixed */
body.sticky-active {
    padding-top: 100px; /* Approximate height of header */
}

/* Back to Top Button */
#back-to-top {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 30px;
    left: 30px; /* Default is left for some reason in many templates, but user usually expects right. I put right in plan. Let's stick to Right. */
    right: 30px;
    z-index: 9999;
    border: none;
    outline: none;
    background-color: #38b2e4; /* Primary Color */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s, transform 0.3s;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#back-to-top[style*="display: block"] {
    display: flex !important; /* Override inline style set by JS if needed to keep flex */
}

#back-to-top:hover {
    background-color: #2c90b8;
    transform: translateY(-3px);
}

/* Parallax Section */
.parallax-section {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
    text-align: center;
    overflow: hidden;
}

.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.parallax-content {
    position: relative;
    z-index: 2;
}

.parallax-title {
    font-size: 3em;
    font-weight: 300;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif; /* Matching theme headers */
    letter-spacing: 1px;
    line-height: 1.2;
}

.parallax-text {
    font-size: 1.2em;
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .parallax-section {
        background-attachment: scroll; /* Disable parallax on mobile for performance */
        padding: 60px 0;
    }
    .parallax-title {
        font-size: 2em;
    }
}

/* Floating CTA Button (Bottom Right) */
.floating-cta-btn {
    position: fixed;
    bottom: 30px;
    right: 100px; /* Positioned to left of Back to Top (which is right: 30px, width 50px + margin) */
    z-index: 9999;
    background-color: #25d366; /* WhatsApp Green or generic CTA color */
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    animation: floatCTA 2s infinite ease-in-out;
    border: 2px solid white;
}

.floating-cta-btn:hover {
    background-color: #1ebc57;
    transform: translateY(-5px);
    color: white;
    text-decoration: none;
}

.floating-cta-btn i {
    font-size: 20px;
}

@keyframes floatCTA {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

/* Social Sidebar (Right Center) */
.social-sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: 50px; /* Width of collapsed state/icons */
}

.social-sidebar a {
    display: flex;
    align-items: center;
    justify-content: center; /* Center icon initially */
    width: 50px; /* Fixed width for just icon */
    height: 50px;
    color: white;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    right: 0;
    overflow: hidden; /* Hide text initially */
    white-space: nowrap;
}

/* Individual Colors */
.social-sidebar a.facebook { background-color: #3b5998; }
.social-sidebar a.twitter { background-color: #1da1f2; }
.social-sidebar a.instagram { background-color: #E1306C; }
.social-sidebar a.linkedin { background-color: #0077b5; }
.social-sidebar a.youtube { background-color: #ff0000; }
.social-sidebar a.pinterest { background-color: #bd081c; }

/* Expansion Effect */
.social-sidebar a span {
    display: none; /* Hidden by default */
    margin-left: 10px;
    font-size: 14px;
    font-weight: 600;
}

.social-sidebar a:hover {
    width: 160px; /* Expand width */
    justify-content: flex-start; /* Align start */
    padding-left: 15px; /* Add padding for icon */
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.social-sidebar a:hover span {
    display: inline-block; /* Show text */
}

@media (max-width: 768px) {
    .floating-cta-btn {
        padding: 12px 20px;
        font-size: 14px;
        bottom: 20px;
        right: 20px; /* Keep on right for mobile too, maybe stack or hide back to top? */
        left: auto;
    }
    
    .social-sidebar {
        display: flex; /* Show on mobile */
        width: 35px; /* Smaller width */
        z-index: 999; /* Lower than mobile menu (1001) to prevent blocking navigation */
    }

    .social-sidebar a {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    /* Disable expansion on mobile */
    .social-sidebar a:hover {
        width: 35px;
        padding-left: 0;
        justify-content: center;
        border-radius: 0;
    }

    .social-sidebar a:hover span {
        display: none;
    }
}
/* Hero Section */
#hero {
    position: relative;
    /* Aspect ratio 2340x850 ~= 36.32% */
    width: 100%;
    height: 0;
    padding-bottom: 36.325%;
    min-height: 0;
    overflow: hidden;
    margin-top: 0;
    background: #000; 
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
    display: flex;
    align-items: flex-start;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.hero-content {
    position: absolute;
    top: 0;
    left: 0;
    /* Reference dimensions from the template */
    width: 2340px;
    height: 850px;
    z-index: 10;
    margin: 0; 
    /* Transform origin handled in CSS to ensure it's ready, though JS sets scale */
    transform-origin: 0 0;
    pointer-events: none; /* Allow clicks to pass through empty areas if needed, but buttons need pointer-events: auto */
}

.hero-content-inner {
    position: absolute;
    /* Transformation origin for scaling */
    pointer-events: auto; /* Re-enable clicks */
    max-width: 60%; /* Match common template width constraint */
    white-space: normal; /* Allow wrapping */
}

.hero-title {
    font-family: 'Raleway', sans-serif;
    /* Adjusted to match template proportions with scaling */
    font-size: 90px; 
    font-weight: 200;
    line-height: 1.1;
    /* Template text shadow */
    text-shadow: 2px 4px 10px #222;
    color: #38b2e4;
    margin-bottom: 30px;
    /* text-align set dynamically inline */
    
    /* Animation inside the slide */
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out 0.5s;
}

.hero-slide.active .hero-title {
    opacity: 1;
    transform: translateX(0);
}

/* Ensure break tags work */
.hero-title br {
    display: block;
}

.major_color {
    color: var(--color-accent-primary) !important;
}

.hero-subtitle {
    font-size: 28px;
    line-height: 1.6;
    color: #dedede;
    /* Template text shadow */
    text-shadow: 1px 2px 5px #222;
    max-width: 900px; /* Increased width */
    margin-bottom: 50px;
    font-weight: 400;

    opacity: 0;
    transform: translateX(50px);
    transition: all 1s ease-out 1s;
}

.hero-slide.active .hero-subtitle {
    opacity: 1;
    transform: translateX(0);
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Allow buttons to wrap if needed */
    
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-out 1.5s;
}

.hero-slide.active .hero-buttons {
    opacity: 1;
    transform: translateY(0);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 35px;
    font-size: 18px;
    font-weight: 400;
    text-transform: none; 
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.btn-light {
    background-color: #fff;
    color: #333;
    margin-right: 15px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-light:hover {
    background-color: #f1f1f1;
    color: #333;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.btn-light i {
    color: #38b2e4;
    margin-right: 10px;
}

.btn-blue {
    background-color: var(--color-accent-primary);
    color: #fff;
    margin-right: 15px;
}

.btn-blue:hover {
    background-color: #002244;
    color: #fff;
}

.btn i {
    font-size: 24px;
}

.btn i.fa-eye {
    margin-right: 15px;
    color: #38b2e4;
}

.btn i.fa-gem {
    margin-left: 15px;
    color: #38b2e4;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
}

/* Slider Navigation Arrows */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 1;
}

.slider-nav:hover {
    background: rgba(56, 178, 228, 0.8);
    border-color: #38b2e4;
    transform: translateY(-50%) scale(1.1);
}

.slider-prev {
    left: 30px;
}

.slider-next {
    right: 30px;
}

/* Responsive Hero Overrides */
@media (max-width: 992px) {
    /* Height is now handled by vw */
    
    /* Keep button stacking for mobile/tablets if needed, but with scaling it might not be necessary. 
       Let's leave it removed for now and rely on scaling. 
       If text becomes unreadable on very small screens, we might need a different approach (like disabling scaling and using media queries).
       But for now, matching the template which scales everything. */
}

@media (max-width: 576px) {
    /* Height is now handled by vw */
}

/* Mobile Slider Font Adjustments */
@media (max-width: 768px) {
    .hero-title {
        /* Explicit font-weight for consistent rendering across iOS and Android */
        font-weight: 200;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Smaller buttons for mobile */
    .hero-buttons .btn {
        padding: 8px 20px !important;
        font-size: 14px !important;
    }

    .hero-buttons .btn i {
        font-size: 16px !important;
        margin-right: 8px !important;
        margin-left: 8px !important;
    }
}


/* Video Background */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Slider Preloader Circle */
.slider-preloader-circle {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    z-index: 9999;
    transform: rotate(-90deg); /* Start from top */
    pointer-events: none;
}

.slider-preloader-circle svg {
    display: block;
}

.slider-preloader-circle circle {
    fill: none;
    stroke-width: 4;
}

.slider-preloader-circle .bg {
    stroke: rgba(255, 255, 255, 0.4);
}

.slider-preloader-circle .progress {
    stroke: #38b2e4;
    stroke-dasharray: 113; /* 2 * pi * r (r=18) => ~113 */
    stroke-dashoffset: 113;
}

.slider-preloader-circle .progress.running {
    animation: circleProgress 5000ms linear forwards;
}

@keyframes circleProgress {
    from { stroke-dashoffset: 113; }
    to { stroke-dashoffset: 0; }
}

/* Slider Dot Navigation Buttons (Flex-Style) */
.sp-buttons {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    gap: 10px;
}

.sp-button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sp-button:hover {
    border-color: #22a9e1;
    transform: scale(1.2);
}

.sp-button.sp-selected-button {
    background-color: #22a9e1;
    border-color: #22a9e1;
}
/* Features Section */
#features {
    padding: 80px 0;
    background-color: #fff;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-box {
    text-align: center;
    padding: 40px 20px;
    transition: all 0.3s ease;
    border-radius: 4px;
}



.feature-icon {
    font-size: 60px;
    color: #38b2e4; /* Use the blue theme color */
    margin-bottom: 20px;
    display: inline-block;
}

.icon-outline-effect {
    color: transparent !important;
    -webkit-text-stroke: 2px #38b2e4;
}



.feature-title {
    font-family: var(--font-heading);
    font-size: 30px; /* Increased slightly to match visual prominence */
    font-weight: 300; /* Lighter font weight as per design */
    margin-bottom: 25px;
    color: #333;
    position: relative;
    padding-bottom: 15px;
    display: inline-block;
    white-space: nowrap; /* Prevent title from wrapping to two lines */
}

.feature-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    bottom: 0;
    left: -10%;
    width: 120%; /* Width of the line */
    height: 3px; /* Slightly thicker based on image */
    background: linear-gradient(to right, #38b2e4 70%, #e0e0e0 70%);
}

.feature-text {
    color: #555; /* Slightly darker for better readability */
    font-size: 15px;
    line-height: 1.6;
    max-width: 90%; /* Prevent text from being too wide */
    margin: 0 auto;
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .feature-icon {
        display: block !important;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
    }

    .feature-title {
        display: block !important;
        font-size: 24px; /* Smaller font on mobile */
        white-space: normal; /* Allow wrapping */
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Fix pseudo element overflow if title wraps */
    .feature-title::after {
        left: 0;
        width: 100%;
        bottom: -5px;
    }
}
/* Blog Section */
#latest-posts {
    padding: 80px 0;
    position: relative;
    background-image: url('../img/251-800x640-grayscale.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;
}

#latest-posts::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(246, 246, 246, 0.6);
    z-index: -1;
}

#latest-posts .container {
    position: relative;
    z-index: 2;
}

.section-title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 32px;
    margin-bottom: 50px;
    font-weight: 300;
    position: relative;
    padding-bottom: 35px;
}

.section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background-color: var(--color-accent-primary);
}

.section-title span {
    color: var(--color-accent-primary);
    font-weight: 700;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.blog-post {
    background: #fff;
    border-radius: 4px; /* Optional, original looks square but cleaner */
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.post-thumb {
    height: 200px;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Placeholders for images */
.post-thumb-1 { background-image: url('https://picsum.photos/400/300?random=1'); }
.post-thumb-2 { background-image: url('https://picsum.photos/400/300?random=2'); }
.post-thumb-3 { background-image: url('https://picsum.photos/400/300?random=3'); }
.post-thumb-4 { background-image: url('https://picsum.photos/400/300?random=4'); }

.post-content {
    padding: 20px;
}

.post-title {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 10px;
}

.post-title a {
    color: #333;
}

.post-title a:hover {
    color: var(--color-accent-primary);
}

.post-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.post-excerpt {
    font-size: 13px;
    color: #777;
    line-height: 1.6;
}

/* Single Post Page */
#single-post-section {
    padding: 60px 0;
    background: #f9f9f9;
    min-height: 60vh;
}

.single-post-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.post-navigation {
    margin-bottom: 30px;
}

.post-navigation-bottom {
    margin-top: 40px;
    margin-bottom: 0;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-accent-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.btn-back:hover {
    background: #2a9ad0;
}

.single-post-header {
    margin-bottom: 30px;
}

.single-post-title {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.3;
}

.single-post-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

.single-post-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.single-post-rating {
    color: #ffc107;
    font-size: 16px;
}

.single-post-rating i {
    margin-right: 2px;
}

.single-post-image {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.single-post-image img {
    width: 100%;
    height: auto;
    display: block;
}

.single-post-excerpt {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 4px solid var(--color-accent-primary);
    border-radius: 4px;
}

.single-post-excerpt p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.single-post-content {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

.single-post-content p {
    margin-bottom: 15px;
}

.post-not-found {
    text-align: center;
    padding: 60px 20px;
}

.post-not-found h1 {
    font-size: 32px;
    color: #333;
    margin-bottom: 15px;
}

.post-not-found p {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
}

/* Post Overlay Hover Effect */
.post-thumb {
    position: relative;
    overflow: hidden;
}

.post-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    cursor: pointer; /* Suggests interactivity */
}

.post-thumb:hover .post-overlay {
    opacity: 1;
}

.overlay-title {
    font-weight: 500;
    color: #fff !important;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    font-size: 20px;
    margin: 0;
    line-height: 1.3;
}

.overlay-category {
    padding: 2px 12px;
    display: table;
    width: auto;
    margin: 8px auto 0;
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    font-weight: 500;
    font-size: 12px;
    color: #fff !important;
    text-shadow: none;
}

.posted-in {
    font-weight: 400;
    font-style: italic;
    opacity: 0.9;
    margin-right: 4px;
    color: #fff !important;
}

.overlay-meta {
    margin-top: 15px; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff !important;
}

.meta-item.views i {
    font-size: 14px;
    margin-right: 2px;
    color: #fff !important;
}

.meta-item.rating .stars {
    display: flex;
    gap: 2px;
    margin-left: 2px;
}

.meta-item.rating .stars i {
    font-size: 11px;
    color: #fff !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .single-post-container {
        padding: 25px;
    }
    
    .single-post-title {
        font-size: 28px;
    }
    
    .single-post-meta {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .single-post-container {
        padding: 20px;
    }
    
    .single-post-title {
        font-size: 24px;
    }
}

/* Gallery Post Slider Context Overrides */
.gallery-slider-wrapper #hero {
    min-height: 0 !important;
}

.gallery-slider-wrapper .hero-content {
    display: none !important;
}

@media (max-width: 991px) {
    .gallery-slider-wrapper #hero {
        height: 0 !important;
        padding-bottom: 56.25% !important; /* 16:9 Aspect Ratio */
        min-height: 250px !important;
    }

    .gallery-slider-wrapper .hero-slide {
        min-height: 0 !important;
        position: absolute !important;
        height: 100% !important;
    }

    .gallery-slider-wrapper .hero-content {
        min-height: 0 !important;
        padding-top: 0 !important;
        justify-content: center !important;
    }
    
    .gallery-slider-wrapper .hero-title {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }
    
    .gallery-slider-wrapper .hero-subtitle {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }
    
    .gallery-slider-wrapper .slider-preloader-circle {
        bottom: 10px;
        right: 10px;
        transform: scale(0.6);
    }
    
    .gallery-slider-wrapper .sp-buttons {
        bottom: 10px;
    }
}
/* Clients Section */
#clients-section {
    background: linear-gradient(-45deg, #38b2e4, #2a8db5, #1d6fa5, #38b2e4);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite; /* Ambient Motion */
    padding: 60px 0;
    text-align: center;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    overflow: hidden; /* Ensure bars don't overflow */
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Decorative Bars */
.client-section-header,
.client-section-footer {
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px; /* Adjust height as needed */
    background-color: rgba(0, 0, 0, 0.1); /* Darker transparent bar */
}

.client-section-header {
    top: 0;
}

.client-section-footer {
    bottom: 0;
}

.clients-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; /* Ensure content is above background */
    z-index: 10;
}

.clients-icon {
    font-size: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 5px;
    padding: 10px;
    width: 80px;
    height: 60px;
    position: relative;
}
/* Bubble tail */
.clients-icon::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 15px;
    border-width: 15px 15px 0 0;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}
.clients-icon i {
    font-size: 30px; /* Adjust icon size inside box */
}


.clients-title {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 30px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
}

/* Typewriter Cursor */
.clients-title .wrap {
    border-right: 2px solid #e74c3c; /* Red cursor */
    padding-right: 5px;
    animation: blink 0.75s step-end infinite;
}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: #e74c3c; }
}

/* Remove old after pseudo-element */
.clients-title::after {
    content: none;
}

/* --- Animation/Slider Structure Updates --- */
#clients-section .clients-slider {
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
    max-width: 900px; /* Constrain width to prev layout assumption */
    margin: 0 auto;
    perspective: 1000px; /* Essential for 3D Flip effect */
}

#clients-section .client-slide {
    grid-area: stack;
    opacity: 0 !important;
    pointer-events: none;
    display: block !important;
    z-index: 0;
    
    /* 3D Flip Setup */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out !important;
    transform: rotateY(90deg); /* Start rotated 90deg (invisible edge) */
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

#clients-section .client-slide.active {
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 1;
    transform: rotateY(0deg); /* Rotate to face viewer */
}

.client-quote {
    font-size: 14px;
    line-height: 24px;
    max-width: 900px;
    margin: 0 auto 20px;
    opacity: 0.9;
    font-style: italic;
}

.client-name {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 30px;
    font-family: 'Raleway', sans-serif;
}

.clients-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    position: relative;
    z-index: 2; /* Ensure dots are above slides if they overlap */
}

.clients-dots .dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.clients-dots .dot.active {
    background-color: #ffffff;
}

/* Client Logo Prominence */
.client-logo {
    margin: 20px 0 15px;
}

.client-logo-img {
    max-height: 90px !important;
    width: auto;
    margin: 0 auto;
    display: block;
    /* transition for hover effect */
    transition: transform 0.3s ease;
}

.client-logo-img:hover {
    transform: scale(1.1);
}
/* Partners Section */
#partners-section {
    padding: 60px 0;
    background-color: #fff;
    /* faint diagonal stripes pattern similar to user image */
    background-image: linear-gradient(45deg, #fcfcfc 25%, transparent 25%, transparent 50%, #fcfcfc 50%, #fcfcfc 75%, transparent 75%, transparent);
    background-size: 10px 10px;
}

#partners-section .section-title {
    position: relative;
    margin-bottom: 60px;
    font-weight: 300;
    color: #333;
    text-transform: uppercase;
}

#partners-section .section-title::after {
    content: '';
    display: block;
    width: 200px;
    height: 1px;
    background: #e0e0e0; /* Grey full width line? No, user image shows short blue line */
    /* Looking at user image carefully: There is a short blue line centered under the text. */
    width: 60px;
    height: 3px;
    background-color: var(--color-accent-primary);
    margin: 20px auto 0;
}

.partners-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Safety */
    gap: 30px;
}

.partner-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    transition: all 0.3s ease;
}

.partner-item img {
    max-width: 100%;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    /* Ensure they aren't huge */
    max-height: 120px; 
}

.partner-item:hover img {
    opacity: 1;
}
/* ============================================
   GLOBAL TYPOGRAPHY SCALE
   ============================================ */

h1 {
    font-family: Raleway, sans-serif;
    font-size: 40px;
    font-weight: 100;
    line-height: 1.2;
}

h2 {
    font-family: Raleway, sans-serif;
    font-size: 33px;
    font-weight: 300;
    line-height: 1.3;
}

h3 {
    font-family: Raleway, sans-serif;
    font-size: 27px;
    font-weight: normal;
    line-height: 1.4;
}

h4 {
    font-family: Raleway, sans-serif;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.4;
}

h5 {
    font-family: Raleway, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
}

h6 {
    font-family: Raleway, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
}

/* ============================================
   DIVIDER ELEMENTS
   ============================================ */

.sppb-divider {
    margin-top: 30px;
    margin-bottom: 30px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #878787;
}

.sppb-addon-divider-wrap {
    width: 100%;
    clear: both;
}

.sppb-divider-border {
    border-bottom-color: #878787;
}

@media (min-width: 768px) and (max-width: 991px) {
    .sppb-divider {
        margin-top: 1px;
        margin-bottom: 1px;
    }
}

@media (max-width: 767px) {
    .sppb-divider {
        margin-top: 1px;
        margin-bottom: 1px;
    }
}

/* ============================================
   ANIMATED NUMBER COMPONENT
   ============================================ */

.sppb-animated-number {
    color: #ffafa3;
    font-size: 40px;
    display: inline-block;
    font-weight: 600;
}

.sppb-animated-number-title {
    font-size: 18px;
    color: #ffffff;
    display: block;
    margin-top: 10px;
    font-weight: 400;
}

.number_addtext {
    color: #ffafa3;
    font-size: 40px;
    display: inline-block;
}

/* ============================================
   FOOTER DARK SECTIONS
   ============================================ */

#section-id-1481572543,
.footer-dark-section-1 {
    color: #ffffff;
    background-color: #303030;
    background-image: url('/images/svg/section-background-stripes.svg');
    background-repeat: repeat;
    background-size: inherit;
    background-attachment: inherit;
    background-position: 50% 50%;
}

#section-id-1481572543 .footer-heading,
.footer-dark-section-1 .footer-heading {
    color: #e0978f;
}

#section-id-1481572546,
.footer-dark-section-2 {
    background-color: #404040;
}

#section-id-1481572551,
.footer-dark-section-3 {
    padding-top: 50px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 20px;
    background-color: #363839;
    background-image: url('/images/svg/section-background-stripes2.svg');
    background-repeat: repeat;
    background-size: contain;
    background-attachment: inherit;
    background-position: 50% 50%;
}

.footer-dark-section-3 .footer-heading {
    color: #e0978f;
    font-size: 22px;
}

/* ============================================
   ICON STYLING
   ============================================ */

.sppb-icon-large {
    font-size: 87px;
    width: 87px;
    height: 87px;
    line-height: 87px;
}

.sppb-icon-container {
    box-shadow: none;
    display: inline-block;
    text-align: center;
    padding: 0;
    transition: all 0.3s ease;
}

.sppb-icon-container:hover {
    transform: translateY(-5px);
}

.sppb-icon {
    margin-bottom: 10px;
}

/* Icon with shadow */
.icon-with-shadow .sppb-icon-container {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* ============================================
   BLOG SECTION ENHANCEMENTS
   ============================================ */

#ajax_posts_144 .ajax-posts {
    margin: 0 -15px;
}

#ajax_posts_144 .ajax-posts .ajax-post .inner {
    background-color: #ffffff;
    padding: 15px;
    margin: 15px;
    box-shadow: 0 3px 3px rgba(30, 30, 30, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#ajax_posts_144 .ajax-posts .ajax-post .inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(30, 30, 30, 0.2);
}

#ajax_posts_144 .ajax-posts .ajax-post .overlay a:hover img.post-img {
    -webkit-filter: blur(0.2em) grayscale(0%);
    filter: blur(0.2em) grayscale(0%);
}

#ajax_posts_144 .ajax-post .inner > div.article_style {
    margin: -15px;
}

#ajax_posts_144 .ajax-posts .ajax-post .overlay .intro-image .caption-content,
#ajax_posts_144 .ajax-posts .ajax-post .inner .aga_heading {
    font-size: 20px;
    line-height: 1.4;
}

#ajax_posts_144 .ajax-posts .ajax-post .inner .item-intro {
    font-size: 14px;
    line-height: 1.6;
}

#ajax_posts_144 .ajax-post .inner .no-intro-img {
    margin-top: 0;
}

#ajax_posts_144 .tags a.label {
    color: #fff;
    background-color: var(--color-accent-primary, #38b2e4);
    padding: 4px 10px;
    border-radius: 3px;
    margin-right: 5px;
    font-size: 12px;
}

/* ============================================
   CAROUSEL/SLICK ENHANCEMENTS
   ============================================ */

.slick-carousel .slick-slide {
    margin: 0 0px;
}

.slick-carousel .slick-prev,
.slick-carousel .slick-next {
    margin-top: -36.666666666667px;
    z-index: 10;
}

.slick-carousel .slick-prev i.pe,
.slick-carousel .slick-next i.pe {
    font-size: 44px;
}

/* Specific carousel with spacing */
.slick-carousel-spaced .slick-slide {
    margin: 0 15px;
}

.slick-carousel-spaced .slick-list {
    margin: 0 -15px;
}

/* ============================================
   RESPONSIVE ENHANCEMENTS
   ============================================ */

@media (min-width: 768px) and (max-width: 991px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    h4 { font-size: 20px; }
    
    .sppb-animated-number {
        font-size: 32px;
    }
    
    .number_addtext {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    
    .sppb-animated-number {
        font-size: 28px;
    }
    
    .number_addtext {
        font-size: 28px;
    }
    
    .sppb-icon-large {
        font-size: 60px;
        width: 60px;
        height: 60px;
        line-height: 60px;
    }
    
    #ajax_posts_144 .ajax-posts .ajax-post .inner {
        margin: 10px 0;
    }
}
/* ============================================
   WOW.js ANIMATION CLASSES
   ============================================ */

/* Base Animation Class */
.sppb-wow {
    visibility: hidden;
}

.sppb-wow.animated {
    visibility: visible;
}

/* Fade Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        transform: perspective(400px);
    }
}

/* Animation Classes */
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.fadeInLeft {
    animation-name: fadeInLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.fadeInRight {
    animation-name: fadeInRight;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.fadeInUp {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.flipInX {
    animation-name: flipInX;
    backface-visibility: visible !important;
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* Animation State */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* Animation Delays */
[data-sppb-wow-delay] {
    animation-delay: var(--wow-delay, 0s);
}

/* Animation Durations */
[data-sppb-wow-duration] {
    animation-duration: var(--wow-duration, 1s);
}
/* Footer General Styles */
footer {
    background-color: #222; /* Fallback */
    background-image: url('../img/footer_bg_pattern.png'); /* Need to check if I have a pattern or simulate with CSS */
    background: repeating-linear-gradient(
        45deg,
        #1a1a1a,
        #1a1a1a 10px,
        #222 10px,
        #222 20px
    ); /* Carbon fiber simulation if image missing */
    color: #999;
    padding-top: 60px; /* Changed from padding: 60px 0; to padding-top so bottom isn't huge padding if copyright is there */
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}

footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

/* Ensure main footer widgets container behaves */
footer .container.main-footer-widgets {
    padding-bottom: 60px;
}

.footer-widget {
    flex: 1;
    min-width: 280px;
}

.footer-logo {
    margin-bottom: 20px;
    display: block;
}

.footer-logo img {
    max-width: 120px;
}

.footer-desc {
    margin-bottom: 30px;
    line-height: 1.8;
}

/* Headings */
.footer-heading {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
    display: inline-block;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #38b2e4; /* Use the blue theme color found in history */
}

/* Subscribe Form */
.subscribe-form {
    display: flex;
    margin-top: 20px;
}

.subscribe-form input {
    background: #333;
    border: none;
    padding: 10px 15px;
    color: #ccc;
    flex-grow: 1;
    outline: none;
    border: 1px solid #444;
}

.subscribe-form button {
    background: #38b2e4;
    border: none;
    color: #fff;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.subscribe-form button:hover {
    background: #2caed8;
}

/* Recent Posts Widget */
.recent-post-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
}

.recent-post-item:last-child {
    border-bottom: none;
}

.recent-post-title {
    color: #38b2e4;
    font-size: 15px;
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
    transition: color 0.3s;
}

.recent-post-title:hover {
    color: #fff;
}

.recent-post-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.recent-post-excerpt {
    font-size: 13px;
    line-height: 1.6;
}

/* Tags Widget */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.tag-item {
    border: 1px solid #444;
    color: #999;
    padding: 5px 10px;
    font-size: 12px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s;
    background: #2a2a2a;
}

.tag-item span {
    background: #333;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 3px;
}

.tag-item:hover {
    border-color: #38b2e4;
    color: #fff;
}

/* Flex It Now section in col 3 */
.flex-it-now {
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.flex-icon {
    font-size: 40px;
    color: #f35d4b; /* Keep the red accent for specific icons if needed, or switch to blue. Image shows red roller. */
    margin-right: 15px;
}

.flex-text h4 {
    color: #fff;
    margin: 0;
    font-weight: normal;
    font-size: 18px;
}

.flex-text p {
    margin: 5px 0 0;
    font-size: 13px;
}

.download-btn {
    display: inline-block;
    margin-top: 20px;
    border: 1px solid #666;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s;
}

.download-btn:hover {
    border-color: #fff;
    background: #333;
}

/* Column 4 */
.footer-text-block {
    margin-bottom: 30px;
    border-bottom: 1px solid #333;
    padding-bottom: 30px;
}

.flex-is-awesome {
    text-align: center;
}

.awesome-icon-circle {
    width: 80px;
    height: 80px;
    border: 2px solid #f35d4b; /* Red circle */
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #f35d4b;
}

.flex-is-awesome h4 {
    color: #999;
    font-weight: 300;
    font-size: 18px;
}

/* New Footer Styles */
.footer-contact-info p {
    margin: 0;
    line-height: 1.6;
}
.footer-contact-info strong {
    color: #fff;
    font-weight: 600;
}
.footer-contact-info .mt-4 {
    margin-top: 15px;
}

.footer-map-container {
    width: 100%;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.footer-map-container iframe {
    width: 100%;
    height: 250px;
    display: block; /* Ensure block display */
    border: 0;
}



/* Stats Section */
.footer-stats {
    padding: 50px 0;
    border-top: 1px solid #333; /* Optional separator */
    /* margin-top: 50px; in flex container usage it might be weird if I don't close the container. I will use a separate container div in html */
}

.footer-stats .container {
    align-items: flex-start;
    justify-content: space-around; /* Spread them out nicely */
    gap: 20px;
}

.stat-item {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.stat-icon-circle-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg); /* Start animation from top */
}

.progress-ring__circle {
    transition: stroke-dashoffset 2s ease-out; /* Smooth fill animation */
    transform-origin: 50% 50%;
}

.stat-icon {
    font-size: 24px;
    color: #38b2e4; /* Blue Theme */
    z-index: 1;
}

.stat-item:hover .stat-icon {
    color: #fff; /* Optional: if we want hover effect on icon */
}

/* Optional: Fill the background on hover? */
.stat-item:hover .progress-ring__circle-bg {
    fill: #38b2e4;
    transition: fill 0.3s;
}
.stat-item:hover .progress-ring__circle {
    stroke: #fff; /* Invert colors on hover */
}

.stat-number {
    display: block;
    font-size: 24px;
    color: #fff; /* White looks cleaner on dark */
    font-weight: 300;
    margin-bottom: 5px;
}

.stat-desc {
    font-size: 13px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Copyright Bar */
.copyright-bar {
    background-color: #111;
    padding: 20px 0;
    margin-top: 0; /* Connected to stats if inside footer */
    font-size: 13px;
    color: #777;
    text-align: center;
    border-top: 1px solid #222;
}

.copyright-bar .container {
    display: flex !important;
    width: 100%;
    justify-content: space-between !important; /* Spread content */
    align-items: center;
}

.copyright-bar a {
    color: #ccc;
    text-decoration: none;
}

.copyright-bar a:hover {
    color: #38b2e4;
}

/* Responsive */
@media (max-width: 991px) {
    .column {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (max-width: 767px) {
    .container {
        flex-direction: column;
    }
    
    /* Center footer stats on mobile */
    .footer-stats .container {
        flex-direction: column;
        align-items: center;
    }
    
    .stat-item {
        text-align: center;
        margin-bottom: 30px;
        width: 100%;
        max-width: 300px;
    }
    
    .stat-number,
    .stat-desc {
        text-align: center;
    }
}
/* Footer Dynamic Menu */
.footer-menu-container {
    margin-top: 10px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 15px;
}

.footer-links-list li::before {
    content: '\f105'; /* Chevron right */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: #38b2e4;
    font-size: 12px;
}

.footer-links-list li a {
    color: #999;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links-list li a:hover {
    color: #fff;
    transform: translateX(5px);
}

.footer-links-list.sub-menu {
    margin-top: 10px;
    margin-left: 15px;
    border-left: 1px solid #333;
    padding-left: 15px;
}

.footer-links-list.sub-menu li {
    margin-bottom: 8px;
    font-size: 13px;
}

.footer-links-list.sub-menu li::before {
    content: '-';
    font-family: inherit;
    color: #555;
}
/* SVG Shape Dividers */
.sppb-shape-container {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}

.sppb-shape-container.sppb-top-shape {
    top: 0;
}

.sppb-shape-container.sppb-bottom-shape {
    bottom: 0;
}

.sppb-shape-container svg {
    position: relative;
    display: block;
}

.sppb-shape-flip {
    transform: scaleX(-1);
}

.sppb-shape-to-front {
    z-index: 10;
}

/* Specific styling for parallax section shapes */
.parallax-section {
    position: relative;
}

.parallax-section .sppb-shape-container.sppb-top-shape > svg path,
.parallax-section .sppb-shape-container.sppb-top-shape > svg polygon {
    fill: rgba(220, 220, 220, 0.25);
}

.parallax-section .sppb-shape-container.sppb-top-shape > svg {
    width: 600%;
    max-width: 600%;
    height: 50px;
}

.parallax-section .sppb-shape-container.sppb-bottom-shape > svg path,
.parallax-section .sppb-shape-container.sppb-bottom-shape > svg polygon {
    fill: #ffffff;
}

.parallax-section .sppb-shape-container.sppb-bottom-shape > svg {
    width: 600%;
    max-width: 600%;
    height: 80px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .parallax-section .sppb-shape-container.sppb-top-shape > svg {
        height: 30px;
    }
    
    .parallax-section .sppb-shape-container.sppb-bottom-shape > svg {
        height: 50px;
    }
}

/* Blog section shape divider */
#latest-posts {
    position: relative;
}

#latest-posts .sppb-shape-container.sppb-top-shape > svg path,
#latest-posts .sppb-shape-container.sppb-top-shape > svg polygon {
    fill: rgba(255, 255, 255, 0.39);
}

#latest-posts .sppb-shape-container.sppb-top-shape > svg {
    width: 600%;
    max-width: 600%;
    height: 25px;
}

/* Animation for shapes */
@keyframes shape-wave {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.sppb-shape-container.animate > svg {
    animation: shape-wave 20s linear infinite;
}
/* Unified Blog Section */
#blog-section {
    position: relative;
    padding: 35px 20px 60px 20px;
    background-image: url('https://picsum.photos/800/640?image=251&blur=2');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: 50% 0;
    overflow: hidden;
}

#blog-section .sppb-row-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(246, 246, 246, 0.6);
    z-index: 1;
}

#blog-section .container {
    position: relative;
    z-index: 2;
}

#blog-section .sppb-shape-container.sppb-top-shape > svg path,
#blog-section .sppb-shape-container.sppb-top-shape > svg polygon {
    fill: rgba(255, 255, 255, 0.39);
}

#blog-section .sppb-shape-container.sppb-top-shape > svg {
    width: 600%;
    max-width: 600%;
    height: 25px;
}

.white-inset-shadow-50 {
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
}

.blog-title-wrapper {
    padding: 30px 10px 10px 10px;
}

.blog-section-title {
    font-family: 'Raleway', sans-serif;
    font-size: 33px;
    font-weight: 300;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
    color: #555;
}

.blog-section-title .major_color {
    color: #38b2e4 !important;
}

/* Progress Bar Decoration */
.progress-bar-decoration {
    margin-bottom: 20px;
}

.progress-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.progress-spacer {
    flex: 5;
}

.progress-bar-container {
    flex: 2;
    min-width: 100px;
}

.sppb-progress {
    height: 2px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 1px;
    overflow: hidden;
    position: relative;
}

.sppb-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, 
        #38b2e4 0%, 
        #38b2e4 100%);
    line-height: 2px;
    transition: width 3s ease 1s;
    width: 0%;
}

/* Animate progress bar on load */
.sppb-progress-bar[data-width] {
    animation: progressAnimation 3s ease 1s forwards;
}

@keyframes progressAnimation {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #blog-section {
        padding: 25px 15px 40px 15px;
        background-attachment: scroll;
    }
    
    .blog-section-title {
        font-size: 24px;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    .blog-title-wrapper {
        padding: 20px 5px 5px 5px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .blog-section-title {
        font-size: 28px;
    }
}
/* Page Banner Styles */
.page-banner {
    position: relative;
    width: 100%;
    height: 350px; /* Default height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 2rem;
}

.page-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay for text contrast */
    z-index: 1;
}

.page-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 1rem;
}

.page-banner-title {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    color: #ffffff;
    line-height: 1.2;
}

.page-banner-content p,
.page-banner-content .page-breadcrumb,
.page-banner-content .single-post-meta {
    margin-top: 10px !important;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-banner {
        height: 250px;
    }
    
    .page-banner-title {
        font-size: 2rem;
    }
}
/* contact.css - Contact Page Styles */

.contact-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.contact-info-box {
    background: #fff;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    text-align: center;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
    border-bottom: 3px solid transparent;
}

.contact-info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-bottom-color: #38b2e4;
}

.contact-icon {
    width: 70px;
    height: 70px;
    background: #38b2e4;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.contact-info-box:hover .contact-icon {
    background: #2a9fd6;
    color: #fff;
}

.contact-info-box h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: #333;
    font-weight: 600;
}

.contact-info-box p {
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.map-section {
    height: 450px;
    width: 100%;
}

.map-section iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Contact Form Styles */
.contact-form-wrapper {
    background: #fff;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #444;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-label span {
    color: #e74c3c;
}

.contact-section .form-control {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 15px;
    color: #555;
    background-color: #fafafa;
    transition: all 0.3s ease;
    font-family: inherit;
}

.contact-section .form-control:focus {
    border-color: #38b2e4;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(56, 178, 228, 0.1);
    outline: none;
}

.contact-section .form-control::placeholder {
    color: #aaa;
}

.btn-submit {
    background-color: #38b2e4;
    color: white;
    padding: 16px 45px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-submit:hover {
    background-color: #2a9fd6;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(42, 159, 214, 0.3);
}

.btn-submit:active {
    transform: translateY(-1px);
}

.btn-submit i {
    margin-right: 10px;
}

.section-subtitle {
    text-align: center;
    color: #777;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 1.8;
}

/* User editable content styles */
.contact-section .page-content-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 50px;
}

.contact-section .page-content-wrapper p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #555;
}

.contact-section .page-content-wrapper h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}

/* Grid helpers */
.contact-section .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.contact-section .col-md-4 {
    width: 33.333%;
    padding: 0 15px;
}

.contact-section .col-md-6 {
    width: 50%;
    padding: 0 15px;
}

.contact-section .col-md-8 {
    width: 66.666%;
    padding: 0 15px;
}

.contact-section .col-md-12 {
    width: 100%;
    padding: 0 15px;
}

.contact-section .mb-30 {
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .contact-form-wrapper {
        padding: 30px 20px;
    }

    .contact-info-box {
        padding: 30px 20px;
    }

    .contact-section .col-md-4,
    .contact-section .col-md-6,
    .contact-section .col-md-8 {
        width: 100%;
    }

    .contact-section .mb-md-30 {
        margin-bottom: 30px;
    }
}
/* Responsive Styles */

/* Fix for 14-inch Laptop Cropping (approx 1280px - 1600px viewports) */
@media (min-width: 1200px) and (max-width: 1650px) {
    #main-header {
        padding: 0 30px !important; /* Reduce excessive padding */
    }

    .main-menu {
        gap: 15px !important; /* Tighter spacing for menu items */
    }
    
    .container {
        padding: 0 30px;
    }
}


@media (max-width: 1200px) {
    .container {
        padding: 0 20px;
    }
    
    /* Ensure hamburger is clearly visible */
    #main-header .menu-toggle {
        display: block !important;
        font-size: 24px;
        padding: 10px; /* Increase touch target */
    }
    
    /* Header */
    #main-header {
        height: auto;
        padding: 15px 0;
    }
    
    #main-header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }
    
    #main-header .main-menu {
        display: none !important;
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        width: 100%;
        background-color: var(--color-header-bg);
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1001;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        padding: 10px 0;
        /* Fix for scroll issue: Ensure menu fits in viewport and is scrollable */
        max-height: 80vh; 
        overflow-y: auto;
    }

    #main-header .main-menu.active {
        display: flex !important;
    }

    #main-header .main-menu li {
        width: 100%;
        position: relative; /* Context for toggle */
        display: flex;
        flex-wrap: wrap; /* Allow submenu to break to new line */
    }

    #main-header .main-menu li a {
        display: block;
        padding: 12px 20px;
        flex-grow: 1; /* Take up available space */
        border-bottom: 1px solid rgba(255,255,255,0.05);
        color: #ffffff; /* Ensure high contrast */
        width: auto; /* Allow flex grwoth */
    }

    /* Submenu Toggle Button */
    .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 46px; /* Match approximately the link height */
        color: #ffffff;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        transition: background-color 0.2s;
    }

    .submenu-toggle:hover {
        background-color: rgba(255,255,255,0.1);
    }

    .submenu-toggle i {
        transition: transform 0.3s ease;
    }

    /* Rotate icon when expanded */
    .dropdown-active > .submenu-toggle i {
        transform: rotate(180deg);
    }
    
    .header-actions {
        margin-left: 0;
    }
    
    /* Hero - keep fixed height for absolute positioning to work */
    #hero {
        height: 600px;
    }
    
    .hero-title {
        font-size: 40px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    /* Responsive arrows */
    .slider-nav {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .slider-prev {
        left: 15px;
    }
    
    .slider-next {
        right: 15px;
    }
    
    /* Features */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Blog */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Mobile dropdown adjustments - override desktop animations */
    .main-menu li ul.dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        box-shadow: none;
        background-color: rgba(0,0,0,0.25);
        padding-left: 15px;
        border-top: none;
        border-left: 2px solid var(--color-accent-primary);
        border-radius: 0;
        min-width: auto;
        width: 100%; /* Full width */
        display: none; /* COLLAPSED BY DEFAULT */
    }

    /* Show when active */
    .main-menu li.dropdown-active > ul.dropdown-menu {
        display: block;
    }

    .main-menu li ul.dropdown-menu li a {
        padding: 10px 15px;
        font-size: 13px;
        width: 100%;
    }

    .main-menu li ul.dropdown-menu li a::before {
        display: none; /* Hide accent bar on mobile */
    }

    .main-menu li ul.dropdown-menu li a:hover {
        padding-left: 20px;
    }

    /* Nested dropdowns on mobile */
    .main-menu li ul.dropdown-menu li ul.dropdown-menu {
        border-left: 1px solid rgba(255,255,255,0.1);
        margin-left: 10px;
        display: none; /* Default collapse nested too */
    }

    .main-menu li ul.dropdown-menu li.dropdown-active > ul.dropdown-menu {
        display: block;
    }

    /* Mobile arrow indicators - hide default css arrows since we have toggle */
    .menu-has-children > a::after {
        display: none;
    }

    .main-menu li ul.dropdown-menu li.menu-has-children > a::after {
        display: none;
    }

    /* Hide underline effect on mobile */
    .main-menu > li > a::before {
        display: none;
    }
}

/* Feature Section Mobile Fix */
@media (max-width: 768px) {
    #features .feature-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    #features .feature-icon {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    #features .feature-title {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
    }
}

@media (max-width: 576px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
        text-align: center;
    }

    #top-bar {
        height: auto !important; /* Allow parent to grow */
    }

    #top-bar .container {
        flex-direction: column;
        gap: 10px;
        height: auto !important; /* Force dynamic height to prevent overlap */
        padding: 10px;
        justify-content: center;
    }

    /* Ensure top-right elements (phone/email) are spaced correctly */
    #top-bar .top-right {
        margin-top: 5px;
        justify-content: center;
        width: 100%;
    }

    #top-bar .social-icons {
        justify-content: center;
        display: flex;
        width: 100%;
    }
}

/* Mobile Slider Fixes */
/* Mobile Slider Fixes */
@media (max-width: 991px) {
    /* Dynamics height for hero section */
    #hero {
        height: auto !important; /* Allow growing */
        min-height: 300px; /* Minimal height for mobile */
        padding-bottom: 0 !important; /* Remove black bar space */
    }

    /* Make active slide take up space in the flow */
    .hero-slide {
        position: absolute; /* Default hidden slides stay absolute */
        height: auto !important;
        min-height: 300px; /* Minimal height for mobile */
    }

    .hero-slide.active {
        position: relative !important; /* Active slide becomes relative to push container height */
        z-index: 2;
    }

    /* Reset parent container to fit screen and use Flexbox */
    .hero-content {
        /* Align with new relative slide */
        position: relative !important; 
        
        width: 100% !important;
        height: auto !important; /* Grow with content */
        min-height: auto; /* No min-height constraint */
        
        left: 0 !important;
        top: 0 !important;
        
        /* Flexbox for vertical stacking */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* Center vertically */
        align-items: center !important;
        padding-top: 60px; /* Reduced from 100px */
        padding-bottom: 40px;
    }

    .hero-content-inner {
        /* Remove absolute positioning so it flows in flex */
        position: static !important;
        transform: none !important;
        
        width: 100% !important;
        padding: 0 20px; /* Reduced side padding */
        text-align: center !important;
        max-width: 100% !important;
        margin-bottom: 20px; /* Space between text and buttons */
    }

    .hero-title {
        font-size: 28px !important; /* Reduced from 42px */
        margin-bottom: 15px;
        line-height: 1.25;
    }

    .hero-subtitle {
        font-size: 15px !important; /* Reduced from 18px */
        margin-bottom: 25px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.5;
    }
    
    /* Reposition custom buttons for mobile */
    .hero-buttons.hero-buttons-custom {
        position: static !important;
        margin-top: 0;
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    
    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 100%; /* Ensure full width for centering */
    }

    /* Constrain button width on mobile - relaxed constraints */
    .hero-buttons .btn,
    .hero-buttons.hero-buttons-custom .btn {
        width: auto !important;
        min-width: 160px; /* Reduced from 200px */
        max-width: 90%;
        margin: 0 !important; /* Handled by gap */
        display: flex; /* Ensure flex for centering content */
        margin-bottom: 10px !important; /* Fallback spacing */
    }
}

/* ============================================
   ENHANCED SCROLL-TRIGGERED SECTION ANIMATIONS
   ============================================ */

/* Base Section Animation State - Hidden Initially */
section.animate-section {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

section.animate-section.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Features Section Animation - Hidden only when .will-animate is added */
#features.will-animate {
    opacity: 0;
    transform: translateY(80px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#features.animated {
    opacity: 1;
    transform: translateY(0);
}

#features.will-animate .feature-box {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#features.animated .feature-box {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#features.animated .feature-box:nth-child(1) { transition-delay: 0.1s; }
#features.animated .feature-box:nth-child(2) { transition-delay: 0.25s; }
#features.animated .feature-box:nth-child(3) { transition-delay: 0.4s; }
#features.animated .feature-box:nth-child(4) { transition-delay: 0.55s; }
#features.animated .feature-box:nth-child(5) { transition-delay: 0.7s; }
#features.animated .feature-box:nth-child(6) { transition-delay: 0.85s; }

/* Blog Section Animation */
#blog-section.will-animate {
    opacity: 0;
    transform: translateY(80px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#blog-section.animated {
    opacity: 1;
    transform: translateY(0);
}

#blog-section.will-animate .blog-post {
    opacity: 0;
    transform: translateY(60px) rotateX(10deg);
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center bottom;
}

#blog-section.animated .blog-post {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

#blog-section.animated .blog-post:nth-child(1) { transition-delay: 0.15s; }
#blog-section.animated .blog-post:nth-child(2) { transition-delay: 0.3s; }
#blog-section.animated .blog-post:nth-child(3) { transition-delay: 0.45s; }
#blog-section.animated .blog-post:nth-child(4) { transition-delay: 0.6s; }

/* Partners Section Animation */
#partners-section.will-animate {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s ease-out;
}

#partners-section.animated {
    opacity: 1;
    transform: translateY(0);
}

#partners-section.will-animate .partner-item {
    opacity: 0;
    transform: scale(0.6) rotate(-5deg);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#partners-section.animated .partner-item {
    opacity: 1;
    transform: scale(1) rotate(0);
}

#partners-section.animated .partner-item:nth-child(1) { transition-delay: 0.1s; }
#partners-section.animated .partner-item:nth-child(2) { transition-delay: 0.2s; }
#partners-section.animated .partner-item:nth-child(3) { transition-delay: 0.3s; }
#partners-section.animated .partner-item:nth-child(4) { transition-delay: 0.4s; }
#partners-section.animated .partner-item:nth-child(5) { transition-delay: 0.5s; }
#partners-section.animated .partner-item:nth-child(6) { transition-delay: 0.6s; }

/* Clients/Testimonials Section Animation */
#clients-section.will-animate {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

#clients-section.animated {
    opacity: 1;
    transform: scale(1);
}

#clients-section.will-animate .clients-content {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.7s ease-out 0.2s;
}

#clients-section.animated .clients-content {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax Section Animation */
.parallax-section.will-animate {
    opacity: 0;
    transition: opacity 1.2s ease-out;
}

.parallax-section.animated {
    opacity: 1;
}

.parallax-section.will-animate .parallax-title {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out 0.3s;
}

.parallax-section.animated .parallax-title {
    opacity: 1;
    transform: translateY(0);
}

.parallax-section.will-animate .parallax-text {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.5s;
}

.parallax-section.animated .parallax-text {
    opacity: 1;
    transform: translateY(0);
}

/* Footer Features Section Animation */
#features-footer.will-animate {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#features-footer.animated {
    opacity: 1;
    transform: translateY(0);
}

#features-footer.will-animate .ff-tab-item {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.5s ease-out;
}

#features-footer.animated .ff-tab-item {
    opacity: 1;
    transform: translateX(0);
}

#features-footer.animated .ff-tab-item:nth-child(1) { transition-delay: 0.1s; }
#features-footer.animated .ff-tab-item:nth-child(2) { transition-delay: 0.2s; }
#features-footer.animated .ff-tab-item:nth-child(3) { transition-delay: 0.3s; }
#features-footer.animated .ff-tab-item:nth-child(4) { transition-delay: 0.4s; }

/* Footer Stats Animation */
.footer-stats.will-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.footer-stats.animated {
    opacity: 1;
    transform: translateY(0);
}

.footer-stats.will-animate .stat-item {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-stats.animated .stat-item {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.footer-stats.animated .stat-item:nth-child(1) { transition-delay: 0.15s; }
.footer-stats.animated .stat-item:nth-child(2) { transition-delay: 0.3s; }
.footer-stats.animated .stat-item:nth-child(3) { transition-delay: 0.45s; }
.footer-stats.animated .stat-item:nth-child(4) { transition-delay: 0.6s; }

/* Footer Main Animation */  
footer.will-animate .main-footer-widgets {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

footer.animated .main-footer-widgets {
    opacity: 1;
    transform: translateY(0);
}

/* Hover Effects After Animation */
#features.animated .feature-box:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

#blog-section.animated .blog-post:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

#partners-section.animated .partner-item:hover {
    transform: scale(1.1);
}

/* Keyframe Animations for Extra Flair */
@keyframes floatIn {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.9);
    }
    60% {
        transform: translateY(-10px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    section,
    .feature-box,
    .blog-post,
    .partner-item,
    .stat-item,
    .ff-tab-item,
    .parallax-section,
    .clients-content,
    footer .main-footer-widgets {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* FIX: Reduced Font Size for Blog Post Banner on Mobile */
@media (max-width: 768px) {
    .page-banner {
        height: 250px;
    }
    
    .page-banner-title {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 480px) {
    .page-banner-title {
        font-size: 1.5rem !important;
    }
}