/* Version: 1.0 Author: Symlink Technology Author URI: https://www.symlinktech.com/. */ /* @import url('https://fonts.googleapis.com/css2?family=Rufina:wght@700&display=swap'); */ @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@500&family=Lobster&family=Rufina:wght@400;700&display=swap'); @font-face{font-family:'ProximaNova-Light';src:url('font/proxima_nova/ProximaNova-Light.otf')} @font-face{font-family:'ProximaNova-Regular';src:url('font/proxima_nova/ProximaNova-Regular.otf')} @font-face{font-family:'ProximaNova-Bold';src:url('font/proxima_nova/ProximaNova-Bold.otf')} :root { --primaryColor: #005C97; --bodyBg: #EBEBEB; --socialBg: #242424; --subTitleColor:#000000; --subTextColor:#5A5A5A; --subTagColor:#2D3350; --commentTextColor:#898989; --TagBg:#EFF1F4; --desColor:#AAACB0; --shades01: #ffffff; --placeHolderColor: #ADADAD; --borderColor: #E9E9E9; --footerColor: #1B3647; --footerCopyColor: #A4A4A4; --backgroundColor: #F6F6F6; --lavelColor: #474747; --lavelColor: #474747; --veiwWidth: calc(100vw - 17px); --padding: calc(var(--veiwWidth)/2 - 785px); } /* ********|| INITIALIZATION STARTS ||******** */ body, html { width: 100%; line-height:18px; margin:0 auto !important;padding:0 !important;font-family: 'ProximaNova-Regular'; -webkit-font-smoothing: subpixel-antialiased;text-shadow: 1px 1px 1px rgba(0,0,0,0.004);font-size: 14px; color: var(--color01); background:var(--bodyBg);position: relative; z-index: 0;} *:focus{outline: none !important;outline-offset: none !important;outline-offset: 0 !important;} a {text-decoration: none ;} a:hover{text-decoration: none;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease;transition: all 0.3s ease;} a:focus{ outline: none;text-decoration: none;} input:focus, label:focus{outline: none !important;outline-offset: none !important;outline-offset: 0 !important;} /* ********|| INITIALIZATION ENDS ||******** */ /* ********|| PSEUDO ELEMENTS STARTS ||******** */ ::selection{ background-color:var(--primaryColor); color:#fff} ::-moz-selection{ background-color:var(--primaryColor); color:#fff} ::-webkit-selection{ background-color:var(--primaryColor); color:#fff} :-webkit-focus { outline: none !important; } :-moz-focus { outline: none !important; } :focus { outline: none !important; } select:-webkit-focusring { color: var(--primaryColor) !important;text-shadow: 0 0 0 var(--textMedColor);} select:-moz-focusring {color: var(--primaryColor) !important;text-shadow: 0 0 0 var(--textMedColor);} select:focusring {color: var(--primaryColor) !important; text-shadow: 0 0 0 var(--textMedColor);} /* ::input-placeholder{ color:var(--textColor) !important;} */ /* ::-moz-input-placeholder{ color:var(--textColor) !important;} */ /* ::-webkit-input-placeholder{ color:var(--textColor) !important;} */ /*::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);box-shadow: inset 0 0 6px rgba(0,0,0,0.1);background-color: var(--textMedColor);} ::-webkit-scrollbar{width: 5px;height: 5px;background-color: var(--textMedColor);} ::-webkit-scrollbar-thumb{background-color: var(--secondaryColorAltLight);}*/ /* ********|| PSEUDO ELEMENTS ENDS ||******** */ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0} /* Firefox */ input[type=number] {-moz-appearance: textfield;} /* ********|| ADJUSTMENT CLASSES STARTS ||******** */ *,::after,::before{box-sizing: border-box;} a{color:var(--primaryColor); transition: all 0.3s ease;} a:hover, a:focus{color:var(--secondaryColor);} p { margin: 0 0 10px; } hr{margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid var(--c4dee4);} .required:after{content:"*";color:#000000; font-size:16px; font-weight:600; position: absolute;margin: 0 0 0 3px;} .separator_dashed{ border-bottom:var(--textMedColor) 1px dashed;} .separator_dotted{ border-bottom:var(--textMedColor) 1px dotted;} .separator_solid{ border-bottom:var(--textMedColor) 1px solid;} /* ********|| ADJUSTMENT CLASSES ENDS ||******** */ section{position:relative;} .form-group{position:relative; margin: 0 0 20px;} .control-label{font-size: 14px;font-weight: 600;margin: 0 0 2px;color: #212121;display: block;} .form-control{ border-radius: 4px;box-shadow: none;border: 1px solid #ddd;color: var(--textColor);background: #fff;min-width: 50px;min-height: 38px;width: 100%;padding: 6px 12px;font-family: inherit;font-size: 14px;} .form-control:focus{ border-color:#ddd;box-shadow: none;} /* .form-control::-webkit-input-placeholder{ color: var(--textColor) !important;} .form-control:-moz-placeholder{color:var(--textColor) !important;opacity: 1 !important;} .form-control::-moz-placeholder{color:var(--textColor) !important; opacity:1 !important;} .form-control:-ms-input-placeholder{color:var(--textColor) !important;} .form-control::-ms-input-placeholder{color:var(--textColor) !important;} */ textarea.form-control{ resize:none; min-height: 100px;} .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{ background-color: #fff; opacity: 0.7; cursor: not-allowed;} .custom-checkbox{position: relative;padding-left: 24px;margin: 3px 0;display: inline-block;} .custom-checkbox .custom-checkbox-input{position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;opacity: 0; cursor: pointer;} .custom-checkbox .custom-checkbox-label{position: relative;margin: 0;line-height: 16px;font-size: 14px;} .custom-checkbox .custom-checkbox-label:before{content:'';position:absolute;width: 16px;height: 16px;background: #fff;border: 1px solid #ddd;top: 50%;left: -24px; transform: translateY(-50%);border-radius: 2px;} .custom-checkbox .custom-checkbox-label:after{content: "\f00c";position: absolute;font-family: "Font Awesome 5 Pro";width: 16px;height: 16px;top: 50%;left: -24px;transform: translateY(-50%); font-weight: 500;font-size: 10px;display: none;color: #fff;text-align: center;} .custom-checkbox .custom-checkbox-input:checked ~ .custom-checkbox-label:after{display:block;} .custom-checkbox .custom-checkbox-input:checked ~ .custom-checkbox-label:before{background: var(--primaryColor);border: 1px solid var(--primaryColor);} .custom-radio{position: relative;padding-left: 24px;margin: 3px 0;display: inline-block;} .custom-radio .custom-radio-input{position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;opacity: 0; cursor: pointer;} .custom-radio .custom-radio-label{position: relative;margin: 0;line-height: 16px;font-size: 14px;} .custom-radio .custom-radio-label:before{content:'';position:absolute;width: 16px;height: 16px;background: #fff;border: 1px solid #ddd;top: 50%;left: -24px; transform: translateY(-50%);border-radius: 50%;} .custom-radio .custom-radio-label:after{content: "\f111";position: absolute;font-family: "Font Awesome 5 Pro";width: 16px;height: 16px;top: 50%;left: -24px;transform: translateY(-50%); font-weight: 600;font-size: 8px;display: none;color: #fff;text-align: center;} .custom-radio .custom-radio-input:checked ~ .custom-radio-label:after{display:block;} .custom-radio .custom-radio-input:checked ~ .custom-radio-label:before{background: var(--primaryColor);border: 1px solid var(--primaryColor);} .custom-tab{} .custom-tab .custom-tab-navigation{padding-left: 0;list-style: none;display: flex;flex-wrap: wrap;justify-content: center;margin: 0 auto 10px;} .custom-tab .custom-tab-navigation > li{width: auto;margin:5px;position: relative;} .custom-tab .custom-tab-navigation > li > a{background-color: rgba(255,255,255,0.1);color: #fff;padding: 10px 20px;display: block;font-size: 16px;font-weight: 400;text-transform: capitalize;position: relative;border-radius: 4px;max-width: 300px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} .custom-tab .custom-tab-navigation > li.active > a,.custom-tab .custom-tab-navigation > li > a:hover{background-color: var(--primaryColor);} .custom-tab .custom-tab-content{} .custom-tab .custom-tab-content .custom-tab-wrap{display: none;background: transparent;padding: 20px 0;} .custom-tab .custom-tab-content .custom-tab-wrap.active{display: block;} .custom-tab .custom-tab-content .custom-tab-navigation > li > a{padding: 5px 10px;font-size: 14px;font-weight: 600;} .custom-tab .custom-tab{margin-top: -20px;} .custom-tab .custom-tab .custom-tab-navigation{margin-bottom: 0;} @media (min-width: 576px){.custom-tab .custom-tab-navigation{max-width:620px}} @media (min-width: 768px){.custom-tab .custom-tab-navigation{max-width:740px}} @media (min-width: 992px){.custom-tab .custom-tab-navigation{max-width:1140px}} @media (min-width: 1200px){.custom-tab .custom-tab-navigation{max-width:1200px}} /* /////////////////////////////////////////////////////////////// */ /* BOOTSTRAP FIX */ /* /////////////////////////////////////////////////////////////// */ @media (min-width: 576px){ :root{ --padding:15px; } .container{max-width: none;} .modal-dialog{max-width: 700px;} .modal-sm{max-width: 400px;} } @media (min-width: 768px){ :root{ --padding:calc(calc(var(--veiwWidth) - 710px) / 2); } .container{max-width: 740px;} } @media (min-width: 992px){ :root{ --padding:calc(calc(var(--veiwWidth) - 930px) / 2); } .container{max-width: 960px;} } @media (min-width: 1200px){ :root{ --padding:calc(calc(var(--veiwWidth) - 1140px) / 2); } .container{max-width: 1170px;} } @media (min-width: 1440px){ :root{ --padding:calc(calc(var(--veiwWidth) - 1310px) / 2); } .container{max-width: 1340px;} } @media (min-width: 1600px){ :root{ --padding:calc(calc(var(--veiwWidth) - 1370px) / 2); } .container{max-width: 1400px;} } @media (min-width: 1900px){ :root{ --padding:calc(calc(var(--veiwWidth) - 1470px) / 2); } .container{max-width: 1500px;} } .modal-open {overflow: auto;} .modal{ overflow-x: hidden; overflow-y: auto;} .overflow-hidden{overflow:hidden !important;} .dropdown .dropdown-toggle{padding-right: 16px !important;position: relative;} .dropdown .dropdown-toggle::after{content: "\f078";font-family: "Font Awesome 5 Pro";font-size: 14px;font-weight: 500;display: block;position: absolute;margin: 0;vertical-align: unset;top: 50%;right: 0;transform: translateY(-50%);border: 0; color: var(--primaryColor); opacity: 1; margin-top: 2px; transition: all 0.3s ease;} .dropdown.show .dropdown-toggle::after{transform: translateY(-50%) rotate(-180deg);} .dropdown .dropdown-menu{display:block;top: 100% !important;left: 50% !important;transform: translate(-50%,50px) !important;visibility: hidden;opacity:0;transition:.5s ease all;} .dropdown .dropdown-menu.show{display:block;transform: translate(-50%,0) !important;visibility: visible;opacity:1;transition:.5s ease all;} .dropdown-menu .dropdown-item{display: flex;padding: 5px 15px;color: var(--secondaryColor);} .dropdown-menu .dropdown-item:focus,.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:active{background: var(--primaryColor);color: #fff;} .mega-dropdown{position:static !important;} .mega-dropdown .mega-dropdown-menu{display:block;width: 100%;top: auto !important;left: 50% !important;transform: translate(-50%,50px) !important;padding: 20px 40px;visibility: hidden;opacity:0;transition:.5s ease all;} .mega-dropdown .mega-dropdown-menu.show{display:block;transform: translate(-50%,0) !important;visibility: visible;opacity:1;transition:.5s ease all;} .dropdown-menu .dropdown-item:disabled{ color : #ced4da; } /*////////////////////////////////////////////////////////////////*/ /* HOME PAGE */ /*////////////////////////////////////////////////////////////////*/ /* ********|| HEADER STARTS ||******** */ header {position: sticky;width: 100%;background-color: var(--primaryColor);z-index: 20;display: flex;align-items: center;height: 120px;} header .container {display: flex; align-items: center; gap: 54px;} header .brand{width: 180px; height: 100%; overflow: hidden;} header .brand img{width: 100%; height: 100%; object-fit: cover; display: block;} /* header .header-left-side { display: flex; align-items: center; gap: 64px;} */ header .search{position: relative;} header .search .search-input {border: none;outline: none;padding: 16px 26px;border-radius: 50px; width: 282px; color: var(--placeHolderColor); font-weight: 400;} header .search .search-input::placeholder {font-size: 18px; } header .search .search-icon {position: absolute;top: 30%;right: 8%;color: var(--placeHolderColor);font-size: 18px;} header .navigation-wrap {margin-left: auto;} header .navigation{ display: flex;align-items: center;} header .navigation .navigation-menu{padding: 0;margin: 0;list-style: none;display: flex; } header .navigation .navigation-menu li {padding: 0 18px;transition: all .3s ease; position: relative;white-space: nowrap; display: flex;align-items: center;} header .navigation .navigation-menu li .navigation-link{display: block; padding: 10px 0;position: relative;z-index: 1;color: var(--shades01);font-size: 20px; font-weight: 700; font-family: 'Rufina'; white-space: nowrap; transition: all .3s ease;} header .navigation .navigation-menu li .navigation-link:before {content: "";height: 2px;width: 100%;left: 0;bottom: 0px;background: var(--shades01);position: absolute;transition: all .3s ease; transform: scale(0,1); transform-origin: center;} header .navigation .navigation-menu li .navigation-link:hover:before, header .navigation .navigation-menu li.active .navigation-link:before {transform: scale(1,1);} /* header .navigation .navigation-menu li .navigation-link:hover{color: var(--borderColor);} */ header .navigation .navigation-menu .navigation-btn{display: flex; align-items: center; justify-content: center; background-color: var(--shades01); padding: 0px 24px; min-width: 200px; height: 50px; font-size: 22px; font-weight: 700; color: var(--primaryColor); border-radius: 50px; font-family: 'ProximaNova-Bold'; transition: all 0.3s ease; border: solid 2px transparent;} header .navigation .navigation-menu li .navigation-btn:hover{background-color: transparent; border: 2px solid var(--shades01); color: var(--shades01);} /* --ADD HEADER START-- */ .add-header{position: relative; padding: 16px 0; background-color: var(--primaryColor);} .add-header .container{display: flex;align-items: center;gap: 14px;} /* .add-header .brand{width: 140px; height: 100%; overflow: hidden;} */ .add-header .brand{width:120px; height: 60px; overflow: hidden;} .add-header .brand img{width: 100%; height: 100%; object-fit: cover;} .add-header .header-draft{color: var(--shades01);} .add-header .header-draft p{margin-bottom: 0;} .add-header .right-header{display: flex; margin-left: auto; align-items: center; gap: 22px;} .add-header .right-header .publish-action{border: none; background-color: var(--shades01); padding: 6px 24px; border-radius: 30px; color: var(--primaryColor); font-size: 16px; cursor: pointer;} .add-header .right-header .publish-action:disabled{ cursor: no-drop; background-color: #adb5bd; color: #8a9197; } .add-header .right-header .btn-group{border: none; display:flex; align-items: center; gap: 2px;} .add-header .right-header .btn-group .dropdown-btn{border: none; font-size: 32px; font-weight: 700; color: var(--desColor); background-color: transparent; margin-bottom: 12px;} .dropdown-toggle::after {display: none;} .add-header .right-header .btn-group .dropdown-profile-image{width: 50px; height:50px; overflow: hidden; background-color: var(--TagBg); border-radius: 50px; padding: 6px; cursor: pointer;} .add-header .right-header .btn-group .dropdown-profile-image img{width: 100%; height: 100%; object-fit: contain;} .add-header .right-header .header-icon{ font-size: 24px; color: var(--desColor);} .header-btn .dropdown-menu.show {position: absolute;inset: 0px auto auto 0px;margin: 0px;transform: translate(-50px, 35px) !important;} /* --- */ .btn-group .unique-dropdown{border-radius: 12px;} .btn-group .unique-dropdown .dropdown-list{} .btn-group .dropdown-list .dropdown-link{display: flex; align-items: center; gap: 8px; font-size: 16px; padding: 12px 10px;} .btn-group .dropdown-list .dropdown-link:hover{background-color: #bee6ff; color: var(--primaryColor) !important;} /* --ADD HEADER END-- */ /* --RESPONSIVE HEADER START-- */ header .responsive-action .btn-menu {height: 40px;display: flex;align-items: center;font-size: 24px;line-height: 1;color: var(--shades01);padding-top: 2px;} header .responsive-action {display: none;} header .menu-overlay {position: fixed;z-index: 10;opacity: 0;visibility: hidden;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;transition: all .4s ease;background-color: rgba(0,0,0,0.5);} header .menu-overlay.active {opacity: 1;visibility: visible;} /* --RESPONSIVE HEADER END-- */ /* ********|| HEADER ENDS ||******** */ /* ********|| BANNER START ||******** */ .section-banner{background-color: var(--primaryColor); padding: 20px 0 40px 0;} .section-banner .banner-title {font-family: 'Rufina'; font-weight: 700; color: var(--shades01); font-size: 66px; margin-bottom: 28px;} .section-banner .banner-descriptions { font-family: 'ProximaNova-Light'; color: var(--shades01); font-size: 22px; line-height: 1.4; padding: 0 100px 30px 0;} .section-banner .banner-actions { display: flex; align-items: center;} .section-banner .banner-actions .btn-action { display: flex; align-items: center; justify-content: center; background-color: var(--shades01); font-size: 22px; padding: 0px 32px; height: 50px; min-width: 200px; font-size: 22px; font-weight: 700; color: var(--primaryColor); border-radius: 50px; font-family: 'ProximaNova-Bold'; transition: all 0.3s ease; border: solid 2px transparent;} .section-banner .banner-actions .btn-action:hover {background-color: transparent; border: 2px solid var(--shades01); color: var(--shades01);} .section-banner .banner-img {width: 100%;max-width: 740px;overflow: hidden; } .section-banner .banner-img { height: 400px;} .section-banner .banner-img img {width: 100%; height: 100%; object-fit: cover;} /* ********|| BANNER ENDS ||******** */ /* ********|| HOME PAGE LAYOUT START ||******** */ .common-layout{position: relative; padding: 48px 0;} .unique-layout{padding: 25px 0;} /* .common-layout.unique-layout{position: relative; padding-top: 20px;} .common-layout.unique-layout::after{position: absolute; content: ''; top: 0; width: 100%; height: 80px; background-color: var(--primaryColor); z-index: 1; } */ /* ********|| FEATURED START ||******** */ .section-featured{position: relative;} .section-featured .title{font-family: 'Rufina'; font-size: 48px; color: var(--primaryColor);margin-bottom: 34px; font-weight: 700;} .featured-listing {display: grid; grid-template-columns: 1fr 1fr; gap: 24px;} .featured-listing .featured-item{display: flex;gap: 20px; background-color: var(--shades01); padding: 16px; border-radius: 32px; justify-content: space-between;} .featured-listing .featured-item .item-image{width: 100px; height: 100px; overflow: hidden; border-radius: 20px;} .featured-listing .featured-item .item-image img{ width: 100%; height: 100%; object-fit: cover;} .featured-listing .featured-item .item-content{position: relative;display: flex; flex-direction: column; width: calc(100% - 100px);} .featured-listing .featured-item .item-title{font-size: 18px; font-family: 'Rufina'; margin-bottom: 12px; line-height: 1.2;} .featured-listing .featured-item .item-title a{color: var(--subTitleColor); display: block; display: -webkit-box; max-width: 100%; margin: 0 auto; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} .featured-listing .featured-item .item-title a:hover{color: var(--primaryColor);} .featured-listing .featured-item .item-information{display: flex; align-items: center; justify-content: space-between;} .featured-listing .featured-item .item-meta{position: relative;display: flex;align-items: center; } .featured-listing .featured-item .item-meta .meta{font-size: 16px; font-family: 'ProximaNova-Light'; color: var(--desColor); display: flex; align-items: center; gap: 24px;} .featured-listing .featured-item .item-meta .meta-data{display: flex; align-items: center; gap: 6px;} .featured-listing .featured-item .item-bookmark{position: relative; overflow: hidden;} .featured-listing .featured-item .item-bookmark .item-bookmark-input{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; cursor: pointer;} .featured-listing .featured-item .item-bookmark .item-bookmark-label{width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 400; color: var(--primaryColor);} .featured-listing .featured-item .item-bookmark .item-bookmark-label:after{content: '\f02e'; font-family: "Font Awesome 6 Pro";} .featured-listing .featured-item .item-bookmark .item-bookmark-input:checked ~ .item-bookmark-label{font-weight: 600;} /* ********|| FEATURED END ||******** */ /* ********|| GOOGLE ADS START ||******** */ .google-adds{padding: 48px 0;} .google-adds .google-add-img{width: 100%; overflow: hidden;} .google-adds .google-add-img img{width: 100%; height: 100%; object-fit: cover;} /* ********|| GOOGLE ADS END ||******** */ /* ********|| BLOG START ||******** */ .section-blog{position: relative;} .blog-listing{display: flex;flex-direction: column;gap: 24px;} .blog-listing .blog-item{display: flex; gap: 28px; max-width: 100%;background-color: var(--shades01); padding: 26px 32px; border-radius: 40px; justify-content:space-between;} .blog-listing .blog-item .item-image{width: 260px; height: 300px; border-radius: 40px; overflow: hidden;} .blog-listing .blog-item .item-image img{ width: 100%; height: 100%; object-fit: cover;} .blog-listing .blog-item .item-content{position: relative; display: flex; flex-direction: column; width: calc(100% - 260px);} .blog-listing .blog-item .item-content .item-header{display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px;} .blog-listing .blog-item .item-content .item-header .item-tag{display: flex; align-items: center; flex-wrap: wrap; gap: 6px;} .blog-listing .blog-item .item-content .item-header .item-tag .tag{background-color: var(--TagBg); color: var(--subTagColor); padding: 8px 28px; border-radius: 50px; display: flex; align-items: center; justify-content: center; font-size: 16px;} .blog-listing .blog-item .item-content .item-header .item-share{display: flex;align-items: center;display: -webkit-box;max-width: 100%;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; margin-left: auto;} .blog-listing .blog-item .item-content .item-header .item-share .item-action{border: none;background: none;color: #5a5a5a;font-size: 18px;} .blog-listing .blog-item .item-content .item-title{font-size: 26px;font-family: 'Rufina';font-weight: 400;line-height: 1.2;margin-bottom: 12px;} .blog-listing .blog-item .item-content .item-title a{color: var(--subTitleColor); display: block; display: -webkit-box; max-width: 100%; margin: 0 auto; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} .blog-listing .blog-item .item-content .item-title a:hover{color: var(--primaryColor);} .blog-listing .blog-item .item-content .item-description{font-size: 16px;line-height: 1.4;font-family: 'ProximaNova-Light';color: #5a5a5a;margin-bottom: 12px;} .blog-listing .blog-item .item-content .item-information{display: flex;align-items: center;justify-content: space-between; margin-top: auto;} .blog-listing .blog-item .item-content .item-meta{position: relative;display: flex;align-items: center; gap: 24px;} .blog-listing .blog-item .item-content .item-meta .meta{font-size: 16px; font-family: 'ProximaNova-Light'; color: var(--desColor); display: flex; align-items: center; gap: 24px;} .blog-listing .blog-item .item-content .item-meta .meta-data{display: flex; align-items: center; gap: 6px;} .blog-listing .blog-item .item-bookmark{position: relative; overflow: hidden; } .blog-listing .blog-item .item-bookmark .item-bookmark-input{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; cursor: pointer;} .blog-listing .blog-item .item-bookmark .item-bookmark-label{width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 400; color: var(--primaryColor);} .blog-listing .blog-item .item-bookmark .item-bookmark-label:after{content: '\f02e'; font-family: "Font Awesome 6 Pro";} .blog-listing .blog-item .item-bookmark .item-bookmark-input:checked ~ .item-bookmark-label{font-weight: 600;} /* ********|| BLOG END ||******** */ /* ********|| HOME PAGE ASIDE START ||******** */ .common-layout .common-aside{background-color: var(--shades01); border-radius: 40px; padding: 40px 30px; display: flex; flex-direction: column; gap: 50px;} .common-layout .common-aside .section-widget:first-child{ gap: 20px;} /* ********|| HOME PAGE ASIDE END ||******** */ /* ********|| LATEST POST START ||******** */ .section-latest-post{position: relative; display: flex; flex-direction: column;} .section-latest-post .aside-title {font-size: 28px; font-family: 'Rufina'; font-weight: 700; color: var(--primaryColor); margin-bottom: 24px;} .latest-post-listing {position: relative; display: flex; flex-direction: column; gap: 24px;} .latest-post-listing .latest-post-item{display: flex; gap: 20px; border-radius: 30px; background-color: var(--shades01);} .latest-post-listing .item-image {width: 100px; height: 90px; overflow: hidden; border-radius: 20px;} .latest-post-listing .item-image img {width: 100%; height: 100%; object-fit: cover;} .latest-post-listing .item-content {display: flex; flex-direction: column; width: calc(100% - 100px);} .latest-post-listing .item-content .item-title {font-size: 18px; font-family: 'Rufina'; font-weight: 700; line-height: 1.2; margin-bottom: 12px;} .latest-post-listing .item-content .item-title a {color: var(--subTitleColor); display: -webkit-box;max-width: 100%;margin: 0 auto;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;} .latest-post-listing .item-content .item-title a:hover {color: var(--primaryColor);} .latest-post-listing .item-content .item-information{position: relative; display: flex;align-items: center;justify-content: space-between;} .latest-post-listing .item-content .item-meta {position: relative;display: flex;align-items: center; gap: 24px;} .latest-post-listing .item-content .item-meta .meta{font-size: 16px; font-family: 'ProximaNova-Light'; color: var(--desColor); display: flex; align-items: center; gap: 24px;} .latest-post-listing .item-content .item-meta .meta .meta-data{display: flex; align-items: center; gap: 6px;} /* ********|| LATEST POST END ||******** */ /* ********|| TAGS START ||******** */ .section-widget{position: relative; display: flex; flex-direction: column; gap: 24px;} .section-widget .widget-header{display: flex; justify-content: space-between; align-items: center;} .section-widget .widget-header .widget-title{font-size: 28px; font-family: 'Rufina'; font-weight: 700; color: var(--primaryColor);} .section-widget .widget-header .widget-actions {display: flex; align-items: center; gap: 12px;} .section-widget .widget-header .widget-actions .btn-action{font-size: 16px; color: var(--subTextColor); text-transform: capitalize;} .tag-listing{position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;} .tag-listing .tag-item{display: flex; align-items: center;} .tag-listing .tag-item .btn-tag{border: none; outline: none; font-size: 18px; padding: 12px 40px; display: flex; align-items: center; justify-content: center; border-radius: 50px; color: var(--subTagColor); text-transform: capitalize;} .tag-listing .tag-item .btn-tag:hover{background-color: #daf0ff;} /* ********|| TAGS END ||******** */ /* ********|| CATEGORY START ||******** */ .category-listing {position: relative; display: flex; flex-direction: column; gap: 10px;} .category-listing a{color: var(--subTagColor);} .category-listing a:hover{color: var(--primaryColor);} .category-listing .category-item {display: flex; justify-content: space-between; align-items: center; background-color: var(--shades01); border: 1px solid var(--borderColor); padding: 12px; border-radius: 10px;} .category-listing .category-item .category-title {font-size: 18px; text-transform: capitalize;} .category-listing .category-item .item-inforamtion {position: relative; display: flex;align-items: center;justify-content: space-between;} .category-listing .category-item .item-meta {position: relative; display: flex;gap: 6px;} .category-listing .category-item .item-meta .meta {display: flex; align-items: center;} .category-listing .category-item .item-meta .meta:first-child .meta-data { background-color: var(--primaryColor); color: var(--shades01); width: 25px; height: 25px; padding: 4px; display: flex; justify-content: center; align-items: center; border-radius: 50px;} .category-listing .category-item .item-meta .meta-data { font-size: 15px; color: var(--subTextColor);} /* ********|| CATEGORY END ||******** */ /* ********|| NEWSLETTER START ||******** */ .section-newsletter{position: relative; background-color: var(--primaryColor); padding: 62px 24px; border-radius: 40px; text-align: center;} .section-newsletter .newsletter-title{font-size: 48px; font-family: 'Rufina'; font-weight: 700;margin-bottom: 26px; color: var(--shades01);} .section-newsletter .newsletter-subheading{font-size: 16px; color: var(--shades01); line-height: 1.2; margin-bottom: 24px;} .form-content{position: relative; display: flex; align-items: center; flex-direction: column;} .form-content .form-group{width: 100%; max-width: 100%; margin: 0 0 18px;} .form-content .form-group .form-control{border-radius: 50px; height: 45px; padding: 0px 24px;} .form-content .form-group .form-control::placeholder {color: #dadada;} .form-content .btn-form{width: 100%; border: none; outline: none; background-color: var(--shades01); color: var(--subTitleColor); display: flex; align-items: center; height: 45px; justify-content: center; border-radius: 50px; font-size: 20px; font-family:'ProximaNova-Bold'; border: 2px solid transparent; transition: all 0.3s ease;} .form-content .btn-form:hover{ background-color: transparent; border: 2px solid var(--shades01); color: var(--shades01);} /* ********|| NEWSLETTER END ||******** */ /* ********|| FOLLOW US START ||******** */ .section-widget .social-media{display: flex; align-items: center; gap: 10px;} .section-widget .social-media .social-media-icon{ width: 45px; height: 45px; background-color: var(--TagBg); color: var(--primaryColor); border-radius: 50px; display: flex; align-items: center; justify-content: center; font-size: 18px;} /* ********|| FOLLOW US END ||******** */ /* ********|| GOOGLE ADS START ||******** */ .section-widget .google-adds-img-wrap{ width: 100%; height: 640px; overflow: hidden;} .section-widget .google-adds-img-wrap img{width: 100%; height: 100%; object-fit: cover;} /* ********|| GOOGLE ADS END ||******** */ /* ********|| HOME PAGE LAYOUT END ||******** */ /* ********|| BLOG PAGE LAYOUT START ||******** */ .section-blog-content{max-width: 100%; background-color: var(--shades01); padding: 26px 32px; border-radius: 40px;} .section-blog-details{position: relative;} .section-blog-details .blog-details-image{ width: 100%; height: 550px; overflow: hidden; border-radius: 30px;} .section-blog-details .blog-details-image img{width: 100%; height: 100%; object-fit: cover;} .section-blog-details .blog-information{position: relative; display: flex; justify-content: space-between; align-items: center; border-top: 2px solid #ECECEC; border-bottom: 2px solid #ECECEC; padding: 12px 10px; margin-top: 52px;} .blog-information .item-meta-tag{position: relative;display: flex;align-items: center;gap: 12px;flex-wrap: wrap;} .blog-information .item-meta-tag .btn-tag{width: 155px; height: 40px; background-color: var(--TagBg); color: var(--subTagColor); border: none; border-radius: 50px; font-size: 18px; outline: none; background-color: none;} .blog-information .item-meta{position: relative; display: flex; gap: 24px; align-items: center;} .blog-information .item-meta .meta{font-size: 24px;font-family: 'ProximaNova-Light';color: var(--desColor);display: flex;align-items: center;gap: 24px;} .blog-information .item-meta .meta .meta-data{display: flex;align-items: center;gap: 6px;} .blog-information .item-meta .meta-bookmark{position: relative; overflow: hidden;} .blog-information .item-meta .meta-bookmark .item-bookmark-input{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; cursor: pointer;} .blog-information .item-meta .meta-bookmark .item-bookmark-label{width: 30px; height: 30px; display: flex; justify-content: center;align-items: center; font-size: 22px; font-weight: 400; } .blog-information .item-meta .meta-bookmark .item-bookmark-label::after{content: '\f02e'; font-family: "Font Awesome 6 Pro";} .blog-information .item-meta .meta-bookmark .item-bookmark-input:checked ~ .item-bookmark-label{font-weight: 600; color: var(--primaryColor);} .blog-information .item-meta .meta-share{display: flex; align-items: center;} .blog-information .item-meta .meta-share .item-action{border: none; outline: none; font-size: 22px; color: #5a5a5a; background-color: transparent;} .section-blog-details .blog-details {position: relative; display: flex;flex-direction: column; gap: 24px; padding: 30px 10px;} .section-blog-details .blog-details .blog-details-title {font-family: 'Rufina';font-size: 24px;line-height: 1.6; font-weight: 400;} .author-information {position: relative; display: flex; align-items: center; gap: 20px;} .author-information .author-image {width: 64px; height: 64px; border-radius: 50px; overflow: hidden;} .author-information .author-image img {width: 100%; height: 100%; object-fit: cover;} .author-information .author-details {position: relative; display: flex; flex-direction: column; gap: 6px; width: calc(100% - 74px);} .author-information .author-details .author-title{ font-size: 20px; color: var(--subTagColor); font-family: 'ProximaNova-Bold'; } .author-information .author-details .author-text{font-size: 18px; color: var(--subTextColor); line-height: 1.4; font-family: 'ProximaNova-Light';} .author-information .author-details .post-date{font-size: 18px; color: var(--subTextColor); line-height: 1.2; font-family: 'ProximaNova-Light';} .section-blog-details .blog-content {position: relative;} .section-blog-details .blog-content div h1{font-family: 'Rufina'; font-size: 24px; line-height: 1.6; font-weight: 400; color: #000;} .section-blog-details .blog-content div P{font-family:'ProximaNova-Light'; font-size: 16px; line-height: 1.6;} .section-blog-details .blog-content div{font-size: 18px; line-height: 1.6; color: var(--subTextColor); font-family: 'ProximaNova-Light';} .section-blog-details .blog-content img{width: 100%; display: block; height: 520px; margin-bottom: 24px; border-radius: 30px;} .section-blog-content .author-content {position: relative; display: flex; flex-direction: column;} .author-content .author-information{padding: 30px 10px; display: flex; align-items: center;} /* .author-content .author-information .author-image{width: 420px;} .author-content .author-information .author-image img{width: 100%; height: 100%; object-fit: cover;} */ .author-content .author-blogs{position: relative; display: flex; gap: 24px; width: 100%;} .author-content .author-blogs .author-blog{background-color: #F4F4F4; border-radius: 30px; padding: 20px; width: 50%; display: flex; flex-direction: column;} .author-blogs .author-blog .author-blog-image{width: 100%; height: 275px; border-radius: 30px; overflow: hidden; } .author-blogs .author-blog .author-blog-image img{ width: 100%; height: 100%; object-fit: cover;} .author-blogs .author-blog .author-information{padding: 20px 0px;} .author-blogs .author-blog .author-information .author-image{width: 50px; height: 50px; overflow: hidden;} .author-blogs .author-blog .author-information .author-image img{width: 100%; height: 100%; object-fit: cover;} .author-blogs .author-blog .author-information .author-details{position: relative;} .author-blogs .author-blog .author-details .author-title{font-size: 20px; font-family: 'ProximaNova-Light'; line-height: 1.2;} .author-blogs .author-blog .author-blog-title{font-family: 'Rufina';font-weight: 700;font-size: 20px;line-height: 1.4;color: var(--subTitleColor); margin-bottom: 6px; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } .author-blogs .author-blog .author-blog-title a{color: var(--subTitleColor);} .author-blogs .author-blog .author-blog-title a:hover{color: var(--primaryColor);} .author-blogs .author-blog .author-blog-details{font-size: 18px; line-height: 1.4; color: var(--subTextColor); margin-bottom: 20px;} .author-blogs .author-blog .author-blog-details div{font-size: 18px;line-height: 1.6px;color: var(--subTextColor);} .author-blogs .author-blog .author-blog-information{ display: flex;justify-content: space-between;align-items: center; margin-top: auto;} .author-blog-information .meta{position: relative; display: flex; align-items: center; gap: 6px;} .author-blog-information .meta .meta-data{display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--desColor);} .author-blog-information .item-meta{ display: flex;align-items: center;gap: 20px;} .author-blog-information .item-meta .meta-bookmark{position: relative;overflow: hidden;} .author-blog-information .item-meta .meta-bookmark .item-bookmark-input{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; cursor: pointer;} .author-blog-information .item-meta .meta-bookmark .item-bookmark-label{width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; font-size: 22px; font-weight: 400; color: var(--primaryColor);} .author-blog-information .item-meta .meta-bookmark .item-bookmark-label::after{content: '\f02e'; font-family: "Font Awesome 6 Pro";} .author-blog-information .item-meta .meta-bookmark .item-bookmark-input:checked ~ .item-bookmark-label{font-weight: 600;} .author-blog-information .item-meta .meta-share{} .author-blog-information .item-meta .meta-share .item-action{border: none; background-color: transparent; font-size: 20px; color: var(--desColor);} /* ********|| BLOG PAGE LAYOUT END ||******** */ /* ********|| TOPIC PAGE LAYOUT START ||******** */ .section-banner .banner-headline{text-align: center; font-size: 82px; color: var(--shades01); font-family: 'Rufina'; font-weight: 700;} .section-topic{position: relative; background-color: var(--shades01); border-radius: 30px; padding: 26px 32px;} .section-topic .topic-header{position: relative; display: flex; align-items: center; justify-content: space-between;} .topic-header .topic-author{display: flex; align-items: center; gap: 16px;} .topic-header .topic-author .author-img{width: 72px; height: 72px; border-radius: 50px; overflow: hidden;} .topic-header .topic-author .author-img img{width: 100%; height: 100%; object-fit: cover;} .topic-header .topic-author .author-details{display: flex; flex-direction: column; gap: 12px;} .topic-header .topic-author .author-details .author-name{font-size: 24px; font-family: 'ProximaNova-Regular'; color: var(--subTagColor);} .topic-header .topic-author .author-details .author-sub-details{ display: flex; gap: 16px; } .topic-header .topic-author .author-details .author-sub-details .author-address{display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--desColor); font-family: 'ProximaNova-Light';} .topic-header .topic-author .author-details .author-sub-details .post-date{display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--desColor); font-family: 'ProximaNova-Light';} .topic-header .topic-header-data {display: flex; gap: 24px; justify-content: center; align-items: center;} .topic-header .data-list{font-size: 16px; color: var(--desColor); font-family: 'ProximaNova-Light';} .topic-header .data-text{font-size: 16px; color: var(--desColor); font-family: 'ProximaNova-Light';} .topic-header .topic-header-data .answer-details{display: flex; flex-direction: column; align-items: center; justify-items: center;} .topic-header .topic-header-data .view-details{display: flex; flex-direction: column; align-items: center; justify-items: center;} .topic-header .topic-header-data .share-details {display: flex; flex-direction: column; align-items: center; justify-items: center;} .section-topic .topic-content{display: flex; flex-direction: column; gap: 6px; background-color: var(--backgroundColor); border-radius: 25px; padding: 24px; margin: 42px 0 0 0;} .topic-content .topic-question{font-size: 24px; font-family: 'Rufina'; color: var(--subTitleColor); line-height: 1.2; margin-bottom: 10px;} .topic-content .topic-question-details{font-size: 18px; color: var(--subTextColor); line-height: 1.4; margin-bottom: 12px; font-family: 'ProximaNova-Light';} .blog-information{margin-left: auto;} .topic-content .topic-question-details .editorjs{position: relative;} .topic-content .topic-question-details .editorjs h1{font-size: 24px; font-family: 'Rufina'; color: var(--subTitleColor); line-height: 1.2; margin-bottom: 10px;} .topic-content .topic-question-details .editorjs p{font-size: 18px; line-height: 1.4; color: var(--subTextColor); margin-bottom: 20px;} .topic-content .topic-question-details .editorjs img{width: 100%; display: block; height: auto; margin-bottom: 24px; border-radius: 30px;} .topic-content .topic-actions{display: flex; align-items: center; justify-content: space-between;} .topic-content .topic-actions .answer-action{ font-size: 18px; background-color: var(--primaryColor); width: 180px; height: 50px; display: flex; align-items: center; justify-content: center; color: var(--shades01); border-radius: 50px; transition: all 0.3s ease; cursor: pointer; } .topic-content .topic-actions .answer-action:hover{ border: 2px solid var(--primaryColor); background-color: transparent; color: var(--primaryColor);} .topic-content .topic-actions .post-share{font-size: 24px; color: var(--desColor); cursor: pointer;} .section-comment{background-color: var(--backgroundColor); border-radius: 20px; overflow: hidden; margin-top: 24px; margin-bottom: 12px;} .section-comment .comment-title{color: var(--subTitleColor); font-family: 'ProximaNova-Regular'; font-size: 24px; background-color:#F3F3F3; width: 100%; height: 65px; object-fit: cover; display: flex; align-items: center; padding: 0 24px; gap: 6px;} .section-comment .comment{padding: 32px 24px;display: flex;gap: 20px;} .comment .user-image{width: 55px;height: 50px;border-radius: 50px;overflow: hidden;display: flex;align-items: center;justify-content: center;background-color: #F9F9F9; color: var(--desColor); font-size: 20px;} .comment .user-style{border: 1px solid var(--borderColor);} .comment .user-image img{width: 100%; height: 100%; object-fit: cover;} .comment .content-comment{position: relative;display: flex;flex-direction: column;gap: 6px;flex-grow: 1;flex-shrink: 1;width: calc(100% - 54px);} .comment .content-comment .main-comment{position: relative; display: flex;flex-direction: column;margin: 14px 0;} .section-comment .user-details{display: flex;align-items: center; gap: 12px;} .section-comment .user-details .user-title{margin-bottom: 0; font-size: 18px; color: var(--subTagColor);} .section-comment .user-details span{display: flex; align-items: center; gap: 6px; color: var(--subTextColor);font-family: 'ProximaNova-Light';} .comment .content-comment .main-comment .comment-answers{font-size: 18px; line-height: 1.4; color: var(--commentTextColor); margin-top: 10px; font-family: 'ProximaNova-Light'; word-break: break-all;} .comment .content-comment .main-comment .content-footer{display: flex; align-items: center; gap: 12px; padding: 12px 0; } .comment .content-comment .main-comment .content-footer .comment-action{display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; outline: none; background-color: var(--primaryColor);min-width: 100px;height: 30px;color: var(--shades01);border-radius: 50px;font-family: 'ProximaNova-Light';transition: all 0.3s ease;border: solid 2px transparent;text-transform: capitalize;} .comment .content-comment .main-comment .content-footer .comment-action i{font-size: 12px;} .comment .content-comment .main-comment .content-footer .comment-action:hover{color: var(--primaryColor);border: solid 1px var(--primaryColor); background-color: var(--shades01);} .comment .content-comment .subcomment{border: 1px solid var(--borderColor); border-radius: 20px;} .subcomment .other_comments{position: relative; display: flex; flex-direction: column;} .subcomment .other_comments .comment-box{position: relative; border-bottom: 1px solid var(--borderColor); } .subcomment .other_comments .comment-box:last-child{border: none;} .subcomment .other_comments .comment-box .subcomment-content{padding: 6px 6px; display: flex; gap: 20px;} .subcomment .other_comments .comment-box .subcomment-content .content-comment .comment-answers{font-size: 18px; line-height: 1.4; color: var(--commentTextColor); font-family: 'ProximaNova-Light'; word-break: break-all;} .comment-box .subcomment-content .content-comment .input-box-details{display: flex; align-items: center;} .comment-box .subcomment-content .content-comment .input-box-details textarea{width: 100%;border-radius: 20px;background-color: #fff;border: 1px solid var(--borderColor); padding: 12px;} .comment-box .subcomment-content .content-comment .send-action{display: flex; justify-content: center;align-items: center; width: 120px;border-radius: 50px;outline: none;border: noe;border: none;height: 40px; background-color: var(--primaryColor); border: 2px solid transparent; color: var(--shades01); font-family: 'ProximaNova-Regular'; font-size: 18px; margin-top: 10px; transition: all 0.3s ease;} .comment-box .subcomment-content .content-comment .send-action:hover{border: 2px solid var(--primaryColor); background-color: transparent; color: var(--primaryColor);} /* ------------- */ .comment-box{padding: 12px 24px;} .comment-box .comment-cancel-btn{ display: flex; align-items: center; position: relative; margin-bottom: 12px;} .comment-box .comment-cancel-btn .comment-reply-title { display: flex; align-items: center; font-size: 14px; color: var(--commentTextColor); font-family: 'ProximaNova-Light'; text-transform: capitalize;} .comment-box .comment-cancel-btn .comment-reply-title div { display: flex; align-items: center; gap: 6px;} .comment-box .comment-cancel-btn .comment-reply-title div i{ font-size: 14px;} .comment-box .comment-cancel-btn .btn-close{display: flex; margin-left: auto; font-size: 12px; color: var(--shades01) !important;border-radius: 50%; opacity: 1; background: none; background-color: var(--primaryColor); width: 14px;height: 14px;align-items: center; justify-content: center; } .comment-box .subcomment-content{display: flex; gap: 12px;} .comment-box .subcomment-content .user-image{width: 55px; height: 55px; border-radius: 50%; background-color: var(--bodyBg);display: flex; justify-content: center; align-items: center; } .comment-box .subcomment-content .user-image i{font-size: 20px;} .comment-box .subcomment-content .content-comment{width: calc(100% - 55px);} /* ********|| TOPIC PAGE LAYOUT END ||******** */ /* ********|| CATEGORY PAGE LAYOUT START ||******** */ /* .common-section {position: relative; display: flex; flex-wrap: wrap; gap: 20px;} */ .common-section {display: flex; margin: 0 -15px; flex-wrap: wrap; position: relative;} /* .common-section .common-item{position: relative; display: flex; flex-direction: column; background-color: var(--shades01); border-radius: 40px; padding: 24px;} */ .common-section .common-item{position: relative; width: 33.33%;max-width: calc(33.33% - 30px);margin: 15px;background: var(--shades01);overflow: hidden;border-radius: 40px; padding: 24px;display: flex;flex-direction: column;} .common-item .common-image{width: 100%; height: 300px; border-radius: 20px; overflow: hidden;} .common-item .common-image img{width: 100%; height: 100%; object-fit: cover;} .common-item .common-content{position: relative; display: flex; flex-direction: column;padding: 40px 0 24px 0;gap: 26px;} .common-item .common-content a{font-size: 40px; color: var(--subTagColor); font-family: 'Rufina'; font-weight: 700; display: block;} .common-item .common-content a:hover{color: var(--primaryColor);} .common-item .common-content .common-data-details{display: flex;align-items: center;gap: 6px; font-size: 20px; color: var(--commentTextColor); font-family: 'ProximaNova-Regular';} .common-item .common-content .common-text{text-transform: capitalize;} /* ********|| CATEGORY PAGE LAYOUT END ||******** */ /* ********|| LOGIN PAGE LAYOUT START ||******** */ .login-box{position: relative; width: 600px !important;} .login-box .login-header{display: flex; flex-direction: column; align-items: center; gap: 14px;} .login-box .login-header .login-beand{width: 200px; height: 80px; overflow: hidden;} .login-box .login-header .login-beand img{width: 100%; height: 100%; object-fit: cover;} .login-box .login-header .login-heading{ display: flex; list-style: circle; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 24px;} .login-header .login-title{ font-size: 48px; color: var(--subTitleColor); margin-bottom: 6px; font-family: 'ProximaNova-Bold'; text-transform: capitalize;} .login-header .login-subheading{ font-size: 16px; color: var(--subTextColor); margin-bottom: 6px; font-family: 'ProximaNova-Regular';} .login-box .form-content .submit-btn{display: flex; flex-direction: column-reverse; gap: 24px; } .login-box .form-content .submit-action{width: 100%; border-radius: 50px;font-size: 20px; font-family: 'ProximaNova-Bold'; text-transform: capitalize; background-color: var(--primaryColor); color: var(--shades01); border: none; outline: none; height: 50px; display: flex; align-items: center; justify-content: center;} .login-box .form-content .forget-action{text-align: right;} .login-box .login-socialmedia {text-align: center; padding: 12px 0 0 0;} .login-box .login-socialmedia .sub-text{position: relative; font-size: 18px; color:var(--commentTextColor) ; font-family: 'ProximaNova-Light';} .login-box .login-socialmedia .sub-text:after{content: '';position: absolute;width: 25%;height: 0.2px;background-color: #b3b3b4;top: 50%;transform: translate(0%, -50%);left: 10%; margin-bottom: 14px;} .login-box .login-socialmedia .sub-text::before{content: '';position: absolute;width: 25%;height: 0.2px;background-color: #b3b3b4;top: 50%;transform: translate(0%, -50%);right: 10%;} .login-box .login-socialmedia .socialmedia-action {display: flex;align-items: center;justify-content: center;gap: 12px; margin: 15px 0 50px 0;} .login-box .login-socialmedia .socialmedia-action a{border-radius: 50px; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 24px;} /* ********|| LOGIN PAGE LAYOUT END ||******** */ /* ********|| LIST PAGE LAYOUT START||******** */ .section-all-list{position: relative; padding: 48px 0 0 0 ;} .section-all-list .list-header{position: relative;} .section-all-list .list-image{width: 100%; height: 220px; overflow: hidden; border-radius: 40px;} .section-all-list .list-image img{width: 100%; height: 100%; object-fit: cover;} .section-all-list .banner-headline{position: absolute;top: 0;right: 50%;left: 50%;transform: translate(-50%, 50%);background-color: var(--shades01);border-radius: 20px;width: 370px;height: 100px;display: flex;align-items: center;flex-direction: column;justify-content: center;} /* .section-all-list .banner-headline .title{font-family: 'Rufina'; width: 117px;height: 20px; line-height: 1; margin-bottom: 16px;} */ .section-all-list .banner-headline .title{font-family: 'Rufina'; line-height: 1;} .section-all-list .banner-headline .sub-title{font-family: 'Proxima Nova';font-style: normal;font-weight: 400;font-size: 18px;line-height: 1.2;color: var(--subTextColor);} /* ********|| LIST PAGE LAYOUT END||******** */ /* ********|| PROFILE PAGE LAYOUT START ||******** */ .user-profile{display: flex; align-content: center; gap: 6px;} .user-profile .user-image{width: 40px; height: 40px;border-radius: 50px; overflow: hidden; border: 2px solid var(--shades01);} .user-profile .user-image img{width: 100%; height: 100%; object-fit: cover;} .user-profile .btn-group{} .user-profile .btn-group .user-name{border: none; outline: none; color: var(--shades01); font-size: 18px; font-weight: 700; background-color: transparent;} .user-profile .btn-group .dropdown-menu{position: relative;} .user-profile .btn-group .dropdown-menu .dropdown-item{} .user-dashboard{display: flex; flex-direction: column; gap: 12px; background-color: var(--shades01); border-radius: 20px; padding: 20px 10px;} .user-dashboard .nav-item{ list-style: none; font-size: 18px; font-weight: 400; color: var(--subTextColor); padding: 15px 10px; border-bottom: 1px solid var(--bodyBg);} .user-dashboard .nav-item.active{background-color: var(--TagBg);border-radius: 10px;} .user-dashboard .nav-item .nav-item-wrapper{ list-style: none; font-size: 18px;} .user-dashboard .nav-item .nav-item-wrapper .nav-link-text{ list-style: none; font-size: 18px; font-weight: 400; color: var(--subTextColor);} .profile-account{position: relative; display: flex; flex-direction: column; gap: 12px; background-color: var(--shades01); border-radius: 0 0 20px 20px; padding: 0 32px 32px;} .profile-account::after{content: '';display: block; position: absolute; background: var(--primaryColor); height: 50px; width: 100vw; left: 50%; transform: translateX(-50%); top: -50px;} .profile-account .profile-top{position: relative; display: flex; align-items: center; justify-content: space-between; z-index: 9; margin-top: -60px;} .profile-account .profile-top .profile-image-box{ display: flex; align-items: flex-end; gap: 24px;} .profile-account .profile-top .profile-image-box .profile-image-edit-box{ position: relative;} .profile-account .profile-top .profile-image-wraper{width: 150px; height: 150px; border-radius: 100px; overflow: hidden; box-shadow: 0 0px 6px 2px rgb(0 0 0 / 32%); border: 2px solid var(--shades01); } .profile-account .profile-top .profile-image-wraper img{width: 100%; height: 100%; object-fit: cover;} .profile-account .profile-top .profile-edit-icon{position: absolute; width: 40px;height: 40px;right: 0%;bottom: 6%; border: 1px solid var(--primaryColor); color: var(--primaryColor); background-color: var(--shades01); display: flex; align-items: center; justify-content: center; border-radius: 50px;} .profile-account .profile-top .user-name{margin-bottom: 70px;} .profile-account .profile-top .user-name .user-title{font-size: 20px; color: var(--subTitleColor); margin-bottom: 6px; font-family: 'ProximaNova-Regular';} .profile-account .profile-top .user-name .user-sub-heading{font-size: 18px; color: var(--subTextColor);font-family: 'ProximaNova-Light';} .profile-account .profile-top .edit-btns{display: flex; align-content: center; gap: 12px; } .profile-account .profile-top .edit-btn{ border: none; outline: none; background-color: var(--primaryColor); width: 150px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--shades01); border-radius: 50px; font-size: 20px; text-transform: capitalize;} .profile-content .profile-account {padding: 0 35px; margin-top: 24px;} .profile-content .profile-account .profile-form-list{display: flex; align-items: flex-start; gap: 12px;} .profile-content .profile-account .profile-form-list.profile-form-wrap{display: flex; flex-direction: column;} .profile-content .profile-account .form-group{display: flex; flex-direction: column; gap: 12px; width: 100%} .profile-content .profile-account .form-group .form-headline{color: var(--lavelColor); font-size: 18px; font-family: 'ProximaNova-Light';} .profile-content .profile-account .form-group .form-control{border-radius: 30px; padding: 12px 24px;} .profile-content .profile-account .form-group .about-form-control{border-radius: 30px; padding: 12px 24px; height: 160px; border: 1px solid #ddd; color: var(--subTextColor); margin: auto 0; line-height: 1.6;} .profile-content .profile-account .form-group .form-control::placeholder{color: var(--subTextColor) !important; font-size: 18px; font-family: 'ProximaNova-Light';} .form_label_certifications { align-items: center; background: rgba(19,139,251,.05); color: var(--primaryColor); display: inline-flex; font-size: 18px; font-weight: 500; justify-content: center; line-height: 23px;height: 160px; width: 160px;position: relative;} .form_label_certifications img{object-fit: cover; border: 2px solid var(--footerColor); height: 100%; width: 100%; border-radius: 50%; cursor: pointer; overflow: hidden;} #uploadFile {height: 1px;left: -999px;opacity: 0;position: absolute;visibility: hidden;width: 1px;} .form_label_certifications input[type="file"]{position: absolute;left: 0;height: 100%;width: 100%;visibility: hidden;} /* ********|| PROFILE PAGE LAYOUT END ||******** */ /* ********|| BLOG LIST PAGE LAYOUT START ||******** */ .blog-list-container{position: relative;display: flex; flex-direction: column; gap: 12px; background-color: var(--shades01); padding: 20px; border-radius: 20px;} .blog-list-container .blog-list-top{display: flex; justify-content: space-between; align-items: center;} .blog-list-container .blog-list-top .blog-headline{font-size: 28px; font-family: 'Rufina'; font-weight: 700; color: var(--primaryColor);} .blog-list-container .blog-list-top .item-bookmark { position: relative; overflow: hidden; display: flex; gap: 6px;} .blog-list-container .blog-list-top .item-bookmark .item-bookmark-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; cursor: pointer;} .blog-list-container .blog-list-top .item-bookmark .item-bookmark-label { width: 100px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 400; color: var(--primaryColor);} .blog-list-container .blog-list-top .item-bookmark .item-bookmark-label:before { content: '\f111'; font-family: "Font Awesome 6 Pro";} .blog-list-container .blog-list-top .item-bookmark .item-bookmark-input:checked ~ .item-bookmark-label{font-weight: 600;} .blog-list-container .blog-item{position: relative; background-color: var(--TagBg); border-radius: 20px; padding: 10px; } .blog-list-container .blog-item .blog-item-top{display: flex; justify-content: space-between;} .menu-wrap {position: relative;height: 25px; width: 25px;} .blog-list-container .blog-item + .blog-item{margin-top:15px;} .menu-wrap .dots,.menu-wrap .menu{-webkit-box-orient:vertical;-webkit-box-direction:normal;position:absolute} .menu-wrap .dots{height:100%;width:100%;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:1} .menu-wrap .dots>div,.menu-wrap .dots>div:after,.menu-wrap .dots>div:before{height:4px;width:4px;background-color:rgba(49,49,49,.8);border-radius:50%;-webkit-transition:.5s;-o-transition:.5s;transition:.5s} .menu-wrap .dots>div{position:relative}.menu-wrap .dots>div:after{content:"";position:absolute;bottom:calc((25px / 2) - (6px / 2));left:0} .menu-wrap .dots>div:before{content:"";position:absolute;top:calc((25px / 2) - (6px / 2));left:0} .menu-wrap .menu{right:-10px;top:calc(-12px + 50px);width:0;height:0;background-color:#fff;padding:20px 15px;-webkit-box-shadow:2px 4px 6px rgba(49,49,49,.2);box-shadow:2px 4px 6px rgba(49,49,49,.2);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0;visibility:hidden;z-index:9} .menu-wrap .menu ul{list-style:none} .menu-wrap .menu ul li{margin:15px 0} .menu-wrap .menu ul li .link{text-decoration:none;color:rgba(49,49,49,.85);opacity:0;visibility:hidden} .menu-wrap .toggler{position:absolute;height:100%;width:100%;top:0;left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;z-index:2} .menu-wrap .toggler:hover+.dots>div,.menu-wrap .toggler:hover+.dots>div:after,.menu-wrap .toggler:hover+.dots>div:before{background-color:rgba(49,49,49,.6)} .menu-wrap .toggler:checked+.dots>div{-webkit-transform:translateX(calc(((25px / 2) - (6px / 2)) * -.7071067812)) translateY(calc(((25px / 2) - (6px / 2)) * -.7071067812));-ms-transform:translateX(calc(((25px / 2) - (6px / 2)) * -.7071067812)) translateY(calc(((25px / 2) - (6px / 2)) * -.7071067812));transform:translateX(calc(((25px / 2) - (6px / 2)) * -.7071067812)) translateY(calc(((25px / 2) - (6px / 2)) * -.7071067812))} .menu-wrap .toggler:checked+.dots>div:after{-webkit-transform:translateX(calc(((25px / 2) - (6px / 2)) * .7071067812)) translateY(calc((2 * (25px / 2) - (6px / 2)) * .7071067812));-ms-transform:translateX(calc(((25px / 2) - (6px / 2)) * .7071067812)) translateY(calc((2 * (25px / 2) - (6px / 2)) * .7071067812));transform:translateX(calc(((25px / 2) - (6px / 2)) * .7071067812)) translateY(calc((2 * (25px / 2) - (6px / 2)) * .7071067812))} .menu-wrap .toggler:checked+.dots>div:before{-webkit-transform:translateX(calc(2 * (((25px / 2) - (6px / 2)) * .7071067812))) translateY(calc(((25px / 2) - (6px / 2)) - (((25px / 2) - (6px / 2)) * .7071067812)));-ms-transform:translateX(calc(2 * (((25px / 2) - (6px / 2)) * .7071067812))) translateY(calc(((25px / 2) - (6px / 2)) - (((25px / 2) - (6px / 2)) * .7071067812)));transform:translateX(calc(2 * (((25px / 2) - (6px / 2)) * .7071067812))) translateY(calc(((25px / 2) - (6px / 2)) - (((25px / 2) - (6px / 2)) * .7071067812)))} .menu-wrap .toggler:checked:hover+.dots>div,.menu-wrap .toggler:checked:hover+.dots>div:after,.menu-wrap .toggler:checked:hover+.dots>div:before{background-color:rgba(49,49,49,.6);-webkit-transition:.5s;-o-transition:.5s;transition:.5s} .menu-wrap .toggler:checked~.menu{opacity:1;visibility:visible;width:150px;height:130px;-webkit-transition:.5s;-o-transition:.5s;transition:.5s} .menu-wrap .toggler:checked~.menu ul .link{opacity:1;visibility:visible;-webkit-transition:.5s .3s;-o-transition:.5s .3s;transition:.5s .3s} .menu-wrap .toggler:checked~.menu ul .link:hover{color:var(--primaryColor);-webkit-transition:.2s;-o-transition:.2s;transition:.2s} .menu-wrap .toggler:not(:checked)~.menu{-webkit-transition:.5s;-o-transition:.5s;transition:.5s} .menu-wrap .toggler:not(:checked)~.menu ul .link{opacity:0;visibility:hidden;-webkit-transition:.1s;-o-transition:.1s;transition:.1s} /* --- */ .blog-list-container .blog-item .form-check{position: relative;} .blog-list-container .blog-item .form-check .form-check-input{position: relative;} .blog-list-container .blog-item .blog-item-list{display: flex; align-items: flex-start; gap:24px; padding: 10px 15px;} .blog-list-container .blog-item .blog-item-list .blog-user-image{width: 100px; height: 100px; border-radius: 20px; overflow: hidden;} .blog-list-container .blog-item .blog-item-list .blog-user-image img{width: 100%; height: 100%; object-fit: cover;} .blog-list-container .blog-item .blog-item-list .blog-list-content{position: relative; width: calc(100% - 100px); padding: 0 24px 0 0 ;} .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-title{font-size: 24px; font-family: 'Rufine'; color: var(--subTitleColor); display: -webkit-box; max-width: 100%; line-height: 1.2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px;} .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-description{font-size: 18px; color: var(--subTextColor); line-height: 1.2;} .blog-list-container .blog-item-top .item-bookmark{position: relative; overflow: hidden;} .blog-list-container .blog-item-top .item-bookmark .item-bookmark-input{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; cursor: pointer;} .blog-list-container .blog-item-top .item-bookmark .item-bookmark-label{width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 400; color: var(--primaryColor);} .blog-list-container .blog-item-top .item-bookmark .item-bookmark-label:after{content: '\f111'; font-family: "Font Awesome 6 Pro";} .blog-list-container .blog-item-top .item-bookmark .item-bookmark-input:checked ~ .item-bookmark-label{font-weight: 600;} .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-inforamtion{display: flex; gap: 44px; align-items: flex-start; flex-wrap: wrap;} .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-inforamtion .blog-list-details{display: flex; gap: 12px; } .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-inforamtion .blog-date{ display: flex; flex-direction: column; gap: 12px;} .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-inforamtion .blog-date .blog-date-subheading{ font-size: 18px; color: var(--desColor); display: flex; gap: 6px; text-transform: capitalize; font-family: 'ProximaNova-Light';} .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-inforamtion .blog-date .blog-stats{ display: flex; flex-wrap: wrap; gap: 6px;} .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-inforamtion .blog-list-details .item-information{display: flex; align-items: center; gap: 20px; color: var(--desColor);} .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-inforamtion .blog-list-details .item-information .item-meta{display: flex; align-items: center;} .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-inforamtion .blog-list-details .item-information .item-meta .meta{display: flex; align-items: center;} .blog-list-container .blog-item .blog-item-list .blog-list-content .blog-list-inforamtion .blog-list-details .item-information .item-meta .meta .meta-data{display: flex;gap: 4px; font-size: 18px; font-family: 'ProximaNova-Light';} .blog-list-details .item-information .item-bookmark{position: relative; } .blog-list-details .item-information .item-bookmark .item-bookmark-label{font-size: 18px; display: flex; align-items: center; gap: 6px;} /* ----- */ .blog-list-container .listed{position: relative;} .blog-list-container .listed .needs-validation{position: relative;} .blog-list-container .listed .needs-validation .input-group{display: flex;} .blog-list-container .listed .needs-validation .input-group .input-group-prepend{display: flex;} .blog-list-container .listed .needs-validation .input-group .input-group-prepend .input-group-text {display: flex;font-size: 16px;font-weight: 400;color: var(--subTextColor);background-color: var(--shades01); border-radius: 0.375rem 0 0 0.375rem;} .blog-list-container .listed .needs-validation .data-list-bor{position: relative;} .blog-list-container .listed .needs-validation .data-list-bor .blog-list-search-icon {position: absolute; top: 0%; left: 45%; width: 38px; background-color: #ffffff; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; cursor: pointer; transition: all 0.3 ease-in-out;} .blog-list-container .listed .needs-validation .data-list-bor .blog-list-search-icon:hover {background-color: #ddd; border: 1px solid #ddd;} .input-item .form-control:focus{border-color: tr;} /* ----- */ /* ********|| BLOG LIST PAGE LAYOUT END ||******** */ /* ********|| ADD LIST PAGE LAYOUT START ||******** */ .codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty::before {opacity: 1;font-size: 24px !important;font-family: 'Rufina' !important;} .submit-action button{border-radius: 30px;background-color: var(--primaryColor);border: 2px solid transparent;color: var(--shades01);padding: 8px 32px;font-size: 18px;transition: all 0.3s ease;} .submit-action button:hover{border-radius: 30px;background-color: var(--shades01);border: 2px solid var(--primaryColor);color: var(--primaryColor);padding: 8px 32px;font-size: 18px;} /* ********|| ADD LIST PAGE LAYOUT END ||******** */ /* ********|| CONTACT US PAGE LAYOUT START ||******** */ .section-contact{background-color: var(--shades01);padding: 30px; border-radius: 30px; width: 100%;} .section-contact .contact-details{width: 100%; padding: 20px 55px;} .section-contact .contact-details .contact-title{font-family: 'Rufina'; font-weight: 700; font-size: 60px; line-height: 85px; color: var(--subTitleColor); margin-bottom: 34px; line-height: 1;} .section-contact .contact-details .contact-details-list{display: flex; flex-direction: column; flex-wrap: wrap; gap: 32px;} .section-contact .contact-details-list .contact-item{display: flex; align-items: center; gap:12px;} .section-contact .contact-details-list .contact-item .contact-icon{background-color: var(--primaryColor); color: var(--shades01); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;} .section-contact .contact-details-list .contact-item .contact-link{font-size: 20px; color: var(--subTextColor); width:calc(100% - 60px);line-height: 1.3;font-family: 'ProximaNova-Light'; } /* --- */ .section-contact .contact-form{position: relative; width: 100%; padding: 20px 55px; } .section-contact .contact-form::after{content: ''; position:absolute; width: 2px; background-color: #ddd; height: 100%; top: 0; left: 0;} .section-contact .contact-form .form-group{position: relative;} .section-contact .contact-form .form-group .form-control{border-radius: 50px; padding: 12px 24px;} .section-contact .contact-form .form-group .form-control::placeholder{color: #b1b1b1; text-transform: capitalize; font-size: 14px;} .section-contact .contact-form .form-group .textarea-box{width: 100%; border-radius: 30px; border: 1px solid #ddd; padding: 12px 24px; } .section-contact .contact-form .contact-btn{ display: flex; align-items: center; justify-content: center; background-color:var(--primaryColor); font-size: 22px; padding: 0px 32px; height: 50px; min-width: 200px; font-size: 20px; font-weight: 700; color: var(--shades01) ; border-radius: 50px; font-family: 'ProximaNova-Regular'; transition: all 0.3s ease; border: solid 2px transparent; text-transform: capitalize;} .section-contact .contact-form .contact-btn:hover{ color: var(--primaryColor) ; border: solid 2px var(--primaryColor); background-color: transparent; } /* ********|| CONTACT US PAGE LAYOUT END ||******** */ /* ********|| PRIVACY POLICY PAGE LAYOUT START ||******** */ .privacy-content{position: relative;} .privacy-content .privacy-title{font-size: 28px; color: var(--subTitleColor); line-height: 1.6; font-family: 'Rufina'; margin-bottom: 10px;} .privacy-content .privacy-decription{font-size: 18px; color: var(--subTextColor); line-height: 1.6; font-family: 'ProximaNova-Light'; margin-bottom: 32px;} .privacy-content .privacy-decription .order-list{padding-left: 20px;} .privacy-content .privacy-decription .order-list li{margin-bottom: 10px;} /* ********|| PRIVACY POLICY PAGE LAYOUT END ||******** */ /* ********|| OUR STORY PAGE LAYOUT START ||******** */ .our-story{position: relative;} .our-story::before{position: absolute; content: ''; width: 100%; height: 200px; background-color: var(--primaryColor); z-index: -1; top: -4%;} .our-story .section-story-content{display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0 100px;} .our-story .section-story-content .story-image-box{width: 650px; height: 600px; flex-shrink: 0; border-radius: 40px; background: var(--shades01); overflow: hidden; order: 1;} .our-story .section-story-content .story-image-box img{width: 100%; height: 100%; object-fit: contain;} .our-story .section-story-content .story-detail-box{display: flex; flex-direction: column; gap: 12px; width: 50%;} .our-story .section-story-content .story-detail-box .story-title{display: flex; flex-direction: column; gap: 12px;} .our-story .section-story-content .story-detail-box .story-headline{color: #000; font-size: 52px; font-family: 'Rufina'; max-width: 65%; line-height: 1.2; font-weight: 700;} .our-story .section-story-content .story-detail-box .story-headline:nth-child(1){max-width: 75%;} .our-story .section-story-content .story-detail-box .story-description{display: flex; flex-direction: column; flex-shrink: 0; color: #5A5A5A; font-size: 18px; line-height: 1.6; max-width: 80%; font-weight: 400;} .our-story .section-story-content .story-detail-box .btns{display: flex; align-items: center; margin-top: 24px;} .our-story .section-story-content .story-detail-box .reader-btn {display: flex; align-items: center; justify-content: center; border-radius: 50px; width: 150px; height: 40px; background-color: var(--primaryColor); color: var(--shades01); transition: all 0.3s ease; border: 1px solid transparent; font-size: 18px;} .our-story .section-story-content .story-detail-box .reader-btn:hover {background-color: transparent; border: 1px solid var(--primaryColor); color: var(--primaryColor);} .our-story .section-story-content.story-reverse {flex-direction: row-reverse;} /* ********|| SECTION AUTHOR START ||******** */ .section-author{position: relative;padding: 0 0 100px;} .section-author .author-header {display: flex;align-items: center; flex-direction: column; margin-bottom: 12px; max-width: 60%; margin: 0 auto;} .section-author .author-headline{color: #000; text-align: center; font-size: 62px; font-family: 'Rufina'; line-height: 1.2; font-weight: 700;} .section-author .author-subtitle {display: flex;flex-direction: column; flex-shrink: 0; color: #5A5A5A; text-align: center; font-size: 22px; font-family: 'ProximaNova-Light'; line-height: 1.6; margin: 16px 0 52px 0; font-weight: 700;} .section-author .author-list{display: flex; align-items: center; flex-wrap: wrap; gap: 24px;justify-content: center;} .section-author .author-list .author-item{display: flex; align-items: center; gap: 12px; border-radius: 20px; background: #FFF; padding: 10px;} .section-author .author-list .author-item .author-image-box{display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50px; overflow: hidden; background-color: #e9e9e9; color: #5a5a5a;} .section-author .author-list .author-item .author-image-box img{width: 100%; height: 100%; flex-shrink: 0; object-fit: cover;} .section-author .author-list .author-item .author-content-box{display: flex; flex-direction: column;} .section-author .author-list .author-item .author-content-box .author-title{color: var(--subTitleColor); font-size: 20px; font-family: 'ProximaNova-Regular'; text-transform: capitalize; line-height: 1.6;} .section-author .author-list .author-item .author-content-box .author-description{color: var(--subTextColor); font-size: 18px; font-family: Proxima Nova; line-height: 1.6;} /* ********|| SECTION AUTHOR END ||******** */ /* ********|| OUR STORY PAGE LAYOUT END ||******** */ /* ********|| FOOTER STARTS ||******** */ footer{background-color: var(--footerColor); padding: 90px 0 0 0;} footer .footer-content{position: relative; max-width: 430px;} .footer-content .footer-title{ border: none; outline: none; color: var(--shades01); font-family: 'Rufina'; background-color: transparent; font-size: 28px; margin-bottom: 45px;} .footer-content .brand{width: 160px; height: 60px; margin-bottom: 15px;} .footer-content .brand img{width: 100%; height: 100%; object-fit: cover;} .footer-content .footer-about{font-size: 18px;line-height: 1.2; color: var(--shades01); margin-bottom: 40px;} .footer-content .footer-newsletter{position: relative;} .footer-content .footer-newsletter .form-control{width: 100%; height: 55px; border-radius: 50px; padding: 0px 24px; position: absolute;} .footer-content .footer-newsletter .form-control::placeholder{color: var(--placeHolderColor);} .footer-content .footer-newsletter .form-btn{ position: absolute; top: 0; right: 0; background-color: var(--primaryColor); border-radius: 0px 50px 50px 0; outline: none; border: none; width: 140px; height: 55px; color: var(--shades01); font-size: 18px; } .footer-content .social-link{margin-top: 142px;} .footer-content .section-widget .widget-title{font-size: 28px; color: var(--shades01); font-family: 'Rufina';} .footer-content .latest-post-listing .latest-post-item{background-color: transparent;} .footer-content .latest-post-item .item-content .item-title a{ color: var(--shades01);} .footer-content .latest-post-item .item-content .item-title a:hover{ color: var(--primaryColor);} .footer-content .footer-tag{margin-bottom: 42px;} .footer-content .section-widget { gap: 34px;} /* ********|| FOOTER COPYRIGHT START ||******** */ footer .footer_bottom{ border-top: 1px solid #476D85; padding: 34px 0; margin-top: 62px;} footer .footer_bottom .container .row{ justify-content: space-between;} .footer_bottom .copy-right-text{font-size: 14px; color: var(--footerCopyColor); font-family: 'ProximaNova-Light';} .footer_bottom .footer-menu{list-style: none; display: flex;gap: 24px; justify-content: flex-end; margin-bottom: 0;} .footer_bottom .footer-menu .footer-link{list-style: none; font-size: 14px; color: var(--footerCopyColor);} .footer_bottom .footer-menu .footer-link:hover{color: var(--shades01);} /* ********|| FOOTER COPYRIGHT END ||******** */ /* ********|| FOOTER ENDS ||******** */ /* ********|| MODAL STARTS ||******** */ .modal .modal-dialog{max-width: 575px;} .modal .modal-dialog .modal-content .modal-header .btn-close{display: none;} .modal .unique-modal-dialog .unique-modal-content .unique-modal-header .unique-modal-title{font-size: 24px; color: var(--subTitleColor); font-weight: 700; font-family: 'ProximaNova-Bold';} .modal.modal-image .modal-dialog .modal-content .modal-body .input-image{transition: all 0.5s ease;border: 2px solid transparent; width: 100px; height: 100px; object-fit: cover;} .modal.modal-image .modal-dialog .modal-content .modal-body .input-image.active{border: 2px solid var(--primaryColor); } .modal.modal-image .modal-dialog .modal-content .modal-body .input-image:hover{border: 2px solid var(--primaryColor); } .modal .unique-modal{position: relative; max-height: 100vh; max-width: 100vh;} .modal .unique-modal-dialog{height: 100vh; max-width: 100%;} .modal .unique-modal-dialog .unique-modal-content{} .modal .unique-modal-dialog .unique-modal-content .unique-modal-header{display: flex; justify-content: center;} .modal .unique-modal-dialog .unique-modal-content .unique-modal-header .logo{ width: 200px;height: 80px;overflow: hidden;} .modal .unique-modal-dialog .unique-modal-content .unique-modal-header .logo img{width: 100%; height: 100%; object-fit: cover;} .modal .unique-modal-dialog .unique-modal-content .unique-modal-modal-body{position: relative; display: flex; flex-direction: column; gap: 12px;} .modal .unique-modal-dialog .unique-modal-content .unique-modal-modal-body #globalSearchBox{display: flex;flex-direction: column;justify-content: center;width: 50%;margin: 0 auto;} .modal .unique-modal-dialog .unique-modal-content .unique-modal-modal-body #globalSearchBox .search-list{padding: 6px 0; } .modal .unique-modal-dialog .unique-modal-content .unique-modal-modal-body #globalSearchBox .search-list .title{color: var(--subTextColor); } .unique-modal-modal-body .modal-search-box {position: relative; width: 50%; margin: 0 auto; } .unique-modal-modal-body .modal-search-box .input-search-box { display: flex; width: 100%; justify-self: center; align-items: center; position: relative; padding: 12px 20px; border-radius: 50px; border: 1px solid #005c97; margin: 0 auto;} .unique-modal-modal-body .modal-search-box .search-title{position: absolute;transform: translate(0%, -50%); top: 50%; right: 5px; background: #005c97;width: 120px;height: 40px;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 15px;border-radius: 22px;} .unique-modal-dialog .search-list td .title {padding: 10px 0; } .modal .modal-dialog .modal-content{height: 100vh;} .modal .modal-dialog .modal-content .modal-footer{justify-content: flex-start;} .modal .modal-dialog .modal-content .modal-footer button{display: flex;align-items: center;justify-content: center;background-color: transparent;border: 2px solid var(--primaryColor);color: var(--primaryColor);border: solid 2px var(--primaryColor);font-size: 22px;padding: 0px 32px;height: 40px;min-width: 100px;font-size: 18px;border-radius: 50px;font-family: 'ProximaNova-Regular';transition: all 0.3s ease;} .modal .modal-dialog .modal-content .modal-footer button:hover{background-color: var(--primaryColor); border: 2px solid transparent;color: var(--shades01);} /* ********|| MODAL ENDS ||******** */ /* ********|| RESPONSIVE STARTS ||******** */ @media screen and (max- : 1600px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1366px) { header .navigation .navigation-menu .navigation-btn { padding: 0px 24px; min-width: 160px; font-size: 18px; height: 45px;} header .search .search-input {padding: 12px 26px;width: 250px;} header .navigation .navigation-menu li .navigation-link {padding: 10px 0;font-size: 16px; font-weight: 400;} .section-banner .banner-title { font-size: 48px; margin-bottom: 18px;} .section-banner .banner-descriptions {font-size: 16px; padding: 0 140px 28px 0;} .section-banner .banner-actions .btn-action { height: 45px; min-width: 160px; font-size: 18px;} /* -------------- */ /* HOME PAGE */ /* -------------- */ .section-featured .title {font-size: 38px;} .featured-listing .featured-item { padding: 12px 8px; border-radius: 24px; gap: 14px;} .featured-listing .featured-item .item-image {width: 80px;height: 80px; gap: 14px;} .featured-listing .featured-item .item-title {font-size: 16px;} .blog-listing .blog-item { padding: 18px 14px; border-radius: 24px;} .blog-listing .blog-item .item-image {width: 240px;height: 240px;border-radius: 40px;} .blog-listing .blog-item .item-content {width: calc(100% - 240px);} .blog-listing .blog-item .item-content .item-title {font-size: 20px;line-height: 1.2;} .common-layout .common-aside {border-radius: 24px;padding: 20px;} .section-latest-post .aside-title {font-size: 24px;} .latest-post-listing .item-image {width: 80px;height: 80px;border-radius: 12px;} .latest-post-listing .item-content .item-title {font-size: 16px;line-height: 1.4;} .section-newsletter {padding: 34px 24px;border-radius: 24px;} .section-newsletter .newsletter-title {font-size: 38px;} .section-newsletter .newsletter-subheading {margin-bottom: 36px; font-family: 'ProximaNova-Light';} /* ---FOOTER START--- */ .footer-content .footer-about {font-size: 16px;line-height: 1.4;font-family: 'ProximaNova-Light'; margin-bottom: 30px;} .footer-content .footer-newsletter .form-control { height: 50px;} .footer-content .footer-newsletter .form-btn {height: 50px;} .footer-content .section-widget {gap: 24px;} .footer-content .footer-title {font-size: 24px;} /* ---FOOTER END--- */ /* ---OUR STORY START--- */ header {height: 90px;} header .navigation .navigation-menu li .navigation-link {font-size: 16px;font-weight: 500;} .section-banner .banner-headline {font-size: 48px;} .our-story .section-story-content .story-image-box {width: 600px;height: 550px;} .our-story .section-story-content .story-detail-box .story-headline {font-size: 42px;} .our-story .section-story-content .story-detail-box .story-description { font-size: 16px;} .section-author .author-header {max-width: 75%;} .section-author .author-headline {max-width: 60%; font-size: 42px;} .section-author .author-subtitle {font-size: 20px;} .our-story .section-story-content { gap: 34px;} /* ---OUR STORY END--- */ /* ---HERO BLOG DETAILS START--- */ .author-information .author-image { width: 60px; height: 60px;} .author-information .author-details .author-text {font-size: 16px;line-height: 1.4;} .section-blog-details .blog-content div h1 { font-size: 20px; line-height: 1.4; color: #000;} .section-blog-details .blog-content img{ object-position: center; height: 550px; border-radius: 20px;} .comment-box .subcomment-content .user-image {width: 45px;height: 45px;} .author-content .author-blogs .author-blog {border-radius: 20px;padding: 14px;} .author-blogs .author-blog .author-blog-image {height: 200px;border-radius: 20px;} /* ---HERO BLOG DETAILS END--- */ } @media screen and (max-width: 1280px) { .section-banner .banner-descriptions {padding: 0 80px 28px 0;} /* --- */ .section-featured .title {font-size: 30px; margin-bottom: 24px;} .featured-listing {gap: 12px;} /* --- */ /* --- */ .google-adds {padding: 28px 0;} /* --- */ .blog-listing .blog-item {border-radius: 20px;} .blog-listing .blog-item .item-image {border-radius: 20px;width: 200px; height: 200px;} .blog-listing .blog-item .item-content {width: calc(100% - 200px);} .blog-listing .blog-item .item-content .item-header {margin-bottom: 12px;} .blog-listing .blog-item .item-content .item-title {margin-bottom: 6px;} /* ---BLOG DETAILS START--- */ .latest-post-listing .latest-post-item {gap: 12px;} .latest-post-listing .item-image {width: 70px;height: 70px;border-radius: 8px;} .latest-post-listing .item-content {width: calc(100% - 70px);} /* ---BLOG DETAILS END--- */ } @media screen and (max-width: 1024px) { header .search .search-input {padding: 10px 26px; width: 180px;} header .search .search-icon {top: 26%;font-size: 16px;} header .navigation .navigation-menu li .navigation-link {font-size: 14px;} header .navigation .navigation-menu .navigation-btn {min-width: 150px;font-size: 16px;height: 40px;} .section-banner .banner-title { font-size: 42px; line-height: 1.4; margin-bottom: 12px;} .section-banner .banner-descriptions {padding: 0 50px 20px 0;} .section-featured .title {font-size: 24px; margin-bottom: 18px;} .featured-listing .featured-item {border-radius: 10px;} .featured-listing .featured-item .item-image {width: 70px;height: 70px; border-radius: 10px;} .featured-listing .featured-item .item-content {width: calc(100% - 70px);} /* ----Right aside---- */ .common-layout .common-aside {border-radius: 10px;padding: 12px 20px;} .section-latest-post .aside-title {margin-bottom: 18px;} .latest-post-listing {gap: 18px;} .latest-post-listing .latest-post-item {gap: 14px;} .latest-post-listing .item-image {border-radius: 10px;} .section-newsletter { padding: 24px 12px;border-radius: 10px;} .section-newsletter .newsletter-title {font-size: 32px; margin-bottom: 18px;} .section-newsletter .newsletter-subheading {font-size: 14px; line-height: 1.4;margin-bottom: 18px;} .form-content .form-group {margin: 0 0 12px;} .form-content .form-group .form-control {height: 40px;} .form-content .btn-form {height: 40px;font-size: 16px;} .section-widget .widget-header .widget-title {font-size: 18px;} .section-widget {gap: 14px;} .section-widget .social-media .social-media-icon {width: 35px; height: 35px;} .footer-content .footer-newsletter .form-control, .footer-content .footer-newsletter .form-btn {height: 45px;} .footer-content .footer-newsletter .form-btn{ width: 120px;} .footer-content .social-link {margin-top: 122px;} .latest-post-listing .item-content .item-meta .meta {font-size: 14px;} /* ----Right aside close---- */ /* --OUR STORY START-- */ .our-story::before {height: 140px;} .our-story .section-story-content .story-image-box {width: 440px;height: 440px;} .our-story .section-story-content .story-detail-box .story-headline {font-size: 38px;} .our-story .section-story-content .story-detail-box .story-description {font-size: 16px;} .section-author .author-subtitle {font-size: 16px;} /* ---- */ .section-author .author-headline {max-width: 60%;font-size: 38px;} /* ---- */ /* --OUR STORY END-- */ } @media screen and (max-width: 990px) { /* --HEADER START-- */ header .container {gap: 30px;} header .responsive-action {display: block;} header .navigation-menu {position: fixed;top: 0;right: 0;z-index: 11;background-color: var(--footerColor);width: 300px;height: 100%;box-shadow: 2px 0 10px rgb(0 0 0 / 10%);padding: 15px 0;transform: translateX(110%);transition: all 0.4s ease;} header .navigation-menu.active {transform: translateX(0%);} header .navigation .navigation-menu {flex-direction: column; padding: 12px 0;} .user-profile {padding: 18px;} /* --HEADER END-- */ /* --BANNER START-- */ .section-banner .banner-title {font-size: 42px;line-height: 1.4;text-align: center;margin-bottom: 12px;} .section-banner .banner-descriptions { text-align: center; } .section-banner .banner-descriptions {text-align: center; padding: 0; margin-bottom: 34px;} .section-banner .banner-actions {margin-bottom: 24px; justify-content: center;} .section-banner .banner-img {margin: 0 auto; max-width: 440px;} .common-aside{margin-top: 24px;} .footer-content .social-link {margin-top: 75px;} .section-widget .social-media {margin-bottom: 22px;} .section-widget .google-adds-img-wrap { height: 100%;} .blog-listing .blog-item {gap: 18px;} .blog-listing .blog-item .item-image {width: 160px;height: 180px;} .blog-listing .blog-item .item-content {width: calc(100% - 160px);} .latest-post-listing .latest-post-item {border-radius: 10px;background-color: #f5f5f5;padding: 6px;} /* --BANNER END-- */ } @media screen and (max-width: 990px) and (orientation: landscape){ } @media screen and (max-width: 767px) { } @media screen and (max-width: 767px) and (orientation: landscape){ } @media screen and (max-width: 600px) { header .container {gap: 20px;} .footer_bottom .copy-right-text {text-align: center;margin-bottom: 6px;} .footer_bottom .footer-menu {justify-content: center;} .featured-listing { grid-template-columns: 1fr;} .blog-listing .blog-item {flex-direction: column;} .blog-listing .blog-item .item-image {width: 100%;} .blog-listing .blog-item .item-content {width: 100%;} .blog-listing .blog-item .item-content .item-title {line-height: 1.4;} header .search .search-icon {top: 25%;} } @media screen and (max-width: 480px) { header .brand {width: 115px;} .section-banner .banner-actions {margin-bottom: 24px;} .section-featured .title { font-size: 20px;} header .container { gap: 0px; } .blog-listing .blog-item {flex-direction: column;} .blog-listing .blog-item .item-image {width: 100%;} .blog-listing .blog-item .item-content {width: 100%;} .footer_bottom .footer-menu { gap: 12px; padding-left: 0;} } @media screen and (max-width: 360px) { } @media screen and (max-width: 320px) { } /* ********|| RESPONSIVE ENDS ||******** */