/* General Styling */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:#f4f7fb;
    color:#333;
}

/* Navigation */
.navbar{
    background:white;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:25px 10%;

    box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

/* Logo */
.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

/* Logo Circle */
.logo-circle{
    width:65px;
    height:65px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #0b3d91,
        #00b894
    );

    display:flex;
    justify-content:center;
    align-items:center;

    color:white;
    font-size:28px;
    font-weight:bold;

    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* Logo Text */
.logo h2{
    color:#0b3d91;
    font-size:34px;
}

/* Navigation Links */
nav a{
    text-decoration:none;
    color:#333;

    margin-left:30px;

    font-size:20px;
    font-weight:bold;

    position:relative;

    transition:0.4s;
}

/* Hover Effect */
nav a::after{
    content:'';

    width:0%;
    height:4px;

    background:#00b894;

    position:absolute;
    left:0;
    bottom:-8px;

    transition:0.4s;
}

nav a:hover::after{
    width:100%;
}

nav a:hover{
    color:#0b3d91;
}

/* Hero Section */
.hero-section{
    position:relative;

    min-height:700px;

    background:linear-gradient(
        135deg,
        #0b3d91,
        #00b894
    );

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:80px 10%;

    overflow:hidden;
}

/* Background Logo */
.background-logo{
    position:absolute;

    font-size:420px;
    font-weight:bold;

    color:rgba(255,255,255,0.07);

    left:50%;
    top:50%;

    transform:translate(-50%, -50%);

    animation:floatLogo 6s infinite ease-in-out;
}

/* Animation */
@keyframes floatLogo{

    0%{
        transform:translate(-50%, -50%) translateY(0px);
    }

    50%{
        transform:translate(-50%, -50%) translateY(-20px);
    }

    100%{
        transform:translate(-50%, -50%) translateY(0px);
    }
}

/* Hero Text */
.hero-text{
    width:55%;
    position:relative;
    z-index:1;
}

.hero-text h1{
    color:white;

    font-size:70px;

    line-height:1.3;

    margin-bottom:30px;
}

.hero-text p{
    color:white;

    font-size:24px;

    line-height:1.9;

    margin-bottom:40px;
}

/* Buttons */
.hero-buttons{
    display:flex;
    gap:20px;
}

/* Button */
.btn{
    padding:18px 40px;

    background:white;
    color:#0b3d91;

    border-radius:12px;

    text-decoration:none;

    font-size:22px;
    font-weight:bold;

    transition:0.4s;
}

/* Second Button */
.secondary-btn{
    background:transparent;
    border:2px solid white;
    color:white;
}

/* Hover */
.btn:hover{

    transform:
    translateY(-8px)
    scale(1.05);

    background:#00b894;
    color:white;

    box-shadow:0 12px 25px rgba(0,0,0,0.2);
}

/* Hero Image */
.hero-image{
    width:40%;

    display:flex;
    justify-content:center;

    position:relative;
    z-index:1;
}

/* Circular Image */
.image-circle{
    width:380px;
    height:380px;

    border-radius:50%;

    overflow:hidden;

    border:8px solid white;

    box-shadow:0 15px 30px rgba(0,0,0,0.2);

    transition:0.4s;
}

/* Hover Effect */
.image-circle:hover{

    transform:
    scale(1.05)
    rotate(2deg);
}

/* Image */
.image-circle img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* Welcome Section */
.welcome-section{
    padding:100px 10%;

    display:flex;
    justify-content:center;
}

/* Welcome Card */
.welcome-card{
    background:white;

    max-width:1000px;

    padding:50px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,0.1);

    transition:0.4s;
}

/* Hover */
.welcome-card:hover{

    transform:
    translateY(-10px)
    scale(1.02);

    box-shadow:0 18px 35px rgba(0,0,0,0.2);
}

/* Welcome Title */
.welcome-card h2{
    color:#0b3d91;

    font-size:50px;

    margin-bottom:25px;
}

/* Welcome Text */
.welcome-card p{
    font-size:23px;

    line-height:2;
}

/* Services Section */
.services-section{
    padding:100px 8%;

    text-align:center;
}

/* Services Title */
.services-section h2{
    color:#0b3d91;

    font-size:55px;

    margin-bottom:60px;
}

/* Services Container */
.services-container{
    display:flex;
    justify-content:center;

    gap:30px;

    flex-wrap:wrap;
}

/* Service Card */
.service-card{
    background:white;

    width:330px;

    padding:40px;

    border-radius:25px;

    transition:0.4s;

    box-shadow:0 10px 25px rgba(0,0,0,0.1);

    cursor:pointer;
}

/* Hover Effect */
.service-card:hover{

    transform:
    translateY(-12px)
    scale(1.05);

    background:linear-gradient(
        135deg,
        #0b3d91,
        #00b894
    );

    color:white;
}

/* Icons */
.service-card i{
    font-size:55px;

    color:#0b3d91;

    margin-bottom:25px;
}

/* Hover Icon */
.service-card:hover i{
    color:white;
}

/* Titles */
.service-card h3{
    font-size:32px;

    margin-bottom:20px;
}

/* Text */
.service-card p{
    font-size:19px;

    line-height:1.8;
}

/* Footer */
footer{
    background:#0b3d91;

    color:white;

    text-align:center;

    padding:40px;
}

/* Footer Logo */
.footer-logo{
    width:75px;
    height:75px;

    margin:0 auto 20px;

    border-radius:50%;

    background:white;

    color:#0b3d91;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:30px;
    font-weight:bold;
}

/* Footer Text */
footer p{
    font-size:20px;
}

/* Responsive */
@media(max-width:768px){

    .navbar{
        flex-direction:column;
    }

    nav a{
        display:block;
        margin:15px 0;
    }

    .hero-section{
        flex-direction:column;
        text-align:center;
    }

    .hero-text,
    .hero-image{
        width:100%;
    }

    .hero-text h1{
        font-size:42px;
    }

    .hero-text p{
        font-size:20px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .image-circle{
        width:280px;
        height:280px;

        margin-top:40px;
    }

    .background-logo{
        font-size:180px;
    }

    .service-card{
        width:100%;
    }

}/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f5f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 8%;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.logo h2{
  color:#0b3d91;
}

/* Menu */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:25px;
  font-weight:bold;
  transition:0.3s;
}

nav a:hover{
  color:#0b3d91;
}

/* Main Section */
.skills-section{
  padding:60px 8%;
}

.skills-section h1{
  text-align:center;
  font-size:42px;
  color:#0b3d91;
  margin-bottom:50px;
}

/* Education */
.education{
  background:white;
  padding:30px;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  margin-bottom:50px;
}

.education h2{
  margin-bottom:20px;
  color:#0b3d91;
}

/* Table */
table{
  width:100%;
  border-collapse:collapse;
}

table th{
  background:#0b3d91;
  color:white;
  padding:15px;
  text-align:left;
}

table td{
  padding:15px;
  border-bottom:1px solid #ddd;
}/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 10%;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.logo h2{
  color:#0b3d91;
  font-size:34px;
}

/* Navigation Links */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:30px;
  font-size:20px;
  font-weight:bold;
  position:relative;
  transition:0.4s;
}

/* Hover Effect */
nav a::after{
  content:'';
  width:0%;
  height:4px;
  background:#00b894;
  position:absolute;
  left:0;
  bottom:-8px;
  transition:0.4s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#0b3d91;
}

/* Hero Section */
.hero-section{
  position:relative;

  height:500px;

  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
}

/* Background Logo */
.background-logo{
  position:absolute;

  font-size:350px;
  font-weight:bold;

  color:rgba(255,255,255,0.08);

  letter-spacing:20px;

  animation:floatLogo 6s infinite ease-in-out;
}

/* Logo Animation */
@keyframes floatLogo{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-20px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* Hero Content */
.hero-content{
  position:relative;
  z-index:1;
  text-align:center;
  color:white;
}

.hero-content h1{
  font-size:68px;
  margin-bottom:20px;

  animation:textZoom 3s infinite alternate;
}

.hero-content p{
  font-size:28px;
}

/* Text Animation */
@keyframes textZoom{

  from{
    transform:scale(1);
    letter-spacing:2px;
  }

  to{
    transform:scale(1.04);
    letter-spacing:4px;
  }
}

/* Skills Section */
.skills-section{
  padding:100px 8%;
  text-align:center;
}

.skills-section h2{
  color:#0b3d91;
  font-size:50px;
  margin-bottom:60px;
}

/* Skills Container */
.skills-container{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:30px;
}

/* Skill Cards */
.skill-card{
  background:white;

  width:320px;

  padding:35px;

  border-radius:20px;

  transition:0.4s;

  box-shadow:0 8px 20px rgba(0,0,0,0.1);

  cursor:pointer;
}

/* Hover Effect */
.skill-card:hover{

  transform:
  translateY(-12px)
  scale(1.05);

  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  color:white;

  box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

.skill-card h3{
  font-size:30px;
  margin-bottom:20px;
}

.skill-card p{
  font-size:19px;
  line-height:1.8;
}

/* Education Section */
.education-section{
  background:white;
  padding:100px 8%;
  text-align:center;
}

.education-section h2{
  color:#0b3d91;
  font-size:50px;
  margin-bottom:50px;
}

/* Table Container */
.table-container{
  overflow-x:auto;
}

/* Table */
table{
  width:100%;
  border-collapse:collapse;

  border-radius:20px;
  overflow:hidden;

  box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

/* Table Header */
table th{
  background:#0b3d91;
  color:white;

  padding:25px;

  font-size:24px;
}

/* Table Data */
table td{
  padding:22px;

  font-size:20px;

  border-bottom:1px solid #ddd;
}

/* Row Hover */
table tr:hover{
  background:#e8f8f5;
  transition:0.3s;
}

/* Values Section */
.values-section{
  padding:100px 8%;
  text-align:center;
}

.values-section h2{
  color:#0b3d91;
  font-size:50px;
  margin-bottom:60px;
}

/* Values Container */
.values-container{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:30px;
}

/* Value Box */
.value-box{
  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  color:white;

  width:300px;

  padding:35px;

  border-radius:20px;

  transition:0.4s;

  box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

/* Hover Effect */
.value-box:hover{

  transform:
  translateY(-10px)
  scale(1.05);

  box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

.value-box h3{
  font-size:28px;
  margin-bottom:20px;
}

.value-box p{
  font-size:18px;
  line-height:1.8;
}

/* Footer */
footer{
  background:#0b3d91;
  color:white;

  text-align:center;

  padding:30px;

  font-size:20px;
}

/* Responsive Design */
@media(max-width:768px){

  .navbar{
    flex-direction:column;
  }

  nav a{
    display:block;
    margin:15px 0;
  }

  .hero-content h1{
    font-size:42px;
  }

  .hero-content p{
    font-size:22px;
  }

  .background-logo{
    font-size:180px;
  }

  .skill-card,
  .value-box{
    width:100%;
  }

}

/* Business Information */
.business-info{
  display:flex;
  justify-content:center;
  gap:30px;
  padding:60px 8%;
  flex-wrap:wrap;
}

/* Info Cards */
.info-card{
  background:white;
  width:500px;
  padding:35px;
  border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.info-card h2{
  color:#0b3d91;
  margin-bottom:20px;
}

.info-card p,
.info-card ul{
  line-height:1.8;
}

.info-card ul{
  padding-left:20px;
}

/* Canvas Section */
.canvas-section{
  padding:60px 8%;
}

.canvas-section h2{
  text-align:center;
  color:#0b3d91;
  font-size:40px;
  margin-bottom:40px;
}

/* Table Design */
.canvas-table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:15px;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
  background:white;
}

/* Table Header */
.canvas-table th{
  background:#0b3d91;
  color:white;
  padding:20px;
  font-size:20px;
  text-align:left;
}

/* Table Data */
.canvas-table td{
  padding:20px;
  border-bottom:1px solid #ddd;
  line-height:1.7;
}

/* Left Column */
.title-column{
  background:#e3f2fd;
  color:#0b3d91;
  font-weight:bold;
  width:30%;
}

/* Hover Effect */
.canvas-table tr:hover{
  background:#f1f8ff;
  transition:0.3s;
}

/* Footer */
footer{
  background:#0b3d91;
  color:white;
  text-align:center;
  padding:20px;
  margin-top:50px;
}

/* Responsive Design */
@media(max-width:768px){

  .navbar{
    flex-direction:column;
  }

  nav a{
    display:inline-block;
    margin:10px;
  }

  .hero h1{
    font-size:35px;
  }

  .hero p{
    font-size:18px;
  }

  .info-card{
    width:100%;
  }

  .canvas-table{
    display:block;
    overflow-x:auto;
  }

}/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 8%;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.logo h2{
  color:#0b3d91;
}

/* Navigation Links */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:25px;
  font-weight:bold;
  transition:0.3s;
  position:relative;
}

/* Hover Effect */
nav a::after{
  content:'';
  width:0%;
  height:3px;
  background:#00b894;
  position:absolute;
  left:0;
  bottom:-6px;
  transition:0.4s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#0b3d91;
}

/* Hero Section */
.hero{
  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  color:white;
  text-align:center;
  padding:100px 10%;
}

.hero h1{
  font-size:55px;
  margin-bottom:20px;
}

.hero p{
  font-size:20px;
  line-height:1.8;
}

/* Contact Section */
.contact-section{
  display:flex;
  justify-content:center;
  gap:40px;
  padding:70px 8%;
  flex-wrap:wrap;
}

/* Contact Info */
.contact-info,
.contact-form{
  background:white;
  width:500px;
  padding:40px;
  border-radius:15px;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
  transition:0.4s;
}

/* Hover Card Effect */
.contact-info:hover,
.contact-form:hover{
  transform:translateY(-10px);
}

/* Titles */
.contact-info h2,
.contact-form h2{
  color:#0b3d91;
  margin-bottom:30px;
}

/* Info Boxes */
.info-box{
  background:#f4f7fb;
  padding:20px;
  margin-bottom:20px;
  border-left:5px solid #00b894;
  border-radius:8px;
  transition:0.3s;
}

.info-box:hover{
  background:#e8f8f5;
  transform:scale(1.02);
}

.info-box h3{
  color:#0b3d91;
  margin-bottom:10px;
}

/* Form Inputs */
form input,
form textarea{
  width:100%;
  padding:15px;
  margin-bottom:20px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:16px;
  outline:none;
  transition:0.3s;
}

/* Input Hover */
form input:focus,
form textarea:focus{
  border-color:#00b894;
  box-shadow:0 0 8px rgba(0,184,148,0.4);
}

/* Button */
button{
  background:#0b3d91;
  color:white;
  border:none;
  padding:15px 35px;
  font-size:16px;
  border-radius:8px;
  cursor:pointer;
  transition:0.4s;
}

/* Button Hover */
button:hover{
  background:#00b894;
  transform:translateY(-3px);
}

/* Footer */
footer{
  background:#0b3d91;
  color:white;
  text-align:center;
  padding:20px;
  margin-top:40px;
}/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 10%;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.logo-text h2{
  color:#0b3d91;
  font-size:34px;
}

/* Navigation Links */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:30px;
  font-size:20px;
  font-weight:bold;
  transition:0.4s;
  position:relative;
}

/* Hover Effect */
nav a::after{
  content:'';
  width:0%;
  height:4px;
  background:#00b894;
  position:absolute;
  left:0;
  bottom:-8px;
  transition:0.4s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#0b3d91;
}

/* Hero Section */
.contact-hero{
  position:relative;
  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  height:450px;

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
}

/* Background Logo */
.background-logo{
  position:absolute;
  font-size:250px;
  font-weight:bold;
  color:rgba(255,255,255,0.08);

  letter-spacing:20px;
  user-select:none;
}

/* Hero Content */
.hero-content{
  text-align:center;
  color:white;
  z-index:1;
}

.hero-content h1{
  font-size:65px;
  margin-bottom:20px;
}

.hero-content p{
  font-size:28px;
  letter-spacing:1px;
}

/* Contact Section */
.contact-section{
  display:flex;
  justify-content:center;
  gap:40px;
  padding:80px 8%;
  flex-wrap:wrap;
}

/* Cards */
.contact-card{
  background:white;
  width:550px;
  padding:40px;
  border-radius:20px;
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
  transition:0.4s;
}

/* Hover Effect */
.contact-card:hover{
  transform:translateY(-10px);
  box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

/* Titles */
.contact-card h2{
  color:#0b3d91;
  font-size:34px;
  margin-bottom:30px;
}

/* Info Boxes */
.info-box{
  background:#f4f7fb;
  padding:22px;
  margin-bottom:20px;
  border-left:6px solid #00b894;
  border-radius:10px;
  transition:0.3s;
}

.info-box:hover{
  background:#e8f8f5;
  transform:scale(1.03);
}

.info-box h3{
  color:#0b3d91;
  margin-bottom:10px;
  font-size:22px;
}

.info-box p{
  font-size:18px;
}

/* Form Inputs */
form input,
form textarea{
  width:100%;
  padding:18px;
  margin-bottom:25px;
  border:2px solid #ddd;
  border-radius:10px;
  font-size:18px;
  outline:none;
  transition:0.3s;
}

/* Input Hover */
form input:focus,
form textarea:focus{
  border-color:#00b894;
  box-shadow:0 0 10px rgba(0,184,148,0.4);
}

/* Button */
button{
  background:#0b3d91;
  color:white;
  border:none;
  padding:18px 40px;
  font-size:20px;
  border-radius:10px;
  cursor:pointer;
  transition:0.4s;
  font-weight:bold;
}

/* Button Hover */
button:hover{
  background:#00b894;
  transform:translateY(-5px);
}

/* Footer */
footer{
  background:#0b3d91;
  color:white;
  text-align:center;
  padding:30px;
  font-size:20px;
}

/* Responsive Design */
@media(max-width:768px){

  .navbar{
    flex-direction:column;
  }

  nav a{
    display:block;
    margin:15px 0;
  }

  .hero-content h1{
    font-size:42px;
  }

  .hero-content p{
    font-size:22px;
  }

  .background-logo{
    font-size:140px;
  }

  .contact-card{
    width:100%;
  }

}/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 10%;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.logo h2{
  color:#0b3d91;
  font-size:34px;
}

/* Navigation Links */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:30px;
  font-size:20px;
  font-weight:bold;
  transition:0.4s;
  position:relative;
}

/* Hover Effect */
nav a::after{
  content:'';
  width:0%;
  height:4px;
  background:#00b894;
  position:absolute;
  left:0;
  bottom:-8px;
  transition:0.4s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#0b3d91;
}

/* Hero Section */
.hero-section{
  position:relative;

  height:550px;

  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
}

/* Background Logo */
.background-logo{
  position:absolute;

  font-size:350px;
  font-weight:bold;

  color:rgba(255,255,255,0.08);

  letter-spacing:20px;

  animation:floatLogo 6s infinite ease-in-out;
}

/* Logo Animation */
@keyframes floatLogo{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-20px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* Hero Content */
.hero-content{
  position:relative;
  z-index:1;

  text-align:center;
  color:white;
}

.hero-content h1{
  font-size:75px;
  margin-bottom:20px;

  animation:textMove 3s infinite alternate;
}

.hero-content p{
  font-size:30px;
  margin-bottom:35px;
}

/* Text Animation */
@keyframes textMove{

  from{
    transform:scale(1);
    letter-spacing:2px;
  }

  to{
    transform:scale(1.05);
    letter-spacing:5px;
  }
}

/* Hero Button */
.hero-btn{
  display:inline-block;

  background:white;
  color:#0b3d91;

  padding:18px 40px;

  font-size:22px;
  font-weight:bold;

  text-decoration:none;

  border-radius:10px;

  transition:0.4s;
}

/* Button Hover */
.hero-btn:hover{

  background:#00b894;
  color:white;

  transform:translateY(-6px);

  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 10%;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.logo h2{
  color:#0b3d91;
  font-size:34px;
}

/* Navigation Links */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:30px;
  font-size:20px;
  font-weight:bold;
  position:relative;
  transition:0.4s;
}

/* Hover Effect */
nav a::after{
  content:'';
  width:0%;
  height:4px;
  background:#00b894;
  position:absolute;
  left:0;
  bottom:-8px;
  transition:0.4s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#0b3d91;
}

/* Hero Section */
.hero-section{
  position:relative;

  height:500px;

  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
}

/* Background Logo */
.background-logo{
  position:absolute;

  font-size:350px;
  font-weight:bold;

  color:rgba(255,255,255,0.08);

  letter-spacing:20px;

  animation:floatLogo 6s infinite ease-in-out;
}

/* Logo Animation */
@keyframes floatLogo{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-20px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* Hero Content */
.hero-content{
  position:relative;
  z-index:1;

  text-align:center;
  color:white;
}

.hero-content h1{
  font-size:70px;
  margin-bottom:20px;

  animation:textZoom 3s infinite alternate;
}

.hero-content p{
  font-size:28px;
}

/* Text Animation */
@keyframes textZoom{

  from{
    transform:scale(1);
    letter-spacing:2px;
  }

  to{
    transform:scale(1.04);
    letter-spacing:4px;
  }
}

/* Intro Section */
.intro-section{
  padding:80px 10%;
  display:flex;
  justify-content:center;
}

/* Intro Card */
.intro-card{
  background:white;

  max-width:1000px;

  padding:50px;

  border-radius:20px;

  text-align:center;

  box-shadow:0 8px 20px rgba(0,0,0,0.1);

  transition:0.4s;
}

/* Hover Effect */
.intro-card:hover{

  transform:
  translateY(-10px)
  scale(1.02);

  box-shadow:0 15px 30px rgba(0,0,0,0.15);
}

.intro-card h2{
  color:#0b3d91;
  font-size:45px;
  margin-bottom:25px;
}

.intro-card p{
  font-size:22px;
  line-height:1.9;
}

/* Framework Section */
.framework-section{
  padding:100px 8%;
  text-align:center;
}

.framework-section h2{
  color:#0b3d91;
  font-size:55px;
  margin-bottom:50px;
}

/* Table Container */
.table-container{
  overflow-x:auto;
}

/* Table */
table{
  width:100%;
  border-collapse:collapse;

  border-radius:20px;
  overflow:hidden;

  box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

/* Table Header */
table th{
  background:#0b3d91;
  color:white;

  padding:25px;

  font-size:24px;
}

/* Table Data */
table td{
  padding:25px;

  font-size:20px;

  line-height:1.8;

  border-bottom:1px solid #ddd;

  transition:0.3s;
}

/* Left Column */
.title-column{
  background:#e8f8f5;
  color:#0b3d91;
  font-weight:bold;
}

/* Row Hover */
table tr:hover{
  background:#f4f7fb;
}

/* Value Section */
.value-section{
  padding:100px 8%;
  text-align:center;
}

.value-section h2{
  color:#0b3d91;
  font-size:50px;
  margin-bottom:60px;
}

/* Value Container */
.value-container{
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
}

/* Value Box */
.value-box{
  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  color:white;

  width:320px;

  padding:40px;

  border-radius:20px;

  transition:0.4s;

  box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

/* Hover Effect */
.value-box:hover{

  transform:
  translateY(-12px)
  scale(1.05);

  box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

.value-box h3{
  font-size:32px;
  margin-bottom:20px;
}

.value-box p{
  font-size:19px;
  line-height:1.8;
}

/* Footer */
footer{
  background:#0b3d91;
  color:white;

  text-align:center;

  padding:30px;

  font-size:20px;
}

/* Responsive Design */
@media(max-width:768px){

  .navbar{
    flex-direction:column;
  }

  nav a{
    display:block;
    margin:15px 0;
  }

  .hero-content h1{
    font-size:42px;
  }

  .hero-content p{
    font-size:22px;
  }

  .background-logo{
    font-size:180px;
  }

  .intro-card h2,
  .framework-section h2,
  .value-section h2{
    font-size:36px;
  }

  .value-box{
    width:100%;
  }

}
/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 10%;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.logo h2{
  color:#0b3d91;
  font-size:34px;
}

/* Navigation Links */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:30px;
  font-size:20px;
  font-weight:bold;
  position:relative;
  transition:0.4s;
}

/* Hover Effect */
nav a::after{
  content:'';
  width:0%;
  height:4px;
  background:#00b894;
  position:absolute;
  left:0;
  bottom:-8px;
  transition:0.4s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#0b3d91;
}

/* Hero Section */
.hero-section{
  position:relative;

  height:500px;

  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
}

/* Background Logo */
.background-logo{
  position:absolute;

  font-size:350px;
  font-weight:bold;

  color:rgba(255,255,255,0.08);

  letter-spacing:20px;

  animation:floatLogo 6s infinite ease-in-out;
}

/* Logo Animation */
@keyframes floatLogo{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-20px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* Hero Content */
.hero-content{
  position:relative;
  z-index:1;
  text-align:center;
  color:white;
}

.hero-content h1{
  font-size:70px;
  margin-bottom:20px;

  animation:textZoom 3s infinite alternate;
}

.hero-content p{
  font-size:28px;
}

/* Text Animation */
@keyframes textZoom{

  from{
    transform:scale(1);
    letter-spacing:2px;
  }

  to{
    transform:scale(1.05);
    letter-spacing:5px;
  }
}

/* Canvas Section */
.canvas-section{
  padding:100px 8%;
  text-align:center;
}

.canvas-section h2{
  color:#0b3d91;
  font-size:55px;
  margin-bottom:60px;
}

/* Grid Layout */
.canvas-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit, minmax(280px, 1fr));

  gap:30px;
}

/* Canvas Cards */
.canvas-card{
  color:white;

  padding:35px;

  border-radius:22px;

  transition:0.4s;

  text-align:left;

  box-shadow:0 10px 25px rgba(0,0,0,0.1);

  cursor:pointer;
}

/* Hover Effects */
.canvas-card:hover{

  transform:
  translateY(-12px)
  scale(1.05);

  box-shadow:0 18px 35px rgba(0,0,0,0.2);
}

/* Titles */
.canvas-card h3{
  font-size:30px;
  margin-bottom:25px;
}

/* Lists */
.canvas-card ul{
  padding-left:20px;
}

.canvas-card li{
  font-size:19px;
  line-height:2;
}

/* Individual Colors */
.partners{
  background:linear-gradient(
    135deg,
    #6a11cb,
    #2575fc
  );
}

.activities{
  background:linear-gradient(
    135deg,
    #11998e,
    #38ef7d
  );
}

.value{
  background:linear-gradient(
    135deg,
    #ff512f,
    #dd2476
  );
}

.relationships{
  background:linear-gradient(
    135deg,
    #fc4a1a,
    #f7b733
  );
}

.segments{
  background:linear-gradient(
    135deg,
    #654ea3,
    #eaafc8
  );
}

.resources{
  background:linear-gradient(
    135deg,
    #00b09b,
    #96c93d
  );
}

.channels{
  background:linear-gradient(
    135deg,
    #4568dc,
    #b06ab3
  );
}

.costs{
  background:linear-gradient(
    135deg,
    #ff9966,
    #ff5e62
  );
}

.revenue{
  background:linear-gradient(
    135deg,
    #1d976c,
    #93f9b9
  );
}

/* Footer */
footer{
  background:#0b3d91;
  color:white;

  text-align:center;

  padding:30px;

  font-size:20px;
}

/* Responsive Design */
@media(max-width:768px){

  .navbar{
    flex-direction:column;
  }

  nav a{
    display:block;
    margin:15px 0;
  }

  .hero-content h1{
    font-size:42px;
  }

  .hero-content p{
    font-size:22px;
  }

  .background-logo{
    font-size:180px;
  }

  .canvas-section h2{
    font-size:38px;
  }

}
/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 10%;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.logo h2{
  color:#0b3d91;
  font-size:34px;
}

/* Navigation Links */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:30px;
  font-size:20px;
  font-weight:bold;
  position:relative;
  transition:0.4s;
}

nav a::after{
  content:'';
  width:0%;
  height:4px;
  background:#00b894;
  position:absolute;
  left:0;
  bottom:-8px;
  transition:0.4s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#0b3d91;
}

/* Hero Section */
.hero-section{
  position:relative;

  height:500px;

  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
}

/* Background Logo */
.background-logo{
  position:absolute;

  font-size:350px;
  font-weight:bold;

  color:rgba(255,255,255,0.08);

  letter-spacing:20px;

  animation:floatLogo 6s infinite ease-in-out;
}

@keyframes floatLogo{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-20px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* Hero Content */
.hero-content{
  position:relative;
  z-index:1;
  text-align:center;
  color:white;
}

.hero-content h1{
  font-size:70px;
  margin-bottom:20px;

  animation:textZoom 3s infinite alternate;
}

.hero-content p{
  font-size:28px;
}

@keyframes textZoom{

  from{
    transform:scale(1);
    letter-spacing:2px;
  }

  to{
    transform:scale(1.05);
    letter-spacing:5px;
  }
}

/* Sections */
.about-section,
.history-section{
  padding:90px 10%;
  display:flex;
  justify-content:center;
}

/* Cards */
.about-card,
.history-card{
  background:white;

  max-width:1000px;

  padding:50px;

  border-radius:20px;

  text-align:center;

  box-shadow:0 8px 20px rgba(0,0,0,0.1);

  transition:0.4s;
}

/* Hover */
.about-card:hover,
.history-card:hover{

  transform:
  translateY(-10px)
  scale(1.02);

  box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

.about-card h2,
.history-card h2{
  color:#0b3d91;
  font-size:48px;
  margin-bottom:25px;
}

.about-card p,
.history-card p{
  font-size:22px;
  line-height:1.9;
}

/* Mission Section */
.mission-section,
.assets-section,
.team-section{
  padding:100px 8%;
  text-align:center;
}

.mission-section h2,
.assets-section h2,
.team-section h2{
  color:#0b3d91;
  font-size:55px;
  margin-bottom:60px;
}

/* Containers */
.mission-container,
.assets-container,
.team-container{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:30px;
}

/* Boxes */
.mission-box,
.asset-card,
.team-card{
  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  color:white;

  width:320px;

  padding:35px;

  border-radius:20px;

  transition:0.4s;

  box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

/* Hover Effects */
.mission-box:hover,
.asset-card:hover,
.team-card:hover{

  transform:
  translateY(-12px)
  scale(1.05);

  box-shadow:0 18px 35px rgba(0,0,0,0.2);
}

/* Titles */
.mission-box h3,
.asset-card h3,
.team-card h3{
  font-size:30px;
  margin-bottom:20px;
}

/* Paragraphs */
.mission-box p,
.asset-card p,
.team-card p{
  font-size:18px;
  line-height:1.8;
}

/* Footer */
footer{
  background:#0b3d91;
  color:white;

  text-align:center;

  padding:30px;

  font-size:20px;
}

/* Responsive Design */
@media(max-width:768px){

  .navbar{
    flex-direction:column;
  }

  nav a{
    display:block;
    margin:15px 0;
  }

  .hero-content h1{
    font-size:42px;
  }

  .hero-content p{
    font-size:22px;
  }

  .background-logo{
    font-size:180px;
  }

  .mission-section h2,
  .assets-section h2,
  .team-section h2{
    font-size:38px;
  }

  .mission-box,
  .asset-card,
  .team-card{
    width:100%;
  }

}
/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 10%;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.logo h2{
  color:#0b3d91;
  font-size:34px;
}

/* Navigation Links */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:30px;
  font-size:20px;
  font-weight:bold;
  position:relative;
  transition:0.4s;
}

nav a::after{
  content:'';
  width:0%;
  height:4px;
  background:#00b894;
  position:absolute;
  left:0;
  bottom:-8px;
  transition:0.4s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#0b3d91;
}

/* Hero Section */
.hero-section{
  position:relative;

  height:500px;

  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
}

/* Background Logo */
.background-logo{
  position:absolute;

  font-size:350px;
  font-weight:bold;

  color:rgba(255,255,255,0.08);

  letter-spacing:20px;

  animation:floatLogo 6s infinite ease-in-out;
}

/* Logo Animation */
@keyframes floatLogo{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-20px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* Hero Content */
.hero-content{
  position:relative;
  z-index:1;

  text-align:center;
  color:white;
}

.hero-content h1{
  font-size:70px;
  margin-bottom:20px;

  animation:textZoom 3s infinite alternate;
}

.hero-content p{
  font-size:28px;
}

/* Text Animation */
@keyframes textZoom{

  from{
    transform:scale(1);
    letter-spacing:2px;
  }

  to{
    transform:scale(1.05);
    letter-spacing:5px;
  }
}

/* Contact Section */
.contact-section{
  display:flex;
  justify-content:center;
  gap:40px;

  padding:100px 8%;

  flex-wrap:wrap;
}

/* Cards */
.contact-card,
.form-card{
  background:white;

  width:550px;

  padding:45px;

  border-radius:25px;

  box-shadow:0 10px 25px rgba(0,0,0,0.1);

  transition:0.4s;
}

/* Hover Effects */
.contact-card:hover,
.form-card:hover{

  transform:
  translateY(-12px)
  scale(1.02);

  box-shadow:0 18px 35px rgba(0,0,0,0.2);
}

/* Titles */
.contact-card h2,
.form-card h2{
  color:#0b3d91;
  font-size:42px;
  margin-bottom:35px;
}

/* Contact Info */
.contact-info{
  display:flex;
  flex-direction:column;
  gap:25px;
}

/* Info Box */
.info-box{
  display:flex;
  align-items:center;
  gap:20px;

  background:#f4f7fb;

  padding:22px;

  border-radius:15px;

  transition:0.4s;
}

/* Hover */
.info-box:hover{

  background:#e8f8f5;

  transform:translateX(10px);
}

/* Icons */
.info-box i{
  font-size:28px;
  color:#0b3d91;
}

/* Info Text */
.info-box h3{
  font-size:24px;
  margin-bottom:5px;
}

.info-box p{
  font-size:18px;
}

/* Social Media */
.social-media{
  display:flex;
  justify-content:center;
  gap:20px;

  margin-top:40px;
}/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 10%;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.logo h2{
  color:#0b3d91;
  font-size:34px;
}

/* Navigation Links */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:30px;
  font-size:20px;
  font-weight:bold;
  position:relative;
  transition:0.4s;
}

nav a::after{
  content:'';
  width:0%;
  height:4px;
  background:#00b894;
  position:absolute;
  left:0;
  bottom:-8px;
  transition:0.4s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#0b3d91;
}

/* Hero Section */
.hero-section{
  position:relative;

  height:500px;

  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
}

/* Background Logo */
.background-logo{
  position:absolute;

  font-size:350px;
  font-weight:bold;

  color:rgba(255,255,255,0.08);

  letter-spacing:20px;

  animation:floatLogo 6s infinite ease-in-out;
}

/* Logo Animation */
@keyframes floatLogo{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-20px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* Hero Content */
.hero-content{
  position:relative;
  z-index:1;

  text-align:center;
  color:white;
}

.hero-content h1{
  font-size:70px;
  margin-bottom:20px;

  animation:textZoom 3s infinite alternate;
}

.hero-content p{
  font-size:28px;
}

/* Text Animation */
@keyframes textZoom{

  from{
    transform:scale(1);
    letter-spacing:2px;
  }

  to{
    transform:scale(1.05);
    letter-spacing:5px;
  }
}
/* General Styling */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#f4f7fb;
  color:#333;
}

/* Navigation */
.navbar{
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 10%;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.logo h2{
  color:#0b3d91;
  font-size:34px;
}

/* Navigation Links */
nav a{
  text-decoration:none;
  color:#333;
  margin-left:30px;
  font-size:20px;
  font-weight:bold;
  position:relative;
  transition:0.4s;
}

nav a::after{
  content:'';
  width:0%;
  height:4px;
  background:#00b894;
  position:absolute;
  left:0;
  bottom:-8px;
  transition:0.4s;
}

nav a:hover::after{
  width:100%;
}

nav a:hover{
  color:#0b3d91;
}

/* Hero Section */
.hero-section{
  position:relative;

  height:500px;

  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;
}

/* Background Logo */
.background-logo{
  position:absolute;

  font-size:350px;
  font-weight:bold;

  color:rgba(255,255,255,0.08);

  letter-spacing:20px;

  animation:floatLogo 6s infinite ease-in-out;
}

/* Logo Animation */
@keyframes floatLogo{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-20px);
  }

  100%{
    transform:translateY(0px);
  }
}

/* Hero Content */
.hero-content{
  position:relative;
  z-index:1;

  text-align:center;
  color:white;
}

.hero-content h1{
  font-size:70px;
  margin-bottom:20px;

  animation:textZoom 3s infinite alternate;
}

.hero-content p{
  font-size:28px;
}

/* Text Animation */
@keyframes textZoom{

  from{
    transform:scale(1);
    letter-spacing:2px;
  }

  to{
    transform:scale(1.05);
    letter-spacing:5px;
  }
}

/* Contact Section */
.contact-section{
  display:flex;
  justify-content:center;
  gap:40px;

  padding:100px 8%;

  flex-wrap:wrap;
}

/* Cards */
.contact-card,
.form-card{
  background:white;

  width:550px;

  padding:45px;

  border-radius:25px;

  box-shadow:0 10px 25px rgba(0,0,0,0.1);

  transition:0.4s;
}

/* Hover Effects */
.contact-card:hover,
.form-card:hover{

  transform:
  translateY(-12px)
  scale(1.02);

  box-shadow:0 18px 35px rgba(0,0,0,0.2);
}

/* Titles */
.contact-card h2,
.form-card h2{
  color:#0b3d91;
  font-size:42px;
  margin-bottom:35px;
}

/* Contact Info */
.contact-info{
  display:flex;
  flex-direction:column;
  gap:25px;
}

/* Info Box */
.info-box{
  display:flex;
  align-items:center;
  gap:20px;

  background:#f4f7fb;

  padding:22px;

  border-radius:15px;

  transition:0.4s;
}

/* Hover */
.info-box:hover{

  background:#e8f8f5;

  transform:translateX(10px);
}

/* Icons */
.info-box i{
  font-size:28px;
  color:#0b3d91;
}

/* Info Text */
.info-box h3{
  font-size:24px;
  margin-bottom:5px;
}

.info-box p{
  font-size:18px;
}

/* Social Media */
.social-media{
  display:flex;
  justify-content:center;
  gap:20px;

  margin-top:40px;
}

/* Social Icons */
.social-media a{
  width:65px;
  height:65px;

  display:flex;
  justify-content:center;
  align-items:center;

  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  color:white;

  font-size:28px;

  border-radius:50%;

  text-decoration:none;

  transition:0.4s;
}

/* Hover Effect */
.social-media a:hover{

  transform:
  translateY(-10px)
  scale(1.1);

  box-shadow:0 12px 25px rgba(0,0,0,0.2);
}

/* Form */
form{
  display:flex;
  flex-direction:column;
}

/* Inputs */
form input,
form textarea{
  padding:18px;

  margin-bottom:25px;

  border:2px solid #ddd;

  border-radius:12px;

  font-size:18px;

  outline:none;

  transition:0.3s;
}

/* Input Hover */
form input:focus,
form textarea:focus{

  border-color:#00b894;

  box-shadow:0 0 10px rgba(0,184,148,0.3);
}

/* Button */
button{
  background:linear-gradient(
    135deg,
    #0b3d91,
    #00b894
  );

  color:white;

  padding:18px;

  border:none;

  border-radius:12px;

  font-size:22px;
  font-weight:bold;

  cursor:pointer;

  transition:0.4s;
}

/* Button Hover */
button:hover{

  transform:
  translateY(-6px)
  scale(1.03);

  box-shadow:0 12px 25px rgba(0,0,0,0.2);
}

/* Footer */
footer{
  background:#0b3d91;
  color:white;

  text-align:center;

  padding:30px;

  font-size:20px;
}

/* Responsive Design */
@media(max-width:768px){

  .navbar{
    flex-direction:column;
  }

  nav a{
    display:block;
    margin:15px 0;
  }

  .hero-content h1{
    font-size:42px;
  }

  .hero-content p{
    font-size:22px;
  }

  .background-logo{
    font-size:180px;
  }

  .contact-card,
  .form-card{
    width:100%;
  }

}