*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f2f2f2;
color:#06202B;
}
a{
text-decoration: none;}


/* UX button animation */
@keyframes bounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-12px) scale(1.05); }
  50%  { transform: translateY(0) scale(0.98); }
  70%  { transform: translateY(-6px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}


button:active {
  animation: bounce 0.4s;
}
.bounce {
  animation: bounce 0.5s ease;
}

/* HERO */

.contact-hero{

margin:0px;
height:80vh;
background:url(images/contact_us.png) center/cover no-repeat;
position:relative;
display:flex;
align-items:center;
justify-content:center;

}

@media (max-width: 991px) {
  .contact-hero {
    height: 60vh;
  }
}

@media (max-width: 575px) {
  .contact-hero {
    height: 50vh;
  }
}

.contact-hero h1{

color:white;
font-size:100px;
font-weight:600;
font-family: 'Abril fatface';

}

@media (max-width: 767px) {
  .contact-hero h1 {
    font-size: 48px;
  }
}



/* NAVBAR */

.navbar{

position:absolute;
top:25px;
left:0;
right:0;
margin:0 80px;
height:100px;
background:white;
color: #2FC0EE;
border-radius:50px;
display:flex;
align-items:center;
box-shadow:0 10px 30px rgba(0,0,0,0.08);

}

@media (max-width: 767px) {
  .navbar {
    margin: 0 20px;
    height: 70px;
    top: 15px;
  }

  .logo img {
    width: 120px !important;
    height: 40px !important;
  }
}

.nav-inner{

width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 40px;

}

@media (max-width: 767px) {
  .nav-inner {
    padding: 0 20px;
  }
}

nav ul{

display:flex;
gap:40px;
list-style:none;
font-weight:500;

}

nav li{

cursor:pointer;

}
nav li:hover{
color:#2f545f;
transform: translatey(-3px);
}
nav ul {
    display: flex;
    gap: 40px;
    list-style: none;
}

nav li {
    color: #38a8c8;
    cursor: pointer;
}

.active {
    color: #ff8c38 !important;
}

@media (max-width: 767px) {
  nav ul {
    gap: 20px;
    font-size: 14px;
  }
}

/* DROPDOWN */
.dropdown {
    position: relative;
}

.dropdown a {
    color: #38a8c8;
    font-size: 15px;
    display: block;
    text-decoration: none;
}

.dropdown-menu {
    position: absolute;
    top: 120%; 
    right: 10%;
    
    background: white;
    padding: 15px 0;
    min-width: 180px;

    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: all 0.3s ease;
}

/* MENU ITEMS */
.dropdown-menu li {
    padding: 10px 20px;
}

.dropdown-menu li a {
    color: #062C33;
    font-size: 15px;
    display: block;
}

/* HOVER EFFECT */
.dropdown-menu li:hover {
    background: #f5f5f5;
}

/* SHOW DROPDOWN */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

nav {
    position: relative;
    z-index: 1000;
}


/* CONTACT SECTION */

.contact-section{

margin:120px 80px;

}

.contact-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:80px;

}

@media (max-width: 991px) {
  .contact-section {
    margin: 80px 20px;
  }

  .contact-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .contact-form {
    order: 1;
  }

  .contact-left {
    order: 2;
  }

  .contact-form {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .contact-form h2,
  .contact-form p {
    text-align: center;
  }

  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .map {
    width: 100%;
    height: 300px;
  }
}

@media (max-width: 575px) {
  .contact-section {
    margin: 60px 10px;
  }

  .contact-form {
    padding: 0 10px;
  }

  .contact-form h2 {
    font-size: 32px;
  }

  .contact-form p {
    font-size: 16px;
  }

  .contact-cards {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .contact-card {
    min-height: 140px;
  }

  .map {
    height: 260px;
  }
}


/* CONTACT CARDS */

.contact-cards{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
margin-bottom:30px;

}

.contact-card{
background:#2fc1ee82;
height:150px;
border-radius:15px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-weight:500;
color:#1c1c1c;

}

.contact-card i{

font-size:50px;
color:#3aa6c9;
margin-bottom:10px;
}

.contact-card:hover{
background:white;
color:#3aa6c9;
width: 105%;
height: 160px;
transition:0.5s;
border: 0.5px #3aa6c9;

}

.btn:hover{
  color:#2FC0EE;
  background-color: white;
  transition: 0.5s;
}


/* MAP */
.map{
  width:100%;
  height:300px;
  border-radius:12px;
  overflow:hidden;
  margin-top:20px;
}

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


/* FORM */

.contact-form h2{

font-size:40px;
color:#f28c3c;
margin-bottom:10px;

}

.contact-form p{

margin-bottom:30px;
font-size:18px;

}

.contact-form label{

display:block;
margin-top:15px;
margin-bottom:5px;
font-weight:500;

}

.contact-form input{

width:100%;
height:45px;
border:none;
background:#ddd;
border-radius:10px;
padding-left:15px;

}

.contact-form textarea{

width:100%;
height:140px;
border:none;
background:#ddd;
border-radius:10px;
padding:10px;
resize:none;

}

.contact-form button{

margin-top:25px;
width:100%;
height:50px;
border:none;
border-radius:30px;
background:#3aa6c9;
color:white;
font-size:18px;
cursor:pointer;

}

/* FOOTER */

footer{
margin-top:80px;
background:#06202B;
color:white;
padding:70px 80px;
}


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

.newsletter{
margin-top:40px;
text-align:center;
}

.newsletter input{
width:100%;
max-width:1159px;
padding:12px;
margin:8px auto;
display:block;
border-radius:6px;
border:none;
}

.newsletter input:hover{
transform: translateY(3px);}

.newsletter button{
  width: 100%;
  max-width: 1159px;
background:#e7b287;
padding:12px 28px;
border:none;
border-radius:6px;
margin:10px auto;
}

.newsletter button:hover{
background:#f28b3ca7;
color: white;
transition:0.3s;}

.social-icons{
margin-top:20px;
display:flex;
gap:18px;
}

.social-icons a{
width:36px;
height:36px;
border-radius:50%;
background:#247a9f;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:16px;
transition:0.3s;
text-decoration: none;
}

.footlink,
.footer-links ul a,
.footer-links a.footlink {
 text-decoration: none;
 color:white;
}

.footlink:hover,
.footer-links ul a:hover,
.footer-links a.footlink:hover {
  color: #f28c3c;
  cursor: pointer;
  text-decoration:none;
}

.social-icons a:hover{
background:#f28c3c;
transform:translateY(-3px);
}

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

.footer-links ul li {
  margin-bottom: 10px;
}

.footer-links ul a {
  color: white;
  text-decoration: none;
  display: block;
}

.footer-links ul a:hover {
  color: #f28c3c;
}

@media (max-width: 991px) {
  footer {
    padding: 40px 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-about,
  .footer-links,
  .footer-contact,
  .newsletter {
    width: 100%;
  }

  .footer-about {
    text-align: center;
  }

  .social-icons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .social-icons a {
    margin-bottom: 10px;
  }

  .footer-links,
  .footer-contact,
  .newsletter {
    text-align: center;
  }

  .newsletter input,
  .newsletter button {
    max-width: 100%;
  }

  .newsletter input {
    margin: 8px 0;
  }

  .newsletter button {
    margin: 10px 0 0;
  }
}