Ziyosfera:Aloqa/styles.css

/* ==========================================

  ZIYOSFERA — ALOQA SAHIFASI
  ========================================== */

.ziyo-contact {

   max-width: 1050px;
   margin: 20px auto 50px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
   color: #202122;

}

/* HERO */

.ziyo-contact-hero {

   position: relative;
   display: flex;
   align-items: center;
   gap: 24px;

   padding: 38px 42px;
   margin-bottom: 24px;

   overflow: hidden;

   border-radius: 18px;

   background:
       linear-gradient(
           135deg,
           #087be8 0%,
           #079dd7 55%,
           #12b8ad 100%
       );

   color: #fff;

   box-shadow: 0 10px 32px rgba(0, 112, 190, 0.16);

}

.ziyo-contact-hero::after {

   content: "";
   position: absolute;

   width: 230px;
   height: 230px;

   right: -70px;
   top: -100px;

   border-radius: 50%;

   background: rgba(255,255,255,.10);

}

.ziyo-contact-hero-icon {

   position: relative;
   z-index: 2;

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

   width: 68px;
   height: 68px;

   flex-shrink: 0;

   border: 1px solid rgba(255,255,255,.35);
   border-radius: 18px;

   background: rgba(255,255,255,.15);

   font-size: 30px;

}

.ziyo-contact-hero-content {

   position: relative;
   z-index: 2;

}

.ziyo-contact-hero h1 {

   padding: 0;
   margin: 0 0 9px;

   border: 0;

   color: #fff;

   font-size: 30px;
   font-weight: 700;

}

.ziyo-contact-hero p {

   max-width: 700px;

   margin: 0;

   color: rgba(255,255,255,.92);

   font-size: 15px;
   line-height: 1.65;

}

/* ASOSIY TELEGRAM KARTASI */

.ziyo-contact-card {

   display: flex;
   align-items: center;

   padding: 28px 30px;
   margin-bottom: 22px;

   border: 1px solid #dfe6ec;
   border-radius: 16px;

   background: #fff;

   box-shadow: 0 5px 18px rgba(0,0,0,.045);

}

.ziyo-contact-primary {

   border-color: #cfe5f4;

   background:
       linear-gradient(
           135deg,
           #ffffff 0%,
           #f5fbff 100%
       );

}

.ziyo-contact-icon {

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

   width: 64px;
   height: 64px;

   margin-right: 22px;

   flex-shrink: 0;

   border-radius: 17px;

   background: #168bd2;

   color: #fff;

   font-size: 27px;

   box-shadow: 0 7px 18px rgba(22,139,210,.20);

}

.ziyo-contact-card-content {

   flex: 1;

}

.ziyo-contact-label {

   margin-bottom: 4px;

   color: #168bd2;

   font-size: 10px;
   font-weight: 700;

   letter-spacing: .8px;

}

.ziyo-contact-card h2 {

   padding: 0;
   margin: 0 0 7px;

   border: 0;

   font-size: 21px;

}

.ziyo-contact-card p {

   max-width: 680px;

   margin: 0 0 16px;

   color: #54595d;

   font-size: 13px;
   line-height: 1.6;

}

/* TUGMALAR */

.ziyo-contact-button a, .ziyo-contact-bottom-button a {

   display: inline-block;

   padding: 10px 17px;

   border-radius: 9px;

   background: #168bd2;

   color: #fff !important;

   font-size: 13px;
   font-weight: 600;

   text-decoration: none !important;

   box-shadow: 0 4px 11px rgba(22,139,210,.18);

   transition:
       transform .18s ease,
       background .18s ease,
       box-shadow .18s ease;

}

.ziyo-contact-button a:hover, .ziyo-contact-bottom-button a:hover {

   background: #0878bd;

   transform: translateY(-1px);

   box-shadow: 0 6px 15px rgba(22,139,210,.25);

}

/* UCHTA MA'LUMOT KARTASI */

.ziyo-contact-info-grid {

   display: grid;

   grid-template-columns: repeat(3, 1fr);

   gap: 16px;

   margin-bottom: 22px;

}

.ziyo-contact-info-card {

   padding: 22px;

   border: 1px solid #e1e7ec;
   border-radius: 14px;

   background: #fff;

   transition:
       transform .18s ease,
       box-shadow .18s ease,
       border-color .18s ease;

}

.ziyo-contact-info-card:hover {

   transform: translateY(-3px);

   border-color: #c7deec;

   box-shadow: 0 7px 20px rgba(0,0,0,.06);

}

.ziyo-contact-small-icon {

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

   width: 36px;
   height: 36px;

   margin-bottom: 13px;

   border-radius: 10px;

   background: #edf7fd;

   color: #168bd2;

   font-size: 16px;
   font-weight: 700;

}

.ziyo-contact-info-card h3 {

   margin: 0 0 7px;

   font-size: 15px;

}

.ziyo-contact-info-card p {

   margin: 0;

   color: #646a70;

   font-size: 12.5px;
   line-height: 1.6;

}

/* ESLATMA */

.ziyo-contact-note {

   display: flex;

   gap: 13px;

   padding: 17px 19px;
   margin-bottom: 22px;

   border: 1px solid #d8e9f4;
   border-radius: 12px;

   background: #f6fbfe;

}

.ziyo-contact-note-icon {

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

   width: 25px;
   height: 25px;

   flex-shrink: 0;

   border-radius: 50%;

   background: #168bd2;

   color: #fff;

   font-size: 12px;
   font-weight: 700;

}

.ziyo-contact-note strong {

   font-size: 13px;

}

.ziyo-contact-note p {

   margin: 3px 0 0;

   color: #54595d;

   font-size: 12px;
   line-height: 1.55;

}

/* PASTKI CTA */

.ziyo-contact-bottom {

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

   gap: 25px;

   padding: 24px 28px;

   border-radius: 15px;

   background: #202a33;

   color: #fff;

}

.ziyo-contact-bottom h2 {

   padding: 0;
   margin: 0 0 4px;

   border: 0;

   color: #fff;

   font-size: 18px;

}

.ziyo-contact-bottom p {

   margin: 0;

   color: #bdc6cd;

   font-size: 12.5px;

}

/* MOBIL */

@media (max-width: 700px) {

   .ziyo-contact {
       margin-top: 10px;
   }

   .ziyo-contact-hero {
       padding: 27px 22px;
       gap: 15px;
   }

   .ziyo-contact-hero-icon {
       width: 50px;
       height: 50px;

       border-radius: 14px;

       font-size: 22px;
   }

   .ziyo-contact-hero h1 {
       font-size: 23px;
   }

   .ziyo-contact-hero p {
       font-size: 13px;
   }

   .ziyo-contact-card {
       align-items: flex-start;

       padding: 21px 18px;
   }

   .ziyo-contact-icon {
       width: 45px;
       height: 45px;

       margin-right: 14px;

       border-radius: 12px;

       font-size: 20px;
   }

   .ziyo-contact-info-grid {
       grid-template-columns: 1fr;
   }

   .ziyo-contact-bottom {
       align-items: flex-start;
       flex-direction: column;
   }

}

@media (max-width: 450px) {

   .ziyo-contact-hero-icon {
       display: none;
   }

   .ziyo-contact-card {
       display: block;
   }

   .ziyo-contact-icon {
       margin: 0 0 15px;
   }

}