/*
Theme Name: an7framework
Description: Custom template for WordPress.
Version: 1.4
Author: Andrea Noto
*/

/* Misc
_________________________________________________________________________________________________________________*/

body {margin: 0; background: #f3efe6;}
body:has(.menu-1.active) {overflow: hidden;}
.full-w {width: 100%; margin: 0 auto;}
.cont-w {max-width: 1200px; margin: 0 auto;}
.clr {clear: both;}
.img-res {max-width: 100%; height: auto;}

h1 {font-family: 'Cormorant Garamond', serif; font-size: 70px; font-weight: 700; line-height: 1.0; letter-spacing: -1px; text-transform: none; text-decoration: none;}
h2 {font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 700; line-height: 1.0; letter-spacing: -1px; text-transform: none; text-decoration: none;}
h3 {font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 700; line-height: 1.0; letter-spacing: -1px; text-transform: none; text-decoration: none;}
h4 {font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700; line-height: 1.0; letter-spacing: -1px; text-transform: none; text-decoration: none;}
h5 {font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.0; letter-spacing: 0px; text-transform: none; text-decoration: none;}
h6 {font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0px; text-transform: none; text-decoration: none;}
p  {font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0px; text-transform: none; text-decoration: none;}

a {text-transform: none; text-decoration: none;}
a:hover {text-transform: none; text-decoration: none;}

.button-1 {cursor: pointer; padding: 10px 40px; border-radius: 25px; color: #fff; background: #011a37; border: none; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; text-align: center;}
.button-1:hover {color: #fff; background: #c30149; transition: 0.4s;}

.button-2 {cursor: pointer; padding: 10px 40px; border-radius: 25px; color: #fff; background: none; border: 1px solid #fff; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; text-align: center;}
.button-2:hover {color: #fff; background: #011a37; border: 1px solid #fff; transition: 0.4s;}

.button-3 {cursor: pointer; padding: 10px 40px; border-radius: 25px; color: #fff; background: #c30149; border: none; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; text-align: center;}
.button-3:hover {color: #fff; background: #011a37; transition: 0.4s;}

/* Header
_________________________________________________________________________________________________________________*/

header {position: absolute; background: none;}
header .line {width: 100%; background: #011a37; border-radius: 20px; margin-top: 30px; padding: 2px 0px;}
header .icons-1 {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: left; gap: 15px; margin-left: 15px;}
header .icons-1 li a {color: #fff; font-size: 18px;}
header .icons-1 li a:hover {color: #c30149; transition: 0.4s;}
header .logo {display: flex; justify-content: center; margin-top: -50px;}
header .logo img {height: 120px; width: auto;}
header .menu-1 li a {color: #fff; font-size: 26px; font-family: 'Cormorant Garamond', serif; font-weight: 400;}
header .menu-1 li a:hover {color: #c30149; transition: 0.4s;}
header .menu-1 {list-style-type: none; position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 25px 0px; background: #011a37; transition: 0.4s; z-index: 1;}
header .menu-1.active {left: 0;}
header .menu-1-button {position: relative; float: right; z-index: 1; cursor: pointer; background: none; top: -33px; right: 15px;}
header .menu-1-button .bar {background-color: #fff; display: block; width: 35px; height: 5px; margin: 6px 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
header .menu-1-button.active .bar:nth-child(1) {transform: translateY(11px) rotate(45deg);}
header .menu-1-button.active .bar:nth-child(2) {opacity: 0;}
header .menu-1-button.active .bar:nth-child(3) {transform: translateY(-11px) rotate(-45deg);}

/* Main Content
_________________________________________________________________________________________________________________*/

.intro-home {display: flex; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('img/intro-home.jpg') no-repeat center center; background-size: cover; background-attachment: fixed; height: 100vh;}
.intro-home h1 {color: #fff; text-align: left; margin-bottom: 60px;}
.intro-home .button-wrapper {padding: 0; margin: 0; display: flex; justify-content: left; gap: 20px;}

.intro-blog {display: flex; align-items: center; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('img/intro-blog.jpg') no-repeat center center; background-size: cover; background-attachment: fixed; height: 70vh;}
.intro-blog h1 {color: #fff; display: flex; justify-content: center;}

.intro-single {display: flex; align-items: center; background: linear-gradient(360deg,rgba(1, 26, 55, 1) 0%, rgba(195, 1, 73, 1) 100%); height: 22vh;}
.intro-single h3 {color: #fff; display: flex; justify-content: left; margin-bottom: 20px;}

.search-blog {background: #011a37; padding: 10px 0px;}
.search-blog .search {display: flex; justify-content: center;}
.search-blog .search .search-field {width: 300px; padding: 5px; background: #fff; border-radius: 25px; border: none; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 400; color: #000;}
.search-blog .search .search-submit {width: 70px; padding: 5px; background: #c30149; color: #fff; border-radius: 25px; border: none; margin-left: 10px; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 400;}
.search-blog .search .search-submit:hover {background: #fff; color: #000; transition: 0.4s;}

.pen {width: 60px; margin-left: -25px; margin-bottom: -60px;}
.pen img {width: 60px;}

.welcome {padding: 50px 0px; background: #011a37;}
.welcome h2 {color: #fff; margin-bottom: 30px;}
.welcome p {color: #fff;}
.welcome .welcome-img {display: grid; place-items: center; height: 100%;}

.lastposts {margin: 50px 0px;}
.lastposts h2 {color: #011a37; margin-bottom: 40px;}
.lastposts .postlist-1 {display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 30px;}
.lastposts .postlist-1 .post {width: 30%; background: #fff; -webkit-box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); border-radius: 15px;}
.lastposts .postlist-1 .post .featured-img {width: 100%; height: auto; border-radius: 15px 15px 0px 0px; overflow: hidden; position: relative; display: block;}
.lastposts .postlist-1 .post .featured-img img {width: 100%; height: 220px; object-fit: cover; object-position: center; display: block;}
.lastposts .postlist-1 .post .post-body {padding: 10px 20px 20px 20px;}
.lastposts .postlist-1 .post .post-body h3 {line-height: 0.8;}
.lastposts .postlist-1 .post .post-body h3 a {color: #011a37; font-size: 24px; font-weight: 700; position: relative; transition: color 0.4s ease;}
.lastposts .postlist-1 .post .post-body h3 a:hover {color: #c30149;}
.lastposts .postlist-1 .post .post-body h5 {color: inherit; font-size: 10px; font-weight: 500; margin-top: 15px;}
.lastposts .postlist-1 .post .post-body .cat-wrapper a {display: inline-block; font-size: 12px; font-family: 'Montserrat', sans-serif; color: #fff; background: #c30149; padding: 0px 15px; border-radius: 25px; transition: all 0.4s ease; margin-bottom: 20px;}
.lastposts .postlist-1 .post .post-body .cat-wrapper a:hover {color: #fff; background: #011a37;}
.lastposts .postlist-1 .post .post-body p {color: inherit;}
.lastposts .postlist-1 h4.no-post {color: #000; margin: 80px 0px;}
.lastposts .button-wrapper {display: flex; justify-content: center; margin-top: 40px;}

.contatti {margin: 50px 0px;}
.contatti h2 {color: #011a37; margin-bottom: 30px;}
.contatti .logo {display: flex; justify-content: center;}
.contatti .logo img {width: 400px; height: auto;}
.contatti .contacts-box {display: flex; align-items: center; gap: 10px; padding: 12px 0;}
.contatti .contacts-box .contacts-icon {font-size: 22px; text-align: center; color: #011a37;}
.contatti .contacts-name h6 {font-weight: 600; margin-top: 3px;}
.contatti .contacts-box .contacts-details {font-weight: 600; margin-left: auto; text-align: right;}

.form-1 .wpcf7 {width: 70%; margin: auto; text-align: center; background-color: #f5f5f5; border-radius: 5px; padding: 25px; webkit-box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); margin-top: 30px;}
.form-1 .wpcf7 label {color: #011a37; font-size: 14px; font-weight: 600;}
.form-1 .wpcf7 input {font-size: 14px; font-weight: 400; line-height: 1.4;}
.form-1 .wpcf7 textarea {color: #000; font-size: 14px; font-weight: 400; line-height: 1.4; border: 1px solid #d5d5d5; border-radius: 5px; height: 100px;}
.form-1 .wpcf7 .button-1 {display: block; margin: auto;}

.privacy-policy h2 {color: #011a37;}
.privacy-policy h3 {color: #011a37;}
.privacy-policy h4 {color: #011a37;}
.privacy-policy header {display: none;}

.p404 .col-12 {height: 100vh; padding-top: 80px; text-align: center;}
.p404 h1 {color: #011a37; padding-bottom: 25px;}
.p404 h4 {color: #000;}

/* Posts Content
_________________________________________________________________________________________________________________*/

.index {margin: 50px 0px;} 
.index .postlist-1 {display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 30px;}
.index .postlist-1 .post {width: 30%; background: #fff; -webkit-box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); border-radius: 15px;}
.index .postlist-1 .post .featured-img {width: 100%; height: auto; border-radius: 15px 15px 0px 0px; overflow: hidden; position: relative; display: block;}
.index .postlist-1 .post .featured-img img {width: 100%; height: 220px; object-fit: cover; object-position: center; display: block;}
.index .postlist-1 .post .post-body {padding: 10px 20px 20px 20px;}
.index .postlist-1 .post .post-body h2 {line-height: 0.6;}
.index .postlist-1 .post .post-body h2 a {color: #011a37; font-size: 24px; font-weight: 700; line-height: 0.8 !important; position: relative; transition: color 0.4s ease;}
.index .postlist-1 .post .post-body h2 a:hover {color: #c30149;}
.index .postlist-1 .post .post-body h5 {color: inherit; font-size: 10px; font-weight: 500; margin-top: 15px;}
.index .postlist-1 .post .post-body .cat-wrapper a {display: inline-block; font-size: 12px; font-family: 'Montserrat', sans-serif; color: #fff; background: #c30149; padding: 0px 15px; border-radius: 25px; transition: all 0.4s ease; margin-bottom: 20px;}
.index .postlist-1 .post .post-body .cat-wrapper a:hover {color: #fff; background: #011a37;}
.index .postlist-1 .post .post-body p {color: inherit;}
.index .postlist-1 h4.no-post {color: #000; margin: 80px 0px;}

.index-single {margin: 50px 0px;}
.index-single .postsingle-1 {display: flex; flex-direction: column; gap: 30px;}
.index-single .postsingle-1 .post {width: 70%; margin: auto; background: #fff; -webkit-box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden;}
.index-single .postsingle-1 .post h1 {color: #011a37; font-size: 36px; font-weight: 700; padding: 20px 20px 5px 20px;}
.index-single .postsingle-1 .post h5 {color: inherit; font-size: 14px; font-weight: 500; padding: 0px 0px 5px 20px;}
.index-single .postsingle-1 .post .cat-wrapper {margin: 0px 0px 20px 20px;}
.index-single .postsingle-1 .post .cat-wrapper a {display: inline-block; font-size: 12px; font-family: 'Montserrat', sans-serif; color: #fff; background: #c30149; padding: 0px 15px; border-radius: 25px; transition: 0.4s;}
.index-single .postsingle-1 .post .cat-wrapper a:hover {color: #fff; background: #011a37;}
.index-single .postsingle-1 .post .featured-img {width: 100%; height: auto; object-fit: cover; object-position: center; overflow: hidden;}
.index-single .postsingle-1 .post .post-body {padding: 20px;}
.index-single .postsingle-1 .post .post-body p {color: inherit;}
.index-single .postsingle-1 .post .post-body h4 {color: inherit; font-size: 22px;}
.index-single .postsingle-1 .post .post-body .icons-share {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: left; gap: 15px;}
.index-single .postsingle-1 .post .post-body .icons-share li a {color: #011a37; !important; font-size: 20px;}
.index-single .postsingle-1 .post .post-body .icons-share li a:hover {color: #c30149; !important; transition: 0.4s;}
.index-single .postsingle-1 .post .comments-wrapper {display: none;}

.pagination {display: flex; justify-content: center; padding: 50px 0px; margin: auto;}
.pagination a, span.page-numbers {border: 1px solid lightgrey; border-radius: 5px; padding: 5px 10px; margin-right: 10px;}
.pagination a {color: #011a37;}
.pagination a:hover {color: #c30149; transition: 0.4s;}

/* Posts Effects
_________________________________________________________________________________________________________________*/

.img-overlay-hover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%); opacity: 0; transition: opacity 0.35s ease-in-out;}
.read-more-text {color: #fff; font-size: 1.1rem; font-weight: 600; text-transform: none; letter-spacing: 0.8px; transform: translateY(15px); transition: transform 0.35s ease-in-out;}
.post:hover .img-overlay-hover {opacity: 1;}
.post:hover .read-more-text {transform: translateY(0);}

/* Footer
_________________________________________________________________________________________________________________*/

footer {background-color: #011a37; padding: 20px 0px;}
footer .block-1 {width: 100%;}
footer .block-1 .logo {display: flex; justify-content: center; margin-bottom: 20px;}
footer .block-1 .logo img {width: 80px; height: auto;}
footer .icons-1 {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 15px;}
footer .icons-1 li a {color: #fff; font-size: 18px;}
footer .icons-1 li a:hover {color: #c30149; transition: 0.4s;}
footer .copyright {width: 100%; text-align: center; margin-top: 20px;}
footer .copyright p {font-size: 13px;}
footer p {color: #fff; font-size: 14px; font-weight: 400;}
footer a {color: #fff;}
footer a:hover {color: #c30149; transition: 0.4s;}

/* Tablet Devices
_________________________________________________________________________________________________________________*/

@media (max-width: 992px) {

  h1 {font-size: 46px;}
  h2 {font-size: 36px;}

  .button-1 {padding: 10px 30px; font-size: 14px;}
  .button-2 {padding: 10px 30px; font-size: 14px;}
  .button-3 {padding: 10px 30px; font-size: 14px;}

  .lastposts .postlist-1 .post {width: 45%;}
  .lastposts .postlist-1 .post .featured-img img {width: 100%; height: 180px;}
  .index .postlist-1 .post {width: 45%;}
  .index .postlist-1 .post .featured-img img {width: 100%; height: 180px;}
  .index-single .postsingle-1 .post {width: 100%;}
  .form-1 .wpcf7 {width: 90%;}
  
}

/* Mobile Devices
_________________________________________________________________________________________________________________*/

@media (max-width: 768px) {

  header .icons-1 {position: relative; z-index: 1;}
  header .logo {position: relative; width: 100%; top: -85px;}
  header .logo img {height: 70px; width: auto;}
  header .menu-1 li a {font-size: 20px;}
  
  .intro-home {background-position: right top;}
  .intro-home .button-wrapper {display: grid; justify-content: center;}
  .intro-blog {background-attachment: inherit; height: 50vh;}
  .search-blog .search .search-field {width: 160px;}
  .pen {margin-left: -10px; margin-bottom: -50px;}
  .welcome {padding: 25px 0px;}
  .lastposts {margin: 25px 0px;}
  .lastposts .postlist-1 .post {width: 100%;}
  .index .postlist-1 .post {width: 100%;}
  .index-single .postsingle-1 .post h3 {font-size: 24px;}
  .index-single .postsingle-1 .post h5 {font-size: 12px;}
  .index-single .postsingle-1 .post .cat-wrapper a {font-size: 11px;}
  .contatti {margin: 25px 0px;}
  .contatti .logo img {width: 260px; height: auto;}
  .contatti .contacts-box .contacts-details {font-size: 13px;}

  .form-1 .wpcf7 {width: 100%;}
  .form-1 {display: block; overflow: hidden;}
  .form-1 .wpcf7 {display: flex; justify-content: center;}
  .form-1 .wpcf7 input {max-width: 100% !important;}
  .form-1 .wpcf7 textarea {max-width: 100% !important;}

}